第三章:基本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
设置空白属性,也就是不分段。