前端——HTML常用标签

最新推荐文章于 2024-08-09 15:13:41 发布

caffeinelala

最新推荐文章于 2024-08-09 15:13:41 发布

阅读量151

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_41880932/article/details/95763212

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML标签及其含义，包括DOCTYPE标签，head标签及其内的meta、title、link、script等标签，说明了各标签的作用和属性。还介绍了body标签及其内的文字段落、列表、图像与超链接、表格、表单等标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML标签及其含义

DOCTYPE 标签

<!DOCTYPE html>	 
<!--html5标准网页声明,声明文档类型为html5，告知浏览器文档使用哪种 HTML 或 XHTML 规范-->

head标签及其内标签

<head>
    <meta charset="UTF-8">
    <meta name="description" content="我的第一篇博客">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<link rel="stylesheet" type="text/css" href="theme.css" />
	<script type="text/javascript"></script>
</head>

head标签：用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
- meta标签：提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
  - charset=“UTF-8”：文档字符编码格式为UTF-8
  - name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
  - content属性：
    - width：可视区域的宽度，值可为数字或关键词device-width
    - height：同width
    - user-scalable：是否可对页面进行缩放，no 禁止缩放
    - intial-scale：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
    - maximum-scale=1.0, minimum-scale=1.0：可视区域的缩放级别，maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
  - http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
- title标签：定义文档的标题，它是 head 部分中唯一必需的元素。
- link标签：链接一个外部样式表：
  - rel属性：规定当前文档与被链接文档之间的关系。
  - type属性：规定被链接文档的 MIME 类型。
  - href属性：规定被链接文档的位置。
- script标签：标签用于定义客户端脚本，比如 JavaScript。
  - src属性：规定外部脚本文件的 URL。
  - type属性：指示脚本的 MIME 类型。
  - defer属性：规定是否对脚本执行进行延迟，直到页面加载为止。
  - async属性：规定异步执行脚本（仅适用于外部脚本）。

body标签及其内标签

文字段落标签

<!--标题标签-->
     <h1>什么是HTML</h1>
     <h2>什么是HTML</h2>
     <h3>什么是HTML</h3>
     <h4>什么是HTML</h4>
     <h5>什么是HTML</h5>
     <h6>什么是HTML</h6>

<!--段落标签-->
     <P align="left">HTML 指的是超文本标记语言 (Hyper Text Markup Language) </P>
     <P align="center">HTML 指的是超文本标记语言 (Hyper Text Markup Language)</P> 
     <P align="right">HTML 指的是超文本标记语言 (Hyper Text Markup Language)</P> 
     <P align="justify">HTML 指的是超文本标记语言 (Hyper Text Markup Language)</P> 

<!--预格式保留标签-->
	 <pre>
	          HTML 指的是超文本标记语言 (Hyper Text Markup Language)
	 </pre> 

<!--水平线-->
     <hr/>
<!--换行-->
     <br/>
<!--倾斜-->
     <i></i> 
     <em></em>
<!--加粗-->
     <b></b>
     <strong></strong>
<!--文字上下-->     
     <sup></sup>
     <sub></sub>

列表标签

<!--无序列表-->
<ul type="disc">
		<li>HTML 指的是超文本标记语言 (Hyper Text Markup Language)</li>
		<li>HTML 不是一种编程语言，而是一种标记语言 (markup language)</li>
		<li>标记语言是一套标记标签 (markup tag)</li>
		<li>HTML 使用标记标签来描述网页</li>
	</ul>
	<ul type="square">
		<li>HTML 指的是超文本标记语言 (Hyper Text Markup Language)</li>
		<li>HTML 不是一种编程语言，而是一种标记语言 (markup language)</li>
		<li>标记语言是一套标记标签 (markup tag)</li>
		<li>HTML 使用标记标签来描述网页</li>
	</ul>
	<ul type="circle">
		<li>HTML 指的是超文本标记语言 (Hyper Text Markup Language)</li>
		<li>HTML 不是一种编程语言，而是一种标记语言 (markup language)</li>
		<li>标记语言是一套标记标签 (markup tag)</li>
		<li>HTML 使用标记标签来描述网页</li>
	</ul>

<!--有序列表-->
<ol type="1">
		<li>HTML 标记标签通常被称为 HTML 标签</li>
		<li>HTML 标签是由尖括号包围的关键词</li>
		<li>HTML 标签通常是成对出</li>
		<li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
    </ol>
    <ol type="a">
		<li>HTML 标记标签通常被称为 HTML 标签</li>
		<li>HTML 标签是由尖括号包围的关键词</li>
		<li>HTML 标签通常是成对出</li>
		<li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
    </ol>
    <ol type="I">
		<li>HTML 标记标签通常被称为 HTML 标签</li>
		<li>HTML 标签是由尖括号包围的关键词</li>
		<li>HTML 标签通常是成对出</li>
		<li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
    </ol> 

<!--自定义列表-->
<dl>
    <dt>什么是HTML</dt>
		<dd>HTML是用来描述网页的一种语言。</dd>
		<dd>HTML超文本标记(Hyper Text Markup Language)。</dd>
	<dt>HTML标签</dt>
		<dd>HTML标记标签通常被称为HTML 标签 </dd>
</dl>

图像与超链接标签

 <img src="img/js1.jpg" alt="我是一张图片" width="50%" height="60%"/>
 <a href="http://wwwbaidu.com" title="百度">百度</a>

表格标签

 <!--创建2行3列表格 -->
     <table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="5" cellpadding="5px" align="center" frame="lhs" rules="groups">
         <caption> 前端工程师平均工资</caption>
         <thead>
         <tr>
            <th>城市</th>
            <th>2014年</th>
            <th>2014年</th>
            <th>2015年</th>
            <th>2016年</th>
         </tr>
         <tr>
            <th>城市</th>
            <th>上半年</th>
            <th>下半年</th>
            <th>2015年</th>
            <th>2016年</th>
         </tr>
         </thead>
          <tfoot>
         <tr>
            <td>合计</td>
            <td>7000</td>
            <td>8000</td>
            <td>9000</td>
            <td>11000</td>          
         </tr>
         </tfoot>
         <tbody>
         <tr>
            <td>北京</td>
            <td>8000</td>
            <td>9000</td>
            <td>10000</td>
            <td>12000</td>          
         </tr>
         <tr>
            <td>上海</td>
            <td>6000</td>
            <td>7000</td>
            <td>8000</td>
            <td>10000</td>          
         </tr>
         </tbody>
     </table>
     
 <!--属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）-->

表单标签

<input type="text" name="username" maxlength="5" size="15"  placeholder="请输入姓名"/>

<input type="password" name="pwd" maxlength="8" size="15"  placeholder="请输入密码"/>

<input type="file" name="pic" />

<input type="radio" name="sex" value="man" checked/>
<input type="radio" name="sex" value="woman"/>

<input type="checkbox" name="hobby" value="read" checked/>
<input type="checkbox" name="hobby" value="dance"/>
<input type="checkbox" name="hobby" value="sing"/>  

<input type="button" name="button" value="来点我"/> 
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="reset" value="重置"/>

 <select name="hie" >  
         <option value="shanghai" >北京</option>
         <option value="shanghai" >上海</option>
         <option value="shanghai" >河北</option>
         <option value="shanghai" >天津</option>
         <option value="shanghai" >河南</option> 
 </select>
 <select name="city" size="6" multiple>
              <optgroup label="1">    
                  <option value="bj1" selected>北京</option>
                  <option value="sh1" >上海</option>
                  <option value="hb1" >河北</option>
                  <option value="tj1" >天津</option>
                  <option value="hn1" >河南</option> 
              </optgroup>
		    <optgroup  label="2">    
                  <option value="bj2" >北京</option>
                  <option value="sh2" >上海</option>
                  <option value="hb2" >河北</option>
                  <option value="tj2" >天津</option>
                  <option value="hn2" >河南</option>  
              </optgroup>


      <textarea  name="" cols="" rows="" >
              我的第一篇博客
      </textarea>
 </select>