HTML 基础
简述
HTML又称：超文本标记语言(Hyper Text Markup Language)
结构图
一个简单结构图，就可以向下面这样。
主要由两个大类的标签包含着其它标签：head与body标签
什么是标签
- 标签也可以叫做元素
- 是由一对尖括号包裹的单词构成，如 <html>
- 标签分为两部分，开始标签<a> 和 结束标签</a>
- 有些只需要它自己单独存在，这种也叫自闭和标签。如：<br>、<hr>、<img>、<input>
标签的属性
- 通常是以键值对形式出现的. 例如 id='123'
- 属性只能出现在开始标签 或 自闭和标签中.
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
head标签
<meta>标签
name属性
<!-- 设置网页作者 --> <meta name="author" content="这是作者"> <!-- 设置网页关键字 --> <meta name="keywords" content="学习，博客"> <!-- 设置网页描述 --> <meta name="description" content="这是一个记录自己学习的博客">
http-equiv属性
<!-- 设置字符集 --> <meta http-equiv="content-type" charset="UTF-8"> <!-- 设置页面自动刷新 --> <meta http-equiv="refresh" content="10; url=https://www.baidu.com">
手机缩放
<meta name="viewport" content="width=device-width, initial-scale=1">
请求无来源
<meta name="referrer" content="no-referrer">
<title>标签
<title>这是一个标题</title>
<link>标签
<!-- 设置图标 --> <link rel="icon" href="ico图标地址"> <!-- 导入css样式 --> <link rel="stylesheet" href="css样式地址">
body标签
一、基础标签
<!-- 标题标签 --> <h1>-<h6> <!-- 段落标签 --> <p></p> <!-- 加粗 --> <strong></strong> <b></b> <!-- 斜体 --> <em></em> <i></i> <!-- 换行 --> <br> <!-- 水平线 --> <hr> <!-- 无特征 --> <span></span> <div></div>
二、图片标签<img>
属性：
| 属性 | 值 | 描述 |
| src | URL | 图片地址 |
| alt | text | 图片没有加载成功的提示 |
| height | size | 图片高度 |
| width | size | 图片宽度 |
使用：
<img src="../static/demo.jpg" alt="未加载成功" height="300px" width="300px">
三、超链接标签<a>
属性：
| 属性 | 值 | 描述 |
| href | URL | 需要跳转的到链接 |
| target |
_blank _self |
从新窗口中打开 从当前窗口打开 |
使用：
<a href="https://www.baidu.com" target="_blank">百度</a>
四、列表标签
<ul>无序标签
<ul> <li>content</li> </ul>
<ol>有序标签
<ol> <li>content</li> </ol>
<dl>定义标签
<dl> <dt>title</dt> <dd>content</dd> </dl>
五、表格标签
<table>
属性：
| 属性 | 值 | 描述 |
| cellspacing | size(默认2像素) | 设置单元格与单元格之间的空间 |
| cellpadding | size(默认1像素) | 设置单元格内容与单元格边缘之间的空间 |
| border | size | 设置表格的边框 |
使用：
<table cellpadding="20"> <caption>学生信息</caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>小明</td> <td>男</td> </tr> </tbody> </table>
<tr>
| 属性 | 值 | 描述 |
| height | size | 设置行高度 |
<td>
| 属性 | 值 | 描述 |
| colspan | 正整数 | 要跨的列数 |
| rowspan | 正整数 | 要跨的行数 |
六、表单标签
<form>标签
该标签用于创建HTML的表单
属性：
| 属性 | 值 | 描述 |
| action | URL | 提交表单的地址 |
| method | get/post | 提交表单的方式 |
| autocomplete | on/off | 自动完成填写历史记录 |
使用：
<form action="https://www.test.com" method="get"> </form>
<input>标签
属性：
| 属性 | 值 | 描述 |
| autofocus | 自动聚焦 | |
| checked | 第一次加载直接选中(如：单选框，复选框) | |
| disabled | input不能使用 | |
| readonly | input不能修改 | |
| type |
1. text 2. password 3. radio 4. checkbox 5. button 6. submit 7. reset 8. image 9. hidden 10.file 11.date |
1. 单行文本框 2. 密码输入框 3. 单选按钮 4. 复选框 5. 普通按钮 6. 提交按钮 7. 重置按钮 8. 图像形式的提交按钮 9. 隐藏域 10. 文件域 11. 日期 |
| name | 由用户定义 | 控件的名称 |
| value | 由用户定义 | 控件的值 |
| form | form_id | 属于哪个表单(可摆脱form) |
| checked | 默认被选中 | |
| maxlength | 正整数 | 允许输入的最多字符数 |
使用：
<form> <div class="input-group"> <label for="name">姓名</label> <input type="text" id="name"> </div> <div class="input-group"> <input type="radio" name="gender" value="0" checked> 女 <input type="radio" name="gender" value="1"> 男 </div> <div class="input-group"> <input type="checkbox" name="hobby" value="0" checked> 篮球 <input type="checkbox" name="hobby" value="1"> 足球 <input type="checkbox" name="hobby" value="2" checked> 乒乓球 </div> <div class="input-group"> <input type="submit" value="提交"> <input type="reset" value="重置"> </div> </form>
<textarea>标签
属性：
| 属性 | 值 | 描述 |
| autofocus | 自动聚焦 | |
| disabled | 失去能力 | |
| row | number | 默认行数 |
| col | number | 默认列数 |
| maxlength | 规定文本域的最大字符 | |
| name | 由用户定义 | 文本值 |
| form | form_id | 属于哪个表单, (可脱离form表单外) |
使用：
<form id="test-form" method="get" action="https://www.baidu.com/s"> <input type="submit" value="提交"> </form> <textarea name="w" form="test-form" autofocus></textarea>
<select>标签 与 <option>标签
select标签属性：
| 属性 | 值 | 描述 |
| autofoucs | 自动聚焦 | |
| disabled | 失去能力 | |
| multiple | 按Ctrl，可进行多选 | |
| size | number | 下拉菜单可见的选项数 |
| form | form_id | 属于哪个表单, (可脱离form表单外) |
option标签属性：
| 属性 | 值 | 描述 |
| selected | 默认选中 | |
| disabled | 失去能力 |
使用：
<form> <select multiple> <option selected>上海</option> <option selected>北京</option> <option>广州</option> </select> </form>
特殊字符
| 代码 | 显示 | 含义 |
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 并且 |
| " | " | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
|   | 半方大的空白 | |
|   | 全方大的空白 | |
| | 不断行的空白 | |
| ¥ | ¥ | 人民币 |
| × | × | 乘号 |
| ÷ | ÷ | 除号 |
| ² | ² | 平方2(上标2) |
| ³ | ³ | 立方3(上标3) |
