HTML常用语法总结【精华】
HTML常用语法总结
<html><head><title>这是第一个页面</title></head><body>hello world</body>
</html>
id属性
<body id = "hello">hello world</body>
表示标签的唯一身份标识，用于后期便于控制，不影响显示
鲁棒性强
HTML的语法要求相对来说更宽松，一些简单错误的代码，浏览器也能正常运行，即容错能力强
自动生成框架
!<tab>自动生成框架
<!DOCTYPE html> <!-- 文档类型定义，有没有问题不大 -->
<html lang="en"> <!-- language，en表示英文，方便浏览器启动翻译功能 -->
<head><meta charset="UTF-8"> <!-- 通过meta标签指定页面属性，charset表示字符集 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <!-- 标题 -->
</head>
<body><!-- 页面内容 -->
</body>
</html>
基本标签
注释
<!-- 注释内容 -->
快捷键 ctrl + /
标题：h1 ~ h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落：p
<p>段落标签
</p>
<p>段落标签
</p>
换行：br（单标签）
这里需要换行→ <br/>换行成功
格式化：b i s u
- 加粗：strong 标签 和 b 标签
- 倾斜：em 标签 和 i 标签
- 删除线：del 标签 和 s 标签
- 下划线：ins 标签 和 u 标签
<strong>加粗</strong>
<b>加粗</b><em>倾斜</em>
<i>倾斜</i><del>删除线</del>
<s>删除线</s><ins>下划线</ins>
<u>下划线</u>图片：img（单标签）
<img src="xxx.jpg"alt="加载失败时替换文字"title="鼠标悬停时提示文字"width="1920px" height="1080px"border="5px">
src 可以为
绝对路径/相对路径/网络路径相对路径以html所在的目录为基准
- 当前路径：
“./xxx.jpg”- 上级路径：
”../xxx.jpg“
超链接：a
<!-- 外部链接 -->
<a href="https://github.com">这是一个超链接</a><!-- 内部链接，相对路径 -->
<a href="xxx.html">内部跳转链接</a><!-- 空链接 -->
<a href="#">空链接</a><!-- 定位链接，利用id定位 -->
<a href="#one">第一集</a>
<a href="#two">第二集</a><p id="one">第一集剧情 <br>
</p>
<p id="two">第二集剧情 <br>
</p>
表格标签：table
- table：表示整个表格（width height border cellspacing等）
- tr：表示表格的一行
- td：表示一个单元格
- th：表示表头单元格. 会居中加粗
- thead：表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody：表格得到主体区域
<table width="200px" height="100px" border="1px" cellspacing="0"><tr><th>姓名</th><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>20</td></tr>
</table>
列表标签：list
无序列表、有序列表、自定义列表
<h3>无序列表</h3>
<ul><li>第一个</li><li>第二个</li><li>第三个</li>
</ul>
<h3>有序列表</h3>
<ol><li>第一个</li><li>第二个</li><li>第三个</li>
</ol>
<h3>自定义列表</h3>
<dl><!-- 缩进自定义列表 --><dt>列表标题</dt><dd>第一个</dd><dd>第二个</dd>
</dl>
⭐表单标签
form标签
常用于交互时使用
input标签
<!-- 文本框 --><input type="text"><!-- 密码框 --><input type="password"><!-- 单选框，相同name实现，checked默认--><input type="radio" name="sex">男<input type="radio" name="sex" checked=""checked>女<!-- 复选框 --><input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆<!-- 普通按钮 --><input type="button" value="一个按钮" onclick="alert('弹窗提示')"><!-- 选择文件 --><input type="file">
label标签
<input type="text" id="labeltest">
<label for="labeltest">label for实现绑定</label>
select标签：下拉菜单
<select>
<option>--请选择年份--</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
textarea标签：多行编辑框
<textarea rows="3" cols="50">这是一个多行文本</textarea>
无语义标签
div独占一行，span不独占一行
<div>
<span>第一句</span>
<span>第二句</span>
<span>第三句</span>
</div><div>
<span>第一句</span>
<span>第二句</span>
<span>第三句</span>
</div>