- web端布局：HTML5常用标签，CSS3常见样式增加的H5C3新特性，新语法，CSS3动画 2d 3d效果
- 移动端布局：视口、二倍图、流失布局，flex布局，rem布局，响应式布局
1.HTML简介
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
标记语言是一套标记标签
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML 运行在浏览器上，由浏览器来解析
HTML文档也叫做 web 页面
文档的后缀名：xxx.html 或 xxx.htm
HTML语法规范
2.1 基本语法概述
- HTML标签是由尖括号包围的关键词，例如<html>。
- HTML 标签通常是成对出现的，比如 <html> 和 </html>，称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊标签必须是单个，例如<br />，称为单标签。
2.2 标签关系
双标签关系可以分为两类：包含关系和并列关系。
HTML基础标签&常用标签&注释&特殊符号
3.1 基本结构标签
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。
<html></html>
HTML标签，页面中最大的标签，称为跟标签网页的所有内容，都必须要写在该标签里面
<head></head>
文档的头部标签，注意在head标签中必须要设置的标签是title，用于导入外部的资源信息和描述网页自身信息
<title></title>
文档的标题标签，让页面拥有一个属于自己的网页标题，它里面的内容会在网页的浏览器的选项卡上显示
<body></body>
文档的主体标签，网页中能看到到所有内容，都必须要写在该标签里面
<meta>
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
meta标签是单标签，不需要闭合标签，规范写法，单标签需要自闭合
声明编码：
utf-8 包含全世界所有国家需要用到的字符
gb2312 包含全部中文字符
<meta charset='utf-8' />
页面关键词：
<meta name="keywords" content="前端,web前端" />
页面描述：
<meta name="description" content="星汉灿烂，月生沧海...." />
页面重定向和刷新：
content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页
<meta http-equiv="refresh" content="30;url=" />
移动设备：
如果不是响应式网站，不要使用initial-scale或者禁用缩放。
大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->
- width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
- height：高度（数值 / device-height）（范围从223 到10,000）
- initial-scale：初始的缩放比例 （范围从>0 到10）
- minimum-scale：允许用户缩放到的最小比例
- maximum-scale：允许用户缩放到的最大比例
- user-scalable：用户是否可以手动缩 (no,yes)
注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。
<link>
导入外部资源，比如：网页选项卡图标，外部样式
<link rel="icon" href="favicon.ico">
3.2 常用标签
<h1></h1>···<h6></h6>
网页的内容标题标签，h1最大，h6最小。标题标签的特点是：字体会加粗。
<p></p>
段落标签，将整个网页分为若干个段落。
（p标签不可以嵌套使用）
<br />
在网页中，无论打多少空格，或者换多少次行，默认都只是一个空格。如果需要手动换行，需要使用br标签。
<hr>
水平线标签，用于对网页中的内容进行分隔。
<strong></strong>
加粗标签，用于突出一段内容里面的部分信息。
<em></em>
倾斜标签，也用于突出一段内容里面的部分信息。
<div></div>
块级标签，通常用于网页的布局。
<span></span>
行级标签，通常用于突出显示段落中的部分内容。
<img>
图片标签，src属性设置图片的地址，地址可以是本地地址，也可以是网络地址。
alt属性设置图片的替代文字，当图片无法显示时，显示对应的文字。
title属性设置鼠标悬停提示信息。
width属性设置图片宽度，height属性设置图片高度，如果只设置了其中一个属性，另一个属性会等比缩放。
<a></a>
超链接标签，根据链接类型可以分为：页面间链接，锚链接，功能性链接
- 页面间链接：
href属性（必须属性）设置链接的url地址，可以是外部链接，也可以是内部链接。
target属性设置目标窗口打开方式，属性值_self（默认值）是在当前窗口，_blank是在新窗口。
1.外部链接：
<a href="http://www.baidu.com" target="_blank">百度</a>
2.内部链接：
<a href="007.html" target="_blank">007简介</a>
3.空链接：没有确定链接目标时
<a href="#" ></a>
4.下载链接：地址链接是一个文件.exe或者 .zip等压缩包时会下载这个文件
<a href="压缩包.zip">下载文件</a>
5.网页元素链接：给图片加了超链接
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
- 锚链接：
用于当前页面的跳转，点击链接，可以快速定位到页面中的某个位置。
第一步：在链接文本的href属性中，设置属性值是#名字的形式。
第二步：找到目标位置标签，里面添加一个id 属性 = 刚才的名字。
<a href="#two">第2集</a>
<h3 id="two">第2集介绍</h3>
一个a标签通过name属性设置锚标记，另一个a标签通过href属性跳转到对应的锚标记处。
如果需要跨页面，在href属性中，显示设置地址，在地址的后面在设置对应的锚标记
<a href="#bj">北京</a>
<!-- 这里的a标签，只是做一个锚标记，通过name属性设置标记名 -->
<a name="bj"></a>
3.3 注释
快捷键：ctrl + /
3.4 特殊符号
空格
< 小于号
> 大于号
" 双引号
© 版权符号
网友评论