一、HTML概述
（一）网页的本质
- HTML就是用制作网页文件的
- 浏览器查看网页都是.html或.htm文件
- HTML叫做超文本标记语言（Hypertext Markup Language），用于搭建网页的结构
（二）网页的组成
- 前端三层：HTML(结构层)、CSS(样式层)、JavaScript(行为层)
- 其他多媒体内容：图片、视频、音频、超级链接等
- 所有的网页文件都是真实的、物理存在的文件
二、HTML基本语法
HTML规范版本
- W3C：World Wide Web Consortium，万维网联盟。专门发布和维护互联网的规范和标准。
- 标签
HTML是Hyper Text Markup Language 超文本标记语言 的缩写
HTML是由一套标记标签 （markup tag）组成，通常就叫标签
标签由开始标签和结束标签组成
<p> 这是一个开始标签
</p> 这是一个结束标签
<p> Hello World </p> 标签之间的文本叫做内容
- 元素
元素指的是从开始标签到结束标签之间所有的代码
比如
<p>HelloWord</p>
一个完整的HTML文件，应该至少包含html元素，body元素，以及里面的内容，
有的特殊元素，没有内容，即开始和结束标签直接放在一起 比如</br>,</hr>
- 属性
属性用来修饰标签的 比如要设置一个标题居中
<h1 align=”center">居中标题</h1>
写在开始标签里的 align="center" 就叫属性
align 是属性名
center 是属性值
属性值应该使用双引号括起来
- 注释
html使用<!-- --> 进行注释
注释通常用于解释一段代码的意义 ，注释不会在网页上显示出来
- 标题
标题会自动粗体，大写其中的内容，并且带有换行效果 ，一般会使用<h1> 到<h6> 分别表示不同大小d的标题，如：
- 段落
<p>标签即表示段落 是paragraph的缩写 自带换行效果。
代码体现：
<p>段落1 </p>
- 粗体
<b> 、<strong> 都可以用来实现粗体的效果。
区别：b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性；strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容，推荐使用strong。
代码体现：
<p>无粗体效果</p>
<b>b标签粗体效果</b>
<strong>strong标签粗体效果</strong>
8. 斜体
<i>和<em>都可以表示斜体效果。
区别：
（1）i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性。
（2）em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。
代码体现：
<p>无斜体效果</p>
<i>使用 i 标签带来的斜体效果</i>
<em>使用 em 标签带来的斜体效果</em>
- 删除效果
即删除标签 ，delete的缩写。
代码体现：
使用s标签实现的删除效果，但是不建议使用，因为很多浏览器不支持s标签
- 下划线
即下划线标签。
代码体现：
- 图像
<img>即图像标签 ，需要设置其属性 src指定图像的路径
格式：
<img width=“宽度” height=“高度”src= “图片路径” / alt=”提示语句”>
如果图像是本地文件，只需把图片放在同一个目录下即可 src直接使用文件名，不需要/；
如果图片在上级目录，则在src上加上 ../，即可访问上级目录的图片 ，如果是在上级目录的上级目录，则使用 ../../；
如果使用图片所在的绝对路径，并在前面加上file://
img不能够自己居中，需要放在其他能够居中的标签中实现这个效果，比如h1标签,p标签. 经常采用的手段是放在div中居中。
- 超链接
<a>标签即用来显示超链 完整元素是 :
<a href="跳转到的页面地址">超链显示文本</a>
显示12306链接，并在新的页面中打开代码：
- 表格
<table>标签用于显示一个表格 ,<tr> 表示行 ，<td> 表示列又叫单元格。
代码体现：
水平合并：用到td属性的colspan
垂直合并：用到td属性的rowspan
- 列表
列表分简单项目列表、有序列表、定义列表
分别用<ul>标签、<ol>标签、<dl>标签表示
简单项目列表：
- 1111
- 2222
有序列表:
- 1111
- 2222
定义列表：
<dl>
<dt>项目1：</dt>
<dd>内容1</dd>
<dt>项目2：</dt>
<dd>内容2</dd>
</dl>
15. 块div span
<div>、<span> 这两种标签都是布局用的， 这种标签本身没有任何显示效果 ，通常是用来结合css进行页面布局。
- 字体
使用<font>标签表示字体，font常用的属性有 color和size, 分别表示颜色和大小，在html中，颜色通常使用两种方式来表示：
（1） 颜色名，比如red, blue （2）颜色对应的16进制，比如#ff0000 就表示红色
<font color="green">绿色默认大小字体</font>
<font color="blue" size="+2">蓝色大2号字体</font>
<font color="red" size="-2">红色小2号字体</font>
- 内联框架
<iframe> 即内联框架 ，通过内联框架 可以实现在网页中“插入”网页，iframe相当于浏览器里面有个小浏览器，在这个小浏览器中，打开另一个网页。
<iframe src="https://www.runoob.com/" width="600px" height="400px"></iframe>
- 文本框
<input type="text"> 即表示文本框 ，并且只能够输入一行。
<input type="text" name="s1" size="15" value="有初始值的文本框">
<input type="text" name="s2" size="14" placeholder="请输入账号">
- 密码框
<input type="password"> 即表示密码框。
<input type="password" name="s3" size="15" placeholder="请输入密码">
- 表单
<form>用于向服务器提交数据，比如账号密码。
<form action="把数据提交到服务端某个页面里 " method="get">
账号：<input type="text" name="name" placeholder="请输入账号">
密码：<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="登录">
</form>
- 单选框
<input type="radio" > 表示单选框。
默认选中，设置属性checked:
单选1<input type="radio" name="h1" checked="checked">
分组：多个单选框，都在一个分组里，同一时间，只能选中一个单选框 ，设置name属性相同即可：
学习前端<input type="radio" name="h1" checked="checked" value="学习前端">
学习后端<input type="radio" name="h1" value="学习后端">
- 复选框
<input type="checkbox"> 即表示复选框。
<p>今天要做什么呢</p>
学习前端<input type="checkbox" value="学习前端" checked="checked">
学习后端<input type="checkbox" value="学习后端">
- 下拉列表
<select> 即下拉列表 ，需要配合使用。
- 文本域
<textarea> 即文本域 ,与文本框不同的是，文本域可以有多行，并且可以有滚动条。
- 普通按钮
<input type="button"> 即普通按钮，不具备提交form的效果
- 提交按钮
<input type="submit"> 即为提交按钮，用于提交form，把数据提交到服务端
- 重置按钮
<input type="reset"> 重置按钮 可以把输入框的改动复原
- 图像提交
<input type="image" > 即使用图像作为按钮进行form的提交
- 按钮
<button></button>即按钮标签 ，与<input type="button">不同的是，<button>标签功能更为丰富 ，按钮标签里的内容可以是文字也可以是图像 ，如果button的type=“submit” ，那么它就具备提交form的功能。
