HTML5标签&&属性全在这里了

小茹想睡觉

已于 2022-10-11 15:38:18 修改

阅读量7.4k

点赞数 42

分类专栏： html+css 文章标签：前端 html5

于 2022-03-23 21:19:31 首次发布

本文链接：https://blog.csdn.net/Rice_w/article/details/123696681

版权

html+css 专栏收录该内容

3 篇文章 4 订阅

订阅专栏

一、HTML5文档结构

HTML5文档的基本结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>我的第一个网页</title>
    </head>
    <body>
        Hello World！
    </body>
</html>

<!DOCTYPE html>  声明这是一个html文档，必须在文档页面的第一行

二、HTML5常见的块级标签和行级标签

1、常见的块级标签

块级标签在网页中显示为块，块级标签独占一行，新的块级标签将从新的一行开始排列，它可以桶内内联元素和其他块级元素。

块级标签	作用
< h1></ h1>……….< h6>< h6/>	设置段落标题的大小，1~6级标题字体大小依次递减
< hr/>	水平线标签，添加水平分割线
< p></ p>	段落标签，区分段落
< br/>	换行标签
< blockquote>< /blockquote>	引用标签，同时会将标签内的文字缩进显示
< pre>< /pre>	预格式标签，可以将文字按照原始的排列方式进行显示
< ul>< li>< /li></ ul>	无序列表标签
< ol>< li>< /li></ ol>	有序列表标签
< dl></ dl>	定义列表标签
< div>< /div>	分区标签

2、常见的行级标签

与块级标签不同，行级标签在页面中可以和其他元素在同行显示，知道一行不能放下一个完整的元素，并且通常行级元素内不会包含其他元素。

行级标签	标签含义
< img/>	图片标签
< a>< /a>	超链接标签
< span>	组合文档中的行内元素
< em>	侧重点的强调，可嵌套使用，嵌套个数越多，强调级别越高
< strong>	表示内容的重要性，嵌套递增重要性级别
< small>	旁注（side comments），可以用在免责声明，使用条款和版权信息等需要小字体的场景
< s>	有误文本，文本文字上加删除线的样式
< b>	不仅仅是粗体文本，还可以定义一些需要引起注意却没有额外语义的内容，比如摘要的关键和文章导语的加粗等
< i>	不仅是单纯的斜体，还可表示“另一种叙述方式”，常见的场景有外来语、分类名称和技术术语等
< cite>	浏览器显示为倾斜，常用于书、画作、作品的引用
< q>	短引用，显示为文字用""引起来
< code>	只是表示计算机代码，但是浏览器只会显示等宽字体，不会保留代码格式，需配合

2.1< img/>:图片标签

<img src = "logo.png" alt="图片logo" title="图片标识"/>

图片标签主要有如下 5 个属性。

src属性

src就是引用图片的路径地址，写法有三种
- 相对路径：以当前文件为准，去寻找图片地址
- 绝对路径：file:///盘符:/文件夹/图片.扩展名。但这种方式严禁使用，原因有两点：
  - 绝对路径只在当前计算机生效，若将网站转移服务器，则路径会失效。
  - 通过绝对路径打开图片使用的是 file 协议，但网页中使用的是 http 协议，因此会出现跨域问题，造成图片无法显示。
- 网络地址：使用网络上的图片链接
height 和 width 属性。设置图片的宽度和高度
title 属性。设置图片的标题。当鼠标指在图片上后显示的文字
alt 属性。设置由于图片无法加载时显示的文字
align属性。设置图片周围文字相对于图片的位置

2.2< a>< /a>:超链接标签

<a href="#">这是一个超链接</a>

超链接标签的属性

href属性：在标签中使用 href 属性来描述链接的地址，这个地址可以是网络链接，也可以是本地文件。当用#时，表示这是一个空的超链接。
target属性：使用 target 属性可以定义通过超链接打开的文档在何处显示。

有两个属性：
- _self:在与连接相同的框架中打开被链接文档（默认属性值）
- _blank:在新窗口中打开链接

锚链接的用法

本页面锚链接

使用#name跳转到对应锚点

<a href="#top" target="_self">这是一个超链接</a>

页面间锚链接

跳转到其他页面的指定位置，设置锚点
```
<a herf="t.html#nav"跳转到新页面指定部分</a>
```

2.3、块级标签与行级标签的特点与区别

块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示
块级标签的宽度默认是100%；行级标签的宽度由文字内容撑开
块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性

3、HTML5新增标签简介

三、HTML5 表格

3.1、表格内容

表格由< table>标签定义，行内由< tr>标签定义，每行被分割为若干个单元，列由标签定义

如果第一行为表头，< td>要换成< th>

代码展示为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格的基本结构</title>
	</head>
	<body>
		<table>
			<tr>
				<th>表头 1</th>
                <th>表头 2</th>
                <th>表头 3</th>
            </tr>
            <tr>
                <td>第一行 1</td>
                <td>第一行 2</td>
                <td>第一行 3</td>
            </tr>
            <tr>
                <td>第二行 1</td>
                <td>第二行 2</td>
                <td>第二行 3</td>
        	</tr>
        </table>
</body>
</html>

3.2、表格属性

表格属性	使用方法
border: (表格边框属性)	< table border=“1”></ table>
width/height: 表格（宽度/高度）属性	< table border=“1” width=“400” height=“200”></ table>
bgcolor: 表格背景色属性	< table border=“1” bgcolor=“red”></ table>
background: 表格背景图属性	< table border=“1” background=“img/img.png”>< /table>
bordercolor: 表格边框颜色属性	< table border=“1” bordercolor=“blue”></ table>
cellspacing: 表格单元格间距属性	< table border=“1” cellspacing=“10” ></ table>
cellpadding: 表格单元格内边距属性	< table border=“1” cellpadding=“10”></ table>
align:表格对齐属性	< table border=“1” align=“center”></ table>

3.3、行和列的属性

当表格属性与行列属性冲突时，以行列属性为准

行、列属性	用法
width/height：单元格宽度/高度属性	< td width=“100” height=“50”> 第一行1</ td>
bgcolor：单元格背景色属性	< td bgcolor=“red”> 第一行1</ td>
align：单元格内容水平对齐属性	< td align=“center”> 第一行1</ td>
valign：单元格内容垂直对齐属性	< td valign=“center”> 第一行1</ td>
colspan /rowspan：表格的跨行与跨列	colspan 属性表示跨列，当某个格跨 N 列时，其右边 N-1 个单元格需删除。 rowspan 属性表示跨行，当某个格跨 N 行时，其下方 N-1 个单元格需删除。

3.4、表格的结构化与直列化

3.4.1、表格的结构化

1）caption：表格的标题，通常出现在表格的顶部。

2）thead：定义表格表头，通常表现为标题行。

3）tbody：定义一段表格主体，一个表格可以有多个主体，可以按照行来进行分组。

4）tfoot：定义表格的脚尾，通常表现为总计行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的结构化</title>
</head>
<body>
    <table width="500" border="1">
         <caption>表格标题</caption>
         <thead>
             <tr>
                 <th>表格头部</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>表格主体</td>
             </tr>
         </tbody>
         <tfoot>
             <tr>
                 <td>表格底部</td>
             </tr>
         </tfoot>
    </table>
</body>
</html>

3.4.2、表格的直列化

基本语法如下：

<colgroup style="background-color: yellow;"> <!--前两列为一组-->
    <col /> <!--第一列-->
    <col /> <!--第二列-->
</colgroup>
<col style="background-color: blue;"/> <!--第三列-->

< colgroup>标签只能在< table>中使用.

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="500" border="1">
        <colgroup style="background-color: yellow;"> <!--前两列为一组-->
            <col /> <!--第一列-->
            <col /> <!--第二列-->
            </colgroup>
            <col style="background-color: blue;"/> <!--第三列-->
            <thead>
                <tr>
                <th>头 1</th>
                <th>头 2</th>
                <th>头 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>111</td>
                    <td>111</td>
                    <td>111</td>
                </tr>
                <tr>
                    <td>222</td>
                    <td>222</td>
                    <td>222</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>尾 1</td>
                    <td>尾 2</td>
                    <td>尾 3</td>
                </tr>
            </tfoot>
    </table>
</body>
</html>

四、HTML5表单

4.1、表单的常用属性

表单属性
action 属性用于指定表单提交时向何处发送表单数据，即需要发送的服务器地址。
method 属性用于指定表单向服务器提交数据的方法，包括两种方法，分别是 get 和 post。
enctype 属性指定表单发送的编码方式，只有 method="post"时才有效，共有三种属性值

method属性

method属性包括两种方法，分别是get和post

get方法与post方法的特点与区别

get方法是使用URL传递参数，并且只能传递少量数据。同时URL传递参数并不安全，所有信息在地址栏可以看到，并且可以通过地址栏随意传递其他数据。为默认值
post方法是使用http请求传递，传递的数量在理论上没有限制。并且信息在地址中不可见，比较安全

enctype 属性

enctype 属性共有三种属性值

application/x-www-form-urlencoded：此为默认值，如果 enctype 属性省略不写，则表示采取此种编码方式。
multipart/form-data：不对字符编码，用于上传文件时使用
text/plain：将空格转换为“+”符号，但不编码特殊字符，通常在将表单发送到电子邮箱时使用。

4.2、input输入框

4.2.1、input常用属性

属性	含义
type 属性	表示 input 输入框的类型，默认值是 text
name 属性	name 属性表示 input 输入框的名称，一般必填
value 属性	value 属性表示 input 输入框的默认值
placeholder 属性	placeholder 属性表示输入框中的提示信息，当输入框有 value 属性的时候，提示内容会消失，转而显示 value 属性值。
tabindex 属性	tabindex=“1” 此属性控制按 Tab 键时的跳转顺序
checked=“checked”	默认选中
disabled=“disabled”	设置控件不能使用。
hidden=“hidden”	设置隐藏控件

4.2.2、type类型

text：文本输入框
password：密码输入框
radio：单选按钮
checkbox：复选按钮
file：文件上传按钮
submit：表单提交按钮
reset：重置按钮
image：图片提交按钮
button：可单击按钮

4.3、其他表单元素

4.3.1、select下拉选择控件

<form action="form.php" method="post">
        今天是星期：
        <select name="week" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>
    </form>

1．< select>标签的属性

1）name=“列表名”：所有选项只有一个 name。

2）multiple=“multiple”：设置 select 控件为多选，可在列表中使用 Ctrl 键+鼠标进行多选。一般不用。

3）size=“1”：规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，下拉列表就会显示出滚动条，表示可以查看更多选项。

2．标签的属性

1）value=“”：分为两种情况。当选项 option 没有 value 属性时，往后台传递的是标签中的文字；当选项 option 有 value 属性时，往后台传递的是 value 属性的值。

2）title=“”：鼠标指上后显示的文字，与图片的 title 属性类似。

3）selected=“selected”：默认选中，即 select 的初始值。

3．利用标签分组

<form action="form.php" method="post">
        你所在的地区为：
        <select name="city">
            <optgroup label="河南">
                <option value="1" title="郑州">郑州</option>
                <option value="2" title="安阳">郑州</option>
                <option value="3" title="新乡">新乡</option>
            </optgroup>
            <optgroup label="北京市">
                <option>海淀区</option>
                <option>朝阳区</option>
                </optgroup>
        </select>
    </form>

4.3.2、textarea 文本域

与的 type="text"不同，创建的文本域是多行的，文本区中可容纳无限数量的文本，其中文本的默认字体是等宽字体。

<form action="form.php" method="post">
	<textarea style="width: 200px; height: 150px;">这是文本域的内容</textarea>
</form>

文本域属性

设置宽高。cols 规定文本域内可见的列数，rows 规定文本域内可见的行数，但这种方式并不常用。
readonly=“readonly”：设置为只读模式，不允许编辑
disable=“disable”：设置禁用文本域。

4.3.3、button按钮

<form action="form.php" method="post">
	<button type="button">这是一个按钮</button>
</form>

在< button> 内部可以放置内容，如文本或图像。这是该元素与使用< input>创建的按钮之间的不同之处。

小茹想睡觉

关注

42
点赞
踩
187

收藏

觉得还不错? 一键收藏
0
评论
HTML5标签&&属性全在这里了

一、HTML5文档结构HTML5文档的基本结构<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>我的第一个网页</title> </head> <body> Hello World！ </body></html><!DOC
复制链接

扫一扫

专栏目录