HTML的基本标签及属性

发布时间：2023-04-21 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

HTML

  • 1. 标题与段落标签
  • 2. 文本修饰标签
  • 3. 图片标签
  • 4. 链接标签
  • 5. 无序、有序列表与定义列表
  • 6. 表格、表单标签
  • 7. div与span标签

1. 标题与段落标签

 (1) 标题标签是一对双标签：<h1></h1>，<h2></h2>，<h3></h3>，<h4></h4>，<h5></h5>，<h6></h6>。在网页中，h1标签最重要，一个.html文件中只能有一个h1标签，h2、h3、h4、h5、h6可以有多个，最常用的标题标签是h1~h4，h5和h6在网页中不常使用。

 (2) 段落标签是一对双标签：<p></p>。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
    	<title>Document</title>
	</head>
	<body>
	    <h1>一级标题</h1>
	    <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
	    <h2>二级标题</h2>
	    <p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
	    <h3>三级标题</h3>
	    <p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。</p>
	    <h4>四级标题</h4>
	    <p>坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
	</body>
</html>

HTML的基本标签及属性

2. 文本修饰标签

 (1) 强调标签是一对双标签：<strong></strong>、<em></em>，strong标签会对文本进行加粗，em标签会对文本进行斜体，strong的强调性比em更强。

 (2) 上、下标文本标签都是一对双标签：<sup></sup>、<sub></sub>。

 (3) 插入、删除文本标签都是一对双标签：<ins></ins>、<del></del>。
 (4) 换行标签是单标签：<br>。
 (5) 水平分割线标签是单标签：<hr>。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
    	<title>Document</title>
	</head>
	<body>
	   <strong>strong标签强调的文字</strong>
	    <br>
	    <hr>
	    <em>em标签强调的文字</em>
	    <br>
	    <hr>
	    3<sup>2</sup>+2<sup>2</sup>=13
	    <br>
	    <hr>
	    <ins>100</ins>
	    <br>
	    <hr>
	    <del>200</del>
	</body>
</html>

HTML的基本标签及属性

3. 图片标签

 (1) 图片标签是单标签：<img src=“./img/scene_1.jpg” alt=“风景图片1”>

	<img width="30%" height="30%" src="./img/scene_1.jpg" alt="风景图片1" title="风景图片1">

HTML的基本标签及属性
 (2) 图片标签的属性：
  width、height：图片的宽、高；
  src：在.html文件中引入图片的地址；
  alt：当图片加载出现问题或无法加载时，起提示作用；
  title：提示图片的信息。

 (3) 引入文件的路径：
  相对路径：文件相对于引用文件去定义被引用文件的地址，.表示当前文件目录下，..表示上一级文件目录下。

HTML的基本标签及属性
  当图片scene_1.jpg在index.html文件的上一级目录下时，引入这张图片的路径src=“../img/scene_1.jpg”。

  绝对路径：文件相对于磁盘位置定位的地址，例如：C:\Users\19464\Desktop\img\scene_1
，或者文件在网络中的地址，例如：https://www.yuucn.com/wp-content/uploads/2023/04/1682085647-67a9be4cb0e5db5.png#pic_center。

4. 链接标签

 (1) 链接标签是一对双标签：<a></a>。

 (2) a标签的属性：
  href：链接的地址；
  target：链接的跳转方式，默认值_self是在当前页面打开，_blank是在新窗口打开链接。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
    	<title>Document</title>
	</head>
	<body>
	    <a href="https://www.bilibili.com/" target="_blank">哔哩哔哩官网</a>
	    <!--给图片加上链接-->
	    <a href="https://www.bilibili.com/">
	        <img src="./img/scene_1.jpg" alt="风景图">
	    </a>
	</body>
</html>

 给文本加上a标签，点击文本内容就会跳转到指定网址。不仅文本可以加上a标签，图片也可以，点击图片也会跳转到指定网址。

 (3) base标签：单标签<base href=“” target=“”>，可以改变链接的默认跳转行为。

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	    <meta charset="UTF-8">
	    <title>Document</title>
	    <!--点击网页中的所有链接都会在新窗口中打开-->
	    <base target="_blank">
	</head>
	<body>
	    <a href="https://www.bilibili.com/">哔哩哔哩官网</a>
	    <a href="https://www.bilibili.com/">哔哩哔哩官网</a>
	    <a href="https://www.bilibili.com/">哔哩哔哩官网</a>
	    <a href="https://www.bilibili.com/">
	        <img src="./img/scene_1.jpg" alt="风景图">
	    </a>
	</body>
</html>

 (4) 跳转锚点：
  在网页内部进行跳转，网页内部的一个点跳转到另一个点。
  第一种方式：href属性值为#id名，跳转到带id属性的标签元素处；
  第二种方式：href属性值为#name属性的属性值，跳转到带name属性的a标签处。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="#p_1">段落1</a>
    <a href="#p_2">段落2</a>
    <p>文字段落</p>
    <p>文字段落</p>
    <p>文字段落</p>
    <p id="p_1">文字段落1文字段落1文字段落1文字段落1文字段落1文字段落1</p>
    <p>文字段落</p>
    <p>文字段落</p>
    <p>文字段落</p>
    <a name="p_2"></a>
    <p>文字段落</p>
</body>
</html>

5. 无序、有序列表与定义列表

 ul、ol标签和li标签必须组合存在，而且li的父级标签必须是ul或者ol，不能是其它标签。有序列表用得比较少，无序列表经常可以代替有序列表实现列表功能。

 (1) 无序列表：<ul></ul>
  列表项：<li></li>
 (2) 有序列表：<ol></ol>
  列表项：<li></li>
 (3) 定义列表：<dl></dl>、<dt></dt>、<dd></dd>。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--正确语法-->
    <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
        <li>无序列表项3</li>
    </ul>
    <ol>
        <li>有序列表项1</li>
        <li>有序列表项2</li>
        <li>有序列表项3</li>
    </ol>
    <dl>
        <dt>HTML</dt>
        <dd>
            HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
        </dd>
        <dt>CSS</dt>
        <dd>
            层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
        </dd>
    </dl>
    <!--错误语法-->
    <ul>
        <p>
            <li></li>
        </p>
    </ul>
    <ol>
        <span>
            <li></li>
        </span>
    </ol>
</body>
</html>

HTML的基本标签及属性
 (4) 列表之间也可以相互嵌套，从而形成多层级的列表，二级导航就是使用多层级列表来实现的。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <ul>
                <li>列表项1</li>
                <li>列表项2</li>
                <li>列表项3</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>列表项4</li>
                <li>列表项5</li>
                <li>列表项6</li>   
            </ul>
        </li>
    </ul>
</body>
</html>

6. 表格、表单标签

 (1) 表格外层容器：<table></table>，表格标题：<caption></caption>，表头：<th></th>，表格行：<tr></tr>，表格单元：<td></td>。
 (2) 表格语义化标签：<tHead>、<tBody>、<tFood>，tBody和tFood在一个表中可以定义多个，但是tHead只能定义一次。
 (3) 表格的属性：
  border：表格边框；
  cellpadding：单元格内空间；
  cellspacing：单元格之间空间；
  rowspan：合并一行的单元格；
  colspan：合并一列的单元格；
  align：水平对齐方式；
  valign：竖直对齐方式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table>
        <caption>员工工资表</caption>
        <tr>
            <th>编号</th><th>姓名</th><th>工资</th>
        </tr>
        <tr>
            <td>1</td><td>张三</td><td>8000</td>
        </tr>
        <tr>
            <td>2</td><td>李四</td><td>10000</td>
        </tr>
    </table>
</body>
</html>

HTML的基本标签及属性

 (4) 表单外层容器：<form></form>，表单input标签：<input></input>；
  input标签的type属性值：

type属性值 含义
text 文本框
password 密码输入框
checkbox 复选框
radio 单选框
submit 提交按钮
reset 重置按钮
file 上传文件

 多行文本框：<textarea></textarea>；
 下拉菜单：<select></select>，选项：<option></option>；
 辅助表单：<label></label>。
 表单的常用属性：
 placeholder：给出输入框的提示信息；
 checked：被选中；
 name：表单名称；
 disabled：用于复选框禁用某个选项；
 action：表单提交数据的目的地；
 method：表单发送数据的方式，get和post方式；
 for：规定 label 与哪个表单元素绑定。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="https://www.bilibili.com/" method="post">
        <label for="user">账号</label>
        <input type="text" id="_user" placeholder="请输入账号"><br>
        <label for="_password">密码</label>
        <input type="password" id="_password" placeholder="请输入密码"><br>
        <select>
            <option>运动</option>
            <option>音乐</option>
            <option>电影</option>
        </select>
    </form>
</body>
</html>

HTML的基本标签及属性

7. div与span标签

 (1) div（块）标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联，div标签是一个块级元素，每个div标签独占一行，换行是div标签固有的唯一格式表现。
 (2) span（内联）标签被用来组合文档中的行内元素。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body> 
    <div style="background-color: red;">
        这是一个块级元素
    </div>
    <span style="background-color: blue;">这是一个内联元素</span>
</body>
</html>

HTML的基本标签及属性

标签 , ,