常见的HTML标签
1.h1~h6 标题
- h1代表一级标题
- h2~h6依次递减
2. p 段落
- 表示大段文字，用标签p包括
3. a 链接，链接到一个地址（包含各种属性）
image.png
href属性：必备属性，表示链接的地址。href="#"锚点,页面不跳转，也不刷新；href="#about"当前页面定位到id=about的位置；href="/getcourse"中/代表根路径
target属性：_blank 表示在新窗口打开
title属性：表示鼠标指到此位置出现的文字
举例
image.png
4.图片（只闭合标签，最后不需要加 /）
<img src="a.png" alt="头像">: a.png部分可以是图片链接，alt部分可理解为备注（图裂时的图片字样）
5.div：语义为“一大块”，用于给页面划分区块，让结构更清晰
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
为了便于对某个版块进行样式等的操作，需设置标签来找到对应的部分，有两种：id和class
id属性：给某个元素起一个独一无二的名字，直接注明这个板块是做什么的
class属性：表示一类，不同的东西可以都标上class，那么操作时是对这一类的class标记的目标做改变
6.ul li
- ul: unsort list 无序列表
- 用于表示并列的内容
- ul的直接子元素是li（ul的下面不可以是段落p或其他！）
- 可以嵌套
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>联系</li>
<li>地址</li>
</ul>
</li>
</ul>
举例：一个网页的导航栏，含有首页、关于、更多的标签，这些都是并列的；联系、地址作为更多的二级菜单，可嵌套
7.ol li:ol: order list 有序序列表 用于表示带步骤或者编号的并列内容 ol的直接子元素只能是li 可以嵌套
举例:
<h2>把大象关到冰箱的步骤</h2>
<ol>
<li>把大象变小</li>
<li>打开冰箱</li>
<li>把大象塞进去</li>
</ol>
image.png
图中的aaa、bbb、ccc之间无明显顺序，倾向于使用无序列表，而后面的装大象存在明显步骤，倾向于使用有序
8.dl dt dd：用于展示一系列 “标题:内容... ”的场景
<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器，很贵，易碎</dd>
</dl>
image.png
dl：表单
dt：title 标题
dd：discription 描述
9.button：按钮
<button>点我</button>
image.png
10.strong em span(重要性存在区别)
- em 需要强调一下
- strong 很重要、强调性更强
<p>优惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 岁了</p>
举例
image.png
图中的span标签可后期直接被css操作，改变样式，而不需对段落进行操作
11.iframe：用于嵌入一个页面 注意跨域操作问题
举例
<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">W3Cschool.cc</a></p>
image.png
点击链接后的效果
image.png
注：
- 跨域问题，若iframe中链接与当前页面的域名不同，只能对iframe中的链接作展示，无法使用js进行操作。
- iframe的作用，举例，一个网页上有个表单，可通过js获取到这个iframe，进行引用，操作。
12.table：用于展示表格，不要用来做布局 thead tbody tfoot可省略，浏览器会自动添加 border-collapse: collapse;用于合并边框
举例
<table>
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
image.png
tr：一行，table roll
td：一列
th：标题
<html></html>:网页的所有内容都在这个标签内
<html lang="zh">:说明当前页面的语言类型，zh为中文，包含简体和繁体。有时打开网页提示：“当前页面为英文，是否翻译为中文”，浏览器能识别出当前页面语言内容，就是依靠这个标签
<head></head>:这其中的内容与页面内容无关
meta标签
-
<meta charset="utf-8">：charset说明当前网页编码方式，如果不说明，浏览器自动猜测编码方式，如果没猜对，会出现乱码。页面保存的是什么编码方式，charset就指明对应的编码方式，以免出现乱码。 -
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">:对于双核浏览器，如果是IE，用最新的版本渲染，如果是chrome，就用极速内核渲染 -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">让页面在移动端展示比较合理
使用此代码
image.png
未使用此代码
image.png
注意点
- 标签属性全小写
- 标签要闭合、自闭合标签可以省略 /
- 标题里不能有段落，段落里不能有标题
块级元素 VS 行内元素
image.png
image.png
直观区别：块级元素占据一行，行内元素只是其中的一小部分
