【HTML5】看这一篇h5就够了！！！！
【HTML5】看这一篇h5就够了！！！！
之前，更新了关于前端的一部分内容，于是，我就开始琢磨着怎样能够系统的学习前端呢？对于刚刚入门前端的小白，提供一些学习路径。首先：学习HTML以及H5的新特性—— 学习CSS以及CSS3——学习JS—— 学习vue——学习MySQL数据库——学习node.js (前后端联动需要会)
下来，我把我学完的h5进行总体的总结一下：
常见的浏览器以及浏览器的内核（针对面试）
1，什么是浏览器的内核？
浏览器的内核主要分为渲染引擎以及js引擎。
渲染引擎主要是读取网页的内容，比如：html。而html和css属于标记性文本语言，是被动的形式读取的。
js引擎主要是读取js的相关内容，比如：js。而js属于高级语言，以主动的形式进行读取的。
现在已经把js引擎单独拿出去，所以，浏览器的内核也就是渲染引擎。由于不同的浏览器显示出来的内容也是不同的。
注：语言分为计算机语言、汇编语言以及高级语言。
计算机语言就是：010101以二进制的形式出现的。
汇编语言就是：以英文字母符号形式出现的。
高级语言就是：我们学习的C以及java以及js等等。
我们常常写的高级语言需要编译器编译转化成计算机语言才能显示在计算机上。（编译器比如：vscode 等等）
2.五大常见的浏览器以及浏览器的内核
微软公司出的IE浏览器以及Edge浏览器
现在Edge浏览器正在替代IE浏览器
这个就是IE浏览器，内核为Trident.
这个就是Edge浏览器
这个就是火狐浏览器，内核为Gecko
这个是Safai浏览器，内核为webkit，是由苹果公司研发
这个就是谷歌浏览器，内核为blink
这个就是Opera浏览器，内核为Blink
Web标准的组成
1，web标准主要分为：结构标准、样式标准以及行为标准。
结构标准：HTML
样式标准：CSS
行为标准：JS
2，HTML骨架：
<html>
<head></head>//头部标签
<body></body>//身体标签
</html>
3，HTML标签的分类：
1，单标签：< /> 如：
<br/> <hr/> <img/> <input/> <base/>
2，双标签：< >< /> 如：
<head> <head/>和<body></body>
注: html主要讲的是标签，绝大部分是双标签，少部分是单标签
4，html标签的关系
嵌套关系：（父子关系）比如：
<html>标签与<body>标签，属于父子关系
并列关系：比如：
<head>标签与<body>标签，属于并列关系
5.开发工具
我在前期已经发出关于开发工具的具体信息，可进行查看。
6.解析基本框架：快捷键：! + tab键
生成后的基本框架为：
<!DOCTYPE html>//用于声明H5
<html>
<head>
<meta charset="utf-8">//用于处理乱码
<title></title>//打开新的浏览器弹出来的名称
</head>
<body>
</body>
</html>
文字标签
<p></p>//段落标签
<hr /> //hr与斜杠存在空格
<br/>//换行标签
<b></b>以及<strong></strong>//文字粗体
<i></i>以及<em></em>//文字斜体
<s></s>以及<del></del>//文字加删除线
<u></u>以及<ins></ins>//文字加下划线
标签的属性：
<标签名 属性1 ="属性1" 属性2 = "属性2">内容</标签名>
例如：
<h1 width="500">小星星</h1>
图像标签
<img src=""/>//src主要写路径
其他属性：
alt :图片不能显示时的替换文本
title:当鼠标悬停时显示的内容
border:设置图像边框的宽度
链接标签
<a href=""></a>//href后面写链接
注：
1，外部链接需要添加完成的链接（不要把http丢掉了哦），比如：
<a href="http://www.baidu.com">百度</a>
2，内部链接（内部页面）可进行跳转到写好的页面，比如：
<a href="index.html">首页</a>
3.当没有明确的目标的链接
<a href="#"></a>
4.可添加图片
锚点定位
锚点定位：当鼠标点击某个东西的时候直接跳转到相应的位置。比如：当在通讯录里点击X之后，直接跳转到通讯录里面首字母为X的内容.
使用方法：
1.使用<a href="#号id名来链接文本">
2.id名跳转到目标位置
例如：使用id选择器进行连接
<a href="#live">个人生活</a>
<h3 id="live">个人生活</h3>
base标签
可在head里写，可以设置整体链接打开的方式
<base target="_blank"/>//设置新的窗口打开百度或者新浪
<base target="_self"/>//当前窗口进行打开
特殊字符——实体字符集
| 用途 | 实体字符集 |
|---|---|
| 空格 |  ； |
| 小于号 | <； |
| 大于号 | p>； |
注：这是几个比较重要常用的，在使用的时候不要忘记后面的分号，比如放几个空格就写几个实体字符集。
相对路径与绝对路径
相对路径
1，图像与HTML文件位于同一个文件夹，只需要输入文件名即可，如：
<img src="index.png"/>
2,图像位于HTML文件的下一级直接加 / ,比如：
我想要3.png这张图片
<img src="image/3.png"/>
3，图像位于html文件的上一级，加". ./" 上两级". ./. ./"以此类推 ，比如：
我想要3.png图片
<img src="../image/3.png"/>
注：路径都是相对于html来说的
相对路径
尽量不建议使用，相对路径是相对与你自身电脑的存储位置。
列表标签
无序列表ul
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
显示为：
有序列表ol
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
显示为：
自定义列表dl
<dl>
<dt>列表1</dt>
<dd>列表2</dd>
</dl>
显示为：
表格
创建一个表格：
<table>
<tr></tr>//行
<td></td>//单元格
</table>
表格只有行和单元格，比如，我要写一个三行三列的表格
<table width="500" height="300" border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>生日</td>
</tr>
<tr>
<td>李四</td>
<td>4</td>
<td>生日</td>
</tr>
<tr>
<td>小王</td>
<td>7</td>
<td>生日</td>
</tr>
</table>
显示为：
表格的属性
border 表格的边框 当border=0时无边框
cellspacing 单元格与边框的间距
cellpadding 单元格与文字之间的间距
align 水平对齐
表头标签
一般第一行或者第一列为表头，想要表头的文字加黑与其内容不一样，可用th标签代替td标签，而且有一个好处自动居中。
<table width="500" height="300" border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>生日</td>
</tr>
<tr>
<td>李四</td>
<td>4</td>
<td>生日</td>
</tr>
<tr>
<td>小王</td>
<td>7</td>
<td>生日</td>
</tr>
</table>
显示为：
表头与主体
表头的全部内容，我们可以全部写在thead里
主题的全部内容，我们可以全部写在tbody里
表格名字的标签
一般我们画一个表格，会在表格的最上方注明某某表格，使用caption
<table>
<caption>我是标题</caption>
</table>
显示为：
合并单元格
合并顺序：先上 先左 其中，跨行合并：rowspan 跨列合并：colspan ，比如：
<th rowspan="4">生日</th>
显示为：
注：删除的个数 = 合并的个数 - 1
input标签
input是一个单标签，一般用于做表单，如下：
主要是，做出如上表单。
<body>
用户名：<input type="text"><br/>
密码：<input type="password">
</body>
显示为：
其他属性：
属性 属性值 描述
type text 单行输入文字
password 输入密码
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
使用方式和上面相同。
label标签
当鼠标滑上去的时候，光标发生颜色的变化。
1，当存在一个表单直接用label包裹起来，如下：
<label>用户名：<input type="text"/></label>
2,当存在多个表单的时候，想要定位某个用for="id"进行链接
<label for="two">输入账号：<input type="text"/>
<input id="two" type="text"></label>
文本域
当你需要一个方框进行评论的时候，可用textarea控件。
<textarea>
请输入留言
</textarea>
显示为：
下拉菜单
当我们点击地区的时候，下面会弹出很多地区。
<select>
<option>选择省份</option>
<option>陕西省</option>
<option>河南省</option>
<option>湖北省</option>
</select>
显示为：
当点击旁边的按钮的时候，才会出来下面的省份。
表单域：form
<form action="**.php" method="post" namen="userName"></form>
其中，action：为url提交的地址；method:为提交的方式；name:为表单的名称。一定要写表单域的名称。
h5的发展史
1993标记语言第一版——1995标记语言第二版——1996HTML3.2以及W3C标准——1999HTML4.0以及W3C标准——2000xhtml1.0——2001xhtml以及W3C标准——2008HTML5
h5新加的标签
1，header:定义文档的头部
2，nav:定义导航栏链接部分
3，footer:定义文档或节的页脚底部
4，article:定义文章
5，section：定义文档的节，区段
6，aside:定义内容之外的侧边
相关信息可查看：网站 W3school.
datalist
datalist标签定义选项列表，要与input元素配合使用。
实现百度一下，出现相应的内容。
<input type="text" value="明星"list="star"/>
<datalist id="star">
<option>刘德华</option>
<option>刘若英</option>
</datalist>
显示为：
当我们输入刘的时候，下面就会有出现刘的内容
注: input里面用list，datalist里面用id进行连接起来。
fieldset标签
使用时需要与legend搭配进行使用，显示效果是在上方出现。
<fieldset>
<legend>用户登录</legend>
用户名：<input type="text"/>
密 码：<input type="password">
</fieldset>
显示为：
html5新增的input type属性
<input type="email"/>//输入邮箱
<input type="tel"/>//输入手机
<input type="numble"/>//只允许输入数字
<input type="url"/>//输入网址
<input type="search"/>//搜素框
<input type="range"/>//输入区域
<input type="time"/>//输入时间
<input type="data"/>//输入年月日
<input type="month"/>//输入月
<input type="week"/>//输入星期
常用的新特性
placeholder占位符，当用户输入的时候文字就消失
autofocus:自动获取焦点（光标自动放进去），如：
<input type="text" placeholder="请输入用户名" autofocus="autofacus">
显示为：
我们可以看到光标（就是方框里面的那个竖线）放进去了
autocomplete属性：自动提交
使用时，注意：
1，需要提交按钮；
2，表单需要填入名字
<form action="">
<input type="text" autocomplete name="userName"/>
<input type="submit"/>
</form>
显示为：
required属性：不能为空
accesskey=“s”：自动定位光标，如：
<input type="text" raquired accesskey="s">
显示为：
当鼠标滑倒相应的区域，光标即可自动定位。
多媒体标签
embed:标签定义嵌入的内容
audio:播放音频
video:播放视频
embed标签
<embed src=""></embed>//引入视频
audio标签
<audio src=""></audio>//播放音频
autoplay ="autoplay"自动播放音频
controls出现播放的滚动条
video标签
<video src=""></video>
完结
现在是，晚上00：46分，相对世界说声晚安！
晚安！世界
关于我：
相关内容可访问
零基础入门前端《一》.
零基础入门前端《二》.
零基础入门前端《三》.
我是小幻幻，欢迎来我的博客！你的一个赞是我写下去的动力哦！