HTML 入门指南-HTML 常用基础标签

标签列表（含详解）

传送门

基础标签

<!DOCTYPE> ：定义文档类型
<html> ：定义一个 HTML 文档
<title> ：为文档定义一个标题
<body> ：定义文档的主体
<h1> to <h6> ：定义 HTML 标题，标题中的文字会自动的加粗

行间元素：会独自占用 html 中的一行

<h1>标题文字</h1> 最大

<h6>标题文字</h6> 最小
<p> ：定义一个段落
<br> ：定义简单的折行
<hr> ：定义水平线，可以把页面分成上下两部分
 ：定义一个注释

注释特点：
- 浏览器查看时，不显示。右键查看源码可以看到。
- 注释标签不能嵌套。
- 注释特殊用法，为不同的浏览器提供不同的解决方案（了解）

格式标签

格式化标签的作用：用于对文字进行格式化

常用标签：

<b> ：定义粗体文本
<i>：定义斜体文本
<u> ：定义下划线文本
<font> ：HTML5 不再支持， HTML 4.01 已废弃。定义文本的字体、尺寸和颜色

注意：
在 html 中同级的标签是可以相互嵌套使用的

例如：<b><i><font></font></i></b>

图片标签

图片标签作用：用于在页面中显示一个图片

常用标签：

<img/> ：定义图像，自闭和标签

常用属性：
- src：设置图片的路径(建议使用相对路径)
- title：设置图片的标题，鼠标移动到图片上，会显示标题
- alt：图片丢失，显示文字
- height：设置图片的高度，单位是像素px
- width：设置图片的宽度，单位是像素px
示例：
```
<img src="img/2.jpg" height="200px" width="150px" title="我是一个美女"/>
```

列表标签

列表标签作用：用于在页面中显示一个列表

常用标签：

<ol> ：定义一个有序列表

格式：
```
<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    ...
    <li>列表项</li>
</ol>
```
属性：
- type：用于设置列表显示的文字(1，I，A，a…)，缺省默认是阿拉伯数字
<ul> ：定义一个无序列表

格式：
```
<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    ...
    <li>列表项</li>
</ul>
```
属性：
- type：用于设置列表显示的形状
  
  属性值： disc实心圆（不写默认）、 square方块、circle空心圆
<li> ：定义一个列表标签中的列表项

注意：
- 单独书写 ol 和 ul 标签没有意义，必须和列表项 li 标签一起使用
- 每个 li 标签都会占用 html 中的一行(行级元素)

超链接标签

超链接标签作用：用于页面的跳转，可以由一个页面跳转到另外一个页面

常用标签：

<a> ：定义一个链接

使用示例：
```
<a>文字|图片</a>

<a href="http://www.itheima.com" target="_blank">
    <img src="img/logo2.png">
</a>
```
属性：
- href：设置跳转的路径
  
  属性值：
  - 可以是其他的页面（.html，.jsp）
  - 可以是页面的 url 地址（http://www.baidu.com）
- target：设置跳转的方式
  
  属性值：
  - _self：默认属性，在当前页面打开新的链接
  - _blank：在新的页面打开新的链接

表格标签

HTML 表格由 <table> 标签以及一个或多个 <tr>、<th> 或 <td> 标签组成。

<table> ：定义一个表格。父标签，相当于整个表格的容器。

常用属性：
- border ：表格边框的宽度。单位像素 px
- width ：表格的宽度。单位像素 px
- cellpadding ：单元边沿与其内容之间的空白。单位像素 px
- cellspacing ：单元格之间的空白。单位像素 px
- bgcolor ：表格的背景颜色。
<tr> ：定义表格中的行
<td> ：定义表格中的单元（一个列）

常用属性：
- colspan ：单元格可横跨的列数
- rowspan ：单元格可横跨的行数
- align ：单元格内容的水平对齐方式，取值：left 左、right 右、center 居中
- nowrap ：单元格中的内容是否折行（自动换行）
<th> ：定义表格中的表头单元格。单元格内的内容默认居中、加粗。

实体字符（转义字符）

常用：

  ：半个英语字母英文空格
&emsp; ：一个汉字中文空格
< ：小于号
> ：大于号
& ：& 符号
× ：× 叉号
¥ ：￥人民币符号
$ ：美元符号

样式/节标签（style、dev、span）

作用：用于页面的布局，可以把页面分成一块一块的

页面的流行的布局方式：div 标签和 span 标签 + CSS

div 标签和 span 标签一般都是和 CSS（层叠样式表）一起使用，否则没有意义

常用标签：

<style> ：定义文档的样式信息（CSS）
<div> ：行级（间）标签，会霸占 html 中的一行
<span> ：行内标签，只会占用一行中的一部分（占用的大小和里边的内容多少有关）

按钮标签

html 有两种按钮：

button 按钮

button 按钮的按钮文字（按钮名称）就是 <button> 和 </button> 间的内容
```
<button>按钮文字</button>
```
input 按钮

input 按钮的按钮文字是由 value 属性控制的，是 value 属性的属性值
```
<input type="button value="按钮一" />
```

form 表单标签

form 表单常用标签

<form> ：定义一个 HTML 表单，用于用户输入

单独书写没有意义，需要配合子标签一起使用

常用属性：
- action：设置表单提交的路径，路径一般都是 java 中的某一个类（没有服务器，写 #）
- method：设置表单的提交方式（get，post），不写 method 默认都是 get 方法
示例：<form action="#" method="get">
<input> ：form 标签的子标签，定义一个输入控件。

用于获得用户输入信息，type 属性值不同，搜集方式不同。

type 属性：
- text：普通文本（一行）
- password：密码输入框，里边的密码以黑色的小圆点显示
- radio：单选框
  
  注：
  - 搭配属性 name：给标签设置一个名字
  - 同名的 radio 标签互斥，只能选择一个
  - 表单标签的属性 checked：可以给单选框|多选框设置一个默认选中的值
    
    示例：<input type="radio" name="sex" checked="checked">
- checkbox：多选框
- file：上传文件
- image：上传图片使用
  
  配合属性：
  - src：设置要上传图片的路径
  - height：设置图片的高度，单位像素
  - width：设置图片的宽度，单位像素
  示例：<input type="image" src="img/2.jpg" height="200px" width="170px">
- hidden：隐藏域，存储数据使用，不会在浏览器页面显示
  
  配合属性 value：给标签添加默认值
  
  示例： <input type="hidden" value="18">
- button：普通按钮，配合 js 使用
  
  配合属性 value：给标签添加默认值
  
  示例： <input type="button" value="一个按钮">
- reset：重置按钮，把表单恢复到默认状态（清空表单）
- submit：提交按钮
  
  根据 form 标签的属性 action 路径，把表单的数据，提交到服务器
<select> ：form 标签的子标签，定义选择列表（下拉列表）

可以让用户在多个值中选择一个

注意：需要配合子标签 option（下拉选的列表项）一起使用

select 标签的常用属性：
- name 属性：发送给服务器的名称
- multiple 属性：不写默认单选，取值为“multiple”表示多选。
  
  示例：<select name="city" multiple="multiple">
  
  一般不用多选
- size 属性：多选时，可见选项的数目。
<option> ：select 标签的子标签，定义选择列表中的选项，即下拉列表中的一个选项（一个条目）

option 标签的属性：
- selected 属性：勾选当前列表项
- value 属性：发送给服务器的选项值
<textarea> ：form 标签的子标签，定义多行的文本输入控件，可以让用户输入多行文本

常用属性：
- rows：设置文本域默认显示的行数
cols：设置文本域默认显示的列数

注：多行文本域使用的不是特别多，已经被文本编辑器给取代了

form 表单的通用属性

name 属性：元素名

如果需要表单数据提交到服务器，必须提供 name 属性值，服务器通过属性值获得提交的数据。
value 属性：设置 input 标签的默认值。submit 和 reset 为按钮显示为按钮名称

注意：除了文本输入域（text，password，textarea）外的其他标签需要设置 value 属性值
checked 属性：单选框或复选框被选中
readonly 属性：是否只读
disabled 属性：是否可用
placeholder 属性：html5 的新特性，给标签添加一个默认值。输入数据隐藏默认值，删除数据会显示默认值

form 表单的提交方式

form 标签的 method 属性，可以设置表单的提交方式

get（不写 method 属性，默认）：当点击提交按钮的时候，会把表单中的数据追加到浏览器的地址栏中提交到服务器

格式：xxx.html?k=v&k=v
- 会在 .html 的后边添加一个 ?，? 后边就是表单中提交的数据
- 数据是以键值对的方式提交的，多个键值对之间使用 & 符号连接
- 健值对：k=v
  - k：标签的 name 属性值
    
    name=“username”，则 k => username
    
    name=“password”，则 k=> password
  - v：标签的 value 属性值，文本输入框则输入框中输入的内容
    
    value=“男”，则 v ==> 男
    
    注意：除了文本输入框，其他的标签若要在提交时发送到服务器，必须有 value 属性值
示例：
- 标签：<form action="#" method="get">
- 提交后地址栏：...form表单的提交方式.html?username=rose&password=4321&sex=on&hobby=喝酒&city=杭州#
弊端：
- 把数据追加到浏览器的地址栏中，会暴漏敏感信息（密码）
- 浏览器的地址栏的长度是有限制的，提交的数据大小有限制，不能提交大的文件（最多能提交几 kb 的数据）
post：会把提交的数据隐藏在请求服务器的请求体中（java web）

好处：
- 安全，用于无法直接看到提交的数据
- 可以提交大的文件

入门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单标签的属性</title>
</head>
<body>
    <form action="#" method="get">
        请输入用户名:<input type="text" name="username" value="张三"/><br/>
        请输入用户名:<input type="text" name="username" value="张三" readonly="readonly"/><br/>
        请输入用户名:<input type="text" name="username" value="张三" disabled="disabled"/><br/>
        <hr/>
        用户名:<input type="text" name="username" placeholder="请输入姓名"/><br/>
        密码:<input type="password" name="password" placeholder="请输入密码"/><br/>
        请选择您的出生日期:<input type="date" name="date"><br/>

        请选择您的性别:
        男<input type="radio" name="sex" checked="checked" value="男">
        女<input type="radio" name="sex" value="女"><br/>
        <!--- checkbox:多选框-->
        请选择您的爱好:
        抽烟<input type="checkbox" name="hobby" value="抽烟">
        喝酒<input type="checkbox" name="hobby" value="喝酒">
        烫头<input type="checkbox" checked="checked" name="hobby" value="烫头"><br/>

        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option selected="selected">杭州</option>
        </select>

        <select name="city" multiple="multiple">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option selected="selected">杭州</option>
        </select>

        <select name="city" multiple="multiple" size="2">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option selected="selected">杭州</option>
        </select>
    </form>
</body>
</html>

全局属性

详见：传送门

常见全局属性：

class ：规定元素的类名（classname）
id ：规定元素的唯一 id
title ：规定元素的额外信息（可在工具提示中显示）
draggable ：指定某个元素是否可以拖动

秒客网

HTML 入门指南-HTML 常用基础标签

标签列表（含详解）

基础标签

格式标签

图片标签

列表标签

超链接标签

表格标签

实体字符（转义字符）

样式/节标签（style、dev、span）

按钮标签

form 表单标签

form 表单常用标签

form 表单的通用属性

form 表单的提交方式

入门案例

全局属性

相关文章

HTML 入门指南-HTML 常用基础标签

标签列表（含详解）

基础标签

格式标签

图片标签

列表标签

超链接标签

表格标签

实体字符（转义字符）

样式/节 标签（style、dev、span）

按钮标签

form 表单标签

form 表单常用标签

form 表单的通用属性

form 表单的提交方式

入门案例

全局属性

相关文章

样式/节标签（style、dev、span）