《HTML5与CSS3基础教程》书籍学习

第三章：基本html结构

<title>……</title> 页面标题
<hn>……</hn> 分级标题
<header>……</header> 页眉
<nav>……</nav> 标记导航
<article>……</article> 文章
<section>……</section> 区块
<aside>……</aside> 附注栏
<footer>……</footer> 页脚
<div>……</div> 通用容器 没有语义，但可以包含块级内容并对其进行css操作，
与span的区别是span只适用于包含字词或短语内容
role=”……” 地标
id class
title属性 提示标签 一般用在链接中
注释

第4章：文本

<p>……</p> 标记段落
<small>输入表示免责声明、注解、署名等类型的文本</small> 指定细则
<strong>输入想要标记为重要内容的文本</strong> 标记重要文本
<em>输入想要强调的文本</em> 强调文本
<b>文档摘要的关键词，评论中的产品名，基于文本交互式软件中指示操作的文字，文章短语</b> 默认显示为粗体
<i>分类名称，技术术语，外语惯用语，翻译的散文，西方文字的船舶名称</i>默认为斜体
<figure> <figcaption>输入标题文字</figcaption>（可选）添加图像，视频，数据表格等</figure>
<cite>输入参考的名称，例如：戏剧，脚本，图书的标题，歌曲，电影，照片，雕塑的名称</cite>
<blockquote cite=“url”>引诉的文本</blockquote>
<q cite=“url”>引诉的文本</q> 会自动加上相应语言的引号
<time datetime=”time”>时间</time>
<abbr>缩写词本身</abbr>（解释缩写词）（可选）
<dfn>要定义的术语</dfn> 斜体显示
<sup>上标</sup> <sub>下标</sub>
<address>添加作者的电子邮件地址，指向联系信息页的链接</adress>
<del>已删除的内容</del> 中划线
<ins>输入新内容</ins> 下划线
<s>不再准确或不再相关的文本</s>
<code>标记代码或文件名</code>
<pre>输入或复制希望以原来显示的文本</pre>
<mark>输入希望引起注意的字词</mark> 会为文字加上背景
<br />或<br> 创建换行
<u></u>用于非文本注解
<wbr> 用于让浏览器知道哪里可以根据需要换行 不常用
Ruby rb rt 元素 rb rt是ruby的子元素 书籍90页
bdi bdo 元素 书籍91
<meter value=”0.80”>任务完成进度</meter>
<progress max=”100” value=”0”>任务完成进度</progress>

第5章：图像

<img src=”imge.url” alt=”文本” width=“” height=“” />

第6章：链接

<a href=”page.html”>标签文本 </a> 指向另一个网页的链接
<a href=”#achor-name”> 标签文本 </a> achor-name是目标的id属性值 创建锚
电子邮件地址 mailto:name@domain.com
电话号码 tel:+

第7章：css构造快

h1{
color:red;
}
注释：/*……*/
发生冲突时要注意：
1. 特殊性：选择器的具体程度
2. 顺序：晚出现的优先级高
3. 重要性：在末尾加上！important 优先级最高

第8章：操作样式表

外部样式表：
<link rel=”stylesheet” href=”style.css” />
嵌入式样式表：
<style>
img{
border: 4px solid red;
}
</style>
内联样式：
<img src=”” alt=”” style=”border: 4px solid red” />
与媒体相关的样式表：
meidia=”screen” 屏幕
meidia=”print” 打印
meidia=”all” 都可以
要打印与屏幕不一样也可以在css中添加@media print

第9章：定义选择器

h1{ /*元素*/
color:red;
}
h1 em{ /*h1 为上下文 em是h1 中的元素*/
color:red;
}
.error{ /*类*/
color:red;
}
#gaudi{ /* id */
color:red;
}
strong.error{
color:red;
}
a:link { /* link 为伪类 */
color:red;
}
a[title]{ /* []的有关元素的属性或值 */
color:red;
}
用:first-child与:last-child伪类选择第一个或最后一个元素，列如：
li: first-child li:last-child

用:first-letter与:first-line伪类选择第一个字母或第一行，列如：
p: first-letter p: first-line

按状态选择链接元素：
/* 未访问过的链接 */
a:link{
color:red;
}
/* 已访问过的链接 */
a:visited{
color:orange;
}
/* 已访问过的链接？？？ */
a:focus{
color:purple;
}
/* 鼠标放上时的链接 */
a:hover{
color:green;
}
/* 鼠标点击时的链接 */
a:active{
color:blue;
}
一定要按照LVFHA LVHFA的规则进行编写
/* 当鼠标放到文字上显示颜色 */
p:hover{
color:red;
}

元素组：用逗号隔开
h1,h2{
color:red;
}

第9章：为文本添加样式

font-family:Geneva,Tahoma,sans-serif; 设置字体
font-style:italic;(oblique不常用) 创建斜体 normal取消斜体
font-weight:bold;(100-700 400为默认值，700为粗体；bolder,lighter；) 创建粗体 normal取消粗体
font-size: (px,em,%,rem) 字体大小
font简写属性，例如：
font:italic small-caps bold .875em/1.3 “Palatino Linotype”,Palatino,serif;

color: 颜色属性设置
#rrggbb #rgb
rgb(r,g,b)
rgb(r%,g%,b%)
rgba(r,g,b,a)
hsl(h,s,l)
hsla(h,s,l,s)

background-color:背景颜色设置
background-image:url(image.png)背景图片设置
background-repeat:(repeat,repeat-x,repeat-y,no-repeat)背景图重复设置
background-position:_x_y背景图始位置设置
background-attachment:(fixed,scroll,local（局部滚动）) 背景图是否随页面进行滚动
background简写，例如：
background:#004 url(…/img/ufo.png) no-repeat 170px 20px;

word-spacing:字间距
letter-spacing:字母间距
text-indent:(em px)添加缩进
text-align:(right center left justify(文本两端对齐))对齐文本
text-transform:(uppercase lowercase none) 修改文本大小写
text-variant:small-caps修改小型大写字母 none取消
text-decoration:(underline overline ling-through none)修饰上划线 下划线 删除线
white-space:nowrap设置空白属性，也就是不分段。