语义化
- 标签一
<body>标签：页面上的所有内容
<p>段落文本</p>文章段落标签 //段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。
<hx>标题文本</hx> (x为1-6)网页添加标题 //<h1>是最高的等级。一般h1标签被用在网站名称上
<strong>需要强调的文本</strong>（粗体）、<em>需要强调的文本</em>（斜体）
<span>文本</span> 为了设置文本单独样式
<q>引用文本</q> 会自动加双引号引用
<blocksquote>引用文本</blocksquote> 一般用于较长文本
//html代码中输入**空格**、**回车**都是没有作用的
<br /> (写在段落后 ) 分行显示文本
（写在需要空格的文字后）
<hr /> 加一条分割的横线 ，同<br /> 是一个空标签 只有开始标签 无结束标签。
<address>联系地址信息</address> (也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份) --显示为斜体
<code>代码语言</code> 插入显示代码语言时，适用于一行代码 多行可用<pre>
<pre>语言代码段</pre> 插入显示代码段 （会预格式化文本、被包围在 pre 元素中的文本通常会保留空格和换行符）
===网页中预显示格式时都可以使用它
- 标签二
ul-li标签: 信息列表（每项li前都自带一个圆点）
<ul>
<li>[信息]</li>
<li>[信息]</li>
......
</ul>
ol-li：有序列表标签 (每项<li>前都自带一个序号，序号默认从1开始)
<ol>
<li>[信息]</li>
<li>[信息]</li>
......
</ol>
<div>…</div> 划分出独立模块、逻辑部分（相当于一个容器）
参考代码：
<div>
<h2>热门课程排行榜</h2>
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>javascript全攻略</li>
</ol>
</div>
<div>
<h2>最新课程排行</h2>
<ol>
<li>版本管理工具介绍—Git篇 </li>
<li>Canvas绘图详解</li>
<li>QQ5.0侧滑菜单</li>
</ol>
</div>
<div id="版块名称">…</div> (给div命名，使逻辑更加清晰) ==为这一个独立的逻辑部分
设置一个名称，用id属性来为<div>提供唯一的名称
表格：
table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>..</td>
，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，**表格表头。**
6、表格中列的个数，取决于一行中数据单元格的个数。
(没有表格线/表头，也就是th标签中的文本默认为**粗体**并且**居中**显示)
<table summary="表格简介文本"> (摘要：摘要的内容是不会在浏览器中显示出来，增加表格的可读性(语义化))
<caption>****标题文本</caption> （描述表格内容，标题的显示位置：表格上方）
示例如下
<table summary="表格简介文本">
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
超链接：
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的</a>
实现超链接语法
title属性：鼠标滑过链接文字时会显示这个属性的文本内容
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开
<a href="目标网址" target="_blank">click here!</a> 在新的浏览器窗口打开链接
<a>标签还有一个作用是可以链接Email地址使用mailto能让访问者便捷向网站管理者发送
电子邮件。如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数
每一个都以“&”分隔。
<a href = "mailto : 邮箱地址"> 发送</a> (浏览器自动调用默认客户端邮件程序，并在收货人中自动填上地址)
cc=填写抄送地址 bcc=密件抄送地址 subject= 添加邮件主题 body= 添加邮件内容
如：<a href = "mailto:yy@imooc.com ? subject= 该死 & body= 你好">发送</a>
<a href = "mailto : 邮箱地址 ；另一个邮箱地址"> 发送</a> （分好隔开多个收货人地址，群发）
图片：
<img arc="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1、src：标识图像的位置（加载图片；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件
#表单标签、与用户交互
<form method="传送方式" action="服务器文件">
#单选、复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、 当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
⚠️：同一组的单选按钮，name 取值一定要一致
#下拉列表选择框 eg:
<select>
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物" selected = "selected">购物</option>
</select>
1、value是向服务器提交的值
2、<option>选项</option> 选项为显示的可选择的值
3、设置selected ="selected"属性，表示该选择项默认被选中
#下拉列表框多选
在 select标签中设置multiple="multiple"属性，如下：
<select multiple = "multiple">...</select>
#提交按钮（确定、提交数据）、重置按钮（使输入框等恢复初始状态）
<input type="submit" value="提交" name="submitBtn" />
<input type="reset" value="重置" />
1、type为submit时，按钮才有提交作用、为reset时，才有重置作用
2、value：按钮上显示的文字
#label标签
label标签不会向用户呈现任何特殊效果，在 label 标签内点击文本，就会触发此控件。就是说，
当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选
中和该label标签相关连的表单控件上）。
<label for ="123">慢跑</label>
<label for="控件id名称"> （标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。）如：（注意label中for和控件上id的值）
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<br />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
CSS
认识CSS
1、CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等
//如下即设置段落p内的样式
p{
font-size:12px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
2、把<p></p>中的三个短语设置颜色：
把这三个短语用<span></span>括起来，在写如以下代码：
span{
color:red;
}
3、CSS代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示
选择符：选择器、指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在{}中，属性和值之间冒号隔开，多条声明分好隔开
如：
p{
font-size:12px;
color:red;
font-weight:bold;
}
4
5、CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种
内联式：
css样式表就是把css代码直接写在现有的HTML开始标签中,如
<p style="color:red">这里文字是红色。</p>
css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开，如：
<p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式css样式，
就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间,如上
外部式css样式
(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
1、（如上base.css，即单独的外部css文件名称）css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
然后再css文件中修改样式
<link href="style.css" rel="stylesheet" type="text/css" />
上述三种方法的优先级
内联式 > 嵌入式 > 外部式
注意点：1️⃣、外部式<link href="style.css" ...>代码在嵌入式<style type="text/css">...</style>代码的前面，所以离设置元素较远，即它们的优先级遵循就近原则。
2️⃣、上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下
选择器
每一条css样式声明（定义）由两部分组成，形式如下：
选择器{ body{
样式; font-size:12px
} }
{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
屏幕快照 2016-11-19 下午2.24.11.png
类选择器
语法：
.类选器名称{css样式代码;} (英文圆点开头、类选择器名称可以任意命名)
使用方法：
1️⃣使用合适的标签把要修饰的内容标记起来，如：
<span>胆小如鼠</span>
2️⃣使用class="类选择器名称"为标签设置一个类，如：
<span class="stress">胆小如鼠</span>
3️⃣设置类选器css样式，如：
.stress{color:red;}
ID选择器
ID选择器都类似于类选择符,区别：
1️⃣、为标签设置id = "ID名称"，而不是class = "类名称"。
2️⃣、ID选择符前面是井号（#），而不是英文圆点（.）。
如：
<span id = "halo">简单的问学</span>
#halo{
font-size:20px;
color:green;
}
类和ID选择器的区别：
相同点：可以用于任何元素
不同点：
1️⃣ID选择器只能在文档中使用一次。与类选择器不用，在一个HTML文档中，ID选择器只能使用一次，而且仅一次，而类选择器可以使用很多次。
2️⃣可以使用类选择器 词列表方法为一个元素同时设置多个样式，只可用类选择器方法实现，ID选择器不行（不能使用ID 词列表）
如：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span **class="stress bigsize"**>三年级</span>下学期时，我们班上了一节公开课...</p>
子选择器
即大于符号(>),用于选择指定标签元素的第一代子元素。如:
.food>li{border:1px solid red;}
//如此处是为 <p>..</p>标签中的*第一代子元素*<span>..</span>里的内容设置灰色边框
.first>span{
border:2px solid gray;
}
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题</p>
包含（后代）选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素,如：
.first span{color:red;} //即设置first类下所有span元素的字体为红色，也可继续加新标签赋值，如直接
在后面写上 <strong>{color:blue }, 同时给下面<p>标签中需要设置蔚蓝色字体的文字加上<strong >标签
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩</p>
与子选择器区别：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
伪类选择符
允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体大小颜色:
a:hover{
color:red;
font-size:22px
}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红变大
关于伪选择符：
目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
分类选择符
为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下：
h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
CSS特性
继承性
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
注意有一些css样式是不具有继承性的。如border:1px solid red;
p{border:1px solid red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。
特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式? 看一下面的代码：
p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
green是正确的颜色,因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} **/*权值为1*/**
p span{color:green;} **/*权值为1+1=2*/**
.warning{color:white;} **/*权值为10*/**p
span.warning{color:purple;} **/*权值为1+1+10=12*/**
#footer .note p{color:yellow;} **/*权值为100+10+1=111*/**
还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
层叠
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
所以前面的css样式优先级就不难理解了：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。(此处嵌入式跟外部式依据具体位置而定)
重要性
做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，这时候我们可以使用!important来解决。
如下代码：
p{color:red**!important**;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面
注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
