HTML介绍
一，概念
超文本标记语言（Hypertext Markup Language）
- 超文本定义：包含了图片，文档，链接，主要体现在链接
- 标记语言：通过定义的标记来约束数据编写的格式和规范
- 种类：xml，html，md
- 特性/作用：数据展示，数据传输
dtd概念
- 文档类型定义（Document Type Definition），用来定义标记语言的语法，制定了标记语言的语法规则。
二，HTML分类
1. html4
- Strick：不包含过时的标记（basefont，font），不能使用框架frameset。
- Transitional： 不能使用框架集（frameset）
- frameset：可以使用框架集（frameset）
2. xhtml1.1
- Strick：不包含过时的元素（basefont，font），不能使用框架frameset。文档格式强制约束
- Transitional： 不能使用框架集（frameset），文档格式强制约束（必须要闭包，否则就编译不过去）
- frameset：可以使用框架集（frameset），文档格式强制约束
3. html5：
- 不是SGML的子级
- 增加了用于减少脚本的标记（autofocus属性），增加了很多标签，节省了很多js的脚本的使用，只需要一个标签就可以搞定。
- 减少了对外部设备的需求，自身提供了一些不靠外部设备的东西，比如动画。
- 标准化，提供了强制的规范性，比如浏览器无需考虑兼容性的问题
4，dhtml：
- 动态的，不是一种标记语言，而是多种技术（js+css+html）的集合，微软提出
三，html标准结构
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</body>
</html>
四，html结构解析
1. 文档类型标记：
- 定义：告诉浏览器使用哪个html版本进行编写的指令
- 标记
- 标记说明<! 文档类型 顶级元素 可用性 “注册//组织//类型 标签//
定义 语言” “dtd 文件地址”>
五，HTML文档标记
- 头标记
- 定义：用于脚本和css的定义和引用，以及页面元数据信息的定义
- 标记：<hea/d></hea/d>（去掉中间的/，这里为了能显示才写的）
- 页面元数据：页面关键字，页面文档类型字符集等等
六：html元数据标记
- 元数据标记：用于页面关键字，页面文档类型字符集，刷新等信息的定义
- 标记：
<head>
<title>html练习</title>
<!-- 页面关键字：keywords里面的关键字对seo影响较大，影响它在搜索引擎的排名-->
<meta name="keywords" content="kola 可乐">
<!-- 设置内容类型-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- 重定向，设置2s跳转到百度-->
<meta http-equiv="Refresh" content="2;https://www.baidu.com">
<!-- 缓存控制，max-age：缓存的内容将在xx秒后失效, 这个选项只在HTTP 1.1可用-->
<meta http-equiv="Cache-Control" content="max-age=10">
</head>
七：html格式/排版标记
- <br> 换行符
- <hr> 水平线
- <pre> 预格式标记，按编写格式展示
<body>
<!--br:换行符-->
大家好<br>
我是可乐！
<!--水平线标记-->
<hr>
<!--上面这种写法只能保证换行，但是无法保证前面的空格之类的显示正确，所以有了预编译标签,代码什么格式就展示什么格式-->
<pre>
大家好
我是可乐！
</pre>
八：html字体标记（去掉中间的/，这里为了能显示才写的）
- <del> 添加删除线标记
- <b> 粗体文本标记
- <strong> 强调文本标记（和b标签实现的效果是一样的，目前w3c推荐使用这个）
- <sup> 定义上标文本
- <sub> 定义下表文本
- <small> 文本缩细标记
- <big> 文本放大标记
- <H?> 标题标记
- <I> 斜体文本标记
<del>del标签：删除</del>
<br>
<b>b标签：放大</b>
<br>
<strong>strong标签：强调文本，效果和b标签一样</strong>
<br>
java整型最大的取值数为：
2<sup>31</sup>-1
<br>
水：H<sub>2</sub>O
<br>
<small>small：缩小</small>
<br>
<big>big：放大</big>
<br>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<I>斜体</I>
九：html表单标记
- <form> 表单标记
- <input> 文本输入控件
- <textarea> 多行文本输入控件
- <button> 按钮控件
- <select> 下拉列表控件
- <option> 下拉列表选项控件
- <optgroup> 下拉列表选项集合控件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>form</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<!--点击提交，就跳转到名为html4的文件-->
<form method="get" action="html4.html"></form>
<!-- input：文本输入框-->
<input name="input_1" type="text" value="文本">
<br>
<!-- textarea：多行文本输入控件-->
<textarea name="textarea1" rows="3" cols="3"></textarea>
<br>
<!-- select：下拉选择控件-->
<select name="select_1">
<!-- optgroup：下拉列表选择集合控件-->
<optgroup label="optgroup_1">
<option>1</option>
<option>2</option>
<option>3</option>
</optgroup>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<br>
<!-- 按钮-->
<button type="submit">提交</button>
</form>
</body>
</html>
十：html表格标记
- <table> 表格控件
- <caption> 表题目
- <th> 表格单元头 table head
- <tr> 表格单元行 table row
- <td> 表格单元列 table
- <thead> 表头
- <tbody> 表体
- <tfoot> 表尾
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>table</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<form method="get" action="html4.html">
<table border="1">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>sex</th>
</tr>
</thead>
<tfoot>
<tr>
<td>
<button type="submit">提交</button>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="2">饮料</th>
<td>1</td>
<td>可乐</td>
</tr>
<tr>
<td>2</td>
<td>雪碧</td>
</tr>
<tr>
<th rowspan="1">零食</th>
<td>3</td>
<td>旺旺雪饼</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
十一：html列表标记
- <ul> 无序列表标记
- <ol> 有序列表标记
- <li> 列表内容标记
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>有序无序标签</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
</html>
十二：htm链接标记\
- <a> 瞄标记
- <link> 链接样式表标记
<a href="https://www.baidu.com">跳转到百度</a>
十三：htm样式标记
- <div> 层标记
- <style> 文档样式标记
十四：htm脚本标记
<script> 脚本标记
十五：htm转义字符
1. "<" ： < 小于号 less than
2. ">" ： > 大于号 greater than
3. “&”：& and符
4. “"”：双引号
5. “©”：版权
6. “®”：已注册商标
7. “ ” ：空白格
<input value=""双引号"">
