本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
什么是HTML？
超文本标记语言用各种功能标签组成 是web网站最基本的构建快
基本结构
HTML结构
<!DOCTYPE html> 表示这是页面是一个HTML页面
<html></html> 告诉浏览器从 <html>开始</html>结束
<head></head> 里面会定义一些特殊内容如标题，样式等
<body></body> 大部分的代码都是在里面编写
<!DOCTYPE html>
<!-- 编写英文网站就要加 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
head标签
在HTML中一般只有下列6个标签会放在head中
- title : 网站的标题
- meta：描述网站信息，是个搜索引擎看的里面有三个重要的属性
- keywords: 网页的关键字
- description：网页的描述
- charset：指定编码方式
- link：用于引用外部的css文件
- style：用于定义css样式
- script：用于写js
- base：没有意义
body标签
主要标签和代码都写在里面
文本
在HTML中一般由文字、图片、超链接、音频视频组成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 标题标签 -->
<h1>各科小常识</h1>
<h2>语文</h2>
<p>
三国演义是中国四大名著之一,....</p>
<hr>
<h2>数学</h2>
<!-- 段落标签 -->
<p>
<!-- 文字标签 -->
勾股定理：a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup></p>
<h2>英语</h2>
<p>
<strong>No pain, No gain</strong></p>
<h2>化学</h2>
<p>
H<sub>2</sub>SO<sub>4</sub>是一种重要的工业材料</p>
<h2>经济</h2>
<p>
<!--特殊符号-->
版权符号：©</p>
<p>
注册商标：®</p>
</body>
</html>
效果：
列表
列表是网页中最常见的数据排列方式 在HTML中列表可以分为无序列表、有序列表、自定义列表 对于列表元素的子元素只能是li，不能是其他元素。
有序列表
语法
<ol type="属性值">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
type属性：
<ol type="1">
<li>java</li>
<li>cpp</li>
<li>js</li>
</ol>
效果：
无序列表
语法
<ul type="属性值">
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
<ul>
<ul type="disc">
<li>java</li>
<li>cpp</li>
<li>js</li>
</ul>
效果：
定义列表
语法
<dl>
<dt>名词</dt>
<dd>描述</dd>
<dd>描述</dd>
</dl>
<dl>
<dt>编程语言</dt>
<dd>java</dd>
<dd>cpp</dd>
<dd>go</dd>
<dt>学校</dt>
<dd>bju</dd>
<dd>ncu</dd>
<dd>csu</dd>
</dl>
效果：
表格
HTML中表格由三个部分组成table,tr,td
- table：表格
- tr：行
- td：表行单元格
- caption：表格标题
- th：表头单元格
- rowspan：合并列
- colspan：合并行
<body>
<table>
<caption>学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>250</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>520</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td colspan="2">385</td>
</tr>
</tfoot>
</table>
</body>
效果：
图片
图片标签
基本格式
<img src ="" alt = "" title = "">
- src 里面要写的是图片的路径
- alt 用于描述图片
- title 用于描述图片
alt和title都是描述图片，但是alt是写给搜索引擎看的，title 是给用户看的 图片加载不出来alt就会在图片位置显示出描述，而title是把鼠标移到图片上会显示描述
开发中src和alt是必加的属性 #路径问题
绝对路径&相对路径
绝对路径就是计算机中的完整的地址
D:\cs\web
相对路径就是以一个项目目录为基础进行引用路径 同级目录下可以相互引用 ../用于表示上一层目录
在t.html想引用表格里的图片就要用../ 回到上一层目录
开发中不会用到绝对路径，一旦文件名字变了，后果不堪设想
图片格式
图片格式可以分为两种，位图（像素图），矢量图（向量图）
位图
位图放大缩小，都会有一定的失真 *网络上最常见的三种位图个jpg,png,gif
- jpg：体积大，色彩表示丰富，不支持保存透明背景
- png：体积小，无损格式，不适合存色彩丰富的图片，支持保存透明背景
- gif：只适合用力来做动图，其他方法都很差
矢量图
用数学向量的方式构成 不管怎么折腾都不会失真，但是无法表现色彩丰富的图片 常见的格式
- ai
- cdr
- fh
- swf
一般只有在字体图标（ico）会用矢量图
超链接(hyperlink)
语法格式
<a href = "" target = "">文字或图片</a>
- href里面写路径，绝对路径或相对路径
- target里面写超链接的打开方式，默认是_self不创建新的网页，常用就是_blank在新网页中打开
超链接的可以分为两类内部链接和外部链接
内部链接就是在项目内跳转,<a href="https://www.baidu.com" target="_blank"><img src="../表格/1.jpg"></a>这里就是外部链接
锚点链接
如果一个的页面很长用户可能需要一直往下翻才能找到自己想要的内容，体验感很差， 用锚点链接可以很好解决这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<a href="#game">推荐游戏</a><br>
<a href="#anchor">推荐主播</a><br>
<a href="#drama">推荐番剧</a><br>
</div>
<br>
<br>
...
<table id="game">
<tr>
<td>LOL</td>
<td>吃鸡</td>
</tr>
</table>
<br>
<br>
...
<table id="anchor">
<tr>
<td>卢本伟</td>
<td>小智</td>
</tr>
</table>
<br>
<br>
<br>
...
<table id="drama">
<tr>
<td>重生之我是卢本伟</td>
<td>鬼灭之刃</td>
</tr>
</table>
</body>
</html>
想要为完成这个功能需要定义id 在同一个网页中id是唯一的，在需要引用的地方用#+id的格式既可以实现
表单
什么是表单？
登录框和评论款就是典型的表单， 之前学习的标签都是静态的，我们可以用表单让网页动态起来 我们把能和后台服务器交互叫动态页面
表单标签共有5种：from、input、textarea、select、option 根据外观分类可以分为8类：
- 单项框
- 多选框
- 下拉框
- 文件上传
- 密码框
- 单行文本框
- 多行文本框
- 按钮
from 标签
from 和table一样里面的标签不能乱写也需要把表单标签写在其内部 *语法
<from>
表单标签
</from>
from标签里的属性
- name: 给表单起一个名字
- method: 表单的提交方式get和post，在开发中post用的更多
- action：表单提交到哪个地址进行处理
- target：和超链接一样
- enctype：编码格式常见就是UFT-8，一般都不会设置，文件上传的时候才会设置
input标签
语法格式
<input type="表单的类型" />
单行文本框
在HTML中单行文本框用input标签进行实现，type为"text",常用于网站的登录注册
语法格式
<input tyep = "text"/>
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from>
姓名： <input type="text">
</from>
</body>
</html>
浏览器效果
单行文本框常用属性
- value：默认内容
- size：框的长度
- maxlength：输入内容的最大长度
密码框
和单行文本框差不多都有相同的属性，只是一个输入的内容是可以一个是不可见的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from>
姓名： <input type="text" value="nihao"><br>
姓名： <input type="password" value="nihao">
</from>
</body>
</html>
效果:
单选框
要把input标签里面type属性设置成radio 语法格式
<input type="radio" name="组名" value="值">
name 和value是必须得加上的
<form>
<!-- 想要默认就选上一个可以在标签中叫checked -->
<input type="radio" name="水果" value="香蕉">香蕉
<input type="radio" name="水果" value="苹果" checked>苹果
<input type="radio" name="水果" value="桃子">桃子
</form>
效果：
对name属性要是不一样就会出现两个框都可以选中 value属性是作用于后台和js中的
复选框
type属性设置为checkbox
和单选框差不多
语法格式
<input type="checkbox" name="组名" value="值">
<form>
<input type="checkbox" name="水果" checked>梨
<input type="checkbox" name="水果">火龙果
<input type="checkbox" name="水果" checked>橘子
<input type="checkbox" name="水果">哈密瓜
</form>
效果：
按钮
在HTML中按钮分为三种：普通按钮(button)、提交按钮(submit)、重置按钮(reset)
- 普通按钮
语法
<input type="button" value="值">
<from>
<!-- 这里的value就是按钮上的文字 -->
<input type="button" value="按钮">
</from>
效果：
- 提交按钮
语法
<input type="submit" value="值">
- 重置按钮
语法
<input type="reset" value="清空">
文件上传
语法格式
<input type="file" enctype="multipart/form-data">
这个功能要配合后端和实现
多行文本框
不在是用input标签了而是使用textarea标签
语法
<textarea rows="行数" cols="列数" value="值">默认内容</textarea>
<form>
个人简介<br>
<textarea rows="5" cols="10">请介绍一个自己</textarea>
</form>
效果：
对应文本框一共有种
- 单行文本框
- 多行文本框
- 密码框
只有多行文本框是用textarea 密码框和单行框是用input
下拉框
对于下拉框需要select和option两个标签还实现
下拉框和无序列表很像，无序列表也要用两个标签来实现ul和li
语法
<form>
<select>
<option>选项内容</option>
<option>选项内容</option>
</select>
</form>
<form>
<select>
<option>js</option>
<option>html</option>
<option>css</option>
<option>vue</option>
<option>c</option>
<option>cpp</option>
</select>
</form>
效果:
select有两个常用的属性
<form>
<select multiple size="5">
<option>js</option>
<option>html</option>
<option>css</option>
<option>vue</option>
<option>c</option>
<option>cpp</option>
</select>
</form>
效果
框架
iframe标签
iframe用于在网页中嵌入网页 语法格式
<iframe src="路径" width="宽" depth="高"></iframe>
<iframe src="../表单/t6.html" width="300" depth="250"></iframe>
效果：
总结
以前看的文本就是文字，不能放别的，HTML的出现就解决了这个问题，可以放各种各样的资源
缺点就是HTML虽然可以放各种资源但是表现的很单调，需要配合css和js
