睡前要喝豆奶粉
睡前要喝豆奶粉

HTML5网页设计笔记

一、HTML5基础

1.www（万维网）

一种建立在internet上的全球性的、交互性的、多平台的、分布的信息资源网络，采用HTML语言描述超文本文件。

URL（统一资源定位器）

HTTP（超文本传输协议）

HTML（超文本标记语言）由浏览器解释执行，无需编译    扩展名.html或.htm

2.Web标准

  • 结构化标准语言
  • 表现标准语言
  • 行为标准

3.


    
        
            
            
            
        
        
            .....

4.doctype标签

用于说明使用的html是什么版本

5. html标签

用于表示该文件是以超文本标记语言（HTML）编写的

        文件的全部内容

6.head标签 

表示网页头部的标签，不放置网页的任何内容，而是放置关于HTML文件的信息，包含文件的标题、编码方式、URL等信息。

不属于HTML文件的主体。

不需要提供相关信息时，可省略head标签。 

        ............

7.meta标签 

表示所使用的字符编码语言，utf-8、gb2312表示中文字符，包含在head标签里 


           


       

 8.title标签

表示HTML5文档的标题

</p> <p>

9.body标签

包含所有文档的主体内容，显示在屏幕上

        body标签里的文本

           注释标签

 

10.标题标签 

字号逐渐减小

align="对齐方式"  设置在标题标记后面

属性 说明
left 左对齐
center

居中对齐
right 右对齐

     

        

        .....

        

11.段落标签

表示以段落的方式组织内容，可以为文字、图片、表格等之间留一个空白行

可以使用成对的，也可以使用单独的

属性 说明
align 水平对齐方式。可选值：right、left、center
class 设置css类
dir 文字方向
style 设置内嵌样式
title 设置工具提示

       

        .......

       

        ......

12.换行标签

不另起一段换行，一个
代表一个换行，可多个
多次换行

一行文本
另起一行

        龚自珍

        九州生气恃风雷，

13.水平标签

在浏览器上显示一条细线以分隔两个区域

  空一个字  放文字前

14.强调标签

粗体文本

.....

.....

15.图片标签

提示信息

alt描述该图片的文字 

align属性

偏上方 top
中间

middle
底端 bottom
左 left
右 right

16 .超链接标签

链接显示文本

属性 说明
href 链接的目标URL
target 在何处打开目标URL。仅在href属性存在时使用

16.1相对路径用于访问同一个目录的文件 相对路径的超链接 

16.2如果相对路径中包含目录，使用"../"访问源文件所在目录的上一级目录，"../../"访问源文件所在目录的上上级目录，以此类推 相对路径的超链接 

16.3访问下级目录的文件直接编写下级目录文件的路径即可。相对路径的超链接 

16.4绝对路径 绝对路径的超链接 

二、排列页面内容

1.音频标签

src="" controls="" autoplay="" width="" height="">

       

        

        

插入3个source标签可以更好的解决浏览器和音频格式兼容性问题

audio属性

属性 值 描述
autoplay true/false 如true，则音频就绪后马上播放
controls true/false 如true，则向用户显示控件，如播放按钮
end 数值 定义何处停止播放，默认放完
loopstart 数值 定义循环播放的开始位置
loopend 数值 定义循环播放的停止位置
playcount 数值 定义音频片段播放多少次
str url 路径
start 数值 定义开始播放的位置

2.视频标签

 src="" controls="" autoplay="" width="" height="" poster="图片地址">

       

        

        

video属性 

属性 值 描述
autoplay true/false 如true，则视频就绪后马上播放
str url 路径
controls true/false 如true，则向用户显示控件，如播放按钮
perload none/metadata/auto 是否预加载，none不预加载，metadata只预加载元数据，auto预加载全部
loop loop 是否循环播放
poster url 封面
width 数值 视频宽度
height 数值 视频高度

 source标签常用属性

src 指定媒体文件位置
type 说明媒体文件的类型，帮助浏览器判断是否支持此类媒体文件格式
media 说明媒体在何种媒介中使用，默认值为所有媒介

 3.列表标签

3.1无序列表

           

  • .....

    •        

  • .....

3.2有序列表

           

  1. .....

    2.        

  2. .....

3.3定义列表

用于解释名词   图文混排

       

名词

       

解释

4.div标签

5.span标签

        文本

6.表格标签

.....
表格标签    border属性设置边框宽度

.... 行标签

.... 单元格标签

       

......

       

               

                       

                       

               

                

                       

                       

               

       

..... .....
..... .....

6.1不规则表格 

6.1.1跨列（横向合并）colspan

        单元格内容

6.1.2跨行（纵向合并）rowspan

        单元格内容

6.2其他标签  table标签内

       

               

               

       

       

               

               

       

       

               

               

       

表格标题标签caption

用于描述整个表格的标题

...
thead

表头
... ...
tbody

表中
... ...
tfoot

表底
... ...

7.表格的美化和布局

align对齐方式  

right

右对齐
center 居中对齐
left 左对齐

cellspacing单元格间距:

单元格与单元格之间的距离

消除="0" 

cellpadding单元格填充：

单元格中内容与单元格边框之间的距离

消除="0"

三、表单

1.表单标签

......

action提交地址

method提交方式 post更安全适合大量数据 

2.表单元素

表单控件标签写法 说明
单行文本输入框
将表单中的信息提交给表单中action属性所指向的地址
复选框
单选框
密码输入框（输入的文字用*表示）
下拉框
多行文本输入框

3.输入框

       

                姓名:

                

                邮箱:

                

       

4.密码框

5.多行文本域

6.按钮

提交按钮

重置按钮

普通按钮

图片按钮

或

7.单选按钮 radio

请选择你喜欢的水果：

苹果

橘子

芒果

提交按钮

        请选择你喜欢的水果：

        

        

                苹果

                

                checked(默认选橘子)/>橘子

                

                芒果

                

                

       

 

8.复选框 checkbox

苹果

checked(默认选橘子)/>橘子

9. 下拉框

10.必填验证 required

required="required"/>

11.类型匹配验证

type属性

属性 作用
email 验证值是否符合email格式要求
url 验证值是否符合url格式要求
number 验证是否为数字，可配合min、max、step属性进行数值限定
range 验证值是否定在指定的范围内的数字，可配合min、max、step属性进行数值限定，显示为滑动条
date 用于选取年、月、日

step属性 ：

控制input标签中的数值增加或减少时的步长，例step=2，则为2的倍数

12.自定义错误消息

四、CSS3基础

1.CSS3基本语法

当css代码较多时，可以使用/*......*/添加必要的注释 

2.样式表——外部样式表   CSS文件

       

3.导入样式表

       

4.内嵌样式表

       

5.行内样式表 写标签里

<标签名 style="样式属性：属性值；">

......

6.类选择器 （CSS基本选择器）

定义类样式

应用类样式

<标签名 class="类名">标签内容

7.标签选择器 （CSS基本选择器）

8.ID选择器 （CSS基本选择器）

9.组合选择器 （CSS扩展选择器）

应用于多个选择符 逗号隔开

例：设置所有p标签、class属性值为red的标签以及id为header的标签样式

p,.red,#header{

        color:red;

        font-size:12px;

}

10.包含选择器 （CSS扩展选择器）

更灵活、更精确

例：选择id为header标签下的ul标签下的li标签下的a标签

#header ul li a{

        color:blue;

        text-decoration:none;取消超链接下划线

}

11.交集选择器 （CSS扩展选择器）

第一个必须是标签选择器，第二个必须是类选择器或id选择器

例:选中p标签中class属性值为red的所有元素

p.red(不能有空格){

        color:red;

        font-size:23px;

}

12.伪类选择器 （CSS扩展选择器）

标签名：伪类名{

        属性：属性值；

}

超链接伪类表 

伪类 含义 应用场景
a:link 未单击访问时的超链接样式 常用，超链接主样式
a:visited 单击访问后的超链接样式 区分是否已被访问
a:hover 鼠标悬浮在超链接上的样式 常用，实现动态效果
a:active 鼠标单击未释放的超链接样式 少用，通常与link一致

13.CSS继承性

所有在元素中嵌套的元素都会继承外层指定的样式，有时会将很多层样式叠加在一起，但另行更改除外

css上边界属性值是不会继承的

14.CSS3层叠性和优先级

处理原则：

a.不发生冲突，元素将应用所有选择器定义的样式

b.发生冲突，css按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式

CSS规定选择器的优先级从高到低：

行内样式——ID样式——类样式——标签样式

CSS规定选择符的优先级从高到低：

id选择符——类选择符——元素选择符

CSS的定义优先级依照从高到低：

内嵌样式——内部样式——链入外部样式表和内部样式表之间则根据定义先后顺序评定

五、常用的样式属性

1.字体属性

属性 含义
font 设置字体的所有样式属性

顺序：字体粗细、大小、字体类型

font:bold 12px 字体
font-family 定义字体类型
font-size 定义字体大小
font-weight 定义字体粗细

font-weight:bold(粗体)、bolder(特粗体)、lighter(细体)

font-weight:number：100/200/300
color 字体颜色

字间距 letter-spacing:20px;
单词间距 word-spacing:20px;
首行缩进 text-index:2em;倍数
英文大小写

text-transform:capitalize;(开头大写)

                        uppercase;(只有大写)

                        lowercase;(只有小写)
字体倾斜 font-style:normal(常规)oblique(字体倾斜)italic(倾斜)
文字竖排排版(必须设置浮动和高度)

font:left;

height:300px;

writing-mode:vertical-lr(左到右)vertical-rl(右到左)

2.文本属性

属性 含义 应用
line-height 设置行高（行间距）常取25px、28px 布局多行文本
text-align 对齐方式left、right、center 各种元素对齐
letter-spacing 字符间距常取3px、8px 加大字符间间隔
text-decoration 文本修饰，underline(下划线)、none(无划线)、line-throught(中划线)

3.边距

元素与元素之间的间距

3.1消除页面边距

*{
    margin:0px;
    padding:0px;
}

3.2margin

复合属性：设置1个值——应用于4个边距

                  设置2个值——表示上下，左右边距

                  设置3个值——表示上，左右，下边距

                  设置4个值——表示上，右，下，左边距

margin-top 上
margin-bottom 下
margin-left 左
margin-right 右

4.填充

元素内容与边框之间的距离——内边距

复合属性：设置1个值——应用于4个边距

                  设置2个值——表示上下，左右边距

                  设置3个值——表示上，左右，下边距

                  设置4个值——表示上，右，下，左边距

padding-top 上
padding-bottom 下
padding-left 左
padding-right 右

5.边框属性

5.1border属性

属性 说明
border-style 边框样式，none无边框，solid实线，dashed虚线
border-width 宽度
border-color 颜色
boder 复合属性，设置边框宽度、样式、颜色

单独设置某个方向上的边框属性：border-top 上

                                                        border-bottom 下

                                                        border-left 左

                                                        border-right 右

5.2border-radius属性——圆角边框

语法 说明
border-radius:参数1 四个角  border-radius:5px;
border-radius:参数1、2 左上角右下角、左下角右上角
border-radius:参数1、2、3 左上角、左下角右上角、右下角
border-radius:参数1、2、3、4 左上角、右上角、右下角、左下角

6.列表属性

属性 说明
list-style-type 设置列表项的符号，none无、disc实心圆、square实心方块、circle空心圆
list-style-image 设置图像作为列表项目符号，值为url，list-style-image:url();
list-style-position 设置项目符号在列表项的位置，值inside里面、outside外面默认
list-style 复合属性，顺序：list-style-type、list-style-position、list-style-image

6.1文字居中

条件：height=line-height

例：ul li{

                height:30px;

                line-height:30px;

        }

6.2清除默认样式

margin:0px;

padding:0px;

border:0px;

list-style-type:none;

6.3超出的其他大图片隐藏 overflow:hidden;

6.4列表排列变横排 float:left;左浮动

6.5小图片外距右边的间隙 margin-right:10px;

6.6居中 margin:0px auto;

6.7显示效果为隐藏 display:none;

6.8显示效果 display:block;

6.9取消序号 list-style:none;

六、背景与阴影

1.背景属性

属性 说明
background-color 设置元素的背景颜色
background-image 设置元素的背景图片 background-image:url()
background-repeat 设置元素的背景图片重复方式 repeat(默认值，表示背景图像在纵向和横向上平铺)、no-repeat(不平铺)、repeat-x(只在水平方向上平铺)、repeat-y(只在垂直方向上平铺)
background-position 设置元素的背景图片位置
background-size 设置元素的背景图片大小
background 复合属性

2.背景图片定位

background-position属性——默认左上角

取值 说明
关键字 水平方向：left/center/right 垂直方向：top/center/bottom
百分比 水平方向：0%左50%中100%右  垂直方向：0%上50%中100%下
像素值 正值：水平向右、垂直向下 负值：水平向左、垂直向上

注：在使用background-position属性的过程中，关键顺序不重要，left bottom和bottom left意义相同。若只设置一个值时，第一个值代表水平偏移位置，第二个值默认居中

3.背景渐变

3.1线性渐变

background:linear-gradient(/,,....);

3.1.1注：

1.

通过角度来确定渐变方向。角度是指垂直线和渐变线之间的角度，顺时针方向计算。如0deg创建一个从下到上的渐变，90deg创建一个从左到右的渐变

2.

通过代表方向的关键词来确定渐变方向。如to top、to right、to bottom和to left对应的角度值为0deg、90deg、180deg和270deg

3.

用于指定终止色，其中可以设置多个终止色，用于实现多种颜色之间的渐变，在设置终止色时，可以同时设置终止位置，该位置可以被指定为线长度的百分比或一个绝对长度。如果指定位置使用百分比，那么0%表示起点，100%表示终点

3.1.2图片透明度渐变

background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1)),url(images/....);

3.1.3重复线性渐变

repeating-linear-gradient();

3.2径向渐变

background:radial-gradient(/ at ,,....);

3.2.1注： 

1.

定义径向渐变形状。circle(圆形),ellipse(椭圆形)

2.

定义径向渐变的圆心位置，默认center

3.

设置渐变半径大小，设置数值、百分比、关键字

关键字有closest-side指定径向渐变的半径长度为从圆心到离圆心最近的边;

dosest-corner指定径向渐变的半径长度从圆心到离圆心最近的角;

farthest-side指定圆心到离圆心最远的边;

farthest-corner默认值，指定圆心到离圆心最远的角

4.阴影属性

4.1文字阴影

text-shadow:h-shadow v-shadow blur color;

参数 说明
h-shadow 必须，阴影的水平距离 右下+
v-shadow 必须，阴影的垂直距离 左上-
blur 可选，模糊半径
color 可选，颜色

4.2盒子阴影

box-shadow:h-shadow v-shadow blur spread color;

参数 说明
h-shadow 必须，阴影的水平距离 右下+
v-shadow 必须，阴影的垂直距离 左上-
blur 可选，模糊半径
spread 可选，阴影大小
color 可选，颜色

七、盒子模型

1.盒子大小

实际大小：内容content+填充padding+边框border

空间大小：内容content+填充padding+边框border+边界margin

盒子宽度：内容宽度+左边距+右边距+左边框宽度+右边框宽度

盒子高度：内容高度+上边距+下边距+上边框宽度+下边框宽度

盒子实际占据宽度：盒子实际宽度+左外边距+右外边距

盒子实际占据高度：盒子实际高度+上外边距+上外边距

2.盒子之间的关系

2.1垂直盒子

两个盒子之间的垂直距离是两者中的较大值

2.2水平盒子

两个盒子之间的水平距离是两者之和

2.3重叠盒子

margin设置为负数，元素向相反方向移动，甚至覆盖在另外的元素上

3.标准文档流

3.1常见的块状标签

标题（h1—h6） 段落（

）水平线（

）列表（