HTML常用标签

HTML

head头部标签里面的内容：

1.自闭合标签（title）

<title>这是我的博客</title>                        # 用于标记导航中的名字

2.自闭合标签（meta）

<meta charset="UTF-8">                                                      # 用于指定 字符编码
<meta http-equiv = "Refresh" content="3" />                                 # 页面刷新 3 秒钟刷新一次
<meta name="keywords" content="北京,北京汽车,北京报价" />                     # 易于搜索引擎搜索
<meta name="description" content="汽车之家北京报信息尽在汽车之家报价库" />      # 网站的描述信息
<meta http-equiv="X-UA-Compatible" content="IE=edge">                       # 设置IE浏览器兼容提醒 请使用 IE=edge 版本打开
<meta http-equiv = "Refresh" content="3; Url = http://www.baidu.com" />     # 设置页面3秒后 跳转到 baidu.com 用的少

3.自闭合标签（link）

<link rel="shortcut icon" href="image/favicon.ico">                        # 设置页面导航的角标 格式为ico
<link rel="stylesheet" href="static/commons.css">                         # 用于引用其他路径的css样式

4.自闭合标签（style 可以用link标签从一个路径引用）

<style>
    #i1{                                                 # 用于定义css样式格式的
        background-color: red;
        height: 48px;
    }
</style>

5.自闭合标签（script）

body本体标签里面的内容：

所有的标签分为：

1. 块级标签 H 系列标签，p标签，div标签（一个块级标签会默认占一整行）
2. 行内标签 span标签，select标签，a标签 等（可用于css自定义标签，默认不换行）
3. 标签存在的意义： 用于CSS操作，JS操作

1.HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
例：
         # 不断行的空白
©	  ©	  # 版权
®     ®   # 已注册

p 和 br标签

p表示段落，默认段落之间是有间隔的！

<p>ddddddddddddddddddddddddaaaaaaaaaaaaa</p>

br 是换行 不会有换行段落间隔（自闭合标签）

dddddddddddddddddddddddaaaaaaaaaaaaaas<br>adddddddddddddddddddddddddddddddddddaaa

H 标签

H1 ... H6 标题标签从 H1到H6 递减

span 行内标签

span 白板标签，可用于css自定义标签

div 标签

div标签 也是白板标签，可用于css自定义标签
标签之间可以嵌套
标签存在的意义，css操作，js操作

form表单（可将数据提交到后台的标签）【重点】

1. 向自己的服务端提交数据 “post”会把内容放在请求体中发送过去； 2. “get”提交会把数据放在url中提交过去（默认依照“get”方式提交）； 3. enctype当提交的内容有文件时需要依赖此选项； 4. 需要提交的内容都需要放在form标签内部。

<form method="post" action="http://127.0.0.1:8080/edit_user" enctype="multipart/form-data">   
    # method 依照什么方法将数据提交给服务端 （post或get）
         # get 默认将数据通过url发送到服务端
         # post 将数据放在 body 中发送给服务端
    # action 用于向服务端提交数据的地址
    # enctype 提交文件时需要此参数
    <input type="text" name="user"/>       
         # 向后台提交数据时，需要在input标签中 设置name="user" 以便后台获取前台提交的数据
    <input type="text" name="email"/>
    <input type="password" name="pwd"/>
    <input type="button" value="提交1"/>    # 默认没有任何用处只是个按钮(可用于属性自定义)
    <input type="submit" value="提交2"/>    # 用于向后台提交表单
</form>

2.向搜狗搜索提交数据

<form method="get" action="https://www.sogou.com/web">
    <input type="text" name="query"/>
    <input type="submit" value="提交" />
</form>

1.input 系列（可将数据提交到后台的标签）

类型：（type）

1. type="text" 表示普通文本
2. type="password" 表示密码格式
3. type="button" 普通按钮
4. type="submit" form表单提交按钮将数据提交到后台
5. type="radio" 单选框
6. type="checkbox" 复选框
7. input type="file" 文件提交（依赖form表单中的一个属性 enctype="multipart/form-data"）

单选框radio

男：
女：

男：<input type="radio" name="gender" value="1" checked="checked" />   
# type="radio"表示单选框；name="gender" name 相同能达到互斥作用；
# checked="checked" 表示默认选中；value="1" 表示选中后的value值
女：<input type="radio" name="gender" value="2"/>  

按钮submit

需要包含在form标签内部，用于数据提交；

<input type="submit" value="提交"/>
# type="submit" 将数据提交到后台
<input type='rest' /> 
# type='reset' 用于重置输入内容的按钮

复选框 checkbox

篮球：
1球：
2球：
3球：
4球：

篮球：<input type="checkbox" name="favor" value="1" checked="checked" />		
    # type="checkbox" 为复选框；checked="checked"表示为默认选中；
    # name="favor" name值相同，后台获取数据为列表形式favor:[1,2,3]
1球：<input type="checkbox" name="favor" value="2"/>
2球：<input type="checkbox" name="favor" value="3" checked="checked" />
3球：<input type="checkbox" name="favor" value="4"/>
4球：<input type="checkbox" name="favor" value="5"/>

文件上传

文件上传：

<input type="file" />  						    
# 表示上传文件 依赖form表单中的一个属性 enctype="multipart/form-data"
# <form method="post" action="http://127.0.0.1:8080/edit_user" enctype="multipart/form-data">   

注释：

input type="text" name="user"	               	 # text 普通文本	name 指定一个key值，用于服务端取值
input type="password" name="pwd"	             # password  密码格式
input type="button" value="提交1"	             # button    普通的按钮   value 表示按钮上面的值
input type="submit" value="提交1"                 # submit    提交按钮，将表单提交 
input type="radio" name="gender" value="1" checked="checked"       # radio  单选框，name 相同时达到互斥的作用  checked="checked" 表示默认选中 
input type="radio" name="gender" value="2"     
input type='file'   						    # 表示上传文件 依赖form表单中的一个属性 enctype="multipart/form-data"
input type='reset'    						    #  重置
篮球：<input type="checkbox" name="favor" value="1" checked="checked" />   
    # type="checkbox" 为复选框；checked="checked"表示为默认选中；
    # name="favor" name值相同，后台获取数据为列表形式favor:[1,2,3]
1球：<input type="checkbox" name="favor" value="2" checked="checked"/>
2球：<input type="checkbox" name="favor" value="3"/>

2.textarea 多行文本框（可将数据提交到后台的标签）

多行文本框

<textarea name="texrea">多行文本框</textarea>   
# “多行文本框”中间内容为默认值
# 后台拿去数据通过 name="texrea" 获取值

3.select 下拉框系列（可将数据提交到后台的标签）

1.下拉单选框
北京 天津 南京 东京

<select name="danxuan">
    <option value="北京">北京</option>
    <option value="天津" selected="selected">天津</option>     
    # selected="selected" 表示默认选中 
    <option value="南京">南京</option>
    <option value="东京">东京</option>
</select>

2.下拉多选框 multiple
北京 天津 南京 东京

<select name="duoxuan" size="5" multiple="multiple">		
    # size="5" 框的大小；
    # multiple="multiple"多选框
    <option value="北京">北京</option>
    <option value="天津" selected="selected">天津</option>
    <option value="南京">南京</option>
    <option value="东京">东京</option>
</select>

a标签（不能提交到数据库）

1.实现超链接 跳转功能

百度

<a href="http://www.baidu.com" target="_blank">百度</a>     
# href 特有的属性用于跳转的页面；
# target="_blank" 在新窗口页打开

2.锚点（用于跳转到指定的段落）

第一章 第二章 第三章 第四章

第一章内容

第二章内容

第三章内容

第四章内容

```html

第一章 # 在href="#i1"中指定 段落的 ID地址 第二章 第三章 第四章

第一章内容

# id 值应该唯一 # style="height: 600px" 高设置为600px才能看出效果

第二章内容

第三章内容

第四章内容

```

image图片标签

src="Lighthouse.jpg" # 图片地址
style="height: 200px; 200px" # 设置图片的宽高
alt="美女" # 当图片不存在时，显示文字
title="大美女" # 鼠标停放在上面显示的文字

<a href="http://pic.zhangyu.tv/upload/1553869728626391.jpg" target="_blank">               
    # 在a标签中包裹 img标签，可以实现点击图片跳转的作用
    <img src="Lighthouse.jpg" style="height: 200px; 200px" alt="美女" title="大美女">      
</a>

ul 和 ol列表标签

1. 123
2. 123

• 123
• 123

```html

# ol 数字序列 1.2.3...
1. 123
2. 123

# ul 依照 • 开头
• 123
• 123

``` ###表格 table 标签 1.td colspan="2" # 横向会占用两个单元格 2.td rowspan="2" # 上下占用两个单元格

主机名	地址	端口	选项
MySQL	1.1.1.1	80

<table border="1">                 <!-- 创建一个表格 -->
    <thead>                        <!-- 这是一个表头 -->
        <tr>                            <!-- 这是一行 -->

            <th>主机名</th>              <!-- 这是一列,th加粗的头 -->  
            <th>地址</th>            
            <th>端口</th>
            <th>选项</th>
        </tr>
    </thead>

    <tbody>                        <!-- 这是一个表本体 -->
        <tr>                            <!-- 这是一行 -->
            <td>MySQL</td>              <!-- 这是一列，普通的列 -->
            <td>1.1.1.1</td>
            <td>80</td>
            <td><input type="checkbox" value="2"/></td>
        </tr>
    </tbody>
</table>

label标签用于名称和input框获取光标

用户名

<label for="usernames">用户名</label>                   # for="username" 来自于那个 id
<input id="usernames" type="text" name="user"/>        # 定义一个input标签 id为“username”  

fieldset标签用于拉出一个大框

登录

用户名
密 码

```html

登录

# legend 标签中间为显示在大框线上的内容 用户名
密 码

```