web前端常用标签与示例-CSDN博客

本文链接：https://blog.csdn.net/CDUFM/article/details/148472483

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、web标签是什么？
二、HTML常用标签示列
总结

前言

提示：这里可以添加本文要记录的大概内容：

web前端常用标签与示例

提示：以下是本篇文章正文内容，下面案例可供参考

一、web标签是什么？

web标签是指HTML（超文本语言）中用于定义网页结构和内容的标记符号，通常由尖括号包围。浏览器通过解析这些标签来呈现网页的布局、文本、图像等元素。

二、HTML常用标签示列

1.html文件格式

代码如下（示例）：

<!DOCTYPE html>  <!-- 网页声明，告知现在执行的文件为html-->
<html>  <!--html标签-->
<head>  <!--head标签主要用于设置浏览器，一般不显示在页面上-->
<meta charset="utf-8">  <!--meta标签，使用charset设置字符集，解决中文乱码-->
<title></title>  <!--title标签设置网页标题，如果没有则显示运行文件的地址-->
<style></style>  <!--style标签用于包含样式表-->
</head>
<body></body>  <!--页面内容-->
</html>

2.标题标签

代码如下（示例）：

<body>
<!-- 标题标签h1-h6 
  特点：1.修改文字大小，自动加粗文字，数字越大，字体越小
        2.自动换行
        3.一般情况下，h1标签只用一次-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>

3.段落标签

代码如下（示例）：

<body>
<!--段落标签p
特点：1.自动换行
     2.段落标签前后会自动留出一个空白行
     3.在html文件内默认字体大小为16px-->
<p>这是一个段落</p>
</body>

4.超文本链接

代码如下（示例）：

<body>
<!--跳转网站-->
<a href="http://www.baidu.com">百度</a>
<!--跳转同一目录的html文件-->
<a href="./test.html">test</a>
<!--使用新窗口打开跳转的html文件-->
<a href="./test.html" target="_blank">test</a>
</body>

（1）超文本链接符号：a
（2）设置链接跳转的地址：href
（3）绝对路径：如果是网站必须带协议，是文件则从文件根目录写起(C：\User…)
(4)相对路径：./当前目录、…/上一级目录、…/…/上两级目录
（5）链接打开方式
_self 当前窗口打开
_blank 新窗口打开
_top 顶层窗口打开
_parent 父窗口打开
（6）特点：链接文字点击前为蓝色，点击中为红色、点击后为紫色；自动给文字添加下滑线

5.图片标签

代码如下（示例）：

<body>
<!--
1.img标签为单标签
2.src负责引入图片资源，一般在src后加上图片的网络地址或本地地址
3.alt为图片加载失败的显示
4.title：设置图片的描述信息，鼠标放上显示
5.img 标签不会主动换行
6.使用width、height设置图片尺寸；一般都设置为100%
-->
<img src="./test.jpg" alt="test" title="ceshi测试">
</body>

6.描点技术

代码如下（示例）：

<body>
<a href="#one">跳转到one</a>
<a href="#two">跳转到two</a>
<a href="#three">跳转到three</a>
<p id="one">one</p>
<p id="two">two</p>
<p id="three">three</p>
</body>

7.列表标签

代码如下（示例）：

<body>
<!--
无序列表：ul li；
有序列表：ol li，start设置开始值，type设置序号类型，reversed 倒序
自定义列表：dl dt dd
-->
<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
<ul>
<ol start="3" type="A" reversed>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
<dl>
    <dt>自定义列表</dt>
    <dd>自定义列表</dd>
</dl>
</body>

8.表格标签

代码如下（示例）：

<body>
<table border="1" cellspacing="0" align="center">
             <caption>2205班学校人数统计</caption>
             <tr>
                 <th>学校名称</th>
                 <th>人数</th>
                 <th style="width:200px;">备注</th>
             </tr>
             <tr>
                 <td>锦江</td>
                 <td>3</td>
                 <td rowspan="2"></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <!-- <td></td> -->
             </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr>
                 <td colspan="2"></td>
                 <!-- <td></td> -->
                 <td></td>
             </tr>
         </table>
    </body>

1.符号:table,用于定义表格的开始与结束
2.属性：
border：设置表格边框、数字、不带单位、数字越大、边框线条越粗；
cellspacing：设置外边距；
cellpadding：设置内边距；
align：设置表格位置（left、right、center）；
tr：行标签；td：列标签；th：列头标签自动加粗居中文字；
3.行高：表格一行的最高单元格决定；
4.列高：表格一列的最宽单元格决定；
5.rowspan：合并行，默认从上往下；
6.colspan：合并列，默认从左往右；