本文从最基本HTML5知识说起，让各位看官老爷能够从零开始学习！！！
不渴望能够一跃千里，只希望每天能够前进一步
基本知识
web前端三大技术： （1）html：结构
（2）css：样式
（3）JavaScript：行为
HTML：超文本标记语言
超文本=不局限于文本，可以是图片、视频等，即文本内容+非文本内容（视频+音频+图片等）
标记=标签：<单词>：（1）可分为单标签<header>和双标签<header></header>
（2）快捷键为：单词+tab
语言：编程语言
标签的属性：来修饰标签的，设置标签的一些功能
<标签 属性=“值” 属性2=“值2”...>
例如：<input type="text">
常见标签
详情可看：http://www.html5star.com/manual/html5label-meaning
hr标签在 HTML 页面中创建一条水平线
<sub>下标
<sub>上标
初始代码
初始代码快捷键=！+tab
<!DOCTYPE html>//文档声明，告诉浏览器这个一个html文件
<html lang="en">//html文件的最外层标签
//向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english，你的页面如果是中文页面，可将其改为<html lang="zh">
<head>//头部
<meta charset="UTF-8">//字符集为utf-8国际编码，任何文字都可以识别，使网页不出现乱码
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>//网页的标题
</head>
<body>//主体
//写HTML的内容
</body>
</html>
头部：
主体：
注释
格式：<!--注释内容-->
快速注释和删除注释：(1)ctrl +/
(2)alt+shift+a
HTML语义化
（面试经常问）
根据网页中内容的结构，选择适合的HTML标签进行编写
好处如下：
- 在没有css，也能呈现很好的内容结构
- 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重
- 有利于开发和维护，代码更具可读性，代码更好维护
- 方便解析网页
- 便于团队开发和维护
意思是：标题就用标题标签<h1>，段落用<p>标签
注意：html文件只能出现一次h1标签
文本修饰标签
- <strong>:双标签，文本修饰符，字体加粗
<p>1111</p>
<p><strong>11111</strong></p>
- <em>:双，文本修饰符，字体斜体
<p><strong>11111</strong></p>
<p><em>11111</em></p>
- <sub>和<sup>：双，下标文本和上标文本
<p>a<sub>2</sub>+b<sup>1</sup>=ac<sub>2</sub></p>
- <del>和<ins>:双，删除文本和插入文本
<p>原价为<del>300</del>经优惠后价格为：<ins>100</ins></p>
图片
相对路径：（1）. 在路径中表示当前路径
（2）. .在路径中表示上一级路径
绝对路径： （1）C:\火萤视频视频\HYLiteResources\video
（2）https://tse1-mm.cn.bing.net/th/id/
图片标签：<img>
图片属性：src：引入图片的地址
alt：当图片出现故障，出现的文字
title：图片提示信息，鼠标点击图片之后出现的提示信息
注意：”./华硕官网/1.png“正斜线和反斜线的都可以，Windows都可以兼容
链接
<a>：双标签
链接属性：（1）herf属性：链接的地址
（2）target属性：可以改变链接打开的方式，默认情况下，在当前页面打开为：target=“_self”
打开新的页面为：target=“_blank”
注意：跳转的时候，鼠标形状是为手势的游标，而不是箭头的形状
跳转锚点
页面跳转，点击a标签，跳转到页面相应的位置，有两种方式：
-
<a href="#html">html</a>//href=“#+所需要跳转的标签id名称” <a href="#text">text</a> <a href="#java">java</a> <h1 id="html">html</h1>// <p>1111</p> <p>111</p> <p>111</p> <p>111</p> <h1 id="text">text</h1>// <p>111</p> <p>111</p> <p>111</p> <p>111</p> <h1 id="java">java</h1>// -
<a href="#html">html</a>//在需要跳转的位置，添加<a name="html"></a>这一行代码 <a href="#text">text</a> <a href="#java">java</a> <a name="html"></a>//与上面不同的地方 <h1>html</h1> <p>1111</p> <p>111</p> <p>111</p> <p>111</p> <a name="text"></a>// <h1>text</h1> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <a name="java"></a>// <h1>java</h1>
特殊符号
因为在html中编写某些字符不能被识别，比如多个空格，最后只能显示一个空格，故可以借用特殊符号的带代码来实现
列表
无序列表
<ul>、<li>:列表的最外层容器、列表项
注意：<ul>和<li>必须同时使用，而且中间不能存在其它标签
<ul>
<li type="circle">第一项</li>
<li>第二项</li>
</ul>
值 描述
disc 默认。实心圆。
circle 空心圆。
square 实心方块。
//并且这些类型可以通过css样式去更改
有序列表
<ol>、<li>:列表的最外层容器、列表项
注意：<ol>和<li>必须同时使用，而且中间不能存在其它标签，不过这有序列表不太经常使用
<ol type="1">
<li>第一项</li>
<li>第二项</li>
</ol>
有序列表（<ol>）：
值 描述
1 默认。数字顺序的有序列表（1, 2, 3, 4）
a 字母顺序的有序列表，小写（a, b, c, d）
A 字母顺序的有序列表，大写（A, B, C, D）
i 罗马数字，小写（i, ii, iii, iv）
I 罗马数字，大写（I, II, III, IV）
//可以通过css去改变这种样式，使更好看一些
定义列表
<dl>:定义列表
<dt>:定义专业术语或名词
<dd>：对名词进行解释和描述
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>样式表</dd>
</dl>
嵌套列表
列表之间可以互相嵌套，形成多层级的列表
<h1>美食</h1>
<ul>
<li>
<dl>
<dt>小吃类</dt>
<ul>
<li type="circle">
肠粉
</li>
</ul>
</dl>
</li>
</ul>
表格与表单
表格标签
<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
语义化标签：<thead>、<tbody>、<tfood>，上面也解释了语义化，是为了更好的结构
注意：<tbody>可以出现多次，<tfood>和<thead>只能出现一次
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>天气</th>
<th>空气质量</th>
<th>雾霭情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>晴天</td>
<td>良好</td>
<td>正常</td>
</tr>
<tr>
<td>下雨</td>
<td>优秀</td>
<td>无</td>
</tr>
</tbody>
<tfoot></tfoot>
</table
表格属性
border：表格边框
border-collapse 用于表格属性, 表示表格的两边框合并为一条，separate | collapse
取值：
separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：left、center、right左右对齐方式
valign：top、middle、bottom上下对齐方式
<table border="1">//以上面的代码为例，而进行的增加
<table border="1" cellpadding="10">
<table border="1" cellpadding="10" cellspacing="10">
表单标签
<form>标签是使用来创建供用户输入的html表单
<input>标签 定义通用的表单元素,有很多type属性:
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件 form表单需要加上属性enctype="multipart/form-data"
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
<form>
<h2>文本框</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">//placeholder代表没写内容时会出现的提示信息
<h2>上传文件</h2>
<input type="file">
<h2>复选框</h2>
<input type="checkbox" checked>苹果//checked代表一开始就会选上
<input type="checkbox" disabled>香蕉//disable代表不能选上的
<h2>单选框</h2>
<input type="radio" name="gen">男性//之所以需要定义name，是因为编译器这样子才能识别这两个input标签是一组，才能实现单选框的功能
<input type="radio" name="gen">女性
<h2>提交与重置</h2>
<input type="submit">
<input type="reset">
</form>
其它表单标签
<textarea>:多行文本框
<select>、<option>:下拉菜单
<label>:辅助表单
<form>
<h2>多行文本框</h2>
<textarea name="" id="" cols="30" rows="4"></textarea>
<h2>下拉菜单</h2>
<select size=“2”>//表示选择框展示两个选项，默认为1
<option selected disabled>请选择</option>//代表默认不能点击请选择
<option>北京</option>
<option>成都</option>
</select>
<select multiple>//多选，可用到多种不同表单中，比如上传文件
<option selected disabled>请选择</option>
<option>北京</option>
<option>成都</option>
</select>
<input type="radio" name="gen" id="man"><label for="man">男性</label>//label中的for是与input表单中的id所对应，代表点击字也可以选择到单选框
<input type="radio" name="gen" id="woman"><label for="woman">女性</label>
</form>
div与span标签
div全称为division，<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。可以容纳段落、标题、表格、图像等各种网页元素。即HTML大多数标签都可以嵌套在<div>标签中，<div>还可以嵌套多层<div>，用来将网页分隔开
<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
<span>（内联元素，不会换行） 标签被用来组合文档中的行内元素。用来修饰文字，div与span都是没有任何默认样式，需要css来编写的
简单的来说：div时用来划分区域的，span用来修饰文字的，都可以进行嵌套
课后练习
完成下文结构一样的布局
如需答案可以留言跟作者说一下
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
