HTML标签
HTML代码注释 < !--注释文字 -->
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
| 标签 | 属性 |
|---|---|
| <html></html> | 根标签 |
| <head> | 头标签 |
| <title> | 在标签之间的文字内容是网页的标题信息 |
| <script> | 填写javascript相关代码<script src="/static/js/abc.js"></script> |
| <style> | 填写css相关代码 |
| <link> | 标签将css样式文件链接到HTML文件内<link href="base.css" rel="stylesheet" type="text/css" /> |
| <meta> | meta标签被称为可视区域meta标签，<meta name=”viewport” content=”” /> |
| <body> | 内容标签 |
| <h1> | 标题标签（因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1>） |
| <p> | 段落标签 |
| <em> | 在浏览器中<em> 默认用斜体表示 |
| <strong> | <strong> 用粗体表示 |
| <span></span> | 作用就是为了设置单独的样式用的 |
| <q></q> | <q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。 |
| <blockquote> | 作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。浏览器对<blockquote>标签的解析是缩进样式。 |
| <br /> | 需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img /> |
| | 为你的网页中添加一些空格 |
| <hr /> | 添加水平横线,<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。 |
| <address> | 可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份,在浏览器上显示的样式为斜体; |
| <code> | 当代码为一行代码时，你就可以使用<code>标签了.注：如果是多行代码，可以使用<pre>标签。 |
| <pre> | 为你的网页加入大段代码 |
| <a> | <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>; 1.只要为文本加入a标签后，文字的颜色就会自动变为蓝色；2.标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开则使用<a href="目标网址" target="_blank">click here!</a>;3.<a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件,如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔;<a href=mailto:yy@163.com&cc=xiaoming@16c.com&bcc=xiaoyu@163.com&subject=主题&body=邮件内容>对此影评有何感想，发送邮件给我</a>、cc：抄送，bcc：密文抄送； |
| <img> | 标签来插入图片<img src = "myimage.gif" alt = "My Image" title = "My Image" />1、src：标识图像的位置；2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；4、图像可以是GIF，PNG，JPEG格式的图像文件。 |
| <ul><li>我的第一个列表信息</li></ul> | 新闻信息列表，ul-li是没有前后顺序的信息列表。 |
| <ol><li>我的第一个列表信息。</li><li>我的第一个列表信息。</li></ol> | 标签来制作有序列表来展示。 |
| <div> | 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。<div id="版块名称">…</div>增加id属性； |
| <table> | 创建表格的四个元素：table、tbody、tr、th、td；1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。5、<th>…</th>：表格的头部的一个单元格，表格表头。6、表格中列的个数，取决于一行中数据单元格的个数。总结：1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的；2、表头，也就是th标签中的文本默认为粗体并且居中显示。。。。<style type="text/css">table tr td,th{border:1px solid #000;}</style>为它添加边框。。。<table summary="表格简介文本">摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。。。。<caption>标题文本</caption>用以描述表格内容，标题的显示位置：表格上方。 |
| <form> | <form method="传送方式" action="服务器文件">1、type：当type="text"时，输入框为文本输入框;当type="password"时, 输入框为密码输入框。2、name：为文本框命名，以备后台程序ASP 、PHP使用。3、value：为文本输入框设置默认值。(一般起到提示作用) |
| <label for="male"> | <label for="控件id名称">，注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。 |
target 常见的4个值
1、-blank 在新窗口中打开；
2、-self 在当前窗口打开（默认值）；
3、-parent 在父窗口打开；
4、-top 在当前浏览器中打开，且框架会消失。
<form>
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
<textarea rows="行数" cols="列数">在这里输入内容,支持多行文本展示</textarea>
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
<label>男</label><input type="radio" value="1" name="gender" />
<label>女</label><input type="radio" value="2" name="gender" />
<label>跑步</label><input type="checkbox" value="1" name="checkbox1" />
<label>打球</label><input type="checkbox" value="2" name="checkbox2" />
<label>登山</label><input type="checkbox" value="3" name="checkbox3" />
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
注意：下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击）
CSS样式
CSS的基本知识
1、CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
css 样式由选择符和声明组成，而声明又由属性和值组成如：
p{
font-size:12px;
color:red;
}
2、就像在Html的注释一样，在CSS中也有注释语句：用/注释语句/来标明（Html中使用 < !--注释语句-->)
CSS的三种样式
*三种样式
1、内联式css样式，直接写在现有的HTML标签中：
<p style="color:red;font-size:12px">这里文字是红色。</p>
2、嵌入式css样式，写在当前的文件中，嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如下代码：
<style type="text/css">
span{
color:red;
}
</style>
3、外部式css样式，写在单独的一个文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1.css样式文件名称以有意义的英文字母命名，如 main.css。
2.rel="stylesheet" type="text/css" 是固定写法不可修改。
3.<link>标签位置一般写在<head>标签之内。
- 优先级：内联式 > 嵌入式 > 外部式
- 但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
- 总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下;
- 下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
- 其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
- 注意：!important要写在分号的前面
p{color:red!important;}
注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
CSS选择器
- 标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：
p{font-size:12px;line-height:1.6em;} - 类选择器
.类选器名称{css样式代码;};
类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表)。 - ID选择器
ID选择符的前面是井号（#）号，而不是英文圆点（.）。
ID选择器只能在文档中使用一次.
#setGreen{
color:green;
}
- 子选择器
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
.food>li{border:1px solid red;} - 包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。 - 全局选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) - 伪类选择符
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。
如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。） - 分组选择器
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
CSS属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| color | red | 设置颜色 |
| font-size | 12px | 设置字体大小 |
| font-weight | bold | 设置字体样式粗体 |
| font-family | Microsoft Yahei | 设置字体种类 |
| font-variant | small-caps | 把段落设置为小型大写字母字体 |
| font-style | italic | 设置字体斜体 |
| text-decoration | underline | 设置下划线 |
| text-decoration | line-through | 设置删除线 |
| text-decoration | none | 给a标签去除下划线 |
| text-indent | 2em | 段落排版--缩进 |
| text-align | center | 被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的 |
| vertical-align | middle | 用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用 |
| line-height | 1.5em | 段落排版--行间距（行高） |
| word-spacing | 50px | 单词间距设置 |
| letter-spacing | 50px | 设置文字间隔或者字母间隔 |
| background-color | yellow | 设置背景颜色 |
| display | block inline inline-block table-cell | 显示为块级元素 行内元素 内联块元素 设置为表格单元显示 |
| visibility | hidden visible | display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素 |
| border | 1px solid red | 设置它的粗细、样式和颜色(边框三个属性)；dashed（虚线）dotted（点线）solid（实线） |
| padding | 20px 10px 15px 30px | 填充也可分为上、右、下、左(顺时针) |
| margin | 20px 10px 15px 30px | 边界也是可分为上、右、下、左 |
| border-bottom | 1px solid red | 只为一个方向的边框设置样式 |
| width | 200px | 设置宽度 |
| height | 200px | 设置高度 |
| box-sizing | border-box | 设置边框、内边框和内容的宽度和高度 |
| box-sizing | content-box | 给内容设置的 width 和 height(默认属性) |
| list-style | none | 去除每个li 前面的点 用 li {list-style: none;} |
| border-radius | 25px | 把一个盒子四角变弧度 |
| cursor | pointer | 鼠标移入时变成手状标志 |
| trstransition | width 1s | 鼠标移入时宽度出现时间是1秒 |
| opacity | 0或1 | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 |
| z-index | -1 | z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。元素可拥有负的 z-index 属性值 |
元素的分类
- 常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
1.每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2.元素的高度、宽度、行高以及顶和底边距都可设置。
3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 - 常用的内联元素有：<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 - 常用的内联块状元素有：<img>、<input>
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
（两个元素之前有缝隙存在,如果后面跟块级元素，则块级元素会换行显示）
盒模型
盒模型
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
[图片上传失败...(image-5e35bf-1550823356858)]
CSS布局模型
- 弹性布局（Flex）
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex 布局链接：
.box{
display: flex;
}
- CSS Grid 网格布局教程链接
网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
- 流动模型（Flow）
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） - 浮动模型 (Float)
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
可以设置 width 和 height 属性也可以在一行显示，元素之前没有缝隙存在并且会脱离图层，如果后面跟块级元素，则块级元素不会换行显示。
- 层模型（Layer）
0、默认定位(position:static);
块级元素独占一行，行内元素默认排列在一行，也就是说每个元素执行各自的默认属性；
1、绝对定位(position: absolute)
绝对定位是特殊的相对定位；
绝对定位是相对它最近的 已定位(position 不能是默认的 static) 的父级元素进行定位的；
如果它的父级元素都没有定位，那它就相对于浏览器首个窗口进行定位的（浏览器有滚动条，往下拉不算首个窗口）；
2、相对定位(position: relative)
相对本身位置进行位移
如：
right: 20px 在原来的位置往左移动 20 px;
top: 20px 在原来的位置往下移动 20 px;
left:20px 在原来的位置往右移动 20 px；
bottom: 20px; 在原来的位置往上移动 20 px;
注意：本来向右移动现在是向左移动，本来想上移动现在是向下移动
3、固定定位(position: fixed)
根据浏览器显示进行定位的，即使窗口有垂直滚动条，也是显示能看到窗口就那么大。
CSS样式设计小技巧
1、水平居中设置-行内元素 text-align:center
2、水平居中设置-定宽块状元素：
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
3、水平居中总结-不定宽块状元素方法（一）
加入 [table]标签；
为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
4、水平居中总结-不定宽块状元素方法（二）
设置 [display: inline] 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置；
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
第二种方法：改变块级元素的 display 为 inline 类型（设置为 [行内元素]，然后使用 text-align:center 来实现居中效果。
5、水平居中总结-不定宽块状元素方法（三）
设置 [position:relative]和 left:50%利用相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的；
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
6、垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
7、垂直居中-父元素高度确定的多行文本（方法一）
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
8、垂直居中-父元素高度确定的多行文本（方法二）
display:table-cell;/IE8以上及Chrome、Firefox/
vertical-align:middle;/IE8以上及Chrome、Firefox/
9、隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
- position : absolute
- float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了
