首页 > 代码库 > HTML5周记（一）
HTML5周记（一）
各位开发者朋友和技术大神大家好！博主刚开始学习html5 ，自本周开始会每周更新技术博客，与大家分享每周所学。鉴于博主水品有限，如发现有问题的地方欢迎大家指正，有更好的意见和建议可在评论下方发表，我会第一时间回复。好了，话不多说，下面开始我的分享！
第一章 HTML的初识
一、HTML的基本结构
<!DOCTYPE html>
<!--声明文档类型为HTML文件。
文档声明。注意：文档声明在HTML文档中必不可少！且必须放在文档第一行。
-->
<html>
<head>
<!--meta标签：
1.charset属性：单独使用。设置文档字符集编码格式。
>>>写法：<meta charset="UTF-8">。
>>>常见的中文编码格式：
GB-2312:国标码，简体中文
GBK:扩展国编码，简体中文
UTF-8：万国码，unicote码，基本兼容各国语言
2.http-equiv属性：需配合content属性使用。主要声明浏览器如何解释编译文
>>> 写法：<meta http-equiv="属性值" content="属性值详细内容">
>>>常用属性值：content-Type HTML4.0之前的文档内容编码声明
refresh 网页刷新 set-cookie设置浏览器cookie缓存。
3.name属性：需配合content属性使用。主要给搜索引擎提供必要信息。
>>>写法：<meta name="属性值" content="属性值详细内容">
>>>重要属性值：autor 作者，声名网站作者，常用公司网址表示
keywords 网站关键字，多个关键字用英文逗号分隔
description 网页描述，搜索引擎显示title下描述的内容
*http-equiv和name属性，必须与content属性配合使用。 前两者只是用于声明即将修改哪些
属性值，而实际的属性值内容，在content中描述 。
-->
<!--作者-->
<meta name="autor" content="www.jredu100.com" />
<!--网页关键字-->
<meta name="keywords" content="html5,网页,Web前端开发" />
<!--描述-->
<meta name="description" content="这是我在杰瑞教育开发的第一个网页" />
<meta charset="UTF-8">
<!--HTML4.0之前的写法：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-->
<!--link标签：
1.作用：用于为网页连接各种文件。
2.常用属性：
rel：用于表明被连接文件与当前文件的关系。此处选icon，标明被链接图片是当前网页的icon图标。
type：标明被链接文件是什么类型。可以省略。
href：表明链接文件的地址。
-->
<link rel="icon" type="image/x-icon" href="http://www.mamicode.com/img/gouwuche.png">
<title>我的第一个网页</title>
<!--title：网页的标签，即网页选项卡上的名字。-->
</head>
<body>
</body>
</html>
二、常见的块级标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见的块级标签</title>
</head>
<body>
<!--【常见的块级标签】
标题标签<h1></h1>……<h6></h6>：默认加粗，h1最大，h6最小。
水平线<hr/>
段落<p></p>
换行<br/>
引用<blockquote></blockquote >
预格式<pre></pre>
-->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
<!--<hr/> : 水平线标签-->
<hr />
<!--<p></p>:段落标签-->
<!--<br/>: 换行标签-->
<p>p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，<br />这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字</p>
<p>p标签是段落标签，<br />这里是第二段文字</p>
<!--引用标签,cite属性，表明引用的来源，一般表明引用网址。浏览器默认显示为首行缩进。-->
<blockquote cite="http://www.jredu100.com">
横 眉冷对千夫指，俯首甘为孺子牛。
</blockquote>
<!--<pre></pre>:预格式标签
浏览器默认显示样式：1、显示为等宽字体 2、代码中的换行、空格等元素可在浏览器直接显示。
-->
<pre>哈哈哈哈哈哈哈哈
啊哈哈哈哈哈哈啊哈
</pre>
<!--预格式<pre></pre>标签-->
<pre>1
2
3
4
5
</pre>
<!--
有序列表：<ol></ol> order list
列表项：<li>可以有N多个</li>
-->
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<!--
无序列表：<ul></ul> unorder list
列表项：<li>可以有N多个</li>
-->
<ul>
<li>无序第一项</li>
<li>无序第二项</li>
<li>无序第三项</li>
</ul>
<!--
定义描述列表：<dl></dl>
列表标题：<dt>一般只有一项</dt>浏览器显示时， 标题顶格显示
列表描述项：<dd>可以有N多项</dd> 描述项相对标题进行缩进显示
-->
<dl>
<dt>这是定义列表的标题</dt>
<dd>描述项1</dd>
<dd>描述项2</dd>
<dd>描述项3</dd>
</dl>
<!--
组合标签：<figure></figure> 用于显示图片及图片标题
两个子标签：<img /> 图片
<figcaption></figcaption> 图片的标题
浏览器显示效果为：图片与标题上下排列，且整体向后缩进一个单位。
-->
<figure>
<img src="http://www.mamicode.com/img/shouye.png" />
<!--src表示图片的路径-->
<figcaption>这是图片标题</figcaption>
</figure>
<!--
分区标签：<div></div>：
常配合css，为网站中最常用的分区标签，很重要！！！常用于网页布局使用
-->
<div style="width: 100%; height: 100px; background-color: red;">
这是div里边的文字
<h1>这是div的标题</h1>
</div>
</body>
</html>
三、常见的行级标签
<!DOCTYPE html>
<html>
<head>
<a name="top"></a>
<meta charset="UTF-8">
<title>行级标签</title>
</head>
<body>
<!-- [常见的行级标签]
span（文本）
img（图片）
em（强调）
strong（强调）
q（短引用）
a（超链接）
i（倾斜）
b（加粗）
small（缩小字体）
-->
<!--span（文本）:无实际意义，用于包裹某部分文字，修改特定样式-->
<span style="color: blue; font-size: 36px;">大家好</span>，
我是<span style="color: red; font-size: 36px;">Span</span>中的文字
<br />
<!--em（强调）-->
<em>我被em标签强调了</em>
<br />
<!--strong（强调）-->
<strong>我被strong标签强调了</strong>
<!--i（倾斜）-->
<i>我被i标签倾斜了！！</i>
<br />
<!--b（加粗）-->
<b>我被b标签加粗了！！！！</b>
<br />
<!--
【Strong、em、b、i 标签的区别】
1、Strong和em都表示强调，Strong显示为粗体，em显示为倾斜。而且strong强调程度要大于em，
strong和em标签均可多层嵌套，表示强调程度的递增。
2、2、Strong和b都能加粗，em和i都能倾斜。但是，Strong和em多了一层强调的语义。HTML5要求
开发者尽可能实现代码的语义化。
-->
<!--q（短引用）:显示为文字用""引起来。 有cite属性-->
<q cite="http://www.jredu100.com">这是短引用标签q中的文字</q>
<br />
<!--small（缩小字体）big（增大字体）
small标签和big标签可以多层嵌套，直到字号达到上限或下限为止，但是在最新的规范中，small和big标
签不被提倡使用。提倡使用style="font-size：11px；"css样式替代。
-->
<small><small>我被small缩小了一号。</small></small><br />
<big>我被big标签放大了</big>
<br />
<br />
<!--img（图片）
1、src：表示图片引用路径。
src常见路径地址的写法：
# ① 相对路径：以当前文件为准，去寻找图片地址。
a、与当前文件处于同一层的图片，直接写图片名
b、图片在当前文件下一层：文件夹名/图片名,如 img/shouye.png
c、图片在当前文件上一层：../图片名,如 ../shouye.jpg(png)
使用相对路径时，图片所能放的最外层只能放到网站根目录（图片必须在项目文件夹中）
② 绝对路径：写法：<img src="file:///盘符:/文件夹/图片.后缀名">。但是，严禁使用!!!
③ 网络链接：网络上的图片链接。但是，一般不使用。但是图片在别人服务器，不可控，不建议使用。
2、height="" width="" 图片的宽度高度。可以用css样式(style="width: ; height: ;")代替
3、title:图片标题。当鼠标指上后显示的文字。
4、alt:当图片无法加载的时候，显示的文字。
5、align：设置图片周围文字相对于图片的位置。top， center ，bottom
-->
<img src="http://www.mamicode.com/img/shouye.png" height="100px" width="100px" title="鼠标指上时显示的文字"
alt="当图片没有加载成功时显示的文字" align="center"/>
<br />
<!--a标签：超链接
属性：
1、href：超链接跳转的地址。可以写网络连接，或本地HTML文件的相对路径，确定方式同img的src路径。
2、target：设置超链接打开窗口的位置。_self 自身页面打开（默认） _blank 新页面打开。
3、title：鼠标指上后显示的文字
4、rel：表明即将跳转的页面，以当前页面的关系。
rel="prev" 即将跳转的页面，是当前页面的前一篇文章
rel="next" 即将跳转的页面，是当前页面的后一篇文章
【记住】rel="icon" 被链接图片是当前文档的图标 rel="stylesheet" 被链接文档是当前文档的样式表
rel="prefetch" 预加载。在当前文档加载完成后，利用空余时间，预加载即将链接的文档
[target功能性链接]
mailto://jianghao@jerei.com
tencent://message/?uin=529169579
[锚链接]
1、本页面的锚链接
（1）设置一个锚点：<a name="top"></a>用name属性表示锚点名称
（2）在超链接的href属性中，使用#name 跳到指定的锚点位置。
2、其他页面锚链接
(1)需跳转的页面设置锚链接
(2)在超链接的href属性,文件名.html#name。
<a href="http://www.mamicode.com/aaaa.html#top">其他页面锚链接</a>
注：由于谷歌/IE的兼容问题，需在锚点中，插入一个坑空格才能生效，
<a name="top"> </a>
-->
<a href=" mailto://jianghao@jerei.com" title="鼠标指上后显示的文字" target="_self">这是一个超链
接到邮箱自身页面打开</a>
<br /><br />
<a href="https://www.baidu.com" title="鼠标指上后显示的文字" target=" _blank">这是一个超链接到新
百度</a>
<br /><br />
<a href="tencent://message/?uin=529169579" title="鼠标指上后显示的文字" target=" _blank">跳
到qq聊天</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<a href="http://www.mamicode.com/#top">跳到本业锚链接top</a><br /><br />
<a href="http://www.mamicode.com/唐诗三百首.html#top" target=" _blank" >其他页面锚链接top</a><br /<br /
<!--s有误文本：删除线-->
<s>这是s标签中的文字</s>
<br />
<!--cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用-->
<cite>这是cite标签</cite>
<br />
<!--code：只是表示计算机代码。但是浏览器只会显示等宽字体，不会保留代码格式，需配合pre标签使用-->
<pre>
<code>
StringBuffer sb = new StringBuffer();
for(String s : arr){
sb.append(s);
}
</code>
</pre>
<br />
<!--bdo：表示文本方向，dir="ltr" 从左往右 dir="rtl" 从右往左-->
<bdo dir="ltr">1234567</bdo>
<br />
<!--kbd:表示需要用户用键盘输入的内容。浏览器显示为等宽字体-->
请输入“<kbd>Esc</kbd>”退出系统。
<br />
<!--sup：上标文本 sub：下标文本-->
X<sup>2</sup>
X2
<br />
<!--版权符号 空格-->
© 空格
<br />
<!--u:下划线-->
<u>这是u标签</u>
<br />
<!--mark:高亮或标记文本 浏览器显示为黄色背景-->
<mark>哈哈哈哈哈</mark>
<br />
</body>
</html>
第二章 表格及表单
一、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--【表格table】
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
表格的表头列<th></th>(将tr中的td，替换为th，表示本行为表头)
th默认加粗，且在单元格居中显示。
-->
<table width="500" border="3" bordercolor="blue" style="border-collapse: collapse;">
<tr>
<th colspan="4">表头列</th>
<!--colspan跨列标签-->
</tr>
<tr>
<td align="center">1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</table> <br />
<table width="500" border="5" bordercolor="red" cellspacing="4"
style="border-collapse: collapse;" cellpadding="10" align="left" bgcolor="#0000FF"
background="img/shouye.png" >
<tr>
<th>学号</th>
<th>姓名</th>
<th>数学成绩</th>
<th>语文成绩</th>
<th>英语成绩</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>100分</td>
<td>120分</td>
<td>120分</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>110分</td>
<td>123分</td>
<td>124分</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>150分</td>
<td>120分</td>
<td>120分</td>
</tr>
</table>
<!-- 【表格table】
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
表格的表头列<th></th> (将tr中的td，替换为th，表示本行为表头)
th 默认加粗，且在单元格居中显示
【table的常用属性】
1、Border：当使用border="?"设置边框时，会在所有td以及table上嵌套边框，当border加
大时，只有table最外层框线加粗，td单元格上的框线不会变化。
2、Cellspacing：单元格与单元格之间的间隙。当cellspacing="0"时，单元格之间的间隙为0，
但边框线并没有合并（边框线还是两条线的宽度）
##[合并边框的写法] style="border-collapse:collapse;" 使用边框合并后，无需设置
cellspacing。
3、Cellpadding：单元格中文字与单元格边框之间的距离（单元格内边距）
4、Width ：表格的宽高。
Height
5、Align:设置表格在父容器中的对齐方式：left居左，center居中，right居右。
【注意】当表格使用align属性时，相当于使表格浮动，可能导致表格后面的元素受表格浮动影
响，导致布局错乱。
6、Bgcolor：背景色
Background：背景图片 ，后接相对路径。当背景图和背景色同时生效时，背景图会覆盖背景色。
Bordercolor：边框颜色
-->
<!--<tr><td>标签的属性
>>>当表格属性和行列属性冲突时，会以行列属性为准。
属性设置优先级：td>tr>table
1、width、height：给单个的行列设置宽度高度。
2、bgcolor:背景色
3、align：设置单元格中的文字在单元格中的水平对齐方式。
4、valign：设置单元格中的文字在单元格中的垂直对齐方式。
5、nowrap：nowrap="nowrap"设置单元格文字行末不换行。（属性="属性值"，可只写属性）
-->
<!--【表格的跨行与跨列】
1、跨列：colspan，某单元格跨n列，则该单元格右边的n-1个td就不要了。
2、跨行：rowspan，某单元格跨N行，则该单元格下边的n-1个td就不要了。
-->
<br /><br /><br />
<table width="800" border="1" bordercolor="red" cellspacing="2"
cellpadding="5" align="center"
>
<tr>
<td align="center" colspan="3">杰瑞教育</td>
</tr>
<tr>
<td >HTML5</td>
<td rowspan="2">Android</td>
<td >IOS</td>
</tr>
<tr>
<td >java</td>
<td >PHP</td>
</tr>
</table>
<br /><br /><br />
<table border="5" bordercolor="red" cellspacing="0"
cellpadding="10" align="center" style="border-collapse: collapse;">
<tr>
<td rowspan="6"><img src="http://www.mamicode.com/img/guanai.jpg" align="center" width="50" height="50"> </td>
<td rowspan="3"></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table width="500" border="5" style="border-collapse: collapse;" bordercolor="pink">
<tr>
<td rowspan="6">111</td>
<td rowspan="3">111</td>
<td rowspan="2">111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td rowspan="2">111</td>
<td>111</td>
</tr>
<tr>
<td rowspan="3">111</td>
<td>111</td>
</tr>
<tr>
<td rowspan="2">111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
</table>
</body>
</html>
二、表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--[form表单]
1、两个重要属性：
action:表单需要提交的服务器地址
method:表单提交数据使用的方法：get/post
>>>get和post的区别
(1)get传参使用URL传递，所有参数在地址栏可见，不安全；get传参数据量有限
(2)post传参使用http请求传递，比较安全；post可传递大量数据；
但是，get请求传输速率要比post快
>>>URL的传参形式：链接URL地址？name1=value1&name2=value2
2、input的常用属性：
(1)type：设置input的输入类型
(2)name：给input输入框起名，一般情况下，name属性必不可少，因为，传输数据时使
用name=value(输入内容) 的传形式传递
(3)value：input输入框的默认值。
(4)placeholder：输入框的提示内容。当input有默认的value输入值时，placeholder消失。
3、input-type属性的常用值：
(1)text：文本输入框
(2)password：密码输入框，输入内容默认显示小黑点。
(3)radio：单选框 checkbox：复选框
>>>使用radio时，value属性必填，提交时，提交的内容为value中的默认值，
>>>radio凭借name属性确定是否属于同一组，name相同为同组，只能选一个。
>>>使用checked="checked"属性，设置默认选中项。
(4)file:文件上传
>>>使用accept="类型"，设置只能上传上传的文件类型，image/*任意格式图片。
(5)submit：提交按钮。将所有表单数据，提交至后台服务器。
(6)reset：重置表单数据。将表单数据恢复至默认状态。
(7)image：图形提交按钮。跟submit一样，具有表单提交功能。
使用src属性，选择图片路径。
(8)button：普通按钮，没有任何卵用。
4、属性名等于属性名的情况：
① checked="checked" 设置radio/checkbox的默认选中项
② multiple="multiple" 设置select控件为多选控件
③ selected="selected" 设置select控件默认选中的option选项
④ readonly="readonly" 设置为texearea只读模式，不允许编辑。
⑤ disabled="disabled" 禁用控件。当input被disabled时，该input的name和value将无法向后台传递。
⑥ hidden="hidden" 隐藏控件。等效于<input type="hidden"/>
(7)nowrap="nowrap"设置单元格文字行末不断行（属性值可以不写）
5、【下拉选择控件 select】
① 写法：<select>
<option></option> //可以有N多个
</select>
② name属性，应该写在<select>上，所有选项只有一个name
③ multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
④ option常用属性：
value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。
⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。
6、【文本域 textarea】
① 写法：<textarea></textarea>
② 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用
③ readonly="readonly" 设置为只读模式，不允许编辑。
④ style="resize: none;" 设置为宽高不允许修改。
⑤ style="overflow: ;" 设置当文字超出区域时，如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:hidden 超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动
auto 自动，根据文字多少自动决定是否显示滚动条（默认样式）
7、表格的边框与标题
<form>
<fieldest>表格的边框
<legend>表格的标题</legend>
。。。N多个表单元素（input/select/textarea）
</fieldest>
</form>
注：一个表单，可以有多组边框+标题
-->
<!--【html5智能表单】
① H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。
<FORM id=foo>
…
</FORM>
<INPUT … form="foo">
② 新增N多个type新属性，详见表格
③ 新增input的属性：
Autocomplete：自动完成功能。
>>> 记忆之前输入过的内容，在下次输入时，根据以前的内容提示，自动完成。
>>> 绝大部分浏览器自动开启。
>>> 有两个属性值：off/on
>>> 可以在<form>标签上设置Autocomplete，控制整张表单的自动完成开关。但可以在
个别input上单独设置，覆盖form的整体设置。
Autofocus：自动获得焦点.autofocus="autofocus"
Form：所属表单，通过form表单的id,指向特定表单。
Required：必填。required="required" 设置input为必填。
Placeholder：输入框的提示内容。当input有默认的value输入值时，placeholder消失。
-->
<form action="" method="get" id="form1" autocomplete="on">
<fieldset>
<legend>用户注册</legend>
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" placeholder="请输入用户名" value="http://www.mamicode.com/11111"
autocomplete="on"/>
<input type="hidden" name="username" value="http://www.mamicode.com/11111" />
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="http://www.mamicode.com/男" checked="checked"/>男
<input type="radio" name="sex" value="http://www.mamicode.com/女"/>女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="http://www.mamicode.com/男" checked="checked"/>男
<input type="checkbox" name="hobby" value="http://www.mamicode.com/女" checked="checked"/>女
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" name="head"/>
</td>
</tr>
<tr>
<td>城市：</td>
<td>[请选择]
<select name="city">
<optgroup label="山东省">
<option>青岛</option>
<option selected>烟台</option>
<option>威海</option>
</optgroup>
<optgroup label="河南省">
<option>开封</option>
<option >洛阳</option>
<option>濮阳</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>用户协议</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<textarea style="width: 200px; height: 100px; resize: none; overflow-y: scroll;"
readonly="readonly">这是服务协议！这是服务协议！这是服务协议！</textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="http://www.mamicode.com/登录" />
</td>
<td>
<input type="button" value="http://www.mamicode.com/重置" />
</td>
</tr>
<tr>
<td>
<input type="image" src="http://www.mamicode.com/1_HTML基本标签/img/icon.png"/>
</td>
<td>
<input type="button" value="http://www.mamicode.com/我就看看" disabled="disabled" />
</td>
</tr>
</table>
</fieldset>
</form>
<input type="text" name="test" form="form1" required="required" autofocus="autofocus"
autocomplete="on" />
</body>
</html>
第三章 CSS样式表
一、CSS常用选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>
<!--HTML注释-->
<style type="text/css">
/*CSS语法必须写在<style>标签中*/
/*CSS注释*/
/* 【通用选择器】
* 1、写法： *{}
* 2、作用： 选中页面中的所有HTML标签
* 3、优先级：最低！
*/
*{
/*background-color: red;*/
}
/* 【标签选择器】
* 1、写法： HTML标签名{ }
* 2、作用： 选中所有对应的HTML标签，并修改其样式
*/
li{
color: red;
font-size: 36px;
}
/* 【类选择器 class选择器】
* 1、写法： .选择器名{}
* 2、调用： 在需要修改样式的HTML标签上，使用class="选择器名"
* 3、优先级： 当作用于同一层时，class选择器>标签选择器
*/
.list{
color: blue;
}
/* 【ID选择器】
* 1、写法： #选择器名{}
* 2、调用： 在需要修改样式的HTML标签上，使用id="选择器名"
* 3、优先级：同一层时，id选择器>class选择器
* 4、ID选择器是唯一的！同一页面严禁出现同名ID！！！
*/
#first{
color: green;
}
/* 【后代选择器】
* 1、写法： 选择器1 选择器2 …… 选择器N {}
* 2、生效规则： 选择器2必须是选择器1的【后代】……以此类推
*
* 【子代选择器】
* 1、写法： 选择器1>选择器2>……>选择器N{}
* 2、生效规则： 选择器2必须是选择器1的【直接子代】……
*/
div>ul>li{
/*background-color: yellow;*/
}
/* 【交集选择器】
* 1、写法： 选择器1选择器2……选择N{}
* 2、生效规则： 必须同时满足所有选择器，才会生效
*/
li.list#first{
background-color: yellowgreen;
}
/* 【并集选择器】
* 1、写法： 选择器1,选择器2,……,选择N{}
* 2、生效规则： 满足任意一个选择器，均可生效
*/
.list,#first{
color: darkslategray;
}
/* 【选择器命名规范】
* 1、只能有字母、数字、下划线组成；
* 2、开头不能是数字。
*/
.ul_1{
background: red;
}
/* 【选择器优先级】
* 1、就近原则：近者优先。
* 2、当作用于同一层时：可有权重计算
* 权重划分： 标签选择器 1
* class选择器 10
* id选择器 100
* 行级样式表style="" 1000
* #ul .li .li2 li{} 优先级权重121
* li .li1 .li2 .lis2 {} 优先级权重31
* #ul #li li{} 优先级201
*
*/
float：left（悬浮）
/*伪类选择器：
1.写法：选择器名：伪类状态{}
常见的伪类状态：
：link未访问
：visited已访问
：hover鼠标指上状态
：active激活选定状态
注，当超链接同时具有以上四种状态则选择器必须按照上述顺序排列
：focus获得焦点
*/
a:link{
color:burlywood;
text-decoration: none;
}
a:visited{
color: red;
}
a:hover{
color: green;
text-decoration: underline
}
a:active{
color: deepskyblue;
}
</style>
<!-- 【三种使用CSS的方式】
1、行内样式表：直接在HTML开始标签中使用style=""的方式引用；
特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。
2、内部样式表： 在<head></head>中，使用<style type="text/css"></style>方式引用；
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式。
3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/01css.css" />
特点：实现了CSS与HTML的彻底分离，有利于样式复用及后期维护。
-->
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/01css.css" />
</head>
<body>
<div>
<ul class="ul_1">
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>
</div>
<ul>
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>
</body>
</html>
二、CSS常用文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
* /* [CSS常用文本属性]
* 1、字体、字号：
font-weight:字体的粗细，可选属性值：bold加粗 lighter细体
100~900数值(400正常，700 bold)
font-size:字体大小 **PX **%（浏览器默认字体大小的百分比，绝大部分默认16px）
font-family:字体族，设置字体。
>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）
>>>例如：font-family:Arial, ‘Microsoft Yahei‘, sans-serif;
font-style:字体样式,正常(normal) 斜体(italic)
* font-variant：small-caps; 将字母转为小型大写字体。
(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-family
>>> 使用注意事项 ：
① 顺序必须严格按照上述顺序；
② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对用/分割
③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>> 例如：font:italic bold 75%/1.8 ‘Microsoft Yahei‘, sans-serif;
斜体 加粗 字号/行高 字体族(微软雅黑，非衬线字体族)
2、字体颜色：
color:字体颜色
opacity:透明度,0~1之间的数字。 调整时控件以及子控件均会透明，而使用rgba调整时，
只会时本控件透明，子控件不会发生透明度变化。
3、行距、对齐等：
line-height:行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同2
>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height
text-align:块级元素中文字的水平对齐方式 left center right
letter-spacing:字符间距,字与字之间的间距
text-decoration:文本修饰 下划线underline、删除线line-through、上划线overline、none
overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，scroll始终显示滚动条，
hidden 超出范围文本隐藏) 可以通过overflow-x overflow-y分别设置水平垂直方向
text-overflow:设置多余文字的显示方式 clip裁剪掉 ellipsis省略号
>>>【重点】让每行多余文字显示省略号：
① white-space: nowrap; 如果是中文，需设置行末不断行
② overflow: hidden; 设置控件超出范围隐藏
③ text-overflow: ellipsis; 设置多余文本省略号显示
white-space: nowrap; 设置行末不断行显示
word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，
会不断行显示， break-all 允许在单词内换行。
text-shadow:文本阴影，有四个属性值：
①水平阴影距离 必选，数值越大，阴影右移
②垂直阴影距离 必选，数值越大，阴影下移
③阴影模糊距离 可选，数值越大，阴影越模糊。默认为0，不模糊
④阴影颜色 可选，默认为黑色
text-indent:首行缩进，可用像素值调整缩进大小
* text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色
*/
*{font:italic bold 16px/20px ‘Microsoft Yahei‘, sans-serif;
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.div1{width: 200px;height: 300px;background-color: #CCCCCC;}
</style>
</head>
<body>
<div class="div1">
<p>
这是列表项1这是列表项1这是列表项1这是列表项1这是列表项1这是列表项1
这是列表项1这是列表项1
</p>
</div>
<br /> <br /> <br /><br /><br />
</body>
</html>
三、CSS常用背景属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 【CSS常用背景属性】
background
background-color:背景色
background-image:背景图, 写法：background-image: URL(图片地址相对路径);背景图和背景色同时存在时，
背景图会覆盖背景色
background-repeat：背景图重复方式 ，no-repeat不平铺 repeat平铺(默认) repeat-x水平平铺
repeat-y垂直平铺
background-size:背景图大小。
【指定宽度高度】
>>> 宽高的写法，第一个属性值为宽度，第二个属性值为高度，可以：①直接写像素
②写百分比（父容器宽高的百分比）
>>> 当只有一个属性值时，默认为宽度。高度等比缩放。
当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。
【其他属性值】
>>> contain:图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放
（可能导致部分空余区域无法覆盖）
>>> cover:图片等比缩放，使背景图像完全覆盖背景区域。(可能导致背景图部分区域无法显示)
background-position：位置坐标、偏移量
>>> 指定位置：left/center/right top/center/bottom
当只写一个属性值时，另一个默认居中
>>> 填写坐标：水平位置 垂直位置 (像素或百分比形式)
① 当只写一个属性值时，默认写的为水平方向，则垂直居中
② 当使用像素时：图片的左上角往各个方向移动的实际距离
水平方向：正数右移 负数左移 垂直方法：正数下移 负数上移
(左负有正 上负下正)
③ 当使用百分数时，一般只能是正数。代表去掉图片后，剩余空白距离的分布比例。
例如 background-position：30%;
水平方向去掉图片后，剩余区域3:7分
*/
div{
width: 27px;
height: 27px;
background-image: url(css/icon.gif);
/*background-color: red;*/
background-repeat: no-repeat;
/*background-size: 100% 100%;*/
background-position: -165px -27px;
white-space: nowrap;
text-indent: 30px;
line-height: 27px;}
.first{background-position: -45px 0px;}
</style>
</head>
<body>
<div >
购物车
</div>
<br><br>
<div class="first">
帮助中心
</div>
</body>
</html>
本周的分享就到这里，下周再见！
HTML5周记（一）