HTML简单介绍
HTML简单入门
什么是HTML？
HTML（Hyper Text Markup Language）是用来描述网页的一种语言
HTML指的是超文本标记语言
HTML不是一种编程语言，而是一种标记语言
什么是标记语言
标记语言就是一套标记标签
HTML就是用编辑标签来描述网页的
如何使用HTML
学习HTML中常用的标记标签
什么是HTML标记标签？
标记标签通常也被称为HTML标签（HTML Tag）
HTML标签是由<>包围关键词，例如
HTML标签通常都是成对出现的，
一对标签中第一个成为开始标签，第二个成为结束标签，开始标签和结束标签也被称为开放标签和闭合标签
什么是网页
网页就是HTML文档，就是用HTML描述网页
HTML文档包含了HTML标签和纯文本
HTML文档又被成为网页
网页是如何工作的？
网页需要浏览器，浏览器的作用就是读取HTML文档，将文档的HTML标签和文本用网页的形式表现出来（浏览器用于读取和渲染HTML文档）
HTML标签
根元素：
文档中的元数据：
<!DOCTYPE html>
<html> #根元素
<head> #头部标签
<meta charset="utf-8"> #设置字符集
<title>表头内容</title> #浏览器页面的标题
</head>
<body> #身体标签
#写入正式内容
</body>
</html>
引入一些CSS样式或自定义一些CSS样式
脚本：
章节：
h标签有6个级别
<body>
<h1>Hello World</h1> #章节一共有六个，字体的大小会越来越小
<h2>Hello World</h2>
<h3>Hello World</h3>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
浏览器演示效果：
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
组织内容：
<p></p> #段落/内容/文本的详情
<br> #段落中表示换行
<hr> #水平分割线
<ol>
<li></li> #列表中的每个选项
</ol> #有序列表
<ul>
<li></li> #列表中的每个选项
</ul> #无序列表
注释：注释比较特殊，操作方式：选中需要注释的内容，按ctrl+？即可注释想要注释的内容 例如：<!-- <li>雪碧</li> -->
<a></a> #a标签，链接标签，可以是URL地址，也可以下载
<a href="http://www.baidu.com">百度</a> #href属性是链接的地址，"百度"是网页展示的内容，在当前网页打开
<a href="http://www.baidu.com" target="_blank">百度</a> #target属性，表示另外在另外一个网页打开
<a href="C:\Users\yan'xiao'ran\Desktop\002.jpg" target="_blank">下载</a> #点击下载会下载href中的002.jpg图片
代码展示
<!DOCTYPE html>
<html>
<head>
<title>展示内容</title>
</head>
<body>
<h6>Hello World</h6>
<hr> #分割线
<ol type="a"> #ol标签，有序列表标签，type表示用a b c表示有序列表，可以不加type，默认使用数字
<li>姓名</li> #li标签，包裹每个列表项
<li>性别</li>
</ol>
<ul type="i">
<li>可乐</li>
<li>雪碧</li>
<li>果汁</li>
</ul>
<a href="http://www.baidu.com">百度</a> <br>
<a href="http://www.baidu.com" target="_blank">百度</a> <br>
<a href="C:\Users\yan'xiao'ran\Desktop\002.jpg" target="_blank">下载</a> <br>
</body>
</html>
浏览器展示：
Hello World
a. 姓名
b. 性别
- 可乐
- 雪碧
- 果汁
<!DOCTYPE html>
<html>
<head>
<title>展示内容</title>
</head>
<body>
<h1>Hello World</h1>
<ht> #水平分割线
<p>段落的内容段落的内容 <br>我是谁
#
一个标签即可，在段落中表示换行
</p> #段落文本内容
</body>
</html>
浏览器演示：
Hello World
段落的内容
我是谁
文字形式/排版：
HTML格式化标签
<b></b> #加粗字体:b标签
<i></i> #斜体字体：i标签,字体可以加粗且斜体，这就是标签的嵌套
<sub></sub> #下标注释：sub标签
<del></del> #删除格式：del标签，del标签将包裹的内容用"——"划掉
<ins></ins> #下划线：ins标签，将包裹的内容加入下划线
代码展示：
<b>加粗字体</b> #使用b标签将需要加粗的字体包裹起来即可
代码：
<!DOCTYPE html>
<html>
<head>
<title>展示内容</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<p><b><ins>段落</ins></b>的<sub><i>内容</i></sub> <br><del>我是</del>谁
</p>
</body>
</html>
浏览器展示：
Hello World
段落的内容 #内容为下角标字体，这里显示不明显，"段落"两个有下划线，这里没有显示，浏览器里显示
我是谁
嵌入内容
图像标签<img>
<img></img> #嵌入一张图片
<img src="嵌入本地图片地址" width="50%" height="50%"> #srcs属性是图片地址,width属性是图片的宽度，height属性是图片的高度，可以是百分比，可以是固定值
视频标签<video>
video标签的视频格式.mp4/.m3u8/.ogg/.webm/.swf，还有就是浏览器的支持Chrome/Firefox等
<video height="400" width="400" controls="controls"> #video标签，插入视频，height属性表示视频高度，width属性表示视频宽度，controls属性表示视频的控制条
<source src="C:\Users\yan'xiao'ran\Videos\内涵段子.mp4" type="video/mp4"> #video属性中有个标签，这个标签的作用是插入视频的URL，标签的属性src指向视频地址/网络地址也可以，type属性表示视频类型
</video>
音频标签<audio>
音频格式：mp3/wav/ogg
<audio controls="controls"> #controls属性，控制条
<source src="C:\Users\yan'xiao'ran\Videos\内涵段子.mp3" type="audio/mpeg"> #标签作用插入音频，src属性插入地址，type属性表示音频类型,也可以不指定
</audio>
绘图标签：<canvas>标签
代码展示
<body>
<!-- 连接、下载标签 -->
<a href="http://www.baidu.com">百度</a> <br>
<a href="http://www.baidu.com" target="_blank">百度</a> <br>
<a href="C:\Users\yan'xiao'ran\Desktop\002.jpg" target="_blank">下载</a> <br>
<!-- 图像标签 -->
<img src="C:\Users\yan'xiao'ran\Desktop\002.jpg" width="50%" height="50%"> <br>
<!-- 视频标签 -->
<video height="400" width="400" controls="controls">
<source src="C:\Users\yan'xiao'ran\Videos\内涵段子.mp4" type="video/mp4">
</video> <br>
<!-- 音频标签 -->
<audio controls="controls">
<source src="D:\dev/xxx.mp3" type="">
</audio>
</body>
</html>
表格
表格标签:<table>标签，boder属性:边框
<th></th> #表格标题/表头
<tr></tr> #表示表格中的某一行，tr标签嵌套td标签
<td></td> #表格每行中的单元格/列
代码展示
<body>
<table border="">
<th>表头</th> #表头属性
<tr> #行标签属性
<td>姓名</td> #单元格属性
<td>出勤</td>
<td>工资数</td>
</tr>
<tr>
<td>工程部</td>
<td>维修部</td>
<td>后勤部</td>
</tr>
</table>
</body>
</html>
表单
HTML中的form表单
表单是一个包含表单元素的区域 表单元素：input标签，输入数据有不同的类型，就是我们所见的输入框（输入字符/点击选择/打对勾记住等），可以设置type属性（不同的输入类型），name属性（起的名字）：input标签属性：
文本类型text（字母/数字/可见字符和符号）
密码类型password （字母/数字/可见字符和符号 输入的内容用***显示，看不到输入内容）
单选按钮类型radio（问卷/性别选择/注册页面）
复选按钮类型checkbox （问卷/性别选择/注册页面）
提交按钮类型submit （注册/登录页面提交按钮）
带图提交按钮类型image (提交按钮为一张图片)
重置按钮类型reset （输入输错了，有个重置按钮，点一下，重新输入）
上传文件按钮file （选择本地文件上传）
隐藏字段类型hidden （前端不显示，但是想提交给服务器一个值，例如/ip/系统）
下拉列表类型select 标签标签嵌套标签
<form>
<!-- 输入账户和密码的输入框 -->
账号: <input type="text" name="no">
密码: <input type="password" name="password"> <br>
<!-- 单选按钮 -->
性别: <input type="radio" name="sex">男
<input type="radio" name="sex">女 <br>
<!-- 复选按钮 选择性别是男、还是女-->
<input type="checkbox" name="save_pass">记住密码 <br>
<!-- 提交按钮 -->
<input type="submit" name=""> <br>
<!-- 重置按钮 -->
<input type="reset" name=""> <br>
<!-- 提交按钮为一个图像 -->
<input type="image" name="" src="C:\Users\yan'xiao'ran\Desktop\002.jpg" height="20" width="20" alt="submit"> <br>
<!-- 选择文件上传按钮 -->
<input type="file" name=""> <br>
<!-- 隐藏类型,在前端不显示，但是会提交给服务器 -->
<input type="hidden" name="country" value="china">
</form>
</body>
</html>
下拉列表类型select 标签做选项提示，比如：提示国家，我们从下拉列表选择国家 标签是下拉列表功能，标签是下拉列表的每个选项功能，select标签嵌套option标签，option标签有个value属性赋予不同的值，selected属性为默认选中的选项
代码展示：
<body>
<form>
<label>国家</label> #提示语
<select> #下拉列表功能
<option value="China">中国</option> #具体选项
<option value="US" selected="selected">美国</option> #selected默认选中的，如果所有的选项中都没有selected属性，默认选中第一个
<option value="JP">日本</option>
</select>
</form>
</body>
</html>
文本类型textarea 标签（text类型，单行输入
textarea类型，可以输入多行，可以设置cols属性为30行
也可以展示多行内容，展示内容的话标签属性设置为readonly）
颜色类型color （拾色器）有的浏览器获取不到效果
邮件类型email （包含了email地址的输入域，输入的内容为email格式的信息，会自动弹出提示email）
表单的执行动作action属性（和后台语言交互，如PHP语言） methmod属性（和后台交互的方式，get方式/post方式）
代码展示：
<body>
<form action="./login.php" method="post"> #这个属性是前端语言和后台交互的属性
<!-- 可写区域 -->
<textarea cols="30">
</textarea> <br>
<!-- 只读区域 -->
<textarea readonly="readonly">
Hello World
</textarea>
<!-- 颜色类型选择 -->
<input type="color" name="color">
<!-- 邮件类型 -->
<input type="exmail" name="exmail">
</form>
</body>
</html>
工具
可以使用sublime Text3 atom编辑器 VSCode编辑器