一、标签
1. 无归属标签
- address用于定义文章的联系信息
- <cite> 元素定义著作的标题
- <bdo> 元素用于定义文本的方向
2. <p>
浏览器会自动在段落的前后添加空行
如果希望在不产生新的段落的情况下进行换行，使用<br/>标签
3. 引用 <q> <blockquote>
<q>用于定义短的引用，通常会为<q>元素包含引号
<blockquote>用于定义块引用，通常会进行缩进处理。示例, cite属性用于表示引用的来源
4. 缩写 <abbr> <dfn>
<abbr>用于定义缩写或首字母缩略语
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p><dfn>用于定义项目，<dfn> 标签可标记那些对特殊术语或短语的定义。、
5. a 标签
有两种使用 a 标签的方式：
- 通过使用 href 属性 – 创建指向另一个文档的链接
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School</a>- 通过使用 name 属性 – 创建文档内的书签
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
target属性
a 标签的 target 属性规定在何处打开链接文档。- （1）打开新窗口并且为窗口定义一个名字，之后
6. <img>标签
- alt属性用于定义一段可替换的文本，当浏览器无法载入图像时，浏览器将显示替代性放入文本而不是图像
7. table表格
<table border="1">
<caption>Monthly savings</caption> <!--标题必须跟在caption后面-->
<tr>
<th>Heading</th> <!--表头用th标签进行定义-->
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>8. html列表
- ul无序列表 ul>li
- ol有序列表 ol>li
- dl定义列表 dl>dt+dd
<dl>
<dt>Coffee</dt> <!--定义项目-->
<dd>Black hot drink</dd> <!--定义项目对应的描述-->
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>9. meta标签
name属性主要用于描述网页，对应属性是 content
- Keywords 为搜索引擎提供的关键字列表
- name=”viewport”
能够优化移动浏览器的显示，设置屏幕的缩放属性
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>width [device-width | pixel_value]width, 如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
height – viewport 的高度 （范围从 223 到 10,000 ）
user-scalable [yes | no]是否允许缩放
initial-scale [数值] 初始化比例（范围从 > 0 到 10）
minimum-scale [数值] 允许缩放的最小比例
maximum-scale [数值] 允许缩放的最大比例
- Description 用来告诉搜索引擎你的网站主要内容
- copyright 标注版权
- http-equiv属性
http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
- Set-Cookie
浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。
- content-Type
设定页面使用的字符集
meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；
在HTML5中，我们一般都是：
<meta charset="utf-8"/>- head>base元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />二、属性
属性提供了有关HTML元素的更多的信息，属性值应该始终被包含在引号内。
三、html响应式设计
响应式设计就是能够以可变尺寸传递网页
3.1 响应式布局方法汇总
- 百分比布局
对图片和大块布局进行百分比设置 - 媒体查询
利用媒体查询设置不同分辨率下的css样式
body{
background-color: grey;
}
@media screen and (min-width:1200px){ /*当宽度大于1200px时*/
body{
background-color: pink;
}
}
@media screen and (min-width:700px) and (max-width:1200px){
body{
background-color: blue;
}
}
@media screen and (max-width:700px){ /*当宽度小于700px时*/
body{
background-color: orange;
}
}- vw响应式布局
vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。
<meta name="viewport" content="width=device-width,initial-scale=1.0">vw、vh、rem的使用
<template>
<div class="box">
</div>
</template>
<style>
.box{
width:50vw;
height: 20vh;
line-height: 20vh;
font-size: 1.5rem;
margin:0 auto;
font-weight: bold;
background-color: rgba(255,255,255,0.8);
}
</style>上面代码中的50vw代表了 此div占据视口宽度的50%、高度占据视口高度的20%，并且会随着视口的变化，进行自适应;
字体则是1.5倍的html根字体大小。并且根据媒体查询进行字号变化。
四、基础知识补充
1. 你不知道的css单位
- rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;
- vw:相对于视口的宽度。视口被均分为100单位的vw;
- vh:相对于视口的高度。视口被均分为100单位的vh;
- vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
