你我学习网
完成笔记链接：https://www.niwoxuexi.com/blog/web/article/1245
——HTML部分——
utf-8 和 utf8的使用
- 只有MySQL可以用"utf8"，但其他地方一律使用大写"UTF-8"。
- 网页推荐使用长后缀名.html
- 有的浏览器中直接输出中文会出现中文乱码，可加声明<meta charset="UTF-8">
- <!--HTML注释-->
-   //空格
- > //大于号
- < //小于号
- " //双引号
- © //版本符号
- <em></em>斜体
- <img src="地址" alt="图片代替文字" title="鼠标悬停提示" width="" height=""/>
- <a href="链接网址" target="目标">页面间链接</a>
- <!--1.页面间链接：A页到B页 主要运用于网页导航-->
- <a name=wo></a>
- <a href=#wo>锚链接</a>
- <!--2.锚链接：A页甲位置到A页的乙位置或A页甲位置到B页的乙位置 # 跳其他页面要为href="页面名.html#锚链接"-->
- <a href="mailto:bdqnWebmaster@bdqn.cn" target="_blank">功能性链接</a>
- <!--3.功能性链接：在页面中调用其他软件功能，电子邮件"mailto: @bdqn.cn" qq msn-->
————
创建表格：
1、<table>：整个表格以<table>标记开始、</table>标记结束，table在没有添加css样式之前，在浏览器中显示是没有表格线的。
2、<tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。）
3、<tr>：表格的一行，所以有几对tr 表格就有几行。
4、<th>：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。
5、<td>：表格的一个单元格，一行中包含几对<td>这行中就有几个单元格。
6、表格中列的个数，取决于一行中数据单元格的个数。
7.设置样式border-collapse:collapse;可以把双线边框线合并为一条线边框。
<table border="边距宽度"> <tr> <td rowspan="跨行数量" colspan="跨列数量" align="文本状态"></td> </tr> </table>
————
表格可以添加标题和摘要标签进行优化。
(1)摘要：
摘要的内容不会在浏览器中显示。作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
(2)标题：
描述表格内容，标题的显示位置：表格上方。
语法：
<table summary="表格简介"> <caption>标题文本</caption> <tr> <td>…</td> </tr> </table>
————
<iframe></iframe>
内联框架iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="是否出现滚动条" noresize="noresize"更改页面大小
配合<a>标签的targer属性及<iframe>标签的name属性，可实现窗口间的关联
//表单
文件域，ps：需要在表单中写入enctype="multipart/form=data" 属性
<form method="提交方式" action="提交地址">
- 隐藏域：type="hidden"
- 只读：readonly="readonly"
- 禁用：disabled="disabled"
<input type="text" name="名称" size="长度" maxlength="最大长度"/>
//password 密码
//radio单选按钮
<input type="radio" name="sex" value="男" id="nan"/> <label for="nan">男</label> <input type="radio" name="sex" value="女" id="nv"/> <label for="nv">女</label>
checkbox多选按钮
<input type="checkbox" name="n" value="1"/
下拉列表
<select name="名称"> <optoin value="值">1</option> </select
文本域textarea
<textarea name="名称" rows="行高" cols="宽度"><textarea>
复合选择器有：
- . 类选择器
- # id选择器
- 空格 后代选择器（交集、并集）
<link type="text/css" rel="stylesheet" href="css/style.css"/>链接式导入外部链接
<style type="text/css">
@import url("css/stype.css");导入式
</typle>
优先级： id选择器>类选择器>标签选择器
超链接伪类：
- .link 为点击前
- .visited 访问后
- .hover 鼠标悬停
- .aotive 单击未释放
透明度
- opacity:(范围0~1)
- filter:aplha(opcitive=透明度<(100)>);
- :fouc-last-type:
- :blur-first-type;
- location.reload();
- location.replay(.html);
- history.back forward
————
在网页中显示一些计算机专业的编程代码，当代码为一行时，使用<code>标签语法：<code>代码语言</code>
注意：如果要插入多行代码时不能使用<code>。多行代码可以用<pre>。
语法：<pre>语言代码段</pre>
<pre> 标签作用：预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
超链接语法：
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
title属性的作用：鼠标滑过链接文字时会显示这个属性的文本内容。这个属性能方便搜索引擎了解链接地址的内容(语义化更友好)。
<a>标签可以链接Email地址，使用mailto能发送电子邮件。
如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
mailto写法：
<a href="mailto:yy@imooc.com ?subject=主题名称 &body=邮件内容">
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：<textarea rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
下拉列表进行多选操作：在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
通用选择器作用是匹配html中所有标签，如 *{color:red}
为同一个元素设置了不同的CSS样式代码时，浏览器根据权值来判断使用权值最高的样式。
规则：
- 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
- !important有最高权值
- !important要写在分号的前面，但注意当网页制作者不设置css样式时，浏览器会按照自己的样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但 !important优先级例外，权值高于用户自设置的样式。
什么是“置换元素”？
置换元素会根据标签属性来显示的元素。反之就是非置换元素了。
如img根据src属性来显示，input根据value属性显示，因此可知img和input是置换元素，同理textarea、 select也是置换元素。
————
段落排版：
(1)letter-spacing：单个汉字间隔或单个字母间隔。
(2)word-spacing：按单词来设置间隔。
——
1、border-style 边框样式：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color 边框颜色
3、border-width 边框宽度：
thin | medium | thick。常用像素(px)。
4、当margin(或padding或border)的left和right的值相同，如：
margin:10px 20px 30px 20px;
可缩写为：
margin:10px 20px 30px;
——
布局模型与盒模型一样都是 CSS概念。布局模型建立在盒模型基础上，不同于我们常说的 CSS 布局样式或 CSS 布局模板。CSS布局模板是外在的表现形式。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
流动（Flow）是默认的网页布局模式。特征：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
流动模型下，内联元素会在所处的包含元素内从左到右水平分布显示。
2、浮动模型 (Float)
任何元素默认是不能浮动的，可用CSS定义为浮动。
3、层模型（Layer）
让html元素在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
(1)绝对定位(position: absolute)
将元素从文档流中拖出来，然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位。如果不存在这样的父包含块，则相对于body元素即相对于浏览器窗口。
(2)相对定位(position: relative)
元素在正常文档流中的偏移位置。首先按static(float)方式生成一个元素(元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留。
(3)固定定位(position: fixed)
始终位于浏览器窗口内视图的设置位置，不受文档流动影响，
另外属性background-attachment:fixed;的作用也是设置背景图片固定。
relative与absolute组合：
1、参照定位的元素必须是相对定位元素的前辈元素。
2、参照定位的元素必须加入position:relative。
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
设置颜色的方法：
1、英文单词：p{color:red}
2、RGB颜色
由 R(red)、G(green)、B(blue)三种颜色比例来配色。
p{color:rgb(133,45,200)}
每一项的值可以是 0~255 的整数，也可以是0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%)}
3、十六进制颜色
其原理也是 RGB 设置，每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}
——
相对单位长度值：
1、px像素
像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器和使用显示器的实际像素值有关。
2、em
(1)元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em = 14px；如果font-size 为18px，那么 1em = 18px。
如 p{font-size:12px; text-indent:2em;}意思首行缩进 24px(即两个字体大小的距离)
(2)当 font-size 设置为 em时，计算标准以它父元素的 font-size 为基础。
如：<p>以这个<span>例子</span>为例</p>
p{font-size:14px} span{font-size:0.8em;}
这里 span 字体大小就为11.2px(14 * 0.8 = 11.2px)
3、%百分比
p{font-size:12px; line-height:130%}
设置行高(行间距)为字体的130%（12 * 1.3 = 15.6px）
块状元素没有设置宽度时怎么居中?
1.加入 table 标签
2.设置 display: inline方法：显示类型设为行内元素，进行不定宽元素的属性设置
3.设置 position: relative 和 left:50%。利用相对定位，将元素从左偏移50%实现居中。
——
隐性改变display类型：
1. position : absolute;
2. float:left 或 float:right;
不论什么元素(display:none除外)，设置以上属性之一，该元素的display显示类型就会自动变为 以display:inline-block(行内块状元素)方式显示，此时可设置元素的 width 和 height，且默认宽度不占满父元素。
(如 a是行内元素，直接设置它的 width 无效，但设置 position:absolute 绝对定位后就可以设置宽度)
文本格式化标签：
- <b> 文本加粗
- <strong>文本加粗(加重语气)
- <i> 斜体字
- <em> 斜体(强调文字)
- <big> 字体放大
- <small> 字体缩小
- <sub> 定义下标字
- <sup> 定义上标字
- <ins> 插入字(字体下划线)
- <del> 字体删除线
"计算机输出" 标签：
- <code> 定义计算机代码
- <kbd> 键盘输入
- <samp> 定义计算机代码样本
- <var> 定义变量
- <pre> 预格式化文本(会保留文本的多个空格)
引文、引用、及标签定义：
- <abbr>缩写
- <address> 地址联系信息
- <bdo>文字方向(设置dir="rtl"为从右到左显示)
- <blockquote> 长文本引用(不会自带双引号，但会两边自动缩进)
- <q>短句引用语(自带双引号)
- <cite>定义引用、引证
- <dfn>定义一个定义项目。
title=""属性规定关于元素的额外信息。标签中加上title属性可实现鼠标移过时出现提示文字，如<p title="提示">
——
<base>元素:
描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head> </head>
提示：在HTML中，<base>标签没有结束标签。
——
HTML 颜色值RGB
- 由红(R)、绿(G)、蓝(B)组成。
- 每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。
- 十六进制值写法：#号后加3个或6个十六进制字符。
- 三位数表示法为：#RGB，转换为六位数表示为：#RRGGBB
——
常见的 URL Schemes
- http超文本传输协议 以http:// 开头的普通网页，不加密。
- https安全超文本传输协议 安全网页，加密所有信息交换。
- ftp文件传输协议用于将文件下载或上传至网站。
- file 您计算机上的文件。
——
HTML5 多媒体标签
- <embed> 定义内嵌对象。HTML4不赞成，HTML5允许。
- <object> 定义内嵌对象。
- <param> 定义对象的参数。
- <audio> 定义声音内容
- <video> 定义视频或者影片
- <source> 定义media元素的多媒体资源(<video>、<audio>)
- <track> 规定media元素的字幕文件或其他包含文本的文件 (<video>、<audio>)
——
audio音频设置
1.最好的解决方法：
下例使用两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg来播放音频。如果失败，代码将回退尝试 <embed> 元素。
<audio controls height="100" width="100"> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>
2.雅虎播放器使用免费，提供一个小型的播放按钮。
（1）如需使用它，需要把这段 JavaScript 插入网页底部：
（2）然后把MP3文件链接到页面中，JS会自动为每首歌创建播放按钮如：
<a href="音频路径" >音乐1</a> <a href="horse.mp3">音乐2</a>
3.用超链接
以下代码指向 mp3 文件链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：
<a href="horse.mp3">音乐1</a>
——
video视频播放设置
1.最好的解决方法
下例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试以 mp4、ogg、webm其中一种格式来播放视频。如果都失败，则回退到 <embed> 元素。
HTML5的source + object + embed。
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>
2.优酷解决方案
如果要在网页中播放视频，可把视频上传到优酷等视频网站，然后在你的网页中插入 HTML代码即可播放视频：
width="480" height="400"
type="application/x-shockwave-flash">
</embed>
3.使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
以下代码指向 AVI文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"如 Windows Media Player 来播放该 AVI 文件：
——
HTML中如何键入空格？
1.用空格占位符
但 有不间断的特性。即连续的 会在同一行内显示。即使有100个连续的 ，浏览器也不会把它们回车拆行。
2.段落间距<p>、换行<br/>
3.用JS动态给HTML添加空格：
例为照顾CSS样式或照顾特殊效果的实现。如果你不单单想让div之间是null，而是想动态添加空格的话，这样(jquery):
- $("#id").innerHTML += " ";
——
- display: none; 元素不显示也不会占位
- visibility: hidden; 元素只是隐藏但仍然占位置
- visibility: collapse; 隐藏但不占空间，类似display:none;
——
- clip 剪辑一个绝对定位的元素。
- clip : rect(top, right, bottom, left);
CSS 伪类：
1.Anchor伪类 (伪类如:link冒号和伪类名之间不能有空格)
在支持 CSS 的浏览器中，链接的不同状态可用不同的方式显示：
- a:link {color:#FF0000;} /* 未访问的链接 */
- a:visited {color:#00FF00;} /* 已访问的链接 */
- a:hover {color:#FF00FF;} /* 鼠标划过链接 */
- a:active {color:#0000FF;} /* 已选中的链接 */
2.CSS类和伪类配合使用：
- p : first-child{ } 匹配父级中第一个<p>子元素
- p > i:first-child{ } 匹配所有<p>元素的第一个 <i> 子元素
- p:first-child i{ } 匹配第一个<p>元素中的所有 <i> 元素
——
- White-space属性：设置如何处理元素内的空白。
- normal 默认。空白会被浏览器忽略。
- pre 空白会被浏览器保留。其行为方式类似 <pre>标签。
- nowrap 文本不会换行，文本在同一行上继续，直到遇到<br/>为止。
- pre-wrap 保留空白符序列，但是正常地进行换行。
- pre-line 合并空白符序列，但是保留换行符。
- inherit 从父元素继承 white-space 属性的值。
——
浏览器兼容前缀：
- -moz- 火狐等使用 Mozilla内核的浏览器
- -webkit- 谷歌、Safari等使用 Webkit内核的浏览器
- -o- Opera浏览器，使用Blink内核
- -ms- IE，使用 Trident内核
——
viewport 是用户网页的可视区域。
