## 第十一章 前端开发 html 超文本标记语言 html特征： - 对换行和空格不敏感 - 空白折叠（无论多少空格都折叠程） ### 11.1 标签 标签： - 双闭合标签<html></html> - 单闭合标签<meta charset='UTF-8'> head标签： - meta 基本网络元信息标签 - title 网络的标签 - link 链接css文件 - script 链接JavaScript文件 - style 内嵌样式 body标签： - h1-h6标题标签 - p标签 段落标签 - a anchor 锚点 超链接标签 - href 链接的网址 - title 鼠标悬浮上的标题 - style 行内样式 - target 目标 - 默认是_self 在当前页面中打开新的链接 - _blank 在心得空白页打开新的链接 - img - src 链接的图片资源 - title标题 - style - alt 图片资源加载失败的时候显示的文本 - ul 无序列表 - li - ol 有序列表 - li - table - form - input - type 控件的类型 - text 文本输入框 - password 密码框 - radio 单选框 - checkbox 多选框 - name - 名称 提交服务器的键值对中的name - value - 值 提交服务的键值对中的value - select name mutiple:多选框 - option value - textarea - name - value - clos - rows - div - 称为盒子标签，divsion：分割 - 把网页分割成不同的独立逻辑区域 - width 内容的宽度 - height 内容的高度 - padding 内边距，border到内容的距离 - border 边框 - margin 外边框 - lable - 它中的for属性跟单控键的id属性有关联 #### 11.1.1 行内标签与独占一行标签（标签总结） 行内标签 ```html b strong 加粗 i em a img 图片 input td 表格中的 ``` 独占一行的标签 ```html h1 - h6 字体 ul 无序表格 ol 有序表格 li form 方式 table tr p 换行 div 块 ``` ### 11.2 css的引入方式 三中css的引入方式： - 行内样式 ```html <div style="color:red;">liujia</div> ``` - 内嵌式 ```html 在head标签内部书写 <style> /*css代码 </style> ``` - 外接式： ```html <link href='css/index.css' rel='styleheet' ``` - 三种引入方式的优先级 - 行内>内嵌=外接 - 内嵌和外接看谁在后面，在后面的优先级高 #### 11.2.1 css选择器 基础选择器 id选择器 唯一的 ```html #xxxx ``` 类选择器 可以重复，归类，类可以设置多个 ```html 语法：.xxxxx <style> .box{ 200px; height:200px; backgroup-color:yellow; } </style> <div class='box active'></div> <div class='box'></div> <div class='box'></div> ``` 标签选择器： ```html div{} p{} ul{} ol{} ..... ``` #### 11.2.2 高级选择器 后代选择器： ```html div p{color:red;} ``` 子代选择器 ```html div>p{color:green;} ``` 组合选择器： ```html div,p,body,ul....{ color:red; padding:0; margin:0; } ``` 交集选择器： ```html div.active{ } ``` #### 11.2.3 层叠性和继承性 继承性：在css有些属性是可以继承下来，color，text-xxx，line-height，font-xxx是可以继承下来的 权证的比较规则： - 继承来的属性权重都为0 - 选中标签 ```html 选中标签时，权重的比较： 1.数选择器个数：id 类 签 谁大它的优先级就高，如果一样大，后面的属性会覆盖前面的属性 2.选中的标签的属性优先级大于继承来的属性 3.同时继承来的属性 3.1 谁描述的最近，谁的优先级就高 3.2 描述的一样近，这个时候才回归到树选择器的数量 ``` 11.2.4 html的嵌套关系 ```html <!--块级标签：1.独占一行 2.可以设置宽高，如果不设置宽高，默认就是父标签的100%宽度--> <!--行级标签：1.在一行内显示 2.不可以设置宽高。如果不设置宽高，默认就是字体的大小--> <!--行内块标签：1.在一行内显示 2.可以设置宽高 在网页中： 行内装块和行内块经常使用 display: inline 行内 inlint-block 行内块 block 块 嵌套关系： 1.块级标签可以嵌套块级和行内以及行内块 2.行内标签尽量不要嵌套块 3.p标签不要嵌套div，也不要嵌套p，可以嵌套a/img/表单控件 ```