HTML
（1）head内常用标签
在书写HTML比代码的时候，只需要写标签名，然后tab就能自动补全
<title>test</title> 网页标题
<style> </style> 内部用来书写css代码
<script> </script> 内部用来书写js代码
<script src='myjs.js'> </script> 还可以引入外部js文件
<link rel='stylesheet' href='mycss.css'> 引入外部css文件
<meta http-equiv="refresh" content="2;URL=www.baidu.com"> 提供了一种在 HTML 文档中嵌入元数据的方式 元数据是描述数据的数据
（2）body内常用标签
（1）基本标签
<h1>我是h1</h1> 标题标签 1~6级标题
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>我是p标签</p> 段落标签
<br> 换行标签
<hr> 水平分割线
（2）标签的分类
1、块级标签:独占一行
h1-h6 p div
1.块级标签可以修改长宽 行内标签不可以 修改了也不会变化
2.块级标签内部可以嵌套任意的块级标签和行内标签
但是p标签虽然是块级标签 但是只能嵌套行内标签 不能嵌套块级标签
2、行内标签:自身文本多大就占多大
i u s b span
行内标签不能嵌套块级标签 可以嵌套行内标签
（3）标签具有的两个重要属性
- 标签既可以有默认的属性也可以有自定义的属性
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
（4）特殊符号 &
空格
> > 大于号
< < 小于号
& & and符
¥ 钱 ¥
© 版权 ©
® 商标 ®
（5）常用标签 div span
div 块级标签
#div可以看成是一块区域 也就意味着用div来提前规定所有的区域 之后往该区域内部填写内容即可
span行内标签
#而普通的文本先用span标签
#上述的两个标签在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
（6）img标签
- 高度和宽度当你只修改一个的时候，另外一个参数会等比例缩放
- 如果修改了两个参数，并且没有考虑比例的问题，那么图片就会失真(错误的缩放)
# 图片标签
<img src="" alt="">
src
# 1.图片的路径 可以是本地的也可以是网上的
# 2.url 自动朝该url发送get请求获取数据
alt='这是我的img'
# 当图片加载不出来的时候 给图片的描述性信息
title='heart'
# 当鼠标悬浮到图片上时 自动展示的提示信息
height='100px'
# 设置图片的高度
width='100px'
# 设置图片的宽度
（7）a标签
- 超链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色(浏览器记忆了)
"""
href
1.放url，用户点击就会跳转到该url页面
2.放其他标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
你也可以修改为新建页面跳转 _blank
# a标签的锚点功能
# eg:点击一个文本标题 页面自动跳转到标题对应的内容区域
<div id="d1">我是d1</div>
<a href="#d1">点击我跳转到d1</a>
（8）列表标签
（1）无序列表
- 虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
type
可以设置无序列表前的样式(实心圆点 空心圆点 方)
（2）有序列表
<ol type="1" start="5">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
type
可以设置有序列表前的样式
start
可以设置起始值
（3）标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
（9）table表格标签
<table>
<thead>
<tr> # 一个tr就表示一行
<th>username</th> # 加粗
<th>password</th>
<th>hobby</th>
</tr>
</thead> # 表头 (字段信息)
<tbody>
<tr>
<td>heart</td>
<td>123</td>
<td>read</td>
</tr>
<tr>
<td>zeus</td> # 正常文本
<td>123</td>
<td>run</td>
</tr>
<tr>
<td>god</td>
<td>123</td>
<td>music</td>
</tr>
</tbody> # 表单 (数据信息)
</table>
<table border="1" cellpadding="5" cellspacing="5">
<thead>
<tr> # 一个tr就表示一行
<th>username</th> # 加粗
<th>password</th>
<th>hobby</th>
</tr>
</thead> # 表头 (字段信息)
<tbody>
<tr>
<td>heart</td>
<td>123</td>
<td>read</td>
</tr>
<tr>
<td colspan="2">zeus</td> # 正常文本
<!-- <td>123</td>-->
<td rowspan="2">run</td>
</tr>
<tr>
<td>god</td>
<td>123</td>
<td>music</td>
</tr>
</tbody> # 表单 (数据信息)
</table>
<table border="1"> 加外边框
<td rowspan="2">run</td> 水平方向占多行
<td rowspan="2">run</td> 垂直方向占多行
（10）form表单标签
- 能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
<form action=""></form>
#在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写 默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com 朝百度服务端提交
3.只写路径后缀 action="/index/"
自动识别出当前服务端的ip和port拼到前面
host:port/index/
# 能够触发form表单提交数据的按钮有哪些
<input type="submit" value="注册">
<button>我是一个按钮</button>
（11）input标签
- 就类似于前端的变形金刚，通过type属性变形
text : 普通文本
password : 密文
date : 日期
submit : 用来触发form表单提交数据的动作
button : 就是一个按钮 本身没有任何的功能 但是它是最有用的
reset : 重置输入的内容
radio : 单选按钮
1.默认选中要加 checked="checked"
2.<input type="radio" name="gender" checked="checked">男
3.当标签的属性名和属性值一样的时候可以简写
4.<input type="radio" name="gender" checked>男
checkbox : 多选框
file : 上传文件
multiple 上传多个
hidden : 隐藏
# 第一种 直接将input框写在label内
<label for="d1">
username:<input type="text" id="d1">
</label>
# 第二种 通过id连接即可 无需嵌套
<label for="d2">password:</label>
<input type="password">
# ps:input不跟label关联也没关系
# label和input都是行内标签
# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<p>hobby:
<input type="checkbox" checked>music
<input type="checkbox">run
<input type="checkbox">listen
</p>
（12）select标签
- 默认是下拉单选，可以加mutiple参数变多选，默认选中selected
<p>province1:
<select name="" id="">
<optgroup label="上海">
<option>浦东</option>
<option>黄埔</option>
<option>青浦</option>
</optgroup>
<optgroup label="浙江">
<option>宁波</option>
<option>台州</option>
<option>丽水</option>
</optgroup>
</select>
</p>
<p>province:
<select name="" id="" multiple>
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
<option value="" selected>浙江</option>
</select>
</p>
（13）textarea文本输入框
- 大段文本输入框，可支持拖动缩放
<p>文本输入框:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>