前端基础之HTML
HTML简介
1、HTML是构成网页的骨架，几乎所以的网站都是由HTML构建而成
2、HTML是超文本标记语言（不是一门编程语言，没有任何的逻辑，只有固定的标记功能）
HTML标签分类
1、双标签（有头有尾）
<a></a>
2、自闭和标签(单标签）
<img>
HTML文档结构
<html>
<head>编写给浏览器查看的内容</head>
<body>编写展示给用户查看的内容</body>
</html>
HTML语法注释
1、单行注释
<!--单行注释-->
2、多行注释
<!--
多行注释
多行注释
-->
注：在编写的时候，编程工具也有注释快捷键ctrl+？
head内常见标签
title 定义网页标题
style 内部支持css代码
script 内部支持编写js代码 还可以通过src属性导入外部js文件
link 通过href属性引入外部的css文件
meta 定义网页源信息
keywords关键字搜索
description网页描述信息
注：在html文件中可以编写html和css以及js，但是实际工作中三者其实是分开存放的，这样有利于后期维护和扩展
body内基本标签
h1~h6 标题标签 p 段落标签 b 加粗 i 斜体 u 下划线 s 删除线 br 换行 hr 水平分割线 """有时候相同的样式 可能有多种标签可以实现!!!"""
标签分类
分类1：单双标签
分类2：块儿级标签和行内标签
块儿级标签为h1~h6、p。独占一行(后期可以通过css实现不占一行)
行内标签为u、i、s、b，自身文本多大就占多大
特殊符号
空格 > 大于号 < 小于号 & &符号 ¥ 羊角符 © 版权符 ® 注册
常见标签
1、布局标签
div 块儿级
span 行内标签
标签是可以嵌套的，但是需要遵循以下规律：
1、块儿级标签：可以无限制的嵌套快儿级标签和行内标签；特例：p标签虽然是块儿级标签但是也不能嵌套块儿级标签
2、行内标签不能嵌套块儿级标签，但是可以嵌套行内标签
2、a标签（链接标签）
用法1：通过href属性指定网址(URL)点击跳转
跳转过程中有两种方式
1、当前页面跳转 target="_self" 默认
2、新建页面跳转 target="_black"
用法2：锚点功能
通过href属性指定标签的id值点击即可跳转到对应位置
3、img标签（图片标签）
3.1、src属性指定图片地址（地址可以是本地的地址也可以是网络上的地址）
3.2、alt属性编写文本(用于在图片无法加载出来的情况下的提示信息）
3.3、title属性写文本（用于鼠标悬浮在图片之后提示的文本信息）
3.4、height、width属性写像素（用于调整图片的尺寸）
需要注意调整的时候，修改一个另一个自动等比例缩放，如果同时调整两个那么可能会造成图片的失真
标签的两大重要属性
1、id属性（个体查找）
类似于标签的身份证号，在同一个html页面上id不能重复
2、class属性（群体查找）
类似于python面向对象中类的继承，可以将多个标签化为为一类，并且一个标签可以有很多类
列表标签
1、无序列表（掌握）
前面没有用于表示数字顺序的提示（网页上有规则排列的多个横向或者竖向内容，几乎都是无序列表）
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
2、有序列表（了解）
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
3、标题列表（了解）
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签
1、表格标签的格式
<table>
<thead></thead> 表头
<tbody></tbody> 表单
</table>
# tr标签
tr就表示一行
# th标签
在表头的字段名称
# td标签
普通的单元格数据
2、参考
<table>
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>18</td>
</tr>
</tbody>
</table>
3、额外扩展
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
form表单
1、from表单:获取用户的数据并发送给后端（服务端）
2、获取用户数据最为常用的标签就是input标签并且该标签是行内标签；i
nput标签是前端标签里面的变形金刚，通过type参数的不同变换不同的表现形式。
text 普通文本 password 密码展示 date 日历展示 radio 单选>>>:多个选项标签需要有相同的name属性 默认选中需要额外配置checked='checked' 当属性名与属性值相等的时候可以简写checked checkbox 多选>>>:默认选中也是checked属性 email 邮箱格式 file 上传文件>>>:默认只支持单个文件 如果需要一次性上传多个需要额外配置multiple submit 提交按钮>>>:点击出发提交数据的动作 button 普通按钮>>>:本身没有任何功能 需要绑定(JS) reset 重置按钮 按钮组的提示信息可以通过value属性自定义，如果不自定义那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮 select标签是下拉框选项 一个个选项就是一个个option标签 默认是单选也可以变为多选multiple textarea标签 获取大段文本内容
3、直接编写input会出现黄色阴影，原因在于inpout需要结合lable一起使用
方式1：lable包裹input并绑定id
<label for='input标签id值'>input标签</label>
方式2：lable与input单独出现并绑定id
<label for="d1">username:</label>
<input type="text" id="d1">
4、form表单提交数据
数据的提交地址由form表单的action参数来控制
action="URL" (不写默认朝向当前页面所在的地址提交）
method="数据的提交方式" ( get、post、put等）
5、form表单在提交数据的时候，如果含文件则需要指定两个固定的参数
method="post"
enctype="multipart/form-data"
select标签
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form>
属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
label标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1、label 元素不会向用户呈现任何特殊效果。
2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
