目录
HTML跳转链接
链接标签
a标签
herf:链接的地址
target:可以打开链接打开的方式,默认情况:当前页面_self、新窗口打开_blank
<a href="https://baike.baidu.com/item/
%E6%80%AA%E5%A5%87%E7%89%A9%E8%AF%AD
/19655686" target="_blank">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.
qYXiHgrFqzXrU5Mf3B5uTQHaFj?
pid=ImgDet&rs=1" alt="strange" title="EI" width="300" height="300">
访问百度百科</a>
base标签(放在头标签中):改变标签默认行为
<base target="_blank">
HTML跳转锚点
#+id
<a href="#11">a</a>
<a href="#1">b</a>
<a href="#6">c</a>
<h2 id="11">aaa</h2>
<p>123</p>
<h2 id="1">bbb</h2>
<p>123</p>
<h2 id="6">ccc</h2>
<p>123</p>
#+name
<a href="#11">a</a>
<a href="#1">b</a>
<a href="#6">c</a>
<a name="11"></a>
<h2>aaa</h2>
<p>123</p>
<a name="1"></a>
<h2>bbb</h2>
<p>123</p>
<a name="6"></a>
<h2>ccc</h2>
<p>123</p>
HTML特殊符号
HTML无序列表
<ul>+<li>(组合出现,中间不能有其他标签)
type属性:改变标记样式
<ul type="circle">
<li><a href="#">霍普与能源部达成协议,不透露信息,放他们去自行找回威尔</a></li>
<li><a href="#">南茜和乔纳森在家里布满陷阱准备抓怪,来道歉史蒂夫的也被动卷入,但为了保护南茜不顾危险</a></li>
<li><a href="#">能源部抓到11,但怪物也随即而来,11为了保护迈克等人与怪物同归于尽</a></li>
<li><a href="#">霍普和乔伊找到威尔,并把死亡边缘的威尔救回</a></li>
<li><a href="#">威尔逐渐康复,但隐瞒母亲自己还会呕吐奇怪的东西和出现幻觉</a></li>
<li><a href="#">小镇恢复平静,南茜选择和史蒂夫在一起并赔偿了乔纳森的相机,迈克一家其乐融融但还会思念11</a></li>
</ul>
<dl>
<dt>薇诺娜·瑞德</dt>
<dd>Joyce Byers</dd>
<dt>米莉·博比·布朗</dt>
<dd>Eleven</dd>
</dl>
HTML有序列表
<ol>+<li>(可用无序列表+css代替)
type属性
HTML定义列表
列表项需要添加标题和对标题进行描述的内容
<dl>:定义列表
<dt>:定义专业术语
<dd>:名词解释
<dl>
<dt>薇诺娜·瑞德</dt>
<dd>Joyce Byers</dd>
<dt>米莉·博比·布朗</dt>
<dd>Eleven</dd>
</dl>
HTML嵌套列表
列表间可以相互嵌套
ul>li*4>ul>li*5
<ul>
<li>小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
<li>卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>大肠</li>
</ul>
</li>
<li>套餐类
<ul>
<li>卤面筋板</li>
<li>猪肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪舌饭</li>
</ul>
</li>
<li>炖罐类
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心枸杞</li>
<li>羊肉枸杞</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
HTML表格标签
table:表格最外层
tr:表格行
th:表头
td:表格单元
caption:标题
tHead、tBody、tFoot
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022-6-21</td>
<td><img src="./EL.jpg" alt=""></td>
<td>天气晴朗</td>
</tr>
</tBody>
</table>
HTML表格属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式(left、center、right)
valign:上下对齐方式 (top、middle、bottom)
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tHead>
<tr align="right">
<th colspan="2">日期</th>
HTML表单input标签
form:表单最外层容器
input:用于搜集用户信息,根据不同属性值,展示不同控件
<form action=""><!-- 提交地址 -->
<h2>输入框:</h2>
<input type="text" placeholder="请输入密码">底<!-- 层提示信息 -->
<h2>密码框:</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox" checked>牛蛙<!-- 一开始被选中 -->
<input type="checkbox" checked>虾滑
<input type="checkbox" disabled>和牛<!-- 禁止使用 -->
<h2>单选框</h2>
<input type="radio" name="gender">基围虾
<input type="radio" name="gender">黑虎虾
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
HTML表单相关标签
textarea:多行文本框
select、option:下拉菜单
label:辅助表单
属性(for、id、disabled、name、multiply、checked、placeholder)
<h2>多行文本框</h2>
<textarea rows="10" cols="30"></textarea>
<h2>下拉菜单</h2>
<select size="3">
<option>海底捞</option>
<option>楠火锅</option>
<option>小龙坎</option>
</select>
<select>
<option selected disabled>请选择</option><!-- 当前被选中 -->
<option>海底捞</option>
<option>楠火锅</option>
<option>小龙坎</option>
</select>
<select multiple><!-- 多选 -->
<option selected disabled>请选择</option><!-- 当前被选中 -->
<option>海底捞</option>
<option>楠火锅</option>
<option>小龙坎</option>
</select>
<input type="file" multiple>
<input type="radio" name="gender" id="牛肉"><label for="牛肉">大龙燚</label>
<input type="radio" name="gender" id="毛肚"><label for="毛肚">九鼎轩</label>
HTML表单表格组合使用
<form action="">
<table border="1" cellpadding="30">
<tbody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码:</td>
<td><input type="text" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</form>