前言：前端自从HTML5出来以后，发展极为迅速，抢占了很大一部分原生开发的份额。我觉得原因有两个：第一个是H5开发跨平台，横跨iOS、Android、PC端，相比原生开发来说可以节省公司开发资源，而且前端还可以借助庞大的微信用户群开发微信小程序，开发成本低；第二个是H5开发相比原生界面开发，开发调试效率高几个等级，可能原生端开发一个复杂界面，iOS、Android各需要3人力，前端可能只需要1人力就可以开发完成。
基于前端开发整体的高效率，比如调试界面刷新网页即可实时更新界面，响应式编程范式、声明式编程范式等，所以直接撸起袖子加油干-开始学习前端基础HTML。
一、HTML定义
HTML 是用来描述网页的一种语言，英文全称是 Hyper Text Markup Language ，中文是超文本标记语言。HTML 使用标记标签来描述网页，HTML文档包含了HTML 标签及文本内容，HTML文档也叫做 web 页面。
二、HTML基本结构
HTML基本结构如下：
// 在VSCode新建一个test.html文件，使用Emmet语法键盘输入'!'即可把HTML代码全部敲出来
// 在HTML中，注释使用'<!-- -->'注释，而不是'//'，这里为了方便使用'//'，快捷键是cmd+/
// 文档声明语句：告诉浏览器该文档遵循html规范
<!DOCTYPE html>
// 第一个标签<html>是告诉浏览器这是html文档的开始
<html lang="en">
// 文档文本是头部信息
<head>
// UTF-8为多国语言编码
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 文档标题，会显示在浏览器的窗口的标题栏
<title>Document</title>
</head>
// body之间的文本是正文
<body>
<h1>Hello world</h1>
</body>
// 告诉浏览器这是html的终止
</html>
三、HTML标签分类
HTML标签大体分类两类：
1、双标签：比如 head、body、h1~h6等，大部分是双标签；
2、单标签：比如 img、meta、input、br等；
HTML常见标签（这里也有人称为元素）如下：
1）区块：div；
2）区分：span；
3）文本：p、h1~h6、em、dt、dd；
4）表格：table、tbody、thread；
5）表单：form、input、label；
6）链接：a；
7）图片：img；
8）文档：html、head、title、body、meta；
9）列表：ul、ol、li、nav；
10）其他：br、hr、iframe、video、audio；
前端标签和元素的严格区别：
标签：由尖括号包围的关键词，比如 `<html>` ，标签对中的第一个标签是开始标签，第二个标签是结束标签；
元素：HTML 元素以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。
通过对比我们可以清楚的了解到，HTML标签是超文本标记语言的最基本单位，而HTML 元素指的是从开始标签到结束标签的所有代码。
四、常见文本类标签
1、<h1~h6>：标题标签，准确的来说它属于文档章节标签，但是也是一种文本标签，h标签有助于SEO（Search Engine Optimization）优化，可以促进关键词排名。
<h1>Hello world</h1>
2、<P>：定义段落，<br>：定义换行，<hr>：定义水平线，<pre>：定义预格式文本，<strong>：定义语气更为强烈的强调文本，<i>：显示斜体文本效果，<b>：呈现粗体文本效果；
3、<a>：定义超链接 <a href="URL"></a> ，href的作用是指明超链接要链接到的网址。除了href属性，还有title属性表示链接的提示信息。target属性表示链接的打开方式，即当点击了链接，选择是在另一个页面打开还是本页面打开。其属性值包括 _ blank(新的空白页)、_ self(当前页)、_ top（当前页）。
<a href="https://www.baidu.com" target="_blank">百度一下</a>
五、块级元素与内联元素
如果按是否换行特征分类，大体分为三类：块级元素、内联元素和内联块级元素。
1、块级元素
块级元素定义：是指本身的属性为display:block的元素。
块级元素的特点：
1）每个块级元素独占一行，每个块级元素都会从新的一行开始，从上到下排布，所以我们通常使用块级元素来进行大布局的搭建；
2）块级元素可以直接控制宽度、高度以及盒子模型的相关css属性；
3）在不设置宽度的情况下，块级元素的宽度是他父级元素内容的宽度；
4）在不设置高度的情况下，块级元素的高度是他本身内容的高度；
常见块级元素：
1）div：常用块级容器，也是css和layout的主要标签；
2）h1~h6：一级标题至六级标题；
3）hr：水平分隔线；
4）menu：菜单列表；
5）ol、ul、li：有序列表、无序列表、列表项；
6）dl、dt、dd：定义列表、定义术语、定义描述；
7）table：表格；
8）p：段落；
9）form：表单；
2、内联元素（也叫行内元素）
内联元素定义：是指本身属性为display:inline的元素。
内联元素的特点：
1）内联元素会和其他元素从左到右显示在一行，我们通常使用内联元素来进行文字、小图片或者小布局的搭建；
2）内联元素不能直接控制宽度、高度以及盒子模型的相关css属性，但是可以设置内外边距的水平方向的值。也就是说对于内联元素的
margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，但是竖直方向的margin和padding无效果；3）内联元素的宽高是由内容本身的大小决定的（文字、图片等）；
4）内联元素只能容纳文本或者其他内联元素（不要在内联元素中嵌套块级元素）；
常见的内联元素：
1）a：超链接；
2）b：加粗；
3）span：常用的内联容器，定义文本内区块；
4）select：下拉列表；
5）label：Input元素定义标记；
3、内联块级元素
内联块级元素定义：是指本身属性为display:inline-block的元素。
内联块级元素特点：
1）和其他元素都在一行上；
2）元素的高度、宽度、行高以及顶和底边距都可设置；
常见的内联块级元素：
1）img：引入图片；
2）input：输入框；
注意：块级元素可以通过设置 display:inline 变为内联元素，内联元素也可以通过设置 display:block 变为块级元素。
六、表格标签
1、<table>：定义表格；
2、<thead>：定义页眉；
3、<tbody>：定义主体；
4、<tfoot>：定义页脚；
5、<caption>：定义标题；
6、<th>：定义表头；
7、<tr>：定义一行；
8、<td>：定义单元格；
代码如下：
<table align="center" cellpadding="2" cellspacing="3" width="300" height="300" border="1">
<caption>照片冲印价格详情</caption>
<thead>
<tr>
<th>相片尺寸</th>
<th>富士</th>
<th>柯达</th>
</tr>
</thead>
<tbody>
<tr>
<th>6寸</th><td>0.45</td><td>0.6</td>
</tr>
<tr>
<th>7寸</th><td>0.89</td><td>1</td>
</tr>
<tr>
<th>8寸</th><td>1.69</td><td>2</td>
</tr>
<tr>
<th>10寸</th><td>3.89</td><td>5</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="3">运费21元/单，满199元免运费</td></tr>
</tfoot>
</table>
常见属性值：
1、width、height： 指定表格的宽度，表格的高度；
2、border：指定表格边框的宽度；
3、cellpadding：指定边框与内容之间的空白；
4、cellspacing：指定单元格之间的空白；
5、align： 指定表格的对齐方式 ，left、 right 、 center ；
6、valign：垂直排列方式， top、 middle 、 bottom；
7、colspan： 列数合并列单元格；
8、rowspan： 行数合并行单元格；
9、bgcolor：表格背景色；
10、background：表格背景图；
11、bordercolor：表格边框颜色；
七、表单标签
1、<form>：定义表单；
2、<input>：定义输入域；
3、<textarea>：定义文本域(多行)；
4、<label>：定义一个控制的标签(input 元素的标注)；
5、<fieldset>：定义域，围绕表单中元素的边框；
6、<legend>：定义域的标题；
7、<select>：定义一个选择列表；
8、<optgroup>：定义下拉框分组，包裹多个种类的option标签；
9、<option>：定义下拉列表的选项，与select标签一起使用；
10、<button>：定义按钮；
11、<keygen>：定义表单的密钥对生成器字段；
12、<output>：定义不同类型的输出，比如脚本的输出；
代码如下：
<form action="/login" method="post" class="m-form">
<fieldset>
<legend>照片选择</legend>
<label for="file">选择照片</label><input type="file" id="file">
</fieldset>
<fieldset>
<legend>综合设置</legend>
<div>选择尺寸：</div>
<div>
<input class="cb" type="checkbox" name="size" id="cb_0" value="5"><label for="cb_0" checked>5寸</label>
<input class="cb" type="checkbox" name="size" id="cb_1" value="6"><label for="cb_1">6寸</label>
</div>
<div>选择相纸：</div>
<div>
<input class="rd" type="radio" name="material" id="rd_0" value="fushi"><label for="rd_0" >富士</label>
<input class="rd" type="radio" name="material" id="rd_1" value="keda"><label for="rd_1" >柯达</label>
</div>
<div>
<label for="delivery">配送方式：</label>
<select id="delivery">
<option value="0">快递</option>
<option value="1">EMS</option>
<option value="2" selected>平邮</option>
</select>
</div>
<div>
<label for="description">商品描述：</label>
<input class="txt" type="text" id="description" placeholder="描述">
</div>
<div>
<label for="feedback">意见反馈：</label>
<textarea name="feedback" rows="4" id="feedback"></textarea>
</div>
</fieldset>
<div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
HTML5的表单常见属性type类型：
1、checkbox：定义复选框；
2、color：定义拾色器；
3、date、month、week：定义日期字段（带有 calendar 控件）；
4、time：定义日期字段的时、分、秒（带有 time 控件）；
5、email：定义用于 e-mail 地址的文本字段；
6、file：定义输入字段和 "浏览..." 按钮，供文件上传；
7、image：定义图像作为提交按钮；
8、number：定义带有 spinner 控件的数字字段；
9、password：定义密码字段。字段中的字符会被遮蔽；
10、radio：定义单选按钮；
11、range：定义带有 slider 控件的数字字段；
12、reset：定义重置按钮，重置按钮会将所有表单字段重置为初始值；
13、submit：定义提交按钮，提交按钮向服务器发送数据；
14、search：定义用于搜索的文本字段；
15、tel：定义用于电话号码的文本字段；
16、text：默认，定义单行输入字段，用户可在其中输入文本，默认是 20 个字符；
17、url：定义用于 URL 的文本字段；
八、列表标签
1、<ul>：定义无序列表；
2、<ol>：定义有序列表；
3、<li>：定义列表项；
4、<dl>：定义自定义列表；
5、<dt>：定义自定义列表项；
6、<dd>：定义自定义的描述；
a、无序列表：属性type，属性值 disc (实心原点)、circle(符号为空心圆)、square(符号为方形)。
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
b、有序列表：有序列表使用数字或字母系统来组织列表里包含的信息，属性type对应的属性值 1、 a 、 A、i、I ，属性start对应数值的起点。
<ol type="1" start="2">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
c、定义列表：定义列表用来组织术语和它们的定义。任何信息如果包含多个术语和相对应的解释，都可以使用定义列表进行组织。
<dl>
<dt>小明</dt>
<dd>听歌</dd>
<dt>小红</dt>
<dd>跑步 </dd>
<dd>唱歌 </dd>
</dl>
九、图片多媒体标签
1、<img>：加载图片，属性src-图像资源的地址，width-图像宽度，height-图像高度，alt-图片的替代文字。属性 src 既可以是网络图片地址，也可以是本地图片路径地址，其中本地路径说明：
1）
./：当前目录；2）
../： 回到上一层目录；3）
../images/： 回到上一层目录，然后再进入images目录；
<img src="https://img2.baidu.com/it/u=549611111,1103524299&fm=26&fmt=auto&gp=0.jpg" width="100" height="100" alt="狗" />
2、<video>：视频标签，属性如下：
1）poster：用户点击播放按钮前显示的图像；
2）src：要播放的视频的 URL；
3）width、height：视频宽度、高度；
4）controls：设置用户显示控件，是一个布尔属性；
5）autoplay：设置视频是否自动播放，是一个布尔属性；
6）preload：定义视频是否预加载，属性有三个可选择的值：none（不进行预加载）、metadata（部分预加载）、auto(全部预加载)；
7）loop：用于指定视频是否循环播放，是一个布尔属性；
8）source标签：Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用；
<video controls autoplay loop width='200' height='200' preload='none'
poster='https://img2.baidu.com/it/u=549611111,1103524299&fm=26&fmt=auto&gp=0.jpg'
src='https://haokan.baidu.com/v?pd=wisenatural&vid=8271645066485706928' >
</video>
注意：HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，比如自动播放为<video autoplay />或者<video autoplay="autoplay"/> ，在标签中不使用此属性表示false。
3、<audio>：音频标签，video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样，只不过有3个属性不能用, height/width/poster。
<audio controls autoplay loop>
<source src="images/yinyue.mp3" type="audio/mp3">
</audio>
4、<iframe>：内嵌框架（这个标签不知道放哪里，先放这里吧），属性width-指定框架的宽度，height-指定框架的高度，scrolling-是否显示滚动条(三个值 yes，no，auto)，frameborder-是否显示边框(两个值1, 0)，src-被嵌入html文档的URL。
<iframe src="https://www.baidu.com" name="百度" width="600" height="600" scrolling="auto" frameborder="1"></iframe>
十、全局属性和实体字符
1、常见全局属性：
1）class：规定元素的一个或多个类名（引用样式表中的类），它允许 CSS 和 Javascript 通过类选择器 (
class selectors) 或DOM方法(document.getElementsByClassName)来选择和访问特定的元素。2）hidden：规定元素仍未或不再相关；
3）id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的，配合 id 选择器使用；
4）lang：规定元素内容的语言；
5）style：规定元素的行内 CSS 样式；
6）title：规定有关元素的额外信息；
2、常见实体字符：在HTML中，有些特殊字符是需要用HTML语言表示出来的。一个字符实体包含三个部分：一个&符，一个实体名或者一个实体号，最后一个分号（;），实体名称对大小写敏感。
1）大于号 (>)：
>；2）小于号 (<)：
<；3）引号 (")：
"；4）注册商标(®)：
®；5）版权(© )：
©；6）&号：
&；7）空格：
；
推荐前端入门学习w3school。
网友评论