HTML5与CSS3

Web标准

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位子等（颜色，大小等）
行为	JavaScripy	网页模型的定义与页面交互

HTML5 网页结构

< ! – 注释语句 --> （Ctrl+/)

文本控制标签

< h1 > ~ < h6 > (1~6级标题）

< p >< / p >

< hr 属性=“属性值” /> 水平线标签

< br /> 换行标签

文本样式标签

< font 属性=“属性值”>文本内容</ font>

文本格式化标签

标 记	显 示 效 果
< ins ></ ins >	下划线
< em ></ em >	斜体
< del ></ del >	删除线
< strong ></ strong >	强调(加粗）

特殊字符标签

特殊字符	代码
空格	&nbsp ;
<	&lt ;
>	&gt ;
&	&amp ;
正负号	&plusmn ;
乘号	&times ;
除号	&divid ;
二次方	&sup2 ;

图像标签

< img src = “图像URL” />

属性	属性值	描述
src	URL	路径
alt	文本	图像无法显示是替代的文本
title	文本	鼠标悬停时的替换文本
width	像素	图像的宽度
height	像素	图像的高度
border	数字	图像边框的宽度
vspace	像素	图像顶部与底部的边距
hspace	像素	图像左侧与右侧的边距
aligh	left	图像对齐左边
	right	对其右边
	top	图像顶部和文本第一行文字对齐，其他文字居图像下面
	middle	图像水平中线
	bottom	图像底部

图片路径

1. 绝对路径：指目录下的绝对位置，可以直接达到目标位置，通常从盘符开始的路径。
   例如：
   盘符开头：D:\day1\imag\1.jpg
   完整的网络地址:www.4399.com
2. 相对路径（常用）
   从当前文件开始出发寻找文件的过程
   相对路径分类：
   a.同级目录：在同级目录中。
   VS Code快捷操作：直接敲./后选择即可。
   b.下级目录:目标在下一级文件中。
   VS Code快捷操作：直接敲./后，一层层选择即可。
   c.上级目录
   VS Code快捷操作：直接敲. ./后，会自动提示上级目录下有文件，选择即可。

音频标签

属性名	功能
audio(scr)	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

例：audio src="./music.cp3" controls autoplay
注意目前只支持MP3 WAV Ogg

视频标签

属性名	功能
video(scr)	音频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

链接标签

代码：a href="./目标网页.html">超链接/a>

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

CSS3

选择器{属性1：属性值1；}

CSS样式表

1. 行内式
   <标签名 style=“属性1：属性值1;” >内容</ 标签名>
2. 内嵌式
   < head >
   < style type = “text / css” >
   选择器 {属性1：属性值1;}
   < / style >
   < / head >
3. 外链式
   < head >
   < link href = “CSS文件路径” type = “text/css” rel = “stylesheet” />
   < / head >
   新建一个或多个以.css为扩展名的外部样式表文件

CSS基础选择器

1. 标签选择器
   所有HTML标签名都可作为选择器，按标签名分类
   标签名{属性1：属性值1;}

2. 类选择器
   大部分HTML标签，类名为标签的class属性值
   .类名{属性1：属性值1;}
   注意：类名第一个字符不能用数字，并区别大小写，一般用小写

3. id选择器
   id名即为HTML标签的id属性中的值，标签的id值是唯一的，只能对应文档中某一个具体的值。

4. 通配符选择器
   匹配页面中所有的标签，不建议使用
   *{属性1：属性值1；}

5. 标签指定是选择器
   标签选择器+class选择器/id选择器，两个之间不能有空格

6. 后代选择器
   外层标签+空格+内层标签，标签嵌套时，内层标签为外层的后代

7. 并集选择器
   各个选择器通过逗号连接

CSS文本样式

字体样式

1. font-size:字号大小

相对长度单位	说明
em	字体尺寸
px	像素
in	英寸
cm、mm	厘米、毫米

2. font-family:字体
   注意：
   各种字体之间必须使用英文逗号隔开。
   中文字体，字体名中包含空格、#、$等需加引号。
   英文字体在中文字体之前。
3. font-weight:字体粗细

属性值	描述
Normal	默认
bold	粗体
bolder	更粗字体
lighter	更细字体

4. font-style:字体风格

属性	属性值
normal	默认值
italic	斜体（常用）
oblique	倾斜

5. font:综合设置字体样式
   选择器 {font：font-style font-weight font-size/line-height font-family；}
   注意：必须按照以上顺序写，除font-size、font-family外，不需要的可省略。

6. @font-face 规则
   定义服务器字体，可在计算机未安装该字体时使用
   @font-face{
   font-family:字体名称；
   src：字体路径；}

7. word-wrap:属性
   实现长单词与URL的自动换行

属性值	描述
normal	默认处理
break-word	换行

文本外观属性

• color

• letter-spacing：字间距
  允许使用负值

• word-spacing：单词间距
  允许使用负值

• line-height:行间距
  一般用px（像素）

• text-transform：文本转换

none	默认值
capitalize	首字母大写
uppercase	全部字符转为大写
lowercase	全部字符转为小写

• text-decorartion：文本装饰

none	默认值
underline	下划线
overline	上划线
line-through	删除线

text-decoration属性可对应多个属性值，添加多种效果

• text-align：水平对齐方式

• text-indent：文本缩进
  使用em为设置单位，可使用负值。

• white-space：空白符处理

normal	默认值
pre	按文档的书写保留
nowrap	强制无法换行（除<br / >）

• 10.text-shadow：阴影效果
  选择器{text-shadow：h-shadow v-shadow blur color；}
  blur：模糊半径
• text-overflow：文本溢出
  选择器{text-overflow：属性值；}

ellipsis	用"…"表示被修剪文本
clip	修剪溢出文本，不显示省略号

总结：设置省略标签标示溢出文本的步骤
white-space:nowrap；
overflow：hidden；
text-overflow:ellopsis;

CSS层叠性和继承性

CSS的优先级

盒子

盒子模型概念

< div >标签

大多HTML标签可以嵌套在< div >中，其中号可以嵌套多层< div >。

盒子的宽与高

盒子的总宽度=width+左右两边距之和+左右边框宽度之和
+左右外边距之和
总高度，同上

盒子模型相关属性

设置内容	样式属性	常用属性值
边框样式	border-style：上边[右边 下边 左边]；	none（默认）、soild、dashed、dotted、double
边框宽度	border-width:上边[右边 下边 左边]；	像素值
边框颜色	border-color：上边[右边 下边 左边]；	颜色值
综合设置边框	border：四边宽度 样式 颜色；
圆角边框	border-radius:水平/垂直半径参数；	像素值或百分比
图片边框	border-images：图片路径 裁切方式/边框宽度/边框扩展距离 重复方式；