01.HTML常用标签

HTML常用标签

HTML常用文本标签

标签名	作用	备注
p	表示文本的一个段落
h	表示文档标题，<h1>–<h6>，呈现了六个不同级别的标题，<h1>级别最高，<h6>级别最低
hr	表示段落级元素之间的主题转换，一般显示为水平线	属性：size-大小 color-颜色
ul	表示一个无序列表，可含多个元素，无编号显示	属性：type-列表样式（disc实心圆、circle空心圆、square实心方块） 列表项：<li>
ol	表示一个有序列表，通常渲染为带有编号的列表	属性：type-列表样式（1数字、A或a字母、I或i罗马字符）
li	表示列表里的条目
em	表示文本着重，一般用斜体显示
i	表示文本斜体
strong	表示文本重要，一般用粗体显示
b	表示加粗文本
font	表示字体，可以设置样式（已过时）

HTML常用样式

样式名	作用	备注
float	属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。	left：左浮动，right：右浮动，none：不浮动。
clear	both：清除浮动效果
text-align	文本对齐方式	center：居中对齐，left：左对齐，right：右对齐
background	背景颜色，直接写颜色或16进制都行

图片标签

标签名	作用	备注
img	可以显示一张图片（本地或网络）	src属性：这是一个必须属性，表示图片的地址 title属性：鼠标悬停（hover）时显示文本 alt属性：图形不显示时替换文本 height属性：图像的高度 width属性：图像的宽度

超链接标签

标签名	作用	备注
a	表示超链接	href属性：表示超链接指向的URL地址 target属性：页面打开方式（_self当前页默认选项，_blank新标签页）

超链接的样式

        a{
            /*去掉超链接的下划线*/
            text-decoration: none;
            /*超链接的颜色*/
            color: black;
        }

超链接鼠标悬浮的样式控制

        /*鼠标悬浮的样式控制*/
        a:hover {
        	/* 颜色变成红色 */
            color: red;
        }

更换背景图片样式

        /* 更换背景图片 */
        body {
            background: url("https://www.baidu.com/images/logo.png");
        }

表单标签

标签名	作用	属性
form	表示表单标签	action属性：用于提交数据的路径 method属性：提交表单的方式（get和post） autocomplete属性：是否记录补全（on和off）

<!--get方式的表单-->
<!--get：表单数据会显示在地址栏中，不安全。地址栏的url长度有限制-->
<form action="#" method="get" autocomplete="on">
    用户名：<input type="text" name="username"/>
    <button type="submit">提交</button>
</form>

<!--post方式的表单-->
<!--post：表单数据不会显示在地址栏中，数据封装在请求体中，安全。长度没有限制-->
<form action="#" method="post" autocomplete="on">
    用户名：<input type="text" name="username"/>
    <button type="submit">提交</button>
</form>

表单项标签

标签名	作用	属性
lable	表单元素说明。配合表单项标签使用	for属性，属性值必须和表单项的id属性一致
input	表单项标签，多种输入类型来接收用户数据	type属性：数据类型 id属性：唯一标识 name属性：提交服务器的标识 value属性：默认数据值 placeholder属性：默认提示信息 required属性：是否默认有数据
button	按钮标签，不同的按钮有不同的作用	type属性：按钮的功能（submit提交按钮、reset重置按钮、button普通按钮）

表单项标签type属性

属性值	作用	注意
text	普通文本框
password	密码框
email	邮箱框，简单验证
radio	单选框	选项必须有相同的那么属性值，value属性设置实际提交的值，checked属性代表默认选中
checkbox	复选框	选项必须有相同的name属性值，value属性设置实际提交的值，checked属性代表默认选中
date	日期框
time	时间框
datetime-local	时间日期框
number	数字框
range	滚动条数字框	min最小值，max最大值，step步进值
search	可清除文本框
tel	电话框
url	网址框
file	文件上传框
hidden	隐藏域	value属性设置实际提交的值

其他常用表单项标签

标签名	作用	属性
select	表示下拉列表标签	与input标签常见属性相似
optgroup	表示下拉列表分组标签	lable属性：设置分组名称
option	表示下拉列表项标签
textarea	表示文本域标签	rows属性：代表行数 cols属性：代表列数