HTML的常用标签

最新推荐文章于 2022-05-29 23:53:17 发布

前后都忧愁，有无不自由

最新推荐文章于 2022-05-29 23:53:17 发布

阅读量226

点赞数

本文链接：https://blog.csdn.net/qq_59572795/article/details/118862572

版权

HTML常用的标签

标题标签 h1-h6

h1为一级标签，以此类推

标题的重要性一次递减

段落标签和换行标签

段落标签

<p>：可以将html文本分成若干个段落

段落标签的特点

文本中的段落会根据浏览器的大小自动换行
段落与段落之间保有空隙

换行标签

<br />:强制打断，另起一行

换行标签的特点

换行标签是一种单标签

行与行之间空隙很小

例子

<!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>
    <h3> 沉默 </h3>
    <p>小时候把父亲抽屉里的木蜻蜓摔坏了,<br />父亲没有说任何话,<br />只是在那以后与我沉默了许久。</p>
    长大后,<br />孩子打破了父亲送我手镯,<br />望着父亲唯一留下的东西,<br />才明白了父亲的沉默。
</body>
</html>

文本格式化标签

加粗：<strong>，或<b>,加粗字体
倾斜：<em>或<i>，使文字倾斜
删除线：<del>或<s>，文字中间出现删除线

下划线：<ins>或<u>,使文字下面出现下划线

<!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>
   <strong>加粗</strong>
   <b>加粗</b>
   <em>倾斜</em>
   <i>加粗</i>
   <del>删除</del>
   <s>加粗</s>
   <ins>下划线</ins>
   <u>加粗</u>
</body>
</html>

特殊标签

<div>:用来布局的，一行只能放一个div。大盒子

<span>:也是用来布局的，但是一行可以放多个。

<!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>
    <div>我一个标签就独占一行</div>123
    <span>百度</span> 
    <span>谷歌</span> 
    <span>IE</span> 
</body>
</html>

图像标签

属性	属性值	说明
str	图片路径	必要属性
alt	文本	当图片显示不出来时，替换文本
title	文本	鼠标放图片上，显示文字
width	像素	设置图片宽度
height	像素	设置图片高度
border	像素	设置图片边框粗细

例子：

<!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>
    <img src='1.jpg'/>
    <img src='1.jpg' alt='史诗图片' />
    <img src='1.jpg' title='史诗图片' />
    <img src='1.jpg' title='史诗图片' width='300' height='300' border='1o' />
</body>
</html>

注意：

图片标签可以有多个属性，必须在标签名的后面
属性不分先后顺序，属性之间要有空格隔开
属性采用键值对的格式，如：key=‘value’

链接标签

链接分类

外部链接：网站之外的链接，例如<a href=“http:\www.baidu.com” target=’__blank’>百度</a>

内部链接：网址内的链接，例如<a href=“段落标签.html” target="__blank">沉默</a>

空链接：链接没有目标，例如<a href="#">地址</a>

下载链接：目标为exe或zip文件，点击直接下载，如 <a href=“images/1.zip”>下载链接</a>

网页元素的链接：在网页中的各种网页元素，如文本，图像，表格，视频等都可以加链接

锚点链接：点击链接可以快速定位网络某个位置

在链接文本href属性中，设置属性值为#+名字，如<a href="#live">生活</a>
找到目标位置标签，添加id=‘’刚刚输入的名字‘’，如<h3 id=“live”>生活介绍</h3>

属性	作用
herf	必要属性，指定去往目标的网址，拥有超链接的功能
target	指定链接网址的打开方式：1.默认为_ _self，覆盖自身窗口。2._ _blank,开启新窗口

例子：

<!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>
    <h3>百度</h3>
    <a href="http:\\www.baidu.com" target='__blank'>百度</a>
    <h3>小故事</h3>
    <a href="段落标签.html" target="__blank">沉默</a>
    <h3>游戏简介</h3>
    <a href="#">简介</a>
    <h3>图片下载</h3>
    <a href="images/1.zip">下载链接</a>
    <h3>图片超链接</h3>
    <a href="http:\\www.baidu.com" target="__blank"><img src='images/1.JPG'></a>
</body>
</html>

注释标签

注释标签：给程序员自己看的，方便回头看代码时理解，如

表格标签

表格标签：更好的展示我们的数据

表头单元格标签：让表头居中加粗，让表头更明显

格式：

例子：

<!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>
            <tr><th>性别</th><th>姓名</th><th>年龄</th></tr>
            <tr><td>男</td><td>小明</td><td>23</td></tr>
    </table>
</body>
</html>

表格的属性

属性名	属性值	说明
align	center,left,right	让表格位置居中，靠左或靠右
border	1，“ ”	规定表格是否有边框，默认为“ ”，有边框为1
cellpadding	像素值	设置表格边缘与内容之间的距离，默认为1
cellspacing	像素值	规定单元格与单元格之间的距离，默认值为2
width	像素值或百分比	规定单元格的宽度
height	像素值或百分比	规定单元格的高度

表格结构标签

可将表格分为两个大类thead和tbody，通常将标题分为thead，内容分为tbody

合并单元格

行合并（cowspan）和列合并（colspan）

合并三部曲

1.先确定是合并行还是合并列

2.找到目标单元，写上合并方式=合并单元个数，如：<td cowspan=‘2’><td>

3.删除多余单元格

例子：

<!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 align="center" border="1" cellspacing="0" width="500" height="200">
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

列表标签

无序列表

格式：

<ul>

<li>

</ul>

注意：1.无序列表是没有先后顺序的

2.ul之间只能放li

3.li里面可以放任何东西

4.无序列表带有自己的样式属性

例子：

<!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>
    <ul>
        <li>榴莲</li>
        <li>西瓜</li>
    </ul>
</body>
</html>

有序列表

格式：

<ol>

</ol>

注意：

1.有序列表中只允许放li标签

2.li之间可以放任何的元素

3.有序列表也带有自己的样式属性

<!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>
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
</body>
</html>

自定义列表

格式：

<dl>

</dl>

注意：

1.dl之间只能包含dt和dd

2.dt和dd没有个数限制，经常是一个dt对应多个dd

例子：

<!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>
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
</body>
</html>

表单标签

表单域：一个包含表单元素的区域，<form>用来实现用户信息的收集和传递，将表单元素传递给服务器。

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据服务器程序的url地址
method	get/post	设置表单数据的提交方式
name	名称	用于指定表单的名称

表单元素：指用户在表单内填入或选择的内容控件

属性值	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件的上传
hidden	隐藏输入的字段
image	图像形式的提交按钮
password	定义密码字段，字符被掩码
radio	定义单选按钮
reset	重置按钮，会重置表单中的所有数据
submit	提交按钮，会将表单按钮发送给服务器
text	用户可输入文本，默认宽度为20字符

属性	属性值	说明
name	由用户自定义	定义input元素的名称
value	由用户定义	定义input元素的值
checked	checked	规定此input首次被选中时应当被选中，用于单选按钮和复选按钮
maxlength	正整数	规定输入字段中的字符的最大长度

label标签

label标签用于绑定一个元素，当点击label标签内文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。如<label for=“male”>男</label>

下拉表单

下拉表单：在列表中，如果有多个选项让用户选择，并且要节约时间时，我们可以用<select>

语法：

</select>

注意：

1.<select>中至少包含一对<option>

2.可以在<option>中定义selected="selected"时，当前选项为默认值

textarea文本域标签

文本域标签：当用户输入文本较多的时候，我们就不能用文本框表单了，此时我们应使用textarea

属性	属性值	说明
cols	正整数	文本框中一行可以写几个字符
rows	正整数	文本框中可以显示几行的字符

格式：

<form>

</form>

前后都忧愁，有无不自由

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的常用标签

HTML常用的标签标题标签 h1-h6h1为一级标签，以此类推标题的重要性一次递减段落标签和换行标签段落标签<p>：可以将html文本分成若干个段落段落标签的特点文本中的段落会根据浏览器的大小自动换行段落与段落之间保有空隙换行标签<br />:强制打断，另起一行换行标签的特点换行标签是一种单标签行与行之间空隙很小例子<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫