网页前端设计技术 第1篇
例如：
例如：
例如:
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
现在文件拷贝到项目中
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
设置背面是否可见 例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
例如：
网页前端设计技术 第2篇
例如：
汉字转拼音的网站:
网页前端设计技术 第3篇
网页分成三个部分： 结构(HTML) 表现(css) 行为(JavaScript)
网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式而最终我们能看到只是网页的最上边一层，总之一句话，CSS用来设置网页中元素的样式
在标签内部通过style属性来设置元素的样式
问题: 使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便 注意:开发时绝对不要使用内联样式
将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。 内部样式表更加方便对样式进行复用
问题: 我们的内部样式表只能对一个网页起作用它里边的样式不能跨页面进行复用
可以将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的CSS文件。 外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式可以在不同页面之间进行复用
将样式编写到外部的css文件中，可以使用到浏览器的缓存机制从而加快网页的加载速度，提高用户的体验。
CSS中的注释，注释中的内容会自动被浏览器所忽略
选择器，通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的p元素
声明块，通过声明块来指定要为元素设置的样式 声明块由一个一个的声明组成，声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以:连接，以;结尾
作用: 根据标签名来选中指定的元素
语法: 标签名{}
例子: p{} h{} div{}
作用: 根据元素的id属性值选中一个元素
语法: #id属性值{}
例子: #boxf{} #red{}
作用: 根据元素的class属性值选中一组元素
语法: .class属性值
同一个元素可以指定多个class,多个class之间用空格隔开
注意点: 交集选择器中如果有元素选择器，必须使用元素选择器开头
作用: 同时选择多个选择器对应的元素
语法: 选择器1,选择器2,选择器3,选择器n{} 例如: #b1,.p1,h1,span,{}
注意： 1.并集选择器，我们一般竖着写 2.任何形式的选择器，都可以作为并集选择器的一部分 3.并集选择器，通常用于集体声明，可以缩小样式表体积
作用: 选中指定元素中符合要求的后代元素
语法: 选择器1 选择器2 选择器3 选择器n{} 例如: #b1 .p1 h1 span div .red{}
注意： 1.后代选择器最终选中的是后代，不选中祖先 2.儿子、孙子、重孙都属于后代 3.结构一定要符合之前讲的html嵌套要求，例如:不能p元素中写h1~h6
作用: 选中指定元素中符合要求的子元素(儿子元素)。(先写父，再写子)
语法: 选择器1>选择器2>选择器3>选择器n{} 例如: #b1>.p1>h1>span>div>.red{}
注意： 1.子代选择器最终选择的是子代，不是父级 2.子、孙子、重孙子、重重孙子…统称为后代，子就是指儿子。
作用: 选择属性值符合一定要求的选择器
语法:
例子:
什么是伪类？ 很像类，但不是类，是元素特殊状态的一种描述。
作用： 选中特殊状态的元素
如何理解“伪”？- 虚假的，不是真实的 如何理解“伪类”?- 像类(class)，但不是类，是元素的一种特殊的状态。
:link超链接未被访问的状态
:visited超链接访问过的状态
:hover鼠标悬停在元素上的状态
:active元素激活的状态
什么是激活状态?——按下鼠标不松开 注意：遵循LVHA的顺序，即:link,visited,hover,active。
:focus 获取焦点的元素
网页前端设计技术 第4篇
meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开 description 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中
title标签的内容会作为搜索结果的超链接上的文字显示
总结：
图片标签用于向当前页面中引入一个外部图片 使用 img标签来引入外部图片，img标签是一个自结束标签 img这种元素属于替换元素(块和行内元素之间，具有两种元素的特点)
属性: ○ src 属性指定的是外部图片的路径(路径规则和超链接是一样的) ○ alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示 alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示alt的描述 ○ width 图片的宽度 (单位是像素) ○ height 图片的高度 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意: 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大但是在移动端，经常需要对图片进行缩放(大图缩小)
内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
audio 标签用来向页面中引入一个外部的音频文件的音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性: ○ controls 是否允许用户控制播放 ○ autoplay 音频文件是否自动播放 如果设置了 autoplay 则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放 ○ loop 音乐是否循环播放
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件路径
使用video标签来向网页中引入一个视频，使用方式和audio基本上是一样的