快捷键 1.option+shit+向下箭头 是复制。 2.comd+d 选中相同的标签，然后整体修改。 3.option + 上/下移动。 4.tab 向右缩近两格，shift+tab 向左缩近
- 1.超文本？链接 多个网页链接在一起。
- 2.标记？也叫做标签，带尖括号的文本，html只有尖括号，一般都是小写，结束标签比开始标签多一个杠。
- 3.html主要学习标签。
- 4.单标签和双标签 扩展名是.html,
单标签也有<br>换行 <hr> 水平线/ 一般都是双标签。
<strong> </strong>加粗标签
- 5.骨架
英文叹号 生成html骨架。
根标签<html> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
- 6.标签的关系
父子关系 缩紧两个空格，<head><title>
并行关系，对齐，兄弟关系head body
- 7.注释 和 说明
快捷键 crtl+/
<!-- -->
- 8.标题标签
文字加粗
字号逐渐减小
独占一行，换行
一共6级
h1一个网页中只能使用一次，用来放页面标题或网页logo。
h2~h6没有使用次数限制。
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
- 9.段落标签
一般用在新闻的段落，文章的段落，产品描述信息等，
p 独占一行，
段落之间有缝隙
- 10.换行水平线
br hr是单标签。
option+shit+向下箭头 是复制。
<body>
第一行文字的<br>
第二行文字
<hr>
</body>
- 11.文本标签
加粗，倾斜，下划线，删除线标签
strong,em,ins,del 有强调的作用。
<strong></strong>
<em></em>
<ins><ins>
<del><del>
<b></b>
<i></i>
<u></u>
<s></s>
<strong>加粗 </strong>
<b>加粗2</b>
<br>
<em>倾斜</em>
<i>倾斜2</i>
<br>
<u>下划线</u>
<ins>下划线</ins>
<br>
<del>删除线</del>
<s>删除2</s>
- 11.图像标签 img是一个单标签
./ 当前目录下。 <img src="./cat.jpeg">
src 图片对的路径。
<!-- alt是图片无法显示的时候显示的文字 -->
<!-- title是鼠标停在图片上显示的文字 -->
<!-- width 图片的宽度 等比例放大 一般只写一个就可以-->
<!-- height 图片的高度 等比例放大 一般只写一个就可以 html中的属性和属性之间是空格 属性和属性值之间src=""-->
<img src="./imgs/11.jpg" alt=" 这是待五花肉烧烤的图片" title="淄博烧烤" width="800">
- 12.路径：从起点到终点经历的路线。
相对路径：从当前文件位置出发查找目标文件。
绝对路径：从盘符出发查找目标文件。
相对路径 [
./当前文件夹所在的文件夹，
文件夹/
]
绝对路径 window是从盘符出发，mac是根目录出发
mac:
<img src="file:///Users/edy/Desktop/mianshi/html/cat.jpeg" alt=" 这是待五花肉烧烤的图片111" title="淄博烧烤" width="800">
- 13.超链接
a href
b 加粗
href = "#" 空链接
target = "_blank" 空白页面打开，也就是另启一个页面打开。
默认是target = "_self" 当前页面中替换打开。
-
14.写页面的时候，从上到下，先整体再局部。
-
15.有序列表，无序列表，自定义列表
有序列表中 ol li
ol只能包含li,li可以包含其他标签。
无序列表 ul li
ul 只能包含li,li可以包含其他标签。
自定义列表 dl 一般网页的底部都使用dl dd dt
dl只能包含dt 和 dd.其中dt是标题，dd是描述。
dd d可以包含其他标签
快捷生成
>大于号是父子关系，+号是并列关系
dl>dt+dd
dl>dt*4
无序列表和自定义列表的区别是多了一个dt，标题。
<ul>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.sina.com">新浪</a></li>
<li><a href="http://www.sohu.com">搜狐</a></li>
<li><a href="http://www.163.com">网易</a></li>
</ul>
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>体育</li>
</ol>
<dl>
<dt>北京市</dt>
<dd>顺义区</dd>
<dd>朝阳区</dd>
<dd>海淀区</dd>
<dd>昌平区</dd>
<dd>丰台区</dd>
</dl>
- 16.表格
<!-- 表格中的th是表头 表头只能在tr头部 table是表格，tr是行，th是表头的单元格，td 是内容单元格-->
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
</table>
</body>
</html>
表格的结构 thead/tbody/tfoot
<table >
<!-- 表格的头部 -->
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<!-- 表格的主体 -->
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
</tfoot>
</table>
合并单元格
跨行合并，跨列合并，保留最左最上的单元格，
rowspan
colspan 合并的单元格数量。
横着合并叫跨列，竖着合并叫跨行。
表单
收集用户信息
表单元素：
1.input表单元素是一个单标签: {输入框text文本框，password密码框，radio单选框，checkbox复选框，file上传文件,placeholder占位文本
}
默认选中 checked,
占位文本 placeholder
2.select 下拉菜单
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
</select>
3.文本域
<!-- 文本域 -->
请您留言:<br>
<textarea name="" id="" cols="30" rows="5" placeholder="评论" >内容</textarea>
4.label <!-- label标签是标签的文本说明。一般配合表单标签使用，但是不属于表单标签。 -->
5.button 必须配合form才能一起使用，button:submit ,reset,button.
6.语义化：header头部,nav导航，aside 侧边栏 ，section article网页区域，footer网页底部，
无语义化：div span是格子 div会自动占一行，span不会自动换行。
7.字符实体：空格 小于号 < 大于号>
