html相关内容
注释
语法：<!--注释的内容-->
常见的标记
1.标题
一级标题：<h1></h1>
二级标题：<h2></h2>
...
六级标题：<h6></h6>
脚下留心：
1.标题都是加粗的，数字越大，字体越小，数字最大为6
2.标题标签在SEO搜索引擎中权重比较大
多学一招：
SEO：（Search Engine Optimization）：汉译为 搜索引擎优化
我们在搜索引擎中搜索东西，会出来很多网页，我们习惯点击排名靠前的链接，也就是说一旦这个网页排名靠前了，那用户量就会增多，网站就有价值了，网页的点击率和流量就都有了。如何才能让网页排名靠前呢？就是要讨好搜索引擎。提升网页在搜索引擎中的排名就是搜索引擎优化。
如何优化：
- 花钱(竞价排名)买关键字 见效快，花钱多（买点击量，点完次数就不会靠前了）
- 让页面更加规范，语义更加明确（在合适的地方使用合适的标签），搜索引擎更喜欢
- 发外链，在贴吧、论坛等地方发网站的链接
2.排版标记
-
段落标记：
<p></p> -
水平线：
<hr> -
换行：
<br>
3.字体标记
-
粗体：
<b></b> -
斜体：
<i></i> -
下划线：
<u></u>
4.强调标记
-
强调标记，通过加粗来强调：
<strong></strong> -
强调标记，通过斜体来强调：
<em></em> -
强调标记，通过下划线来强调：
<ins></ins>
脚下留心：
- 字体标记和强调标记都能实现视觉效果，但含义是有区别的，强调标记在SEO（搜索引擎优化）的角度，权重更高
- 强调标签具有语义化，语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前
列表
1.无序列表
| 属性 | 描述 |
|---|---|
| Type 设置列表项目符号样式 circle - 空心圆 square - 正方形 disc - 实心圆（默认） |
注意： 1. 列表项里面至少有一个li标签（至少1一个，可以写N个） 2. 写无序列表必须写ul 3. 内容必须写在li标签内 说明： 列表项目结构中没有先后顺序的列表，称之为：无序列表 |
<ul>
<li>丹麦国家队暂时"解散"！足协征召业余球员组队参赛 </li>
<li>世界足坛最惨之人出炉!只有他欣赏不了梅西的演出</li>
<li>当卢卡库的"大笨钟"晃过门将时，真以为是大罗来了 </li>
<li>C罗又美黑!甲板上拥翘臀女友入眠 他如今是CR5.5?</li>
<li>揭C罗不坐尤文大巴之谜 葡总理:他是全国的荣耀! </li>
<li>巴萨官推:梅西就是最佳 真坑!1月要赴美踢西甲</li>
</ul>
2.有序列表
| 属性 | 描述 |
|---|---|
| Type 设置列表项目编号样式： A,a - 设置项目编号为大小写英文字母 I,i - 设置项目编号为大小写罗马数字 1 - 设置项目编号为阿拉伯数字（默认） |
注意： 1. 至少有一个li标签 2. 内容必须写在li标签里 3. 写有序列表必须写ol标签 4. 设置项目编号样式为英文字母，超过26个字母，会以aa,ab,ac这样的规律递增 说明： 列表结构中有先后顺序并且可以设置项目编号为（1,2,3或者a、b、c）的列表，称之为：有序列表 |
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
3.自定义列表
| 属性 | 描述 |
|---|---|
| 注意： 1. 必须写一个dt但是可以不写dd;dt也可以写多个 2. Dd是针对于前面最近的一个dt的表述 3. 内容必须写在dt或者dd里面 说明： 不仅仅是一列项目，还是项目标题和项目描述/注释的组合 |
<dl>
<dt>特色服务</dt>
<dd>F 码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
注意：dl是列表模块，dt是列表的标题，dd是标题的补充说明，dl和dd是并列的标签
超链接
标记：<a></a>
target（目标属性）：
_blank：跳转到一个新的窗口页面
_self：在原页面的窗口中打开新页面
title：当鼠标悬浮到链接上的时候，显示title属性的值
<a href="#" title="锄禾日当午，汗滴禾下土。">锄禾日当午</a>
- 内部链接 在本地文件之间跳转
- 外部链接 跳转到其他网站的链接
- 下载链接 链接跳转到一个浏览器无法打开的文件时，就会自动出现下载界面
- 锚点链接
<a href="#目标名">去目标地点</a>
<标签名 id="目标名">目标地点</标签名>
路径
- 相对路径
- 相对于当前的文件的地址，从当前文件出发去找目标当前文件和目标文件在同一个站点中
- 绝对路径
- 以盘符开头，从计算机出发去找目标 c:\face.txt
图片标签
语法：<img src='图片的源' alt='' title='' width='' height='' />
src：图片的地址
alt：当图片无法显示的时候，将alt后面的文字显示在图片的位置上
title：当鼠标放到图片位置的时候显示提醒性文字。
<img src="1.png" title="这是卡哇伊" />
<img src="2.png" alt="这是猫咪" />
其他
pre标签
预排版标签：<pre></pre>
<pre>
上
左 右
下
</pre>
实体
替换成浏览器不能解析的字符 < > ... 等符号
空格：
<：<
>：>
HTML教材：
p标签的语法：<p></p>
表格
1.相关标签
画图说明，table是一个表格的模块，里面有行，光有行不行，里面要有列，在html中不叫列，叫单元格，再有很多行，就组成了表格-------》table标签包含行tr---》再包含单元格td
表格：<table></table>
行：<tr></tr>
单元格：<td></td>
每列的标题：<th></th>
表格标题：<caption></caption>
<!-- 表格的区域,border属性代表边框的意思 -->
<table border="1">
<!-- 行 -->
<tr>
<!-- 单元格 -->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<!-- 单元格 -->
<td>令狐冲</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<!-- 单元格 -->
<td>任盈盈</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<!-- 单元格 -->
<td>任我行</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<!-- 单元格 -->
<td>岳不群</td>
<td>男</td>
<td>50</td>
</tr>
</table>
注意：border这个属性一定加在table标签上，加在td上不生效
2.对齐方式
-
水平对齐
语法：
align="center/left/right" -
垂直对齐
语法：
valign="top/middle/bottom"
3.单元格间距和填充
单元格间距（cellspacing）：单元格和单元格距离，默认是2像素
单元格填充（cellpadding）：单元格和内容的距离，默认是1像素
4.合并单元格
合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面
合并列(colspan)：把不同列合并起来，写在左边的单元格上面
<table cellspacing="0" cellpading="30" border="1" width="300" height="200">
<caption><h3>学生证</h3></caption>
<tr>
<th align="center" colspan="4">深圳老马程序员</th>
</tr>
<tr align="center">
<td>姓名</td>
<td>班级</td>
<td>学号</td>
<td rowspan="2">照片</td>
</tr>
<tr align="center">
<td>曾真光</td>
<td>php14期</td>
<td>007</td>
</tr>
</table>
注意：合并以后一定要把多余的单元格td删掉
两个排版标签
这两个标签没有语义
div标签：一般用于存放图片、文字、视屏等网页内容----存放一切内容------用作盒子
span标签：一般只用于存放文字--------存放文字
标签的通用属性
1.id属性
id属性是标签的唯一标识，一个页面中可以有很多id属性，但是每个标签的id属性的值必须是唯一的
多学一招：通常用在写动态效果-----javascript
2.class属性----类
通常用来使用class属性值给标签设置样式，样式一样的标签可以设置同样的class
3.name属性
设置标签的名字，可以有同样的名字
多学一招：通常用在表单中
4.style属性
设置标签样式
表单
表单的作用就是用来收集用户输入的信息
表单的组成：表单域，表单元素
表单域标签：<form></form>，放置所有的表单元素
表单元素：
1.文本框
可输入明文内容的输入框----用户名
<input type="text" maxlength="6">
多学一招：maxlength属性可以限制最大输入长度，为了让服务器端接收到输入的数据，表单元素都需要加name属性
2.密码框
输入密文的输入框----密码
<input type="password">
密码框的属性和使用和文本框一样
3.单选框
只能选择一项的表单----性别选择
<input type="radio" value="0">
注意：要想单选框的单选功能生效，必须添加name属性，并且name属性的值必须一样，这种无法输入的表单元素必须赋值：value="值"，默认选中项使用checked="checked"属性
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1" checked>女
4.复选框
可以选择多项的表单----爱好选择
<input type="checkbox" value="0">
使用方式和属性与单选框一样
示例代码
<input type="checkbox" />足球
<input type="checkbox" />排球
<input type="checkbox" checked />篮球
5.文件上传
<input type="file">
6.下拉菜单
通常用于选择籍贯或收货地址中的省市区
<select>
<option>江苏</option>
<option>浙江</option>
<option>安徽</option>
</select>
默认选中项使用selected="selected"
多学一招：下拉菜单可以分组展示
代码
<select>
<optgroup label="省份">
<option value="1">山东省</option>
<option value="2">河北省</option>
<option value="3" selected>河南省</option>
</optgroup>
<optgroup label="行业">
<option value="1">IT互联网</option>
<option value="2">制造业</option>
<option value="3" selected>零售业</option>
</optgroup>
<optgroup label="薪资范围">
<option value="1">1000~3000元/月</option>
<option value="2">3000~5000元/月</option>
<option value="3" selected>5000~8000月</option>
</optgroup>
</select>
7.文本域
可以输入很多的内容----qq的留言输入框
<textarea></textarea>
代码
<textarea cols="30" row="10"></textarea>
多学一招：文本域可以通过两个属性来设置大小，宽度使用cols属性，高度使用rows属性
8.普通按钮
点击不会有任何效果
<input type="button" value="普通按钮">
9.提交按钮
用于提交表单的按钮
<input type="submit">
多学一招：该按钮点击后默认会将表单的数据提交
10.重置按钮
将表单的输入状态还原的按钮
<input type="reset">
多学一招：该按钮点击后会将表单的输入状态还原到最初
表单域
标签：<form></form>
作用：将表单元素的值收集起来，发送给服务器，form标签的action属性的值就是数据提交的地址
第一次提交，没有数据，因为很多表单元素都没有name属性，服务器接收数据靠的就是表单的name属性
注意：form是一个双标签，里面包含所有需要一次性提交给服务器的表单元素
代码
<form>
用户名：<input type="text" name="username" />
密码：<input type="password" name="password" />
<input type="submit" />
</form>
框架
在同一个浏览器上显示多个多个框架。在每一个框架中放了一个页面。
1.使用的标签
<frameset>：框架集，rows属性设置框架分几行显示，cols属性用来设置框架分几列显示，rows和cols尽量不要同时设置（因为不能及时辨别每个位置的页面）
<frame>：框架，src属性用来引入要显示的页面
注意：框架页面中不能有body标签，可以将body标签<noframes></noframes>标签中。noframes标签是当浏览器不支持框架的时候显示其中的内容。
案例1：
案例2：
2.框架嵌套
3.框架中跳转
4.内嵌框架
就是在页面中嵌套的框架
<iframe src="http://www.baidu.com" width="500" height="200" marginwidth="0" marginheight="0" frameborder="0"></iframe>
多学一招：
- src：内嵌框架中存放的页面
- width和height：内嵌框架的宽度和高度
- marginwidth：内嵌框架中的页面距离内嵌框架的宽度
- marginheight：内嵌框架中的页面距离内嵌框架的高度
- frameborder：内嵌框架边框
html5的新特点
1.语法更简单
-
头部声明
<!doctype html> -
简化了字符集声明
<meta charset="utf-8">
2.语法更宽松
-
可以省略结束符的标签
li、dt、dd、p、optgroup、option、tr、td、th
-
可以完全省略的标签
html、head、body
3.标签语义化
增加了很多标签，在作页面的时候更加具有语义（定义了一些原本没有语义的div模块为有鲜明结构的语义模块）
-
<header>标记定义一个页面或一个区域的头部 -
<nav>标记定义导航链接 -
<article>标记定义一篇文章内容 -
<section>标记定义网页中一块区域 -
<aside>标记定义页面内容部分的侧边栏 -
<footer>标记定义一个页面或一个区域的底部
4.表单新增常用属性
required：必填
placeholder：输入内容提示
autofocus：自动获取焦点-----自动帮我们将光标点进去
<form method="post" action="http://www.baidu.com">
<!-- required 必填，必须的 -->
<!-- 自动获取焦点----自动将光标定位到表单中 -->
<input type="text" placeholder="请输入用户名" autofocus="autofocus" required="required" />
<input type="submit" />
</form>
5.input新增type属性值
- type="email"，文本框中只能输入email地址
- type="date"，日期控件
- type="time" 时间
- type="month" 月份
- type="week" 周选择
- type="number"，唤醒数字键盘
- type="range"，滑块
- type="color" 颜色选择器
多媒体标签
1.embed标签
不是h5独有，h4就有，用来播放音频和视屏
<embed src="邓紫棋-喜欢你.mp3"></embed>
<embed src="邓紫棋_喜欢你.webm"></embed>
说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、flac、AIFF、AU、MP3、MP4等等，Netscape及新版的IE 都支持。
多学一招：embed标签有属性可以控制播放状态
autostart=true/false --用来控制音频或视频文件是否在下载完之后就自动播放（IE可用）
loop=正整数/true/false --用来控制音频或视屏文件在播放结束之后是否循环播放或循环播放的次数
hidden=true/no --用来设置多媒体的控制面板是否隐藏
参考：https://www.cnblogs.com/lgx5/p/5714494.html
2.audio标签
h5专门用来播放音频的，支持的格式有MP3、OGG、WAV
<audio src="邓紫棋-喜欢你.mp3" controls autoplay="autoplay"></audio>
controls="controls"用来显示控制面板
autoplay="autoplay"用来控制自动播放
loop="loop"用来设置循环播放
多学一招：为了兼容，通常会写多个资源，第一个不能播放就播放第二个，原因是不同的浏览器支持的格式不一样，所以出现了一种兼容写法（前提是准备三种格式的视频文件）
<audio controls autoplay>
<source src="music/music.mp3">
<source src="music/music.ogg">
</audio>
浏览器会从上到下依次去读，在这个过程中，只要读到自己识别的视频文件就直接播放这个视频文件，并且不会再往后继续读取
参考：https://www.cnblogs.com/linn/p/3408515.html
3.video标签
h5专门用来播放视屏的，可以写单个，也可以写多个，支持格式有MP4、WebM、OGG
<video controls autoplay loop>
<source src="邓紫棋_喜欢你.mkv">
<source src="邓紫棋_喜欢你.webm">
</video>
参考：https://blog.csdn.net/keji_123/article/details/77717849
计算机的进制
| 进制 | 包含数字 |
|---|---|
| 二进制 | 0,1 |
| 八进制 | 0,1,2,3,4,5,6,7 |
| 十进制 | 0,1,2,3,4,5,6,7,8,9 |
| 十六进制 | 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F |
转成10进制：以进制为底，幂从右往左依次为0次方，1次方，2次方…，乘以当前当前数字在10进制中的结果，所有乘积相加
例：
- 16进制的FF转为10进制：
- 2进制的11011转为10进制
- 10进制的11转2进制-----反向取余数
网页中的颜色
1.英文单词
color:red
2.rgb三原色
color:rgb(255,0,0)
3.16进制颜色值
其实就是将三原色转换为16进制表示
255----》FF
color:#FF0000;
meta标签
1.编码
<meta charset="utf-8"> <!--告知浏览器使用utf-8的编码格式来解析页面-->
字符集
ansi：不同的国家和地区制定了不同的标准，由此产生了 GB2312、GBK、Big5、Shift_JIS 等各自的编码标准。这些使用 1 至 4 个字节来代表一个字符的各种汉字延伸编码方式，称为 ANSI 编码。在简体中文Windows操作系统中，ANSI 编码代表 GBK 编码；在日文Windows操作系统中，ANSI 编码代表 Shift_JIS 编码。 不同 ANSI 编码之间互不兼容，当信息在国际间交流时，无法将属于两种语言的文字，存储在同一段 ANSI 编码的文本中。
unicode：Unicode（统一码、万国码、单一码）是计算机科学领域里的一项业界标准，包括字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。
字符编码
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码，用在网页上可以统一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
GB2312是一个简体中文字符集，由6763个常用汉字和682个全角的非汉字字符组成。其中汉字根据使用的频率分为两级。一级汉字3755个，二级汉字3008个。
GBK即汉字内码扩展规范，K为扩展的汉语拼音中“扩”字的声母。英文全称Chinese Internal Code Specification。GBK编码标准兼容GB2312，共收录汉字21003个、符号883个，并提供1894个造字码位，简、繁体字融于一库。
Big5 又称为大五码或五大码**，是使用繁体中文（正体中文）社区中最常用的电脑汉字字符集标准，共收录13,060个汉字。虽普及于台湾、香港与澳门等繁体中文通行区
<meta name="description" content="网页内容文本,PHP开发,laravel,thinkPhP`">
多学一招：搜索引擎上的描述，可能是<meta>标签中的description部分，也可能是页面中的一段话
其他
1. 文字滚动
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
<marquee behavior="scroll" direction="up" height="30" style="overflow:hidden;" scrollamount="1" width="300" onMouseOver="stop()" onMouseOut="start()">
雷电黄色预警！<br />
大雨黄色预警！<br />
</marquee>
</body>
</html>
direction：方向
up:上 down：下 left：左 right：右
scrollamount:滚动速度-----------------scroll：滚动 amount：数值
width：宽度 height：高度
onmouseover：当鼠标移上去
onmouseout：当鼠标离开
stop()：停止
start()：开始
behavior：
scroll 循环滚动
alternate 来回滚动
slide 滚动一次停止
2.object标签
<object type="application/x-shockwave-flash" data="line.swf" width="500" height="500"></object>
