18910140161

Css

首页 >> 前端开发 >> Css

html.css .

顺晟科技

2022-09-16 10:46:12

156

html 主要的标签的介绍：

<head></head>标签里面是放的是思想,设置浏览器用的，是人看不到的

编码字符集：gb2312 国家编码字符集（简体，亚裔字符集） gbk（gb2312+繁体）

unicode 是万国码，包括了所有国家的语言 uft-8 是 unicode  

一般放的是<meta charsrt = "utf-8"> 自闭和标签

<body></body>是展示给用户看的  所有的标签是写在body里面

 

HTML常用标签

  1. 排版标签

    • 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签

    • 1.标题标签(重点)

      • 为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题

      • 标题标签语义：作为标题使用，并且依据重要性递减

      • 其基本语法格式如下

        • < h1> 文本内容</ h1> < h2> 文本内容</ h2> < h3> 文本内容</ h3>

        • < h4> 文本内容</ h4> < h5> 文本内容</ h5> < h6> 文本内容</ h6>

      • 加了标题的文字会变的加粗，字号也会依次变大

    • 2.段落标签p(重点)

      • 作用语义:

        • 可以把HTML文档分割为若干段落

        • 在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干段落，而段落的标签就是

          • < p> 文本内容< /p>

    • 3.水平线标签hr

      • 在网页中常常看到一些水平线段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

      • < hr /> 就是创建 横跨网页水平线的标签，其基本语法格式如下

        • < hr /> 是单标签

        • 在网页中显示默认样式的水平线

    • 换行标签br

      • 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

        • < br/>

    • div 和 span标准(重点)

      • div span 是没有语义的， 是我们网页布局主要的2个盒子，想必你听过css+div

      • 语法格式:

        • < div> 这是头部 < /div> < span> 今日价格 < /span>

        • 他们两个都是盒子，用来装我们网页元素的，只不过他们有区别，现在我们主要记住使用方法和特定就好了

          • div标签 用来布局的， 但是现在一行只能放一个div

          • span 标签，用来布局的，一行上可以放多个span

  2. 文本格式化标签(重点)

    • 在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时候就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示

      • < b> < /b> < strong> < /strong> 文体以粗体方式显示(XHTML推荐使用strong)

      • < i>< /i> < em></ em> 文字以斜体方式显示(XHTML推荐使用em)

      • < s>< /s> < del>< /del> 文字以加删除线方式显示(XHTML推荐使用del)

      • < u>< /u> < ins></ ins> 文字以加下划线方式显示(XHTML不赞成使用u)

    • 区别:

      • b 只是加粗，strong除了可以加粗还有强调的意思，语义更强烈

  3. 标签属性(重点)

    • 使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下

      • < 标签名 属性1 =“属性值1”,属性2="属性值2"....> 内容 < /标签名>

  4. 图像标签img(重点)

    • 要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签< img/>以及和他相关的属性

    • 语法如下

      • < img src = "图像URL" />

      • 该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性

      • src 属性值 URL 图像的路径

      • alt 属性值 文本 图像不能显示时的替换文本

      • title 属性值 文本 鼠标悬停时显示的内容

      • width 属性值 像素 设置图像的宽度

      • height 属性值 像素 设置图像的高度

      • border 属性值 数字 设置图像边框的宽度

    • 注意：

      • 1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面

      • 2.属性之间不分先后顺序，标签名与属性 属性与属性之间均以空格分开

      • 3.任何标签的属性都有默认值，省略该属性则取默认值

      • 4.采取 键值对的格式 key = "value"

  5. 链接标签(重点)

    • 在HTML中创建超链接非常简单，只需用标签把文字包括起来就好

    • 语法格式：

      • < a href ="跳转目标", target="目标窗口的弹出方式"> 文本或图像 < /a>

      • 属性 href 作用:用于指定连接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能

      • 属性target 作用：用于指定链接页面的打开方式，其取值self和_ blank两种，其中self为默认值，_blank为在新窗口中打开方式

    • 注意：

      • 1.外部链接 需要添加 http://www.baidu.com

      • 2.内部链接 直接链接内部页面名称即可 比如< a href = \'index.html\'> 首页 < /a>

      • 3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为"#"(即href ="#")表示该链接暂时为一个空链接

      • 4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

  6. 注释标签

    • 在HTML中还有一种特殊的标签——注释标签，如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签

    • 简单解释

      • 注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看原代码时就能看到

    • 语法格式：

      • < !--注释语句--> 快捷键是 ctrl + / 或者 ctrl+shift +/

  7. 路径(重点)

    • 实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们

    • 目录文件夹

      • 就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等待

      • 根目录：打开目录文件夹的第一层 就是根目录

      • 页面中的图片会非常多，通常我们再新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用路径的方式来指定图像文件的位置。路径可以分为：相对路径和绝对路径

        • 相对路径

          • 以引用文件之网页所在位置为参考基础，而建立出的目录路径，因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径

          • 同一级路径

            • 图片引用的时候，直接写图片的名字就可以了

          • 下一级路径

          • 上一级路径: ../

        • 绝对路径

          • 绝对路径以Web站点根目录为参考基础的目录路径，之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

            • ”D:\web\img\logo.gif“

            • 注意：它的写法特别是符合\并不是相对路径的/

    • 拓展阅读

      • 1.锚点定位(难点)

        • 通过创建锚点链接，用户能够快速定位到目标内容

        • 创建.锚点链接分为两步

          • 1.使用相应的id名标注跳转目标的位置

            • < h3 id = \'two\'> 第2集< /h3>

          • 2.使用< a href = "#id名">链接文本 < /a>创建链接文本(被点击的)

            • < a href = \'#two\'>

      • 2.base标签

        • 语法

          • < base target=\'_blank\'> 使所有的链接都在新窗口打开

        • 总结：

          • 1.base可以设置整体链接的打开状态

          • 2.base写到 < head></ head> 之间

          • 3.把所有的连接 都默认添加 target = "_blank"

      • 3.预格式化文本pre标签

        • < pre> 标签可定义预格式化的文本，被包围在< pre>标签元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体

        • < pre> 对空行和空格 进行控制 </ pre>

        • 有了这个标签，里面的文字，会按照我们书写的模式显示，不需要段落和换行标签了。但是，比较少用，因为不好整体控制

      • 4.特殊字符

        • 一些特殊的符号，我们在html里面很难或者不方便直接使用，我们此时可以使用下面的替代代码

          • & nbsp; 空格 & lt; 小于号< & gt; 大于号>

          • 虽然有很多，但是我们平时用的比较少，大家重点记住 空格 大于号 小于号 就可以了，剩下的可上网搜 html特殊字符

        • 总结：

          • 1.是以运算符&开头，以分号运算符;结尾

          • 2.他们不是标签，而是符号

          • 3.HTML中不能使用小于号< 和大于号> 特殊字符，浏览器会将它们作为标签解析，若要正确显示，在HTML源代码中使用字符实体

    • 表格table

      • 表格作用：

        • 存在即是合理的。表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据，因为它可以让数据显示的非常的规整，可读性非常好

        • 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然div布局也可以做到，但是总没有表格来得方便

      • 1.创建表格

        • 在HTML网页中，要想创建表格，就需要使用表格相关的标签

        • 创建表格的基本语法

          • < table>

            • < tr>

              • < td> 单元格内的文字 < /td>

            • < /tr>

          • < /table>

          • 要深刻体会表格、行、单元格他们的构成

        • 在上面的语法中包含基本的三对HTML标签，分别为table,tr,td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

          • 1.table用于定义一个表格标签

          • 2.tr标签用于定义表格中的行，必须嵌套在table标签中

          • 3.td用于定义表格中的单元格，必须嵌套在< tr> < /tr>标签中

          • 4.字母td指表格数据(table data),即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的

        • 总结：

          • 表格的主要目的是用来显示特殊数据的

          • 一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成，没有列的标签

          • < tr> < /tr>中只能嵌套 < td> < /td>类的单元格

          • < td>< /td>标签，他就像一个容器，可以容纳所有的元素

      • 2.表格属性

        • 表格有部分属性我们不常用，这里重点记住cellspacing, cellpadding

        • border 设置表格的边框(默认border=0无边框) 像素值

        • cellspacing 设置单元格与单元格之间的空白间隔 像素值(默认为2像素)

        • cellpadding设置单元格内容与单元格边框之间的空白间隔,像素值(默认1像素)

        • width 设置表格的宽度 像素值

        • height 设置表格的高度， 像素值

        • align 设置表格在网页中的水平对齐方式 left、center、right

        • 我们经常有个说法，是三参为0，平时开发的我们这三个参数 border cellpadding cellspacing为0

      • 3.表头单元格标签th

        • 作用：

          • 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中

        • 语法：

          • 只需用表头标签< th>< /th>替代相应的单元格标签< td>< /td>即可

      • 4.表格标题caption

        • 定义和用法

          • < table>

            • < caption>我是表格标题 < /caption>

          • < /table>

        • 注意：

          • 1.caption元素定义表格标题，通常这个标题会被居中且显示于表格之上

          • 2.caption标签必须紧随table标签之后

          • 3.这个标签只存在 表格里面才有意义

      • 5.合并单元格(难点)

        • 5.1合并单元格的2种方式

          • 跨行合并： rowspan = "合并单元格的个数"

          • 跨列合并: colspan = "合并单元格的个数"

        • 5.2合并单元格顺序

          • 合并的顺序我们按照 先上后下 先左后右的顺序，跟我们以前学习汉字的书写顺序完全一致

        • 5.3 合并单元格三步曲

          • 1.先确定是跨行还是跨列合并

          • 2.根据先上 后下 先左后右的原则找到目标单元格，然后写上合并方式 还有要合并的单元格数量 比如：

            • < td colspan ="3"> < /td>

          • 3.删除多余的单元格

      • 6.总结表格

        • < table>< /table> 表格标签 就是一个四方的盒子

        • < tr></ tr> 表格行标签 行标签要再table标签内部才有意义

        • < td>< /td> 单元格标签 单元格标签是个容器级元素，可以放任何东西

        • < th>< /th> 表头单元格标签 它还是一个单元格，但是里面的文字会居中且加粗

        • < caption></ caption> 表格标题标签 表格的标题，跟着表格一起走，和表格居中对齐

        • clospan和rowspan 合并属性 用来合并单元格的

        • 好处优点

          • 1.表格提供了HTML中定义表格式数据的方法

          • 2.表格中由行中的单元格组成

          • 3.表格中没有列元素，列的个数取决于行的单元格个数

          • 4.表格不要纠结于外观，那是css的作用

          • 5.表格的学习要求:能手写表格结构，并且能简单合并单元格

      • 7.表格划分结构(了解)

        • 对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用：thead,tbody,tfoot来标注，这样更好的分清表格结构

        • 注意：

          • 1 < thead>< /thead>：用于定义表格的头部，用来放标题之类的东西。< thead>内部必须拥有 < tr> 标签

          • 2.< tbody>< /tbody>：用于定义表格的主体。放数据本体

          • 3.< tfoot>< /tfoot>放表格的脚注之类

          • 4.以上标签都是放到table标签中

  8. 列表标签(重点)

    • 列表标签介绍

      • 表格是用来显示数据的，那么列表就是用来布局的，因为非常整齐和自由

      • 概率：

        • 容器里面装载着结构，样式一致的文字或图表的一种形式 叫列表

      • 特点：

        • 列表最大的特点就是整齐、整洁、有序、跟表格类似，但是他可组合自由度会更高

    • 无序列表ul(重点)

      • 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

        • < ul>

          • < li> 列表项1< /li>

          • < li> 列表项2< /li>

          • < li> 列表项3< /li>

          • .....

        • < /ul>

      • 总结

        • 1.< ul></ ul>中只能嵌套< li></ li>，直接在< ul></ ul>标签中输入其他标签或者文字的做法是不被允许的

        • 2.< li>与< /li>之间相当于一个容器，可以容纳所有元素

        • 3.无序列表会带有自己样式属性，放下那个样式，一会让css来

    • 有序列表ol(了解)

      • 有序列表即为有排序顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下

        • < ol>

          • < li> 列表项1< /li>

          • < li> 列表项2< /li>

          • < li> 列表项3< /li>

          • .....

        • < /ol>

      • 所有特性基本与ul一致。但是实际中比无序列表用的少很多

    • 自定义列表(理解)

      • 定义列表常用于对术语或名称进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下

        • < dl>

          • < dt>名词1< /dt>

          • < dd>名词1解释< /dd>

          • < dd>名词1解释< /dd>

          • .....

          • < dt>名词2< /dt>

          • < dd>名词2解释< /dd>

          • < dd>名词2解释< /dd>

        • < /dl>

    • 列表总结

      • < ul> </ ul> 无序标签 里面只能包含li 没有顺序，我们以后布局中最常用的列表

      • < ol>< /ol> 有序标签 里面只能包含li 有顺序，使用情况较少

      • < dl> < /dl> 自定义列表 里面有2个兄弟 dt和dd

  9. 表单标签(掌握)

    • 目标：

      • 能写出最常用的注册类表单

      • 能说出input表单常见属性

    • 作用：

      • 表单目的是为了收集用户信息

      • 在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单

      • 在HTML中，一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成

    • 1.input控件(重点)

      • 语法：

        • < input type = "属性值" value = "你好">

          • input 输入的意思

          • < input/>标签为单标签

          • type 属性设置不同的属性值用来指定不同的控件类型

          • 除 了type属性还有别的属性

        • 常用属性

          • 属性 属性值 描述

          • type text 单行文本输入框

            • password 密码输入框

            • radio 单选按钮

            • checkbox 复选框

            • button 普通按钮

            • submit 提交按钮

            • reset 重置按钮

            • image 图像形式的提交按钮

            • file 文件域

          • name 由用户自定义 控件的名称

          • value 由用户自定义 input控件中的默认文本值

          • size 正整数 input控件在页面中的显示宽度

          • checked checked 定义选择控件默认被选中的项

          • maxlength 正整数 控件允许输入的最多字符数

      • 1.type属性

        • 这个属性通过改变值，可以决定了你属于那种input表单

        • 比如 type = "text" 就表示文本框可以做用户名，昵称等

        • 比如 type = \'password\' 就是表示密码框， 用户输入的内容是不可见的

          • 用户名：< input type ="text" />

          • 密码： < input type ="password" />

      • 2.value属性

        • 用户名: < input type ="text" name = "uesrname" value ="请输入用户名" />

        • value默认的文本值，有些表单想刚打开页面就默认显示几个文字，就可以通过这个value来设置

      • 3.name属性

        • 用户名: < input type ="text" name = "uesrname" />

        • name表单的名字，这样，后台可以通过这个name属性找到这个表单，页面中的表单很多，name主要作用就是用于区别不同的表单

          • name 属性后面的值，是我们自己定义的

          • radion 如果是一组，我们必须给他们命名相同的名字name，这样就可以多个选其中一个啦

            • < input type ="radio" name = \'sex\' />男

            • < input type = "radio" name = \'sex\' />女

          • name属性，我们现在用的比较少，但是当我们学ajax和后台的时候。是必须的

      • 4.checked属性

        • 表示默认选中状态。 较常见于 单选按钮和复选按钮

        • 性别：

        • < input type = "radion" name = "sex" value = "男" checked="checked" /> 男

        • < input type = "radion" name = "sex" value = "女" /> 女

        • 上面这个，表示就默认选中了男 这个单选按钮

      • 5.普通按钮 需要写value值

        • < input type = "button" value = "获取短信验证码">

      • 6.图片提交按钮 里面必须包含src属性

        • < input type = "image" src ="images/btn.png">

      • input 属性小结

        • type 表单类型 用来指定不同的控件类型

        • value 表单值 表单里面默认显示的文本

        • name 表单名字 页面中的表单很多，name主要作用就是区别不同的表单

        • checked 默认选中 表示那个单选或者复选按钮一开始就被选中了

    • 2label标签(理解)

      • 目标：

        • label标签主要目的是为了提高用户体验。为用户提高最优秀的服务

      • 概念

        • label标签为input元素定义标注(标签)

      • 作用:

        • 用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获取输入焦点

      • 如何绑定元素

        • 1.第一种用户就是用label直接包括input表单

          • < label> 用户名：< input type=\'redion\' name =\'username\' value=\'请输入用户名\'> < /label>

          • 适合单个表单选择

        • 2.第二种用法for属性规定label与哪个表单元素绑定

          • < label for = "sex"> 男 < /label>

          • < input type=\'radio\' name = \'sex\' id =\'sex\'>

    • 3.textarea控件(文本域)

      • 语法:

        • < textarea cols="每行中的字符数" rows="显示的行数">

        • 文本内容

        • < /textarea>

      • 作用:

        • 通过textarea控件可以轻松地创建多行文本输入框

      • 文本框和文本域区别

        • < input type = \'text\'>

          • 文本框 只能显示一行文本 单标签，通过value显示默认值

          • 用于场景： 用户名、昵称、密码等

        • textarea

          • 文本域 可以显示多行文本 双标签 默认值写到标签中间

          • 用于场景： 留言板

    • 4.select下拉列表

      • 目的

        • 如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表

      • 语法：

        • < select>

          • < option>选项1< /option>

          • < option>选项2< /option>

          • < option>选项3< /option>

          • .....

        • < /select>

      • 注意:

        • 1.< select>< /select>中至少应包含一对< option> < /option>

        • 2.在option中定义selected = "selected"时，当前项即为默认选中项

    • form表单域

      • 收集的用户信息是怎么传递给服务器

        • 通过form表单域

      • 目的：

        • 在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器

      • 语法:

        • < form action="url地址" method ="提交方式" name="表单名称">

        • 各种表单控件

        • < /form>

      • 常用属性

        • 属性 属性值 作用

        • action url地址 用于指定接收并处理表单数据的服务器程序的url地址

        • method get/post 用于设置表单数据的提交方式，其取值为get或post

        • name 名称 用于指定表单的名称，以区分同一个页面中的多个表单

      • 注意：

        • 每个表单都应该有自己的表单域。我们现在做页面，不写看不到效果，但是如果后面学ajax后台交互的时候，必须需要form表单域

    • 团队约定

      • 元素属性使用双引号语法

      • 元素属性可以写上的都写上

      •  

 

 

 

CSS网页的美容师

  1. css的最大贡献：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS

  2. CSS初识

    • 概念：CSS通常称为CSS样式表或层叠样式表(级联样式表)

    • 作用：

      • 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式

      • CSS以HTML为基础，提高了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式

  3. 引入CSS样式表

    • 1.行内式(内联样式)

      • 概念：称为内样式、行间样式、内嵌样式，是通过标签的style属性来设置元素的样式

      • 基本语法格式如下：

        • <标签名 style = "属性1：属性值1; 属性2: 属性值2;">内容</标签名>

        • 实际上任何HTML标签都拥有style属性，用来设置行内式

        • 案例：

          • < div style ="color : red; font-size=12px;">青春不常在，抓紧谈恋爱< /div>

        • 注意:

          • style其实就是标签的属性

          • 样式属性和值中间是:

          • 多组属性值之间用;隔开

          • 只能控制当前的标签和及其嵌套在其中的字标签，造成代码冗余

        • 缺点：

          • 没有实现样式和结构相分离

    • 2.内部样式表(内嵌样式表)：

      • 概念:

        • 称内嵌式， 是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

      • 其基本语法格式如下：

        • < head>

        • < style type="text/CSS">

          • 选择器{

          • 属性1: 属性值1;

          • 属性2：属性值2；

          • 属性3: 属性值3

          • }

        • < /head>

        • 举例

          • < style>

          • div{

          • color:red;

          • font-size:12px;

          • }

          • < /style>

      • 注意：

        • style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方

        • type = "text/css"在HTML5中可以省略

    • 外部样式表(外链式)

      • 概念:

        • 称链入式 是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式文件链接到HTML文档中

      • 其基本语法格式如下：

        • < head>

        • < link rel="stylesheet" type="text/css" href = "css文件路径">

        • < /head>

      • 注意:

        • link是个单标签

        • link标签需要放在head头部标签中，并且指定link标签的三个属性

      • 属性

        • rel ：定义当前文档于被链接文档之间的练习，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件

        • type:定义所链接文档的类型，在这里需要指定"text/css"，表示链接的外部文件为CSS样式表，我们都可以省略

        • href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

    • 三种样式表总结

      • 行内样式 优点:书写方便,权重高 缺点:没有实现样式和结构相分离 使用较少

        • 控制范围: 控制一个标签(较少)

      • 内部样式表

        • 优点:部分结构和样式相分离 缺点:没有彻底分离 使用较多 控制范围:控制一个页面

      • 外部样式表

        • 优点: 完全实现结构和样式相分离 缺点:需要引入 使用情况:最多，强制推荐

        • 控制范围: 控制整个站点(多)

    • 总结：

      • 使用HTML时，需要遵循一定的规范。CSS也是如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS颜色规则

      • 1.选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式

      • 2.属性和属性值以"键值对"的形式出现

      • 3.属性是对指定的对象的样式属性，例如字体大小、文本颜色等

      • 4.属性和属性值之间用英文":"连接

      • 5.多个"键值对"之间用英文";"进行区分

  4. CSS选择器

    • 1.CSS选择器作用(重点)

      • 找到特点的HTML页面元素

      • CSS选择器分为基础选择器和复合选择器

    • 2.CSS基础选择器

      • 2.1标签选择器

        • 概念:标签选择器(元素选择器)是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS格式

        • 语法:

          • 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值.;}

        • 作用：标签选择器可以把某一类标签全部选择出来，比如选择所有的div标签和所有的span标签

        • 优点：是能快速为页面中同类型的标签统一样式

        • 缺点：不能设计差异化样式

      • 2.2类选择器

        • 类选择器使用"."(英文点号)进行标识，后面紧跟类名

        • 语法：

          • 类名选择器

            • .类名{

            • 属性1:属性值1;

            • 属性2:属性值2;

            • 属性3:属性值;

            • }

          • 标签

            • < p class="类名">< /p>

        • 优点：

          • 可以为元素对象定义单独或相同的样式。可以选择一个或多个标签

        • 注意：

          • 1.类名选择器使用"."(英文点号)进行标识，后面紧跟类名

          • 2.长名称或词组可以使用中横线来为选择器命名

          • 3.不要纯数字、中文等命名，尽量使用英文字母来表示

      • 2.3id选择器

        • id选择器使用#进行 标识，后面紧跟id名

          • 其基本语法格式如下:

            • id选择器:

              • #id{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

            • 标签

              • < p id="id名">< /p>

          • 元素的id值是唯一的，只能对应于文档中某一个具体的元素

          • 用法基本和类选择器相同

        • id选择器和类选择器区别

          • W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class

            • 类选择器(class)好比人的名字，是可以多次重复使用的

            • id选择器 好比人的身份证号码，全中国是唯一的，不得重复,只能使用一次

          • id选择器和类选择器最大的不同在于使用次数上

          • 类选择器我们在修改样式中，用的最多

          • id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript搭配使用

      • 2.4通配符选择器

        • 概念

          • 通配符选择器用* 号表示，* 就是所有的，他是所有选择器中作用范围最广的，能匹配页面所有的元素

        • 其基本语法格式如下：

          • *{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

          • 举例：使用通配符选择器定义CSS样式，清除所有HTML标签的默认边距

            • *{

            • margin:0; #定义外边距

            • padding:0; 定义内边距

            • }

        • 注意： 会匹配页面所有的元素，降低页面响应速度，不建议随便使用

      • 基础选择器总结

        • 标签选择器

          • 可以选出所有相同的标签，比如p 缺点:不能差异化选择 使用情况:较多

          • 用法: p{color:red;}

        • 类选择器:

          • 可以选出一个或者多个标签 缺点:可以根据需求选择 使用情况：非常多

          • 用法 .nav{color:red;}

        • id选择器

          • 一次只能选择器1个标签 缺点:只能使用一次 使用情况：不推荐使用

          • 用法： #nav{color:red;}

        • 通配符选择器

          • 选择所有标签 缺点：选择的太多，有部分不需要 使用情况:不推荐使用

          • 用法 *{color:red;}

        • 基础选择器我们一共学了4个，每个都有自己的价值；可能在某个地方都能用到，但是如果说，一定要找个最常用的，那么肯定是类选择器

  5. CSS字体样式

    • 1.font字体

      • 1.1 font-size大小

        • 作用：font-size属性用于设置字号

        • 举例

          • p{

          • font-size :20px;

          • }

      • 单位:

        • 可以使用相对长度单位，也可以使用绝对长度单位

        • 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位比较少

        • 相对长度单位

          • em 相对于当前对象内文本的字体尺寸

          • px 像素，最常用，推荐使用

        • 绝对长度单位

          • in 英寸

          • cm 厘米

      • 注意：

        • 我们文字大小以后，基本就使用px了，其他单位很少使用

        • 谷歌浏览器默认的文字大小为16px

        • 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小，一般给body指定整个页面文字大小

    • 1.2font-family:字体

      • 作用：font-family属性用于设置哪一种字体

        • p{font-family:\'微软雅黑\';}

      • 网页中常用的字体有宋体、微软雅黑、黑体等，列如将网页中所有段落文本的字体设置为微软雅黑

      • 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直接找到合适的字体

        • {font-family:\'微软雅黑\',\'Microsoft Yahei\';}

      • 注意：

        • 各种字体之间必须使用英文状态下的逗号隔开

        • 中文字体需要加英文状态下的引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前

        • 如果字体名中包含空格、#、$等符合，则该字体必须加英文状态下的单引号或双引号

      • Unicode字体

        • 在CSS中设置字体名称，直接写中文是可以的，但是在文件编码(GB2312、UTF-8)不匹配时会产生乱码的错误

        • xp系统不支持类型微软雅黑的字体

        • 解决：

          • 方案一：你可以使用英文来替代 比如font-family:\'Microsoft Yahei\'

          • 方案二: 在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确解析的

    • 1.3font-weight:字体粗细

      • 在html 使用b和strong标签是文本加粗

      • 可以使用css来实现，但是css是没有语义的

        • 属性值 描述

        • normal 默认值(不加粗的)

        • bold 定义粗体(加粗的)

        • 100~900 400等同于normal，而700等同于bold，我们重点记住这句话

      • 我们平时更喜欢用数字来表示加粗和不加粗

    • 1.4font-style：字体风格

      • 在html中使用i和em标签使字体倾斜

      • 可以使用css来实现，但是css是没有语义的

      • font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，属性值如下

        • 属性 作用

        • normal 默认值，浏览器会显示标准的字体样式

        • italic 浏览器会显示斜体的字体样式

        • oblique 浏览器会显示倾斜的字体样式

    • 1.5font:综合设置字体样式(重点)

      • font属性用于对字体样式进行综合设置

      • 基本语法格式如下

        • 选择器{font:font-style,font-weight,font-size/line-height,font-family;}

      • 注意:

        • 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开

        • 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用

      • font总结

        • 属性 表示 注意点

        • font-size 字号 我们通常用的单位是px像素，一定要跟上单位

        • font-family 字体 我们直接复制就可以了，按照团队约定来

        • font-weight 字体粗细 记住加粗是700或者bold 不加粗是normal或者400

        • font-style 字体样式 记住倾斜是italic 不倾斜是normal

        • font 字体连写 1.字体连写是有顺序的 不能随意换位置 2.其中字号和字体必须同时出现

  6. CSS外观属性

    • 1.color：文本颜色

      • 作用：color属性用于定义文本的颜色

      • 其取值方式有如下3种

        • 预定义的颜色值 red，green，blue还有我们的御用色pink

        • 十六进制 #FF0000 #FF6600 #29D794

        • RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)

      • 注意：我们实际工作中，用十六进制的写法是最多的，而且我们更喜欢简写方式比如#f00代表红色

    • 2.line-height:行间距

      • 作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高

      • 单位：

        • line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

      • 一般情况下，行距比字号大7，8像素左右就可以了

        • line-height：24px

    • 3.text-align:文本水平对齐方式

      • 作用:text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

      • 其可用属性如下

        • left 左对齐

        • right 右对齐

        • center 居中对齐

      • 注意:是让盒子里面的内容水平居中，而不是让盒子居中对齐

    • 4.text-indent:首行缩进

      • 作用:

        • text-indent属性用于设置首行文本的缩进

      • 属性值:

        • 其属性值可为不同单位的数值，em字符宽度的倍数，或相对于浏览器窗口宽度的百分比%，允许使用负值

        • 建议使用em作为设置单位

        • 1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度

    • 5.text-decoration:文本的装饰

      • text-decoration 通常我们用于给链接修改装饰效果

      • 取值如下：

        • none: 默认，定义标准的文本，取消下划线(最常用)

        • underline 定义文本下的一条线，下划线也是我们链接自带的(常用)

        • overline 定义文本上的一条线(不同)

        • line-through 定义穿过文本下的一条线(不常用)

    • 6.CSS外观属性总结

      • 属性 表示 注意点

      • color 颜色 我们通常用十六进制 比如而且是简写形式 #fff

      • line-height 行高 控制行与行之间的距离

      • text-align 水平对齐 可以设定文字水平的对齐方式

      • text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离，text-indent:2em

      • text-decoration 文本修饰 记住添加下划线underline 和取消下划线none

    • 7.sublime快捷操作emmet语法

      • Emmet的前身是Zen coding，它使用缩写，来提高html/css的编写速度

        • 1.生成标签 直接输入标签名按tab键即可比如div然后tab键 就可以生成< div>< /div>

        • 2.如果想要生成多个相同标签，加上*就可以了比如div *3就可以快速生成3个div

        • 3.如果有父子级关系的标签，可以用>比如ul>li就可以了

        • 4.如果有兄弟关系的标签，用+就可以了 比如div+p

        • 5.如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了

        • 6.如果生成的div类名是有顺序的，可以用自增符合$

          • .demo$*3

            • 生成 < div class="demo1"> < /div>

            • < div class="demo2"> < /div>

            • < div class="demo3"> < /div>

  7. CSS复合选择器

    • 为什么要学习css复合选择器

      • CSS选择器分为基础选择器和复合选择器，但是基础选择器不能满足我们实际开发中，快速高效的选择标签

        • 目的是为了可以选择更准确更精细的目标元素标签

        • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

    • 1.后代选择器(重点)

      • 概念:

        • 后代选择器又称为包含选择器

      • 作用：

        • 用来选择元素或元素组的子孙后代

      • 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子

        • 父级 子级(属性:属性值; 属性:属性值；)

      • 语法:

        • .class h3{color:red; font-size:16px;}

      • 当标签发生嵌套时，内存标签就成为外层标签的后代

      • 子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签

    • 2.子元素选择器

      • 作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素

      • 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个> 进行连接

      • 语法

        • .class>h3{color:red;font-size:14px;}

        • 说明h3一定是.demo的儿子

    • 3.交集选择器

      • 条件

        • 交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点

      • 语法:

        • h3.class{color;red; font-size:25px}

        • 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

          • 如h3.special

      • 交集选择器是并且的意思。即...又的意思

        • 比如: p.one选择的是: 类名为.one的p标签

    • 4.并集选择器(重点)

      • 应用:

        • 如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的css样式

      • 并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的

      • 语法:

        • .class,h3{color:red; font-size:25px;}

      • 任何形式的选择器(包括标签选择器，class类选择器，id选择器)，都可以作为并集选择器的一部分

      • 并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思

        • 比如.one,p,#text{color:red;}

          • 表示.one和p和#test 这三个选择器都会执行颜色为红色。

          • 通常用于集体声明，就是因为这些选择器里面的样式相同

    • 链接伪类选择器（重点）

      • 伪类选择器:

        • 为了和我们刚才学的类选择器相区别 类选择器是一个点 比如.demo{}, 而我们的伪类用2个点就是冒号 比如:link{}

      • 作用：

        • 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。比如可以选择第1个，第n个元素，因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器

          • a:link 未访问的链接

          • a:visited 已访问的链接

          • a:hover 鼠标移动到链接上

          • a:active 选定的链接

      • 注意：

        • 写的时候，他们的顺序尽量不要颠倒，按照lvha的顺序，否则可能引起错误

        • 因为叫链接伪类，所以都是利用交集选择器 a:link a:hover

        • 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式

          • a{font-weight:700; font-size:16px;color:gray;}

          • a:hover{color:red;} :hover是链接伪类选择器， 鼠标经过

            • 鼠标经过的时候，由原来的灰色变成红色

    • 复合选择器总结

      • 后代选择器

        • 用来选择元素后代 特殊：是选择所有的子孙后代， 使用情况 较多 隔开符合是空格

        • 用法 .nav a

      • 子代选择器

        • 选择最近一级元素 只选亲儿子 使用情况 较少 隔开符合是> 用法是 .nav>p

      • 交集选择器

        • 选择两个标签交集的部分 既是又是 使用情况 较少 没有符号 用法p.one

      • 并集选择器

        • 选择某些相同样式的选择器 可以用于集体声明 使用情况较多 隔开符号是逗号

        • 用法 .nav,.header

      • 链接伪类选择器

        • 给链接更改状态 使用情况较多 重点记住a{}和a:hover实际开发的写法

  8. 标签显示模式(display)重点

    • 什么是标签显示模式

      • 标签以什么方式进行显示，比如div自己占一行，比如span一行可以放很多个

    • 作用：

      • 我们的网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页

    • 标签的类型(分类)

      • HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素

    • 块级元素(block-level)

      • 常见的块级元素(独占一行)

        • < h1>~< h6>、< p>, < div> ,< ul> < ol> < li>等 其中< div>标签是最典型的块元素

      • 块级元素的特点：

        • 比较霸道，独占一行

        • 高度、宽度、外边距以及内边距都可以控制

        • 宽度默认是容器的100%

        • 是一个容器及盒子，里面可以放行内或者块级元素

      • 注意：

        • 只有文字才能段落，因此p里面不能放块级元素，特别是p不能放div

        • 同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签，里面不能放其他块级元素

    • 行内元素(inline-level)

      • 常见的行内元素有< a>、< strong>,< b>,< em>,< i>,< del>,< s>,< ins>,< u>,< span>其中< span>标签是最典型的行内元素，有的地方也成内联元素

      • 行内元素的特点：

        • 相邻行内元素在一行上，一行可以显示多个

        • 高、宽直接设置是无效的

        • 默认宽度就是它本身内容的宽度

        • 行内元素只能容纳文本或其他行内元素

      • 注意:

        • 链接里面不能再放链接

        • 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全

    • 行内块元素(inline-block)

      • 在行内元素中有几个特殊的标签--< img /> < input /> < td> 可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素

      • 行内块元素的特点：

        • 和相邻行内元素(行内块)在一行上，但是之间会有空白缝隙，一行可以显示多个

        • 默认宽度就是它本身内容的宽度

        • 高度、行高、外边距以及内边距都可以控制

    • 三种模式区别

      • 块级元素 一行只能放一个块级元素 可以设置宽度高度 默认宽度是容器的100%

        • 容器级别 可以包含任何标签

      • 行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 默认宽度是它本身内容的宽度

        • 只能容纳文本或者其他行内元素

      • 行内块元素 一行放多个行内块元素 可以设置宽度和高度 默认宽度是它本身内容的宽度

    • 标签显示模式转换display

      • 块转行内： display:inline

      • 行内转块: display:block

      • 块、行内元素转换为行内块: display:inline-block

      • 此阶段，我们只需关心这三个，其他的是我们后面的工作

  9. 行高那些事(line-height)

    • 行高测量： 基线与基线之间的距离

    • 单行文本垂直居中

      • 行高我们利用最多的一个地方是，可以让单行文本在盒子中垂直居中对齐

        • 文字的行高等于盒子的高度

        • 行高 = 上距离+ 内容高度 + 下距离

        • 上距离和下距离总是相等的，因此文字看上去是垂直居中的

    • 行高和高度的三种关系

      • 如果行高等于高度 文字会垂直居中

      • 如果行高大于高度 文字会偏下

      • 如果行高小于高度 文字会偏上

  10. CSS背景

    • 1.背景颜色

      • 语法: background-color:颜色值; 默认的值是transparent 透明的

    • 2.背景图片

      • 语法: background-image:none|url(url)

        • 参数 作用

        • none 无背景图(默认的)

        • url 使用绝对或相对地址指定背景图像

      • background-image: url(images/demo.jpg)

        • 我们提倡 背景图片后面的地址， url不要加引号

    • 3.背景平铺

      • 语法: background-repeat: repeat|no-repeat|repeat-x|repeat-y

      • 参数 作用

      • repeat 背景图像在纵向和横向上平铺

      • no-repeat 背景图像不平铺

      • repeat-x 背景图像在横向上平铺

      • repeat-y 背景图像在纵向平铺

    • 4.背景位置(重点)

      • 语法：

        • background-position: length||length

        • background-position: position||position

        • background-position: right top；

      • 参数： 值

        • length: 百分数| 由浮点数和单位标识符组成的长度值

        • position： top|center|bottom |left|center|right方向名称

      • 注意：

        • 必须先指定 background-image属性

        • position后面是x坐标和y坐标，可以使用方位名词或者精确单位

        • 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left 效果一致

        • 如果只指定了一个方位名称，另一个值默认居中，为50%

        • 如果只指定一个数值，那该数值用于x坐标，另一个默认是y坐标，默认居中

        • 如果指定两个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

        • 实际工作用的最多的是，就是背景图片居中对齐

        • 遇到超大图片 一般是 background-position:center top;

    • 5 背景附着

      • 背景附着就是解释背景是滚动的还是固定的

      • 语法：

        • background-attachment: scroll| fixed

      • 参数 作用

      • scroll 背景图像是随对象内容滚动

      • fixed 背景图像固定

    • 6.背景简写

      • background: 属性的值的书写顺序官方并没有强制标签的，为了可读性，建议大家如下写

      • background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

      • 语法:

        • background: transparent url(image.jpg) repeat-y scroll center top;

    • 7.背景透明(CSS3)

      • 语法: background: rgba(0,0,0,0.3)

        • 最后一个参数是alpha透明度，取值范围在0~1之间

        • 我们习惯把0.3的0省略掉，这样写background:rgba(0,0,0,.3)

        • 注意: 背景半透明是指盒子背景半透明，盒子里面的内容是不受影响

        • 因为是CSS3，所有低于ie9的版本是不支持的

    • 8.背景总结

      • 属性 作用 值

      • background-color 背景颜色 预定义的颜色值/十六进制/RGB代码

      • background-image 背景图片 url(图片路径)

      • background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y

      • background-position 背景位置

        • length/position 分别是x和y坐标 切记 如果有精确数值单位,则必须按照先x后y的写法

      • background-attachment 背景固定还是滚动 scroll/fixed

      • 背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;他们没有顺序

      • 背景透明 让盒子半透明 background:rgba(0,0,0,0.3) 后面必须是4个值

  11. CSS三大特性

    • 1.CSS层叠性

      • 概率：

        • 所谓层叠性是指多种CSS样式的叠加

        • 是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

      • 原则:

        • 样式冲突，遵循的原则是就近原则，那个样式离着结构近，就执行那个样式

        • 样式不冲突，不会层叠

    • 2.CSS继承性

      • 概念：

        • 子标签会继承父标签的某些样式，如文本颜色和字号

        • 想要设置一个可继承的属性，只需将它应用于父元素即可

      • 简单的理解就是: 子承父业

      • 注意：

        • 恰当地使用继承可以简化代码，降低CSS样式的复杂性，比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了

        • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)

    • 3.CSS优先级(重点)

      • 概念：

        • 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时

          • 选择器相同，则执行层叠性

          • 选择器不同，就会出现优先级的问题

      • 权重计算公式

        • 关于CSS权重计算，我们需要一套计算公式来去计算，这个就是CSS Specificity(特殊性)

        • 标签选择器 计算权重公式

        • 继承或者* 0,0,0,0

        • 每个元素(标签选择器) 0,0,0,1

        • 每个类，伪类 0,0,1,0

        • 每个ID 0,1,0,0

        • 每个行内样式style="" 1,0,0,0

        • 每个!important重要的 无穷大

        • specificity用一个四位的数，更像4个级别

        • 值从左到右；左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越

      • 权重叠加

        • 我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就好出现权重叠加

        • 就是一个简单的加法计算

          • div ul li => 0,0,03

          • .nav ul li =>0,0,1,2

          • a:hover = >0,0,1,1

          • .nav a =>0,0,1,1

        • 注意：

          • 1.数位之间没有进制 比如说: 0,0,0,5+0,0,0,5 = 0,0,0,10 而不是0,0,1,0,所以不会存在10个div能赶上一个类选择器的情况

          • 2.继承的权重是0

          • 3.如果权重相同，则会根据层叠性，就近原则

          • 2个特殊标签 链接和h标题 他们浏览器有自己默认的样式，继承的权重为0，所以，我们还是要单独给链接和标题一个样式

  12. 盒子模型(CSS重点)

    • 看透网页布局的本质:

      • 首先利用CSS设置好盒子的大小，然后摆放盒子的位置

      • 最后把网页元素比如文字图片等等，放入盒子里面

      • 以上两步就是网页布局的本质

    • 盒子模型(Box Model)

      • 所谓盒子模型

        • 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

      • 总结

        • 盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成

        • 盒子里面的文字和图片等元素是内容区域

        • 盒子的厚度 我们称为盒子的边距

        • 盒子内容与边框的距离是内边距(类似单元格的cellpadding)

        • 盒子与盒子之间的距离是外边距(类似单元格的cellspacing)

    • 盒子边框(border)

      • 语法:

        • border: border-width||border-style|| border-color

        • 属性 作用

        • border-width 定义边框粗细，单位是px

        • border-style 边框的样式

        • border-color 边框颜色

      • 边框的样式：

        • none: 没有边框即忽略所有边框的宽度(默认值)

        • solid:边框为单实线(最为常用的)

        • dashed: 边框为虚线

        • dotted:边框为点线

      • 盒子边框写法总结表

        • 很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的

        • 上边框

          • border-top-style:样式; border-top-width:宽度; border-top-color:颜色;

          • border-top:宽度 样式 颜色;

        • 下边框

          • border-bottom-style:样式; border-bottom-width:宽度; border-bottom-color:颜色;

          • border-bottom:宽度 样式 颜色;

        • 左边框

          • border-left-style:样式; border-left-width:宽度; border-left-color:颜色;

          • border-left:宽度 样式 颜色;

        • 右边框

          • border-right-style:样式; border-right-width:宽度; border-right-color:颜色;

          • border-right:宽度 样式 颜色;

    • 表格的细线边框

      • 通过表格的cellspacing=\'0\',将单元格与单元格之间的距离设置为0

      • 但是两个单元格之间的边框会出现重叠，从而使边框变粗

      • 通过css属性:

        • table{border-collapse:collapse;}

        • collapse单词是合并的意思

        • border-collapse:collapse表示相邻边框合并再一起

    • 内边距(padding)

      • 内边框: padding属性用于设置内边距，是指边框与内容之间的距离

    • 设置

      • 属性 作用

        • padding-left 左内边距

        • padding-right 右内边距

        • padding-top 上内边距

        • padding-bottom 下内边距

      • 当我们给盒子指定padding值之后，发送了2件事情

        • 内容和边框有了距离，添加了内边距

        • 盒子会变大了

      • padding简写

      • 值的个数 表达意思

        • 1个值 padding:上下左右内边距

        • 2个值 padding:上下内边距 左右内边距

        • 3个值 padding: 上内边距 左右内边距 下内边距

        • 4个值 padding: 上内边距 右内边距 下内边距 左内边距

    • 内盒尺寸计算(元素实际大小)

      • 宽度

        • Element Height = content height + padding + border (Height为内容高度)

      • 高度

        • Element Width= content width+ padding + border (Width为内容高度)

      • 盒子的实际大小 = 内容的宽度和高度+内边距+边框

    • 内边距产生的问题

      • 会撑大原来的盒子

      • 解决:

        • 通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

      • 如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding,则不会撑开盒子

    • 外边距(margin)

      • 外边距:

        • margin属于用于设置外边距,margin就是控制盒子和盒子之间的距离

      • 设置

        • 属性 作用

        • margin-left 左外边距

        • margin-right 右外边距

        • margin-top 上外边距

        • margin-bottom 下外边距

      • margin值的简写(复合写法) 代表意思跟padding完全相同

    • 块级盒子水平居中

      • 可以让一个盒子实现水平居中，需要满足一下两个条件

        • 必须是块级元素

        • 盒子必须指定了宽度(width)

      • 然后就给左右的外边距都设置为auto，就可以使块级元素水平居中

      • 实际工作中常用这种方式进行网页布局，示例代码如下：

        • .header{width:960px; margin:0 auto}

      • 常见的写法,以下三种都可以

        • margin-left: atuo; margin-right:auto;

        • margin:auto;

        • margin: 0 auto;

    • 文字居中和盒子居中的区别：

      • 盒子内的文字水平居中是 text-align:center 而且还可以让行内元素盒行内块居中对齐

      • 盒子水平居中 左右margin 改为 auto margin:10px auto

    • 插入图片和背景图片区别

      • 插入图片，我们用的最多，比如产品展示类，移动位置只能靠盒模型 padding margin

      • 背景图片我们一般用于小图标背景或者超大背景图片， 背景图片只能通过background-position

        • img{

        • width:200px; 插入图片更改大小 width盒height

        • height:210px;

        • margin-top :30px; 插入图片更改位置 可以用margin或padding盒模型

        • margin-left:50px; 插入当图片也是一个盒子

        • }

    • 清除元素的默认内外边距（重要）

      • 为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

      • 代码:

        • *{

        • padding:0 ； 清除内边距

        • margin:0; 清除外边距

        • }

      • 注意：

        • 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距

    • 外边距合并

      • 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

      • 1.相邻块元素垂直外边距的合并

        • 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom

        • 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和

        • 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)

        • 解决方案: 尽量只给一个盒子添加margin值

      • 2.嵌套块元素垂直外边距的合并(塌陷)

        • 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

        • 父元素的上外边距会与子元素的上外边距发生合并

        • 合并后的外边距为两者中的较大者

        • 解决方案

          • 可以为父元素定义上边框

          • 可以为父元素定义上内边距

          • 可以为父元素添加overflow:hidden

          • 还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题

    • 盒子模型布局稳定性

      • 学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距

        • 大部分情况下是可以混用的，就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个

        • 我们根据稳定性来分 建议如下

          • 按照优先使用 宽度(width) 其次使用内边距(padding) 再次外边距(margin)

        • 原因:

          • margin 会有外边距合并，还有ie6下面margin加倍的bug，所以最后使用

          • padding 会影响盒子大小，需要进行加减计算(麻烦)其次使用

          • width 没有问题，我们经常使用宽度剩余法 高度剩余法来做

    • 扩展内容

      • 圆角边框(CSS3)

        • 语法:

          • border-radius:length;

          • 其中每一个值可以为数值或百分比的形式

          • 技巧：让一个正方形变成圆圈 border-radius:50%;

        • 想要半圆弧，就不要用百分比了，因为百分比会是表示高度和宽度的一半

        • 而我们这里矩形就只要用高度的一半就好了，精确单位

      • 盒子阴影(CSS3)

        • 语法：

          • box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影

        • 取值：

          • h-shadow 必须 水平阴影的位置。允许负值

          • v-shadow 必需 垂直阴影的位置 允许负值

          • blur 可选 模糊距离

          • spread 可选 阴影的尺寸

          • color 可选 阴影的颜色。

          • inset 可选 将外部阴影{outset}改为内部阴影

          • 前两个属性是必须写的。其余的可以省略

          • 外阴影(outset)是默认的，但是不能写， 想要内阴影可以写inset

    • CSS书写规范

      • 空格规范

        • 选择器与{ 之间必须包含空格

          • .selector {}

        • 属性名与之后的: 之间不允许包含空格, :与属性值之间必须包含空格

          • font-size: 12px;

      • 选择器规范

        • 并集选择器，每个选择器声明必须独占一行

          • .post,

          • .page,

        • 建议 一般情况下，选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确

      • 属性规范

        • 属性定义必须另起一行

          • .selector {

          • margin: 0;

          • padding: 0;

          • }

        • 属性定义后必须以分号结尾

  13. 浮动(重点)

    • CSS布局的三种机制 网页布局的核心——就是用CSS来摆放盒子

    • CSS提供了3种机制来设置盒子的摆放位置，分别是普通流(标准流)、浮动和定位 其中:

      • 1.普通流(标准流)

        • 块级元素会独占一行，从上向下顺序排列:

          • 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table

        • 行内元素 会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；

          • 常用元素：span、a、i、em等

      • 2.浮动

        • 让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示

      • 3.定位

        • 将盒子定在浏览器的某一个位置--CSS离不开定位，特别是后面的js特性

    • 什么是浮动

      • 概念： 元素的浮动是指设置了浮动属性的元素会

        • 脱离标准普通流的控制

        • 移动到指定位置

      • 作用：

        • 1.让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段

        • 2.可以实现盒子的左右对齐等等

        • 3.浮动最早是用来控制图片，实现文字环绕图片的效果

      • 语法: 再css中，通过float 属性 定义浮动。语法如下

        • 选择器 {float: 属性值; }

        • 属性值 描述

        • none 元素不浮动(默认值)

        • left 元素向左浮动

        • right 元素向右浮动

    • 通过float ---浮漏特

      • 浮动口诀之浮

        • 浮动---浮~浮~浮~~漂浮再普通类的上面 脱离标准流 俗称“脱标”

          • 设置了浮动的元素，漂浮再普通流的上面，不占位置，脱标

        • 小结：float属性会让盒子漂浮再标准流的上面，所以第二个标签流的盒子跑到浮动盒子的底下

      • 浮动口诀之漏

        • 浮动——漏~漏~漏 浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来的位置，是脱离标准流的，我们俗称“脱标”

        • .box{

        • width:200px; height"200px; background-color: rgba(255,0,0,0.5)

        • float : left;

        • }

        • .box1{

        • width: 150px; height: 300px; background-color: skyblue

        • }

        • 所以box2其实就是跑到box1盒子下面了，被box1给压住了，遮挡起来了

      • 浮动口诀之特

        • 浮动—— 特性 float属性会改变元素的display属性

        • 任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块级极其相似

        • 添加浮动之后，仍然是块级盒子，相当于默认转化为display: inline-block; 浮动元素之间没有空隙 和真正的行内块是有区别的

        • 注意：浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

    • 浮动(float)小结

      • 我们使用浮动的核心目的——让多个块级盒子再同一行显示。因为这是我们最常见的一种布局方式

      • float——浮漏特

        • 特点 说明

        • 浮 加了浮动的盒子是浮起来的，漂浮再其他标准流盒子的上面

        • 漏 加了浮动的盒子是不占位置的， 它原来的位置漏给了标准流的盒子

        • 特 特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙

    • 浮动(float)的应用(重要)

      • 浮动和标准流的父盒子搭配

        • 我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减少了对其他标准流的影响

      • 一个完整的网页 是标签流+ 浮动+定位 一起完成的

      • 注意，实际重要的导航栏中，我们不会直接用链接a而是用li包含链接(li+a)的做法

        • li+a语义更清晰，一看这就是有条理的列表型内容

        • 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)，从而影响网站排名

    • 浮动(float)的扩展

      • 浮动元素与父盒子的关系

        • 子盒子的浮动参照父盒子对齐

        • 不会与父盒子的边框重叠，也不会超过父盒子的内边距

      • 浮动元素与兄弟盒子的关系

        • 在一个父级盒子中，如果前一个兄弟盒子是：

          • 浮动的，那么当前盒子会与前一个盒子的顶部对齐；

          • 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方

        • 记住： 浮动只会影响当前的或者后面的盒子，不会影响前面的标准流

      • 注意：

        • 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，防止引起问题

    • 清除浮动

      • 1.为什么要清除浮动

        • 因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子

        • 总结：

          • 由于浮动元素不再占用原文档流的位置，所以它会堆后面的元素排版产生影响

          • 准确地说，并不是清除浮动，而是清除浮动后造成的影响

      • 2.清除浮动的本质：

        • 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

      • 3.清除浮动的方法

        • 在 CSS中，clear属性用于清除浮动。在这里，我们先记住清除浮动的方法，具体的原理，等我们学完css会在回头分析

        • 语法：

          • 选择器{clear:属性值;} clear 清除

          • 属性值 描述

          • left 不允许左侧有浮动元素(清除左侧浮动的影响)

          • right 不允许右侧有浮动元素(清除右侧浮动的影响)

          • both 同时清除左右两侧浮动的影响

        • 在我们实际工作中，我们只用clear:both;

        • 1.额外标签法(隔墙法)

          • 是w3c推荐的做法是通过在浮动元素末尾添加一个空的标签 列如

            • < div style="clear:both"> < /div>, 或则其他标签br等亦可

          • 优点：通俗易懂，书写方便

          • 缺点：添加许多无意义的标签，结构化较差

        • 2.父级添加overflow属性方法

          • 可以给父级添加: overflow为 hidden|auto|scroll 都可以实现

          • 优点：代码简介

          • 缺点：内部增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的内容

        • 3.使用after伪元素清除浮动 在父级里面写

          • :after方式为空元素额外标签法的升级版，好处是不用单独加标签了

          • 使用方法:

            • .clearfix:after{content:""; display:block; height:0; clear:both; visibility:hidden;}

            • .clearfix{*zoom:1;} Ie6 7专有

          • 优点：符合闭合浮动思想，结构语义化正确

          • 缺点： 由于IE6-7不支持:after,使用zoom:1 触发hasLayout

        • 4.使用双伪元素清除浮动 父元素里面写

          • 使用方法:

            • .clearfox:before, .clearfix:after{

            • content : "";

            • display:table;

            • }

            • .clearfix:after{

            • clear:both;

            • }

            • .clearfix{

            • *zoom:1;

            • }

          • 优点：代码更简洁

          • 缺点: 由于IE6-7不支持:after 使用zoom:1触发 hasLayout

    • 清除浮动总结

      • 我们以后什么时候用清除浮动

        • 父级没高度

        • 子盒子浮动了

        • 影响下面布局了，我们就应该清除浮动了

      • 清除浮动的方式 优点 缺点

      • 额外标签法(隔墙法) 通俗易懂，书写方便 添加许多无意义的标签，结构化较差

      • 父级overflow:hidden； 书写简单 溢出隐藏

      • 父级伪元素 结构语义化正确 由于IE6-7不支持:after 兼容性问题

      • 父级双伪元素 结构语义化正确 由于IE6-7不支持:after 兼容性问题

      • 后面两个伪元素清除浮动， 深入原理， 我们后面学完伪元素再讲

    • PS切图

      • 常见的图片格式

        • 1.jpg图像格式:

          • JPEG(.jpg)对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的

        • 2.gif图像格式

          • GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果

        • 3.png图像格式：

          • 是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够 保持透明背景

        • 4.PSD图像格式：

          • PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿

      • ps切图片，分两大步:

        • 1.用切片选中图片

          • 利用切片工具手动划出

          • 图层菜单---新建基于图层的切片

          • 利用标尺 基于参考线的切片(选中切片工具)

          • 先选一个整个的切片，切片选择工具----属性面板中有‘划分’--可以等分数平分切图

        • 2.导出切片

          • 文件菜单---存储伪web设备所用格式---选择我们要的图片格式--点存储---别忘了选中的切片

        • 辅助线和切片使用及清除

          • 视图菜单--清除 辅助线/清除切片

  14. 定位(重点)

    • 什么叫定位:

      • 将盒子定在某一个位置，自由的漂浮在其他盒子(包括标准流和浮动的上面 )

      • 所以，我们脑海应该有三种布局机制的上下顺序

        • 标准流在最底层(海底)-----浮动的盒子在中间层(海面)----定位的盒子在最上层(天空)

    • 定位详解

      • 语法: 定位的概念： 定位 = 定位模式+边偏移

      • 1.边偏移：

        • 简单说，我们定位的盒子，是通过边偏移来移动位置的

        • 在CSS中，通过top、bottom、left和right属性定义元素的边偏移;(方位名词)

          • 边偏移属性 示例 描述

          • top top: 80px; 顶端偏移量，定义元素相对于其父元素上边线的距离

          • bottom bottom: 80px; 底部偏移量，定义元素相对于其父元素下边线的距离

          • left left : 80px; 左侧偏移量，定义元素相对于其父元素左边线的距离

          • right right : 80px; 右侧偏移量，定义元素相对于其父元素右边线的距离

        • 定位的盒子有了边偏移才有价值，一般情况下，凡是有定位地方必定有边偏移

      • 2.定位模式(定位的分类)

        • 在CSS中，通过position属性定义元素的定位模式，语法如下:

          • 选择器{position:属性值;}

          • 定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式

            • 值 语义

            • static 静态定位

            • relative 相对定位

            • absolute 绝对定位

            • fixed 固定定位

        • 2.1静态定位(static)-了解

          • 静态定位是元素的默认定位方式，也就是说网页中所有元素默认都是静态定位的--按照标准流特性摆放位置

          • 用大白话来讲，在不需要定位元素时，元素的定位属性就是static的

          • 注意：在静态模式下，无法通过边偏移属性(top,bottom,left或right)来改变元素的位置

          • 静态定位在布局时我们几乎不使用

        • 2.2相对定位(relative)-重要

          • 相对定位是元素相对于它原来在标准流中的位置来说的.(自恋型)

          • 相对定位的特点:(务必记住)

            • 相对于 自己原来在标准流中位置来移动的

            • 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

        • 2.3绝对定位(absolute)-重要

          • 绝对定位是元素以带有定位的父级元素来移动位置(拼爹型)

            • 1.完全脱标——完全不占位置

            • 2.父元素没有定位，则以浏览器为准定位(Document文档)

            • 3.父级要有定位:

              • 将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位

          • 绝对定位的特点:(务必记住)

            • 绝对是以带有定位的父级元素来移动位置(拼爹型)，如果父级都没有定位，则以浏览器文档为准移动位置

            • 不保留原来的位置，完全是脱标的

          • 定位口诀--子绝父相

            • 子绝父相——子级是绝对定位，父级要用相对定位

              • 子绝父相是使用绝对定位的口诀，要牢牢记住！

          • 总结：

            • 由于子元素，不占据位置，所以我们使用绝对定位

            • 由于父元素占据位置，不能响应后面元素的正常显示，我们使用相对定位

          • 结论： 父级要占有位置，子级要任意摆放，这就是子绝父相的由来

        • 2.4固定定位(fixed)--重要

          • 固定定位是绝对定位的一种特殊形式:(认死理型) 如果说绝对定位是一个矩形，那么固定定位就类似于正方形

            • 1.完全脱标——完全不占位置；

            • 2.只认浏览器的可视窗口——浏览器可视窗口+边偏移属性 来设置元素的位置；

              • 跟父元素没有任何关系； 单独使用

              • 不随滚动条滚动

    • 定位(position)的扩展

      • 绝对定位的盒子居中

        • 注意：绝对定位/固定定位的盒子，不能通过设置margin:auto 设置水平居中

      • 在使用绝对定位时要想实现水平居中，可以按照下面的方法

        • 1.left:50%：让盒子的左侧移动到父级元素的水平中心位置

        • 2.margin-left: -100px 让盒子向左移动自身宽度的一半

      • 堆叠顺序(z-index)

        • 在使用定位布局时，可能会出现盒子重叠的情况

        • 加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子

        • 应用z-index层叠等级属性可以调整盒子的堆叠顺序

        • z-index的特性如下：

          • 1.属性值:正整数、负整数或0，默认值是0，数组越大，盒子越靠上

          • 2.如果属性值相同，则按照书写顺序，后来居上

          • 3.数字 后面不能加单位

        • 注意:z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

      • 定位改变display属性

        • 前面我们讲过，display是显示模式，可以改变显示模式有以下方式:

          • 可以用inline-block转换为行内块

          • 可以用浮动float 默认转换为行内块(类似，并不完全一样，因为浮动是脱标的)

          • 绝对定位和固定定位也和浮动类型，默认转换的特性，转换为行内块

        • 所以说，一个行内的盒子，如果加了浮动，固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等

        • 同时注意:

          • 浮动元素。绝对定位元素的都不会触发外边距合并的问题。(我们以前是用padding border overflow解决的)

          • 也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题

          • 所以以后，定位的盒子，如果需要通栏，那我们宽度就给100%

    • 定位小结

      • 定位模式 是否脱标占有位置 移动位置基准 模式转换(行内块) 使用情况

      • 静态static 不脱标，正常模式 正常模式 不能 几乎不用

      • 相对定位relative 不脱标 占有位置 相对自身位置移动 不能 基本单独使用

      • 绝对定位 absolute 完全脱标 不占有位置 相对于定位父级移动位置 能 要和定位父亲元素搭配使用

      • 固定定位 fixed 完全脱标 不占有位置 相对于浏览器移动位置 能 单独使用，不需要父级

      • 注意:

        • 边偏移需要和定位模式联合使用，单独使用无效:

        • top和bottom不要同时使用；

        • left和right 不要同时使用

    • 网页布局总结

      • 一个完整的网页，有标准流、浮动、定义 一起完成布局的。每个都有自己的专门用法

      • 1.标准流 ： 可以让盒子上下排列 或者左右排序的

      • 2.浮动：可以让多个块级元素一行显示或者左右对齐盒子，浮动的盒子就是按照顺序左右排列

      • 3.定位：定位最大的特点是有层叠的概念，就是可以让多个盒子 前后叠压来显示。但是每个盒子需要测量数值

  15. CSS高级技巧(重点)

    • 1.元素的显示与隐藏

      • 目的: 让一个元素在页面中消失，但是不在文档源码中删除

      • 场景: 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现

      • 1.1 display显示(重点)

        • display设置或检索对象是否及如何显示

          • display: none; 隐藏对象

          • display: block; 除了转换为块级元素之外，同时还有显示元素的意思

        • 特点: 隐藏之后，不再保留位置

      • 1.2 visibility 可见写(了解)

        • 设置或检索是否显示对象

          • visibility: visible; 对象可视

          • visibility: hidden; 对象隐藏

        • 特点: 隐藏之后，继续保留原有位置(停职留薪)

      • 1.3 overflow溢出(重点)

        • 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

        • 属性值 描述

        • visible 不剪切内容也不添加滚动条

        • hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉

        • scroll 不管超出内容否，总是显示滚动条

        • auto 超出自动显示滚动条，不超出不显示滚动条

      • 显示与隐藏总结

        • display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用广泛 visibility 隐藏对象，保留位置 使用较少 overflow 只是隐藏超出大小的部分 1.可以清除浮动2.保证盒子里面的内容不会超出该盒子范围
          属性区别用途

    • 2.CSS用户界面样式

      • 所谓的界面样式，就是更改一些用户操作样式，以便提供更好的用户体验

        • 更改用户的鼠标样式(滚动条因为兼容性非常差，我们不研究)

        • 表单轮廓等

        • 防止表单域拖拽

      • 2.1 鼠标样式cursor

        • 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

        • default 小白 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止
          属性值描述

      • 2.2 outline轮廓

        • 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

          • outline: outline-color || outline-style || outline-width

          • 但是我们都不关心可以设置多项，我们平时都是去掉的

        • 最直接的写法是 outline: 0; 或者 ontline: none;

      • 2.3 防止拖拽文本域resize

        • 实际开发中，我们文本域右下角是不可以拖拽的:

          • < textarea style=\'resize: none;\'> < /textarea>

      • 2.4 用户界面样式总结

        • 鼠标样式 更改鼠标样式cursor 样式很多，重点记住pointer 轮廓线 表单默认outline outline轮廓线，我们一般直接去掉，border是边框，我们会经常用 防止拖拽 主要针对文本域resize 防止用户随机拖拽文本域，造成页面布局混乱，我们用resize: none;
          属性用途用途

    • 3.vertical-align: 垂直对齐

      • 有宽度的块级元素居中对齐，是margin: 0 auto;

      • 让文字居中对齐，是text-align: center;

      • vertical-align 垂直对齐，它只针对于行内元素或者行内块元素

        • vertical-align : baseline|top|middle|bottom

        • 设置或检索对象内容的垂直对其方式

        • 注意:

          • vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐

        • 基线对齐：默认的是文字和图片基线对齐 vertival-align: baseline; 垂直居中：默认的是文字和图片基线对齐 vertival-align: middle; 顶线对齐：默认的是文字和图片基线对齐 vertival-align: top;
          模式单词

      • 3.2去除图片底测空白缝隙

        • 原因: 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐，就是图片底测会有一个空白缝隙

        • 解决的方法就是

          • 给 img vertical-align:middle | top等等。让图片不要和基线对齐

          • 给img 添加 display: block; 转换为块级元素就不会存在问题了

    • 4.溢出的文字省略号显示

      • 4.1 white-space

        • white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

          • white-space: normal; 默认处理方式

          • white-space: nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

      • 4.2text-overflow文字溢出

        • 设置或检索是否使用一个省略标记(...) 标示对象内文本的溢出

          • text-overflow: clip; 不显示省略标记(...) 而是简单的裁切

          • text-overflow: ellipsis; 当对象内文本溢出时显示省略标记(....)

        • 注意: 一定要首先强制一行内显示，再次和overflow属性 搭配使用

      • 总结三步曲

        • 1.先强制一行内显示文本

          • white-space: nowrap;

        • 2.超出的部分隐藏

          • overflow: hidden;

        • 3.文字用省略号替代超出的部分

          • text-overflow: ellipsis;

    • 5.CSS精灵技术(sprite)重点

      • 5.1为什么需要精灵技术

        • 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

        • 出现了CSS精灵技术

      • 5.2 精灵技术讲解

        • CSS精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而，各个网页元素通常只需用精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图

        • 这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示处理

        • 我们需要使用CSS的

          • background-image

          • background-repeat

          • background-position属性进行背景定位

          • 其中最关键的是使用background-position属性精确地定位

      • 5.3精灵技术使用的核心总结

        • 首先我们知道，css精灵技术主要针对于背景图片，插入的图片img是不需要这个技术的，

          • 1.精确测量，每个小背景图片的大小和位置

          • 2.给盒子指定小背景图片时，背景定位基本都是负值

      • 5.4精灵图制作(了解)

        • 大部分是网页美工做的

    • 6.滑动门

      • 为了方便各种特殊形状的背景能够自适应元素中文本内容的多少，出现了css滑动门技术，它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强，最常见于各种导航栏的滑动门

      • 核心技术

        • 核心技术就是利用CSS精灵(主要是背景位置) 和盒子padding撑开宽度，以便能适应不同字数的导航栏

          • a{

          • display: inline-block; height: 33px;

          • background: url(images/to.png) no-reapt;

          • padding-left: 15px;

          • }

          • span{

          • display: inline-block; height: 33px;

          • background: url(images/to.png) no-reapt right top;

          • padding-left: 15px

          • }

      • 总结：

        • 1.a设置背景左侧，padding撑开合适宽度

        • 2.span设置背景右侧，padding撑开合适宽度，剩下由文字继承撑开宽度

        • 3.之所以a包含span就是因为，整个导航都是可以点击的

    • 7.扩展

      • 7.1margin负值之美

        • 1.负边距+定位：水平垂直居中

          • 前面讲过，一个绝对定位的盒子，利用父级盒子的50%，然后往左(上)走自己宽度的一半，可以实现盒子水平垂直居中

        • 2.压住盒子相邻边框

      • 7.2三角形之美

        • div{

        • 我们用css边框可以模拟三角效果

        • width: 0;

        • height: 0;

        • border-top: 10px solid red;

        • border-right: 10px solid green;

        • border-bottom: 10px solid blue;

        • border-left: 10px solid red;

        • }

        • 1.我们用CSS边框可以模拟三角形效果

        • 2.宽度高度为0

        • 3.我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为transparent透明就可以了

        • 4.为了照顾兼容性，低版本的浏览器，加上font-size: 0; line-height: 0;

 

 

 

HTML常用标签

  1. 排版标签

    • 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签

    • 1.标题标签(重点)

      • 为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题

      • 标题标签语义：作为标题使用，并且依据重要性递减

      • 其基本语法格式如下

        • < h1> 文本内容</ h1> < h2> 文本内容</ h2> < h3> 文本内容</ h3>

        • < h4> 文本内容</ h4> < h5> 文本内容</ h5> < h6> 文本内容</ h6>

      • 加了标题的文字会变的加粗，字号也会依次变大

    • 2.段落标签p(重点)

      • 作用语义:

        • 可以把HTML文档分割为若干段落

        • 在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干段落，而段落的标签就是

          • < p> 文本内容< /p>

    • 3.水平线标签hr

      • 在网页中常常看到一些水平线段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

      • < hr /> 就是创建 横跨网页水平线的标签，其基本语法格式如下

        • < hr /> 是单标签

        • 在网页中显示默认样式的水平线

    • 换行标签br

      • 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

        • < br/>

    • div 和 span标准(重点)

      • div span 是没有语义的， 是我们网页布局主要的2个盒子，想必你听过css+div

      • 语法格式:

        • < div> 这是头部 < /div> < span> 今日价格 < /span>

        • 他们两个都是盒子，用来装我们网页元素的，只不过他们有区别，现在我们主要记住使用方法和特定就好了

          • div标签 用来布局的， 但是现在一行只能放一个div

          • span 标签，用来布局的，一行上可以放多个span

  2. 文本格式化标签(重点)

    • 在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时候就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示

      • < b> < /b> < strong> < /strong> 文体以粗体方式显示(XHTML推荐使用strong)

      • < i>< /i> < em></ em> 文字以斜体方式显示(XHTML推荐使用em)

      • < s>< /s> < del>< /del> 文字以加删除线方式显示(XHTML推荐使用del)

      • < u>< /u> < ins></ ins> 文字以加下划线方式显示(XHTML不赞成使用u)

    • 区别:

      • b 只是加粗，strong除了可以加粗还有强调的意思，语义更强烈

  3. 标签属性(重点)

    • 使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下

      • < 标签名 属性1 =“属性值1”,属性2="属性值2"....> 内容 < /标签名>

  4. 图像标签img(重点)

    • 要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签< img/>以及和他相关的属性

    • 语法如下

      • < img src = "图像URL" />

      • 该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性

      • src 属性值 URL 图像的路径

      • alt 属性值 文本 图像不能显示时的替换文本

      • title 属性值 文本 鼠标悬停时显示的内容

      • width 属性值 像素 设置图像的宽度

      • height 属性值 像素 设置图像的高度

      • border 属性值 数字 设置图像边框的宽度

    • 注意：

      • 1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面

      • 2.属性之间不分先后顺序，标签名与属性 属性与属性之间均以空格分开

      • 3.任何标签的属性都有默认值，省略该属性则取默认值

      • 4.采取 键值对的格式 key = "value"

  5. 链接标签(重点)

    • 在HTML中创建超链接非常简单，只需用标签把文字包括起来就好

    • 语法格式：

      • < a href ="跳转目标", target="目标窗口的弹出方式"> 文本或图像 < /a>

      • 属性 href 作用:用于指定连接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能

      • 属性target 作用：用于指定链接页面的打开方式，其取值self和_ blank两种，其中self为默认值，_blank为在新窗口中打开方式

    • 注意：

      • 1.外部链接 需要添加 http://www.baidu.com

      • 2.内部链接 直接链接内部页面名称即可 比如< a href = \'index.html\'> 首页 < /a>

      • 3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为"#"(即href ="#")表示该链接暂时为一个空链接

      • 4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

  6. 注释标签

    • 在HTML中还有一种特殊的标签——注释标签，如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签

    • 简单解释

      • 注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看原代码时就能看到

    • 语法格式：

      • < !--注释语句--> 快捷键是 ctrl + / 或者 ctrl+shift +/

  7. 路径(重点)

    • 实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们

    • 目录文件夹

      • 就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等待

      • 根目录：打开目录文件夹的第一层 就是根目录

      • 页面中的图片会非常多，通常我们再新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用路径的方式来指定图像文件的位置。路径可以分为：相对路径和绝对路径

        • 相对路径

          • 以引用文件之网页所在位置为参考基础，而建立出的目录路径，因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径

          • 同一级路径

            • 图片引用的时候，直接写图片的名字就可以了

          • 下一级路径

          • 上一级路径: ../

        • 绝对路径

          • 绝对路径以Web站点根目录为参考基础的目录路径，之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的

            • ”D:\web\img\logo.gif“

            • 注意：它的写法特别是符合\并不是相对路径的/

    • 拓展阅读

      • 1.锚点定位(难点)

        • 通过创建锚点链接，用户能够快速定位到目标内容

        • 创建.锚点链接分为两步

          • 1.使用相应的id名标注跳转目标的位置

            • < h3 id = \'two\'> 第2集< /h3>

          • 2.使用< a href = "#id名">链接文本 < /a>创建链接文本(被点击的)

            • < a href = \'#two\'>

      • 2.base标签

        • 语法

          • < base target=\'_blank\'> 使所有的链接都在新窗口打开

        • 总结：

          • 1.base可以设置整体链接的打开状态

          • 2.base写到 < head></ head> 之间

          • 3.把所有的连接 都默认添加 target = "_blank"

      • 3.预格式化文本pre标签

        • < pre> 标签可定义预格式化的文本，被包围在< pre>标签元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体

        • < pre> 对空行和空格 进行控制 </ pre>

        • 有了这个标签，里面的文字，会按照我们书写的模式显示，不需要段落和换行标签了。但是，比较少用，因为不好整体控制

      • 4.特殊字符

        • 一些特殊的符号，我们在html里面很难或者不方便直接使用，我们此时可以使用下面的替代代码

          • & nbsp; 空格 & lt; 小于号< & gt; 大于号>

          • 虽然有很多，但是我们平时用的比较少，大家重点记住 空格 大于号 小于号 就可以了，剩下的可上网搜 html特殊字符

        • 总结：

          • 1.是以运算符&开头，以分号运算符;结尾

          • 2.他们不是标签，而是符号

          • 3.HTML中不能使用小于号< 和大于号> 特殊字符，浏览器会将它们作为标签解析，若要正确显示，在HTML源代码中使用字符实体

    • 表格table

      • 表格作用：

        • 存在即是合理的。表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据，因为它可以让数据显示的非常的规整，可读性非常好

        • 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然div布局也可以做到，但是总没有表格来得方便

      • 1.创建表格

        • 在HTML网页中，要想创建表格，就需要使用表格相关的标签

        • 创建表格的基本语法

          • < table>

            • < tr>

              • < td> 单元格内的文字 < /td>

            • < /tr>

          • < /table>

          • 要深刻体会表格、行、单元格他们的构成

        • 在上面的语法中包含基本的三对HTML标签，分别为table,tr,td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

          • 1.table用于定义一个表格标签

          • 2.tr标签用于定义表格中的行，必须嵌套在table标签中

          • 3.td用于定义表格中的单元格，必须嵌套在< tr> < /tr>标签中

          • 4.字母td指表格数据(table data),即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的

        • 总结：

          • 表格的主要目的是用来显示特殊数据的

          • 一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成，没有列的标签

          • < tr> < /tr>中只能嵌套 < td> < /td>类的单元格

          • < td>< /td>标签，他就像一个容器，可以容纳所有的元素

      • 2.表格属性

        • 表格有部分属性我们不常用，这里重点记住cellspacing, cellpadding

        • border 设置表格的边框(默认border=0无边框) 像素值

        • cellspacing 设置单元格与单元格之间的空白间隔 像素值(默认为2像素)

        • cellpadding设置单元格内容与单元格边框之间的空白间隔,像素值(默认1像素)

        • width 设置表格的宽度 像素值

        • height 设置表格的高度， 像素值

        • align 设置表格在网页中的水平对齐方式 left、center、right

        • 我们经常有个说法，是三参为0，平时开发的我们这三个参数 border cellpadding cellspacing为0

      • 3.表头单元格标签th

        • 作用：

          • 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中

        • 语法：

          • 只需用表头标签< th>< /th>替代相应的单元格标签< td>< /td>即可

      • 4.表格标题caption

        • 定义和用法

          • < table>

            • < caption>我是表格标题 < /caption>

          • < /table>

        • 注意：

          • 1.caption元素定义表格标题，通常这个标题会被居中且显示于表格之上

          • 2.caption标签必须紧随table标签之后

          • 3.这个标签只存在 表格里面才有意义

      • 5.合并单元格(难点)

        • 5.1合并单元格的2种方式

          • 跨行合并： rowspan = "合并单元格的个数"

          • 跨列合并: colspan = "合并单元格的个数"

        • 5.2合并单元格顺序

          • 合并的顺序我们按照 先上后下 先左后右的顺序，跟我们以前学习汉字的书写顺序完全一致

        • 5.3 合并单元格三步曲

          • 1.先确定是跨行还是跨列合并

          • 2.根据先上 后下 先左后右的原则找到目标单元格，然后写上合并方式 还有要合并的单元格数量 比如：

            • < td colspan ="3"> < /td>

          • 3.删除多余的单元格

      • 6.总结表格

        • < table>< /table> 表格标签 就是一个四方的盒子

        • < tr></ tr> 表格行标签 行标签要再table标签内部才有意义

        • < td>< /td> 单元格标签 单元格标签是个容器级元素，可以放任何东西

        • < th>< /th> 表头单元格标签 它还是一个单元格，但是里面的文字会居中且加粗

        • < caption></ caption> 表格标题标签 表格的标题，跟着表格一起走，和表格居中对齐

        • clospan和rowspan 合并属性 用来合并单元格的

        • 好处优点

          • 1.表格提供了HTML中定义表格式数据的方法

          • 2.表格中由行中的单元格组成

          • 3.表格中没有列元素，列的个数取决于行的单元格个数

          • 4.表格不要纠结于外观，那是css的作用

          • 5.表格的学习要求:能手写表格结构，并且能简单合并单元格

      • 7.表格划分结构(了解)

        • 对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用：thead,tbody,tfoot来标注，这样更好的分清表格结构

        • 注意：

          • 1 < thead>< /thead>：用于定义表格的头部，用来放标题之类的东西。< thead>内部必须拥有 < tr> 标签

          • 2.< tbody>< /tbody>：用于定义表格的主体。放数据本体

          • 3.< tfoot>< /tfoot>放表格的脚注之类

          • 4.以上标签都是放到table标签中

  8. 列表标签(重点)

    • 列表标签介绍

      • 表格是用来显示数据的，那么列表就是用来布局的，因为非常整齐和自由

      • 概率：

        • 容器里面装载着结构，样式一致的文字或图表的一种形式 叫列表

      • 特点：

        • 列表最大的特点就是整齐、整洁、有序、跟表格类似，但是他可组合自由度会更高

    • 无序列表ul(重点)

      • 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

        • < ul>

          • < li> 列表项1< /li>

          • < li> 列表项2< /li>

          • < li> 列表项3< /li>

          • .....

        • < /ul>

      • 总结

        • 1.< ul></ ul>中只能嵌套< li></ li>，直接在< ul></ ul>标签中输入其他标签或者文字的做法是不被允许的

        • 2.< li>与< /li>之间相当于一个容器，可以容纳所有元素

        • 3.无序列表会带有自己样式属性，放下那个样式，一会让css来

    • 有序列表ol(了解)

      • 有序列表即为有排序顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下

        • < ol>

          • < li> 列表项1< /li>

          • < li> 列表项2< /li>

          • < li> 列表项3< /li>

          • .....

        • < /ol>

      • 所有特性基本与ul一致。但是实际中比无序列表用的少很多

    • 自定义列表(理解)

      • 定义列表常用于对术语或名称进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下

        • < dl>

          • < dt>名词1< /dt>

          • < dd>名词1解释< /dd>

          • < dd>名词1解释< /dd>

          • .....

          • < dt>名词2< /dt>

          • < dd>名词2解释< /dd>

          • < dd>名词2解释< /dd>

        • < /dl>

    • 列表总结

      • < ul> </ ul> 无序标签 里面只能包含li 没有顺序，我们以后布局中最常用的列表

      • < ol>< /ol> 有序标签 里面只能包含li 有顺序，使用情况较少

      • < dl> < /dl> 自定义列表 里面有2个兄弟 dt和dd

  9. 表单标签(掌握)

    • 目标：

      • 能写出最常用的注册类表单

      • 能说出input表单常见属性

    • 作用：

      • 表单目的是为了收集用户信息

      • 在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单

      • 在HTML中，一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成

    • 1.input控件(重点)

      • 语法：

        • < input type = "属性值" value = "你好">

          • input 输入的意思

          • < input/>标签为单标签

          • type 属性设置不同的属性值用来指定不同的控件类型

          • 除 了type属性还有别的属性

        • 常用属性

          • 属性 属性值 描述

          • type text 单行文本输入框

            • password 密码输入框

            • radio 单选按钮

            • checkbox 复选框

            • button 普通按钮

            • submit 提交按钮

            • reset 重置按钮

            • image 图像形式的提交按钮

            • file 文件域

          • name 由用户自定义 控件的名称

          • value 由用户自定义 input控件中的默认文本值

          • size 正整数 input控件在页面中的显示宽度

          • checked checked 定义选择控件默认被选中的项

          • maxlength 正整数 控件允许输入的最多字符数

      • 1.type属性

        • 这个属性通过改变值，可以决定了你属于那种input表单

        • 比如 type = "text" 就表示文本框可以做用户名，昵称等

        • 比如 type = \'password\' 就是表示密码框， 用户输入的内容是不可见的

          • 用户名：< input type ="text" />

          • 密码： < input type ="password" />

      • 2.value属性

        • 用户名: < input type ="text" name = "uesrname" value ="请输入用户名" />

        • value默认的文本值，有些表单想刚打开页面就默认显示几个文字，就可以通过这个value来设置

      • 3.name属性

        • 用户名: < input type ="text" name = "uesrname" />

        • name表单的名字，这样，后台可以通过这个name属性找到这个表单，页面中的表单很多，name主要作用就是用于区别不同的表单

          • name 属性后面的值，是我们自己定义的

          • radion 如果是一组，我们必须给他们命名相同的名字name，这样就可以多个选其中一个啦

            • < input type ="radio" name = \'sex\' />男

            • < input type = "radio" name = \'sex\' />女

          • name属性，我们现在用的比较少，但是当我们学ajax和后台的时候。是必须的

      • 4.checked属性

        • 表示默认选中状态。 较常见于 单选按钮和复选按钮

        • 性别：

        • < input type = "radion" name = "sex" value = "男" checked="checked" /> 男

        • < input type = "radion" name = "sex" value = "女" /> 女

        • 上面这个，表示就默认选中了男 这个单选按钮

      • 5.普通按钮 需要写value值

        • < input type = "button" value = "获取短信验证码">

      • 6.图片提交按钮 里面必须包含src属性

        • < input type = "image" src ="images/btn.png">

      • input 属性小结

        • type 表单类型 用来指定不同的控件类型

        • value 表单值 表单里面默认显示的文本

        • name 表单名字 页面中的表单很多，name主要作用就是区别不同的表单

        • checked 默认选中 表示那个单选或者复选按钮一开始就被选中了

    • 2label标签(理解)

      • 目标：

        • label标签主要目的是为了提高用户体验。为用户提高最优秀的服务

      • 概念

        • label标签为input元素定义标注(标签)

      • 作用:

        • 用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获取输入焦点

      • 如何绑定元素

        • 1.第一种用户就是用label直接包括input表单

          • < label> 用户名：< input type=\'redion\' name =\'username\' value=\'请输入用户名\'> < /label>

          • 适合单个表单选择

        • 2.第二种用法for属性规定label与哪个表单元素绑定

          • < label for = "sex"> 男 < /label>

          • < input type=\'radio\' name = \'sex\' id =\'sex\'>

    • 3.textarea控件(文本域)

      • 语法:

        • < textarea cols="每行中的字符数" rows="显示的行数">

        • 文本内容

        • < /textarea>

      • 作用:

        • 通过textarea控件可以轻松地创建多行文本输入框

      • 文本框和文本域区别

        • < input type = \'text\'>

          • 文本框 只能显示一行文本 单标签，通过value显示默认值

          • 用于场景： 用户名、昵称、密码等

        • textarea

          • 文本域 可以显示多行文本 双标签 默认值写到标签中间

          • 用于场景： 留言板

    • 4.select下拉列表

      • 目的

        • 如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表

      • 语法：

        • < select>

          • < option>选项1< /option>

          • < option>选项2< /option>

          • < option>选项3< /option>

          • .....

        • < /select>

      • 注意:

        • 1.< select>< /select>中至少应包含一对< option> < /option>

        • 2.在option中定义selected = "selected"时，当前项即为默认选中项

    • form表单域

      • 收集的用户信息是怎么传递给服务器

        • 通过form表单域

      • 目的：

        • 在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器

      • 语法:

        • < form action="url地址" method ="提交方式" name="表单名称">

        • 各种表单控件

        • < /form>

      • 常用属性

        • 属性 属性值 作用

        • action url地址 用于指定接收并处理表单数据的服务器程序的url地址

        • method get/post 用于设置表单数据的提交方式，其取值为get或post

        • name 名称 用于指定表单的名称，以区分同一个页面中的多个表单

      • 注意：

        • 每个表单都应该有自己的表单域。我们现在做页面，不写看不到效果，但是如果后面学ajax后台交互的时候，必须需要form表单域

    • 团队约定

      • 元素属性使用双引号语法

      • 元素属性可以写上的都写上

      •  

上一篇：纯CSS实现 | 风中摇摆的花儿 下一篇：实现《羊了个羊》的小游戏
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！