HTML
【摘要】 HTML定义页面元素。浏览器加载 html 文件后，会将其解析为树形结构 DOM ：每个 html 标签和属性都作为一个 DOM 树节点。在全部代码（包含引入文件）解析完成后，将 DOM 树绘制并渲染为用户可见的页面。html 页面根标签<!DOCTYPE html><html> <!--your code--></html>Copy to clipboardErrorCopied复制...
HTML
定义页面元素。浏览器加载 html 文件后，会将其解析为树形结构 DOM ：每个 html 标签和属性都作为一个 DOM 树节点。在全部代码（包含引入文件）解析完成后，将 DOM 树绘制并渲染为用户可见的页面。
html 页面根标签
<!DOCTYPE html>
<html>
<!--your code-->
</html>Copy to clipboardErrorCopied
复制代码head 页面头部
title 页面标题
<title>页面标题</title>Copy to clipboardErrorCopied
复制代码meta 页面元数据
页面作者 / 页面描述
<meta name="author" content="MrJoker">
<meta name="description" content="这是你的页面。">Copy to clipboardErrorCopied
复制代码页面类型 / 页面编码
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Copy to clipboardErrorCopied
复制代码- http-equiv：元数据在 response 头部返回浏览器
link 外部资源链接
引入 网页图标 / CSS
<link href="/favicon.ico" rel="icon" type="image/x-icon" />
<link href="asserts/css/bootstrap.min.css" rel="stylesheet" type="text/css" />Copy to clipboardErrorCopied
复制代码style 页面样式
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>Copy to clipboardErrorCopied
复制代码script 执行脚本
- 引入外部脚本文件
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">Copy to clipboardErrorCopied
复制代码- 自定义脚本
<script type="text/javascript">
document.getElementById("demo").innerHTML = "My first JavaScript";
</script>
复制代码页面内容 body
div / span 区域
<div>为块状元素：独占一行<span>为内联元素：和其他内联元素共享一行
h1 - h6 标题
<h1>Chapter 1</h1>
p 文本
<p>This is my first paragraph.</p>
a 超链接
<p href="www.baidu.com">This is my second paragraph.</p>
- href：跳转网址
img 图片
<img src="boat.gif" alt="Big Boat" />
- src：图片地址
- alt：图片不能加载时的替代文本
table 表格
- 每个单元项表示为
<tr> - 每个单元格表示为
<td>，标题单元格表示为<th>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>0021</td>
<td>陈柏言</td>
</tr>
<tr>
<td>0022</td>
<td>邓怀瑾</td>
</tr>
</table>Copy to clipboardErrorCopied
复制代码form 表单
<form action="action_page.php" method="GET">
Name:
<input type="text" name="name" value="Input your nane">
<br/>
Sex:
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
<br/>
<input type="submit" value="Submit">
</form> Copy to clipboardErrorCopied
复制代码- action：请求发送地址(URL)
- method：请求类型
提交按钮
<input type="submit" value="Submit">
输入类型
- 输入框
Username:
<input type="text" name="name" value="MrJoker">
<br/>
Password:
<input type="password" name="password"> Copy to clipboardErrorCopied
复制代码- 选择框
Sex:
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
<br/>
Vehicle:
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a carCopy to clipboardErrorCopied
复制代码- 下拉菜单
Your Car:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>Copy to clipboardErrorCopied
复制代码- 文本域
<textarea name="message" rows="10" cols="30">Descript your car here.</textarea>Copy to clipboardErrorCopied作者：武师叔
链接：https://juejin.cn/post/7132786641998970911
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）