第二天 标签 html 三大列表
标签
标签的特征
- 关键词（标签）由尖括号括起来
- 一般都是成对出现（开始标签、结束标签）
- 结束标签比开始标签多了一个/
- 还有一类比较特殊的，是单个出现的，比如：img，meta，input就叫做“单标签”，“自闭合标签”，“空标签”
标签的属性
用来描述某个特征和功能的，通常放在关键词后面。可以分为内置属性和自定义属性。
表现形式
- 属性总是以名称/值对的形式出现，比如：name="value"。（键值对）
- 属性和属性之间至少要有一个空格
- 属性是没有先后顺序的 以下的例子里：src，alt就是 “属性名” 网址，小破孩是 “属性值”。 属性名和属性值也叫 “键值对”，属性名是“键”，属性值是“值”。
<img src="http://a.com" alt="小破孩">
常见的标签
标题标签
标题标签可以分为六级，h1到h6，表象上都是加粗的，字号从小到大逐次递减，从优化角度来说，重要性是逐层递减，h1是最重要的，一般会放在logo的部分
快捷方式：h{标题}*6
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
段落p
<!-- 段落 -->
<p>段落</p>
图片标签：img
- src：图片地址
- alt：当图片加载失败时，在图片旁边会出现替代文字
- title：当鼠标滑上图片时，会出现跟随文字
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5233581049f64d818d87a458716327c2~tplv-k3u1fbpfcp-zoom-1.image" alt="易烊千玺" title="易烊千玺也太好看了吧">
超链接：a
- href：跳转的网址
- 回到顶部：href="#";
- 重新加载：href="";
- 禁止跳转：href=”javascript:;”
- 锚点跳转：点击某个链接文字，想要跳转到相应的模块，给每一个模块用id起一个名字，a标签里面的href的值应该是# +id名
- targrt：
- self：在当前窗口打开
- title：在新窗口打开
<a href="#">回到顶部</a>
<a href="">刷新文件</a>
<a href="javascript:;">支付</a>
<a href="http://www.baidu.com" target="_black">百度black</a>
<a href="http://www.baidu.com" target="_self">百度self</a>
补充的标签
- div：划分大区域的，大盒子标签，块级。
- span：划分小区域，小格子标签，行内元素。
- 格式化标签：标签自带一定的样式
- 加粗：b、strong
- 斜体：i、em
- 删除线：s、del
- 下划线：u、ins
<!-- 斜体 -->
<i>haha</i>
<em>haha</em>
<!-- 加粗 -->
<b>加粗</b>
<strong>加粗</strong>
<!-- 删除线 -->
<del>删除线</del>
<s>删除线</s>
<!-- 下划线 -->
<u>下划线</u>
<ins>下划线</ins>
<!-- 增大字号 -->
<big>增大字号</big>
<!-- 减小字号 -->
<small>减小字号</small>
预格式化标签
pre：会按照预先设置好的格式，在浏览器中显示，即编辑区写的就怎么在页面显示
***123 ***
()123()
[]123
视频：video
- 音频：audio
- controls:控制器
- autoplay：自动播放
- loop：循环播放
<audio src="qt .mp3" controls loop autoplay></audio>
iframe
iframe 元素会创建包含另外一个文档的内联框架
- frameborder="1" 的时候显示边框
- frameborder="0" 的时候不显示边框 面试题：b、strong，i、em有什么区别？
i,em都表示斜体，b,strong表象上都是加粗，但是从优化程度上来说，em和strong语义化更强烈些，要比i,b更重要
html
html的基本结构
文档声明
- 帮助浏览器正确地显示网页 ;
- 定义这个文档的类型；
- 不区分大小写；
- 必须放在第一行(因为浏览器是从上到下解析的)
- 必须写文档声明，如果不写就会发生怪异事件；
- 不是一个标签，它只是一个声明；
<!-- 文档声明 -->
<!DOCTYPE html>
<!-- 根元素 -->
<html >
<head>
<!-- 字符编码，防止乱码 -->
<meta charset="UTF-8">
<meta name="keywords" content="关键词">
<meta name="description" content="描述的内容">
<title>网页标题</title>
</head>
<body>
<!-- 可视区 -->（给客户看的）
<h1>标题</h1>
<img src="http://a.com" alt="小破孩">
</body>
</html>
快速生成一个html文档
- 新建一个后缀名是“.html”或者是“.htm”的文件
- 用英文输入法
- ！+enter
HTML标签语义化
含义
- 合理的标签做合理的事情
为什么要遵循标签语义化
- 利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）；
- 在样式丢失的时候，还是可以比较好的呈现结构；
- 更好的支持各种终端，例如无障碍阅读和有声小说等；
- 利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在开发和维护的时候就可以提高效率；
日常工作中怎样遵循标签语义化
- 尽量减少使用无意义标签，例如span和div；
- 尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式来进行添加；
- 在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述；
- 列表搭建时，使用无序列表，有序列表，自定义列表；
三大列表
三大列表都是固定格式，ol和ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签。
有序列表
<!-- 有序列表 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
无序列表
<!-- 无序列表 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
自定义列表
dl、dt、dd。dl里面紧邻着的只能是dt或者dd，但是在dt或者是dd里面还可以写其它的标签。
<h3>一日三餐</h3>
<dl>
<dt>早餐</dt>
<dd>豆浆</dd>
<dd>包子</dd>
<dt>午餐</dt>
<dd>盖饭</dd>
<dd>鸡蛋面</dd>
<dt>晚餐</dt>
<dd>小龙虾</dd>
<dd>饮料</dd>
</dl>
css引入的几种方式
行内式
<div style="color:deeppink;">你们都很棒！</div>
内嵌式
在head里面通过style标签来写
<style>
div,p{
width:500px;
height:200px;
background:greenyellow;
color:hotpink;
}
</style>
外链式
在head里面通过link标签把样式表给链接过来
<link rel="stylesheet" href="index.css">
导入式
<style>
@import "index.css"
</style>
面试题：link 和@import 的区别
- link 是xhtml 标签 而@import 完全是css 提供的一种方式，link 里面还可以设置很多属性，但是@import 不能设置
- 加载顺序，当用户在浏览页面的时候，link的话，样式会同时被加载，而@import只有页面全部被加载完成之后才能加载样式，所以有时网慢，会没有样式。
- 兼容性问题，@import 有兼容性问题，低版本浏览器不支持，但是link 不存在这个问题
