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>