html属性大全

标题标签HTML提供<hn>系列标签，用于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。其中：<h1> 定义最大的标题。<h6> 定义最小的标题。<hn>标题标签</hn>n的取值1-6水平线标签<hr /> 标签在HTML页

acacac.

8968人浏览 · 2022-04-07 20:39:01

acacac. · 2022-04-07 20:39:01 发布

标题标签

HTML提供<hn>系列标签，用于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
其中：<h1> 定义最大的标题。<h6> 定义最小的标题。
<hn>标题标签</hn>	n的取值1-6

水平线标签

<hr /> 标签在HTML页面中创建一条水平分隔线

size属性：水平线的高度，单位像素：px
noshade属性：没有阴影，取值：noshade，表示显示纯色

<hr size="5" noshade="noshade" />

字体标签

<font size="2" color="red" face="微软雅黑">字体的内容</font>

用于设置字体尺寸、字体颜色等。

标签具有如下属性：

size 属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。

说明：如果字体设置超过7，都是按照7进行显示。

color属性：设置字体的颜色。

颜色的取值：#xxxxxx 或 colorname

1、#xxxxxx 表示使用红绿蓝三原色设置颜色

红绿蓝分别取值：00 – FF，此处使用16进制。

#000000 表示黑色，#FFFFFF白色

#FF0000红色，#00FF00绿色，#0000FF蓝色

红绿蓝2位取值相同可以省略成1位。例如：# FF0000 简化成#F00

2、colorname 使用英文单词确定颜色。red 红色，blue 蓝色，green绿色

face 属性：设置文字的字体。

格式化标签

粗体

斜体

<b>要加粗的字体</b>
<i>要倾斜的字体</i>

段落标签

<p>段落内容</p><!-- 每个段落之间有留白 -->
<br /> <!-- 换行标签，只是换行，不会有留白 -->

文本相关的标签：

标题标签：h1 ~ h6
- 作用：给文本内容中的标题添加特殊标记，可以让标题和其他字体不一样（变大）
水平线标签： hr
- 作用：分隔线
字体标签： font
- 作用：针对文本内容进行颜色、大小、字体样式的设置
格式化标签： i、b、u
- 作用：针对文本内容进行加粗、斜体、下划线
段落标签： p
- 作用：对文本内容进行段落划分
  - 特点：段落之间有留白
换行标签：br
- 作用：换行（没有留白）

特殊字符

特殊字符称也为实体字符，所有的实体字符以 & 开头，以 ; 结尾。

符号	  名称	 HTML页面展示
	   空格符	   &nbsp;
<	   小于号	   &lt;  less than
>	   大于号	   &gt;  greate than
©	   版权符	   &copy;
¥	   元(yen)   &yen;

图片标签：在html页面中引用一张图片。

格式：

<img src="图片的路径地址" />

img标签对应的属性：

属性名称	含义	作用
src	图片的路径地址	表示图片的路径，一般使用当前服务器，也可以使用其它服务器，必须加http协议。不能使用本地地址，例如： c:/aaa.jpg
width	宽度	如果只设置其中一项，那么图片会等比例缩放
height	高度
title	提示文本	鼠标悬停在图片上方会出现的文字信息
alt	替换文本	图片加载失败的时候才会出现的文字信息
border	边框	只能定义边框的粗细

列表

在html中，列表标签可以分为：<ul>、<ol>

无序列表：<ul>标签
有序列表：<ol>标签

ul无序列表的属性：

名称	含义
type=“circle”	空心圆
type=“disc”	默认值，实心黑色圆
type=“square”	实心黑色正方形
注意：type属性写在ul身上是所有li改变，写在li身上是单个子标签li改变。

ol有序列表的属性：

名称	形式
type=“1”	默认值，1、2、3…
type=“a”	小写的英文字母，a、b、c…
type=“A”	大写的英文字母，A、B、C…
type=“i”	小写的罗马数字，i、ii、iii…
type=“I”	大写的罗马数字，I、II、III…
注意：属性type写在ol身上是所有li改变，写在li身上是单个改变

超链接

在html中超链接标签是：<a>

在网页中<a>必不可少的一个标签，互联网正是因为有了超链接而变得丰富多彩，在平时浏览网页时可以通过超链接跳转页面、跳转图片。

超链接标签的语法：

<a href="跳转的路径地址">显示的文本</a>

超链接的属性：

名称	作用	取值
href	用于确定需要显示页面的路径（URL）	必写属性
target	确定以何种方式打开href所设置的页面	_blank 新窗口打开 _self 在自己的页面中打开，将原来页面覆盖。默认打开方式

外部链接

如果想通过一个链接跳转一个网址，那么这里要注意必须加上http://或者https://的协议。

<a href="http://www.itcast.cn/">去传智官网</a>

空连接

如果希望这是一个链接，但是用户单击之后又不需要跳转，那么这种称之为空链接，也叫做假链接。

<a href="#"></a>
<a href="javascript:;"></a> √建议使用这个
<a href="javascript:"></a> √建议使用这个
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>

一般不建议使用第一种 # 。因为第一种格式，当点击该超链接的时候浏览器地址栏会发生变化，多一个#；这种方法会在地址栏的后面添加一个#号，然后回到页面顶部。

点击超链接之后，地址栏会多一个 #

第一种格式除了多一个#号，如果页面内容比较多的时候，点击该超链接的时候，页面会重新回到页面的最上面（当把页面下拉到页面的最下面的时候，点击超链接的时候，页面又会回到页面上面）。
第2、3、4、5种属于我们后面学习的javascript语言的伪协议。上面使用javascript的伪协议的作用相同，会使a标签链接到一个js方法，但这个方法是void（0），则不会触发。

锚点链接

通过和name值做一个绑定，实现区域的跳转。

用法：

1、首先创建点击跳转的链接a标签，href写上 #锚点名 实现一个绑定的操作。

2、定义一个锚点a标签，定义一个name属性，name的值要与锚点名一致，这个操作也称之为抛锚。

<a href="#锚点名">点击跳转</a>
<a name="锚点名">目标区域</a>

表格使用<table>标签表示
表格中的行使用<tr>标签表示
行中的列使用<td>标签表示

table标签：

是父标签，相当于整个表格的容器

table标签的属性：

名称	作用
border	表格边框的宽度
width	表格的宽度
height	表格的高度
cellpadding	单元格边沿与其内容之间的空白
cellspacing	单元格之间的空白
bgcolor :background color	表格的背景颜色

tr标签：

table标签中的子标签
用于定义行

tr标签的属性：

名称	作用
align	单元格内容的水平对齐方式,取值：left 左、right 右、center 居中

td标签：

tr标签中的子标签
用于定义表格的单元格（一个列）

td标签的属性：

名称	作用
colspan	单元格可横跨的列数(横向合并单元格)
rowspan	单元格可横跨的行数(纵向合并单元格)
align	单元格内容的水平对齐方式,取值：left 左、right 右、center 居中

- 在html中<th>标签用于定义表头。表头中的内容默认居中、加粗。

- 在标签中除了子标签外，还有一个子标签：。表示：表头

添加表格标题

在table标签中有一个子标签：

- 设置表格的标题

语法：
<caption>表格标题内容</caption>

form的常用属性：

常用属性	作用
action	请求路径，确定表单提交到服务器的地址（路径）【必备的属性】
method	提交数据的方式。有两种方式：GET或POST

表单标签form的属性method用来设置表单的提交方式：

GET （默认提交方式）
- 提交的数据追加在请求路径上。数据格式k = v，追加是使用 ? 连接；之后每一对数据使用&连接。
  - 如：http://www.baidu.com/register.html?name=itcast&pwd=123&e=xx
- 由于GET请求会将传递到服务器的数据写在请求路径后面，会显示到浏览器的地址栏中，所以这样会导致数据不安全。使用时要谨慎
- 因为不同的浏览器对请求路径长度有限制，所有GET请求提交的数据有限。
POST
- 提交的数据不再请求路径上追加（即不显示在地址栏上）
- 数据相对安全
- 提交的数据大小不限制

问题：那么既然get请求方式不安全，那什么情况下使用get？

举例：

例如我们去淘宝买商品，自己不知道商品怎样，想让别人帮忙参考下，此时，我们需要将该商品的的地址栏信息复制分享给好友。但是post请求就不能做分享。
商品地址栏：
https://detail.tmall.com/item.htm?spm=a221t.1476805.6299412507.53.1cac6769bnkEWw&id=564169238856&scm=1003.1.03175.ITEM_564169238856_114332&acm=03175.1003.1.114332&uuid=G5QKWXbU&pos=7&crid=37
以上就是淘宝商品的某一个连接，使用的就是get请求，也就是说get请求可以做这种商品的分享。而post请求做不到。

form标签的应用

<form action="服务器的地址" method="get / post">
    
    提交的数据，全部书写在form表单下的子标签中
    
</form>

表单的提交方式：

GET：显式提交
- 发送的数据会追加在请求路径的后面（整个URL会显示在浏览器的地址栏中）
- 数据不安全
- 请求的数据因浏览器不同，会造成数据长度的限制
POST：隐式提交
- 发送的数据不会追加在请求路径后面（地址栏中不显示）
- 相对get请求来讲，数据安全
- 请求的数据不受限制

输入域标签

在form表单中，负责采集用户数据的标签，最常用的是input

标签用于获得用户输入信息，随着type属性值不同，采集方式也不同

语法格式：

<input  type="表单控件类型" name="表单控件名称" value="数据值" />

属性	说明
type	指定表单控件的类型。例：type=”text”，表示文本框； type=”radio”，表示单选框
name	设置input标签的名称。可以通过名称获得当前input标签元素
value	数据值。通过value可以拿到要采集的数据

type属性值：（指定是哪种表单控件）

属性	说明	示例
text	普通文本
password	密码输入框,里边的密码以黑色的小圆点显示
radio	单选框	男女
checkbox	多选框	游戏音乐
file	上传文件
hidden	隐藏域。存储数据使用,不会在浏览器页面显示
button	普通按钮，配合js使用
reset	重置按钮，把表单的恢复到默认状态(清空表单)
submit	提交按钮，把表单的数据,提交到服务器

代码模板：

用户名 <input type="text"  />

text：

文本框。用户可在其中输入单行文本。如果在input标签中不写type，那么默认就是text。

代码模板：

密码 <input type="password" /><br/>

password：

密码框。输入的字符以黑色圆点显示（密码不可见）

代码模板：

性别 <input type="radio"  name="sex"/>男
    <input type="radio"  name="sex"/>女

radio：

单选按钮。表示一组互斥的选项按钮。当一个按钮被选中，之前选中的按钮就变为非选中的。

代码模板：

<input type="checkbox"/>I have a bike
<input type="checkbox"/>I have a car

checkbox：

复选框。从若干给定的选择中选取一个或者若干个选项。主要让用户选择数据。

代码模板：

<input type="file"/>

file：

文件上传组件，提供"浏览"按下可以选择需要上传文件

代码模板：

<input type="hidden"  value="数据不显示在页面上，会随着表单提交，数据发给服务器"/>

hidden：

页面上的隐藏域。用于隐藏数据。通常把一些浏览器不显示但又必须发送给服务器的数据放在隐藏域中。特点：浏览器页面上看不见。

代码模板：

<input type="reset"  value="重置"/>

reset：

重置按钮。将表单恢复到初始状态。重置页面上的所有输入项，恢复默认状态。

代码模板：

<input type="image" src="img/banner_1.jpg"/>

image：

图形提交按钮。通过src给按钮设置图片。它是在页面上嵌入一个图片。

代码模板：

<input type="button" value="内容"/>

button：

普通按钮。显示一个按钮，但点击没有任何效果，常用于与JavaScript结合使用。按钮上的内容需要使用value属性书写。

代码模板：

<input type="submit" value="注册"/>

submit：

提交按钮。提交按钮把当前form标签中的所有输入项中的数据提交给服务器。一般不写name属性，否则将value的值提交到服务器。

以下是input标签的其他属性：

name：属性名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过name属性值获得提交的数据。

value：设置input标签的默认值。submit、reset和button为按钮显示数据

size：输入框大小。

checked：单选框或复选框被选中

<input type="checkbox" checked="checked"/>

readonly：是否只读。

<input type="text" readonly="readonly" value="哈哈哈"/>

添加了 readonly="readonly"属性后，文本框只能读，不能修改

disabled：是否可用。

<input type="checkbox"  checked="checked" disabled="disabled"/> 足球

添加了disabled="disabled"属性后，文本框不能操作了

maxlength：允许输入的最大长度

<input type="password" name="username" maxlength="20"/>

文本域标签

文本域：textarea标签。多行的文本输入控件。

1）cols属性：文本域的显示行（高）

2）rows属性：文本域的显示列（宽）

语法结构：

<textarea cols=”50” rows=”3”></textarea>

按钮标签

按钮标签一般很少使用，提供“普通|重置|提交”功能。

显示一个按钮，但点击没有任何效果，需要结合后面学习的js一起使用。按钮上的内容需要使用文本来书写。

<button type="submit" value="提交">哈哈</button>

等同于：
<input type="submit" value="提交" />

label标签

说明：lable标签是我们之前没有接触到的标签，我们简单介绍下这个标签。

格式：

<label for="属性值">文本值</label>

lable标签属于html中的标签，标签为 input 元素定义标注（标记）。

label 标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 标签内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素如：input的 id 属性相同。这样就可以实现自动将焦点转到和input标签相关的表单控件上.

例如下面代码：

<form>
  <label for="male">男</label>
    <input type="radio" name="sex" id="male" /> <br /> 
    
  <label for="female">女</label> 
    <input type="radio" name="sex" id="female" /> 
</form>

只需要点击前面的字体就可以选中按钮。要想实现这个效果要求lable的for属性值必须和下面的input标签的id属性值一样。

type新增类型

注：不同的浏览器支持上有差异，有些浏览器依然不支持

<form>
    <input type="类型"/>
</form>

值	描述
color	定义拾色器
date	定义日期字段（带有 calendar 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分（带有 time 控件）
email	定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能
number	定义带有 spinner 控件的数字字段，该文本框只能输入数字，可以对输入的数字进行加1和减1
search	定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。

其他标签：div、span

目标

了解div标签和span标签

路径

div标签介绍
span标签介绍
代码示例

在HTML中还有一些常用标签：块标签<div>、内联标签<span>

div、span标签的作用：用来封装数据，而对数据不做任何的样式效果的设置

div、span标签两个标签本身并没有实际意义，必须借助于我们马上学习的css才能够显示出页面样式效果。

div标签

什么是div？

div就是html一个普通标签，进行区域划分。
特性：独自占一行。独自不能实现复杂效果。必须结合CSS样式进行渲染。

div属于块级元素。

span标签

什么是span？

span 就是html一个普通的标签，也叫行内标签。
**特性：共处一行。**用来对行内元素进行美化。span标签不是块级标签，可以和其在同一行。
实际开发中：使用span + css用来对数据即字体进行样式的修饰。而很少在使用font。

总结：

div、span标签它们仅仅是用来封装数据，而对数据不做任何的样式效果的设置。

早期的html标签，它既可以封装数据，同时通过标签的属性可以对封装的数据进行样式效果的设置。出现div和span标签的目的是主要让html标签从负责数据的封装和样式进行分离。
后期网页设计中，我们主要使用div和span，以及html中的其他标签完成页面上要显示的数据的封装，而不再使用html标签的属性来控制页面上数据的样式，把样式交给了新的技术CSS。
其实div和span标签在页面上的重点不仅是封装数据，并且还可以对页面进行划分和布局。