HTML回顾
1.语言特点：
HTML文件不需要编译，直接使用浏览器阅读即可
HTML文件的扩展名是 .html 或 .htm
HTML结构都是由标签组成
HTML不区分大小写
2.HTML编辑器
1）记事本
2）高级记事本
Sublime Text 3----emmet 插件
Notepad++
3）编码器
Hbuilder
IDEA
Dreamweaver
3.编码表
| 编码表 | 代表含义 |
|---|---|
| ASCII | 数字、英文字母、符号进行了编码 |
| GB2312 | 简体中文 |
| Unicode | 所有语言 |
| UTF-8 | 所有语言，占用空间更小 |
4.HTML文档基本格式
<!-- 文档类型：符合HTML5标准 -->
< !DOCTYPE html>
<!-- lang属性：搜索引擎 en英文/zh中文 -->
<html lang="zh">
<!-- 头部：浏览器、搜索引擎所需信息 -->
<head>
<!-- <meta>：元数据，charset属性：字符集编码方式 浏览器：UTF-8 是国际编码 -->
<meta charset="UTF-8">
<title>标题信息</title>
</head>
<!-- 主体：网页中包含的具体内容 -->
<body>
<!-- 此处为网页的内容部分 -->
</body>
</html>
5.HTML标签
1）分类：可以分为单标记/单标签和双标记/双标签
- 单标记：也称为空标记，指用一个标记符号即可完整地描述某个功能的标记
<hr />
-双标记：由开始和结束两个标记符组成的标记
<h2> </h2>
2）HTML标签属性：一个标签可能有多个属性，属性先后顺序无关
<标签名 属性1="属性值1" 属性2="属性值2" > </标签名>
3 )HTML5 文档头部相关标记
①设置页面标题标记 title
<html> </html>
②定义页面元信息标记 meta：
可重复出现在头部标记中，本身不包含任何内容，
通过 “名称/值“ 的形式成对的使用其属性，可定义页面的相关参数
<meta />
1）1）设置网页关键字 keywords
使用 name/content 属性可以为搜索引擎提供信息，
其中 name 属性提供搜索内容名称，content 属性提供对应的搜索内容
<meta name="keywords" content="培训，学习" />
name 的属性值为 keywords，用于搜索内容名称为网页关键字
content 属性的值用于定义关键字的具体内容，多个关键字内容之间可以用 ，分割
1）2）设置网页描述 description
<meta name="description" content="培训，学习" />
name 的属性值为 description，用于定义搜索内容名称为网页描述
content 属性的值用于定义描述的具体内容
1）3）设置网页作者 author
<meta name="author" content="培训，学习" />
name 的属性值为 author，用于定义搜索内容名称为网页作者
content 属性的值用于定义具体的作者信息
③发送浏览器的头部信息
<meta http-equiv="名称" content="值" />
使用 http-equiv/content 属性可以设置服务器发送给浏览器的HTTP头部信息，为浏览器显示该页面提供相关参数
http-equiv 属性提供参数类型，content 属性提供对应的参数值
默认会发送
<meta http-equiv="Content-Type" content="text/html" />
通知浏览器发送的文件类型是HTML
1））设置字符集
<meta http-equiv="Content-Type" content="text/html； charset=utf-8" />
其中 http-equiv 属性的值为Content-Type，
content 属性的值为text/html 和 charset=utf-8，中间用 ；隔开，
用于说明当前文档类型为HTML，字符集为utf-8
2））设置页面自动刷新与跳转
<meta http-equiv="refresh" content="10; url=http://www.baidu.com" />
其中 http-equiv 属性的值为 refresh，
content 属性的值为数值和 url地址，中间用 ；隔开，用于指定在特定的时间后跳转
6.HTML5 文本控制标记
1.标题标记：HTML提供了6个等级的标题，即：h1 h2 h3 h4 h5 h6，从 h1 到 h6 重要性递减
<h1 align="对齐方式"> 标题文本 </h1>
align：有三种对齐方式，left center right
<!-- 一个页面中只能使用一个 <h1> 标记，常常被用在网站的 LOGO 部分-->
2.段落标记：文本在段落中会根据浏览器窗口的大小自动和换行
<p style="align: left;"> 段落文本 </p>
3.水平线标记：使用水平线将段落与段落之间隔开，使得文档结构清晰，层次分明
可以通过插入图片实现，也可以简单地通过标记来完成
<hr 属性="属性值" />
<!-- 实际开发中，不建议使用 <hr /> 的所有外观属性，可通过CSS样式来进行设置 -->
| 属性名 | 含义 | 属性值 |
|---|---|---|
| align | 设置水平线的对齐方式 | 可选择 left、center、right 三种值，默认为 center |
| size | 设置水平线的粗细 | 以像素为单位，默认为2px |
| color | 设置水平线的颜色 | 可用颜色名称、十六进制RGB |
| width | 设置水平线的宽度 | 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100% |
4.换行标记:一个段落中，如果希望某段文本强制换行显示，就需要使用换行标记
<br />
5.文本格式化标记
| 常用的文本格式化标记 | 显示效果 |
|---|---|
| 文本以粗体方式显示（b定义文本粗体，strong定义强调文本） | |
| 文本以斜体方式显示（i定义文本粗体，em定义强调文本） | |
| 文本以删除线方式显示（HTML5 不建议使用s） | |
| 文本以下划线方式显示（HTML5 不建议使用u） |
6.特殊字符标记
| 特殊字符(代码形式) | 描述 | 字符的代码(后面加 ; ) |
|---|---|---|
| 空格 |   | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和、与 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2 (上标2) | ² |
| ³ | 立方3 (上标3) | ³ |
7.图像标记:常用的图像格式：GIF、PNG、JPG
<img src="图像URL" />
<!-- src 是img 标记的必须属性 -->
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| width | 像素 | 图像的宽度 |
| height | 像素 | 图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
| title | 文本 | 图像悬停时显示的内容 |
| alt | 文本 | 图像不能显示时的替换文本 |
| vspace | 像素 | 设置图像顶部和底部的空白（垂直边距） |
| hspace | 像素 | 设置图像左侧和右侧的空白（水平边距） |
| align | left | 将图像对齐到左边 |
| . | right | 将图像对齐到右边 |
| . | top | 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方 |
| . | middle | 将图像的水平中线和文本的第一行对齐，其他文字居图像下方 |
| align | bottom | 将图像的底部和文本的第一行对齐，其他文字居图像下方 |
1)) 图像的属性格式
边距属性： vspace、hspace
页面中，由于排版需要，有时候还需要调整图像的边距，
HTML中通过 vspace 和 space 属性可以分别调整图像的垂直边距和水平边距
<img src="logo.jpg" width="100" height="100" border="1" vspace="50" hspace="20" alt="logo" />
2)) 绝对路径和相对路径
绝对路径：是网页上的文件或目录在硬盘上的真正路径 D:\office\logo.jpg ，
或完整的网络地址 http://www.baidu.com
相对路径：相对于当前文件的路径，相对路径不带有盘符，通常以 HTML 网页文件为起点，
通过层级关系描述目标图像的位置
总结起来为以下3点:
2)1)图像文件和 HTML文件 位于同一个文件夹：只需要输入图像文件的文件名称即可
<img src="logo,jpg" />
2)2)图像文件位于 HTML文件 的下一级文件夹：输入文件夹名和文件名，之间用 “/” 隔开
<img src="images/logo.jpg" />
2)3)图像文件位于 HTML文件 的上一级文件夹：在文件名之前加入 “…/” ，
如果是上两级，则需要使用 “…/…/” 以此类推
<img src="../logo.jpg" />
8. 超链接标记
语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
href：用于指定链接目标的url地址，当a标记应用href属性时，它就具有了超链接的功能
target：用于指定链接页面的打开方式，取值为 _self 和 _blank
_self 为默认值，意为在原窗口打开
_blank 在新窗口打开
锚点链接
使用创建链接文本，其中 href=#id名 用于指定链接目标的 id名称，
然后使用相应的 id名称标注跳转目标的位置
<body>
<ul>
<li> 目录 </li>
<li><a href="#one"> 第一章 </a></li>
<li><a href="#two"> 第二章 </a></li>
<li><a href="#three"> 第三章 </a></li>
</ul>
<h3 id="one"> 第一章 </h3>
<h3 id="two"> 第二章 </h3>
<h3 id="three"> 第三章 </h3>
</body>
小技巧：
暂时没有确定链接目标时，通常将 a标记 的 href 属性值定义为 #，表示该链接暂时为一个空链接
链接图像在低版本的 IE浏览器中会添加边框效果，去掉链接图像的边框只需要将边框定义为 0即可
HTML+CSS回顾
1.注释:
ctrl+/ 作用：解释说明
2.元素:
img , br, hr ,mate ,input 空标签 :以开始标签结束的标签，没有内容
3.块元素:作用：搭建框架
div p h1——h6
列表：
无序列表ul>li*3 tab键 打开检查元素-》查看器 list-style:none; ul->padding:0;
有序列表ol>li*3
标题列表dl>dt*2
列表dl>dd*2 dd->margin-left:0;
html 根元素
body 文档内容
功能元素：table表格 caption标题 thead/tbody/tfoot tr-th tr-td
form表单 登录页面 input 输入框 select-option textarea多行文本框
5.行内元素：作用，装饰，填充内容
span a img i strong em bold b 下标：sup 上标：sub
6.H5新增标签
video视频 audio音频 canvas表示位图区域
语义化标签header 头部 nav progress进度栏-value mark高亮
CSS回顾
1.html页面中怎么使用css
1) 行内 style属性
2）style标签， 选择器选择页面元素，加样式
@import
3）link引入 ①加载顺序不一样，②兼容性，③所属范围
2.选择器
基本：id ，标签 ，类，逗号，组合，普遍，
层次：子代 ， 后代， 兄弟
属性：
伪类：跟状态相关：hover :link :active :visited :focus
与子元素相关：first-child :last-child :nth-child(n)
伪元素：：：after ::before
3.字体，文本，列表样式
font-size字体大小：浏览器默认字体为16px
font-style 字体斜体
normal 不开启斜体
italic 开启斜体
font-weight 字体粗细
normal 正常字体
bold 粗的字体
bolder
lighter 更细的字体
100~900 400等同于normal，700等同于bold
line-height 行高
可设置文本垂直居中
设置的值为当前文本的父元素的高度即可垂直居中
font-family 字体族，提供可选字体列表，当用户电脑没有某个字体时，依次查找列表中的字体
取值：指定字体族名称
"微软雅黑"
"Microsoft YaHei"
"宋体"
serif 衬线字体
sans-serif 无衬线字体
color
text-
text-align 内容相对于它的块级父元素的对齐方式
left 左对齐
center 居中对齐
right 右对齐
justify 两侧对齐
text-decoration 文本修饰线
underline 下划线
overline 上划线
line-through 贯穿线(删除线)
text-indent 首行缩进
px/ em/ %
text-shadow 文本阴影
px x轴偏移量
px y轴偏移量
blur 模糊距离
color 阴影颜色
text-transform 字体改变
lowercase 小写
uppercase 大写
capitalize 首字母大写
list-style-type 列表标志类型
disc 实心圆点 (默认值)
circle 空心圆点
square 实心方块
...
list-style-image 列表标志
url('')
list-style-position 列表标志的位置
outside
inside
list-style 速写【顺序没有影响】
type
image
postition
4.网络字体以及字体图标库的使用
iconfont、fontawesome
5.盒子
6.浮动布局
1）最推荐：父元素清除浮动-加伪元素：{ }
2）浮动元素的同级：添加一个空标签，并且设置clear：both
3）给父元素添加：overflow：hidden
（页面元素较多时，可能会出现问题，最不推荐后两种）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
