**
html简单回顾
**
vscode插件
1.auto rename tag标签前面改了后边自动改
2.view-in-browser右键快速打开浏览器浏览
3.live sever右键open with live sever 保存后会在浏览器直接显示更新内容
shift+alt+f自行整理格式
alt+上/下快速移动本行
h标签
h$*6生成留个标题
标题位置属性align=“left/right/center"
路径
绝对路径
相对路径
相同级别 000.jpg
向上寻找图片…/
向下寻找图片./
网址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<h1 align="left">head1</h1>
<h2 align="center">head2</h2>
<h3>head3</h3>
<p>段落段落段<br>落段落段落段落</p>
<!-- hr属性颜色宽度高度居中(默认居中) -->
<hr color="green" width="300px" size="20px" align="right">
<!-- h$*6 生成六个不同大小标题-->
<!-- 图片 注意斜杠的方向复制出来以后需要更改-->
<img src="./img/lll.jpg" alt="无法显示" title="鼠标边上会显示">
<!-- 超文本链接 herf属性描述链接地址 -->
<a href="https://www.bilibili.com/video/BV1wM411y7yK?p=10&spm_id_from=pageDriver&vd_source=65251e1718ef4628c9ea38c45f5101ce">链接文本</a>
<a href="https://baidu.com">
<img src="./img/lll.jpg" alt="img">
</a>
<!-- 文本em b i strong del span -->
<em>em</em>
<b>b</b>
<del>delete</del>
<span>span</span>
<strong>strong</strong>
<!-- 嵌套 -->
<p>i like <em>apple</em></p>
<!-- 列表 -->
<!-- 有序列表 通过type来改变有序列表的计数方式aA1Ii-->
<h3>有序列表</h3>
<ol type="a">
<li>first</li>
<li>second</li>
</ol>
<ol type="A">
<li>first</li>
<li>second</li>
</ol>
<!-- 嵌套列表 -->
<ol type="1">
<li>first
<ol>
<li>one</li>
<li>two</li>
</ol>
</li>
<li>second</li>
</ol>
<h3>无序列表</h3>
<!-- 无序列表 ul>lili*5快捷生成 粗体圆点标记type -->
<ul type="disc">
<li>disc</li>
<li>second</li>
</ul>
<ul type="circle">
<li>circle</li>
<li>second</li>
</ul>
<ul type="square">
<li>square</li>
<li>second</li>
</ul>
<ul type="none">
<li>none</li>
<li>second</li>
</ul>
<p>无序列表的 <b>导航作用</b> 通过css调整成横着的</p>
<p>快捷键生成无序列表ul>lili*5</p>
<!-- 表格 -->
<h3>表格2*3</h3>
<!-- tr表示行td表示列 -->
<table>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<p>快捷键生成表格table>tr*5>td*6{文本}</p>
<p>表格属性border添加表格线 width设置表格宽度 height设置表格高度</p>
<p>表格单元格合并colspan水平合并 rowspan垂直合并</p>
<p>水平合并保留左边删除右边,垂直合并保留上边删除下边,属性的数值为合并单元格的数量</p>
<table border="1" width="600px" height="400px">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td colspan="2">单元格45</td>
<td>单元格6</td>
</tr>
<tr>
<td>单元格7</td>
<td>单元格8</td>
<td rowspan="3">单元格9 12 15</td>
</tr>
<tr>
<td>单元格10</td>
<td>单元格11</td>
</tr>
<tr>
<td>单元格13</td>
<td>单元格14</td>
</tr>
</table>
<h3>表单form 登录注册等搜集用户信息的地方</h3>
<p>表单属性action服务器地址 name表单名称 method=get/post,get提交数据url可以看到,post看不到,get提交少量数据,post提交大量数据</p>
<p>文本框type=text</p>
<form action=""></form>
<form >
name:<input type="text">
密码: <input type="password">
<input type="submit" value="value设置提交按钮文字">
</form>
<h3>块元素和行内元素</h3>
<p>块元素独占一行,可以设置宽高,可以包含行内元素和其他块级元素 <br> <em>div form h hr p table ul</em> </p>
<p>内联元素只占自身大小,设置宽高无效,内敛元素包含内联元素不包含块元素<br> <em>a b em i span strong</em></p>
<p>行内块级元素 不换行,但可以识别宽高<br> <em>img input button</em></p>
<h3>div</h3>
<p>div容器增加清晰度,通过id识别属性。<br> <b> h5新标签header头部 nav导航 article独立的完整的内容块(完整的博客,帖子,评论) section定义文档中的节(章节,页眉) aside侧边栏 fooder腳部</b></p>
<div id="nav">主导航</div>
<div id="ad">广告</div>
</body>
</html>