web前端 html常用标签

head内常用标签

基本标签 （非meta标签）:

html 复制代码

<!--title: 定义网页标题-->
<title>Title</title>

<!--style: 定义内部样式表. 内部用来书写css代码-->
<style>
    h1 {
        color: greenyellow;
    }
</style>

<!--script: 内部用来书写js代码-->
<script>
    alert(123)
</script>
<!--script: 还可以引入外部js文件-->
<script src="myjs.js"></script>

<!--link: 引入外部css文件 或 网站图标-->
<link rel="stylesheet" href="mycss.css">

<!--rel 为外部资源的类型,"stylesheet"表示外部资源为css样式文件,"icon"表示外部资源为图标-->
<!--href 为外部资源的路径-->

meta相关:

1. Meta标签介绍:

<meta>元素可提供有关页面的元信息,针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的。

2 Meta标签的组成:

meta标签共有两个属性，他们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

http-equiv 属性 :相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性为content，content中的内容其实就是各个参数的变量值,http-equiv与content常常结合起来使用。

html 复制代码

<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
                                             
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
                                                                
<!--3秒后刷新(了解)-->                                                                
<meta http-equiv="refresh" content="3">

name 属性 :主要用于描述网页 ，与之对应的属性为content，content中的内容主要是便于搜索引擎查找信息和分类信息用的。

html 复制代码

<!--关键字：有助于搜索引擎SEO优化，再怎么优化也抵不过竞价排名-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<!--页面描述-->
<meta name="description" content="给你骨质唱疏通">

meta标签 必须写在头部head标签 之内，而description的meta标签务必要写在keywords 的meta标签之后，像下面这样的顺序写：

关键字：keywords要用简短的文字描述网站或网页的主要内容，有利于各大搜索引擎的抓取收录你的网站或网页。

页面描述：当你设置了description网站描述文字，才会显示在搜索引擎的结果页中，而每个网页的description也是同样的道理，简短又准确的网页描述文字，可以帮助用户在搜索引擎中更方便的找到你的网站和网页！

body内常用标签

HTML语义化

body标签介绍

body中的标签是会显示到浏览器窗口中的。
body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的。

基本标签（块级标签和内联标签）

对于那些只用来修改样式的标签将会被淘汰掉，比如以下标签都是没有语义的，都是用来修改样式的。

html 复制代码

<!--粗体（对文本内容加粗）-->
<b>加粗</b>

<!-- 斜体（将文本内容改为斜体）-->
<i>斜体</i>

<!--下划线（为文本内容添加下划线）-->
<u>下划线</u>

<!--删除线(为文本内容添加删除线)-->
<s>删除</s>

<!--该标签内的内容为一个段落-->
<p>段落标签</p>

<!--标题1~标题6-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!-- 换行-->
<br>

<!--水平线，分割线-->
<hr>

<!--修改文字大小(单位px------像素)，颜色-->
<font color="red" size="10px">我是菜鸟</font>

div标签和span标签

div标签（块级标签）用来定义一个块级元素，并无实际意义。主要通过CSS样式为其赋予不同的表现。

div用来标记一块内容，没有具体的语义。

span标签用来定义内联（行内）元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

span用来标记一小段内容，将它们定义为同一行，也没有具体的语义。

标签的分类：块级/行内

块级元素与行内元素的区别:

块级标签 ：独占一行（h1~h6, p,div）
块儿级标签可以修改长宽. 行内标签不可以, 就算修改了也不会变化.
块级标签内部可以嵌套任意的块级标签和行内标签

特例 : p标签虽然是块级标签但是它只能嵌套行内标签不能嵌套块级标签. 如果你套了问题也不大因为浏览器会自动帮你解除嵌套关系(浏览器是直接面向用户的不会轻易的报错哪怕有报错用户也基本感觉不出来)

行内标签 : 自身文本多大就占多大.·i u s b span
行内标签不能嵌套块级标签, 只能嵌套行内标签.
补充：上述的规定只是HTML书写规范如果你不遵循不会报错

h系列标签

语义：标记内容为一个标题

h系列标签从h1-h6共6个，没有h7标签，标记内容为1~6级标题，h1用作主标题（代表最重要的），其次是h2，依次往下排序，直到h6。

html 复制代码

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta charset="utf-8">
        <title>Egon才华无敌</title>
    </head>
    <body>
        <h1>一级标题</h1><h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
        <h7>没有七级标题</h7>
        没有七级标题
    </body>
</html>

注意：

在企业开发中一定要慎用h系列标签，特别是h1标签，在企业开发中一般一个界面中只能出现一个h1标签（出于SEO考虑，搜索引擎会使用标题将网页的结构和内容编制索引）,比如www.163.com。

p标签

语义：标记内容为一个段落

html 复制代码

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta charset="utf-8">
        <title>Egon无敌</title>
    </head>
    <body>
        <h1>Egon</h1>
        <p>论颜值，鹤立鸡群</p>
        <p>论才华，天下无敌</p>
    </body>
</html>

img标签

语义：标记一个图片

用法 : <img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />

注意:

src指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的。
图片的格式可以是png、jpg和gif。
alt="图片加载失败时显示的内容" ：为img标签加上该属性可用于支持搜索引擎和盲人读屏软件。
title = "鼠标悬停到图片上时显示的内容"
height="800px" width=""

如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形，那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可，只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形。

a标签

语义：标记一个内容为超链接

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

用法 : <a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>

注意:

href属性指定目标网页地址。该地址可以有几种类型：

绝对URL - 指向另一个站点（比如 href="www.jd.com）/)
相对URL - 指当前站点中确切的路径（href="index.html"）
锚URL - 指向页面中的锚（href="#top"）------跳转到本页面中id属性为"top"的标签上，当href="#"时,不刷新,跳回首页,当href=""时,刷新,跳回首页。

target：

"_blank"表示在新标签页中打开目标网页
"_self"表示在当前标签页中打开目标网页

a标签不仅可以标记文字，也可以标记图片:

html 复制代码

<a href="https://www.baidu.com"><img src="转存失败，建议直接上传图片文件 mv.png" alt="转存失败，建议直接上传图片文件">百度一下，你就知道</a>

a标签必须有href属性，href的值必须是http://或https://开头。

列表标签

语义：标记一堆数据是一个整体/列表

无序列表

作用：制作导航条，商品列表，新闻列表等
语法如下，组合使用ul>li

html 复制代码

<!--基本语法-->
<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

<!--示例：京东商城导航条-->
    <ul>
        <li>秒杀</li>
        <li>优惠券</li>
        <li>PLUS会员</li>
        <li>闪购</li>
        <li>拍卖</li>
        <li>京东服饰</li>
        <li>京东超市</li>
        <li>生鲜</li>
        <li>全球购</li>
        <li>京东金融</li>
    </ul>

ul标签 的type属性：

type：列表识别的类型
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式，不显示标识）

注意

ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签

有序列表(极少使用)

html 复制代码

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性（列表识别的类型）:

"1" 数字列表，默认值
"A" 大写字母
"a" 小写字母
"Ⅰ" 大写罗马
"ⅰ" 小写罗马

start 属性(从第几个序号开始标识 ): start="2"表示从2开始标识。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智商排名</title>
</head>
<body>
<h1>智商排名</h1>
<ol>
    <li>刘思远</li>
    <li>刘清政</li>
    <li>刘sir</li>
    <li>刘铭洋</li>

</ol>
    <!--有序列表能干的事，完全可以用无序列表取代-->
    <h1>智商排名</h1>
    <ul style="list-style: none">  
    <!--style="list-style: none" 通过CSS样式来去掉无序列表前面的默认标识-->
    <li>1.刘思远</li>
    <li>2.刘清政</li>
    <li>3.刘sir</li>
    <li>4.刘铭洋</li>
    </ul>
</body>
</html>

自定义列表

作用分析：

选择用什么标签作为唯一标准，是看文本的实际语义，而不是看长什么样子

无序列表：内容是并列的,没有先后顺序

有序列表：内容是有先后顺序的

自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息,如网易注册界面的输入框

html 复制代码

<!--自定义列表也是一个组合标签：dl>dt+dd -->
<!--dl:自定义list -->
<!-- dt：自定义标题 -->
<!-- dd：自定义描述 -->



<dl>
  <dt>自定义标题1</dt>
  <dd>内容1</dd>
  <dt>自定义标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

注意:

1.dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签

2.一个dt可以可以没有对应的dd，也可以有多个，但建议一个dt对应一个dd

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表标签</title>
</head>
<body>
<dl>
    <dt><h5>购物流程</h5></dt>
    <dd>购物流程</dd>
    <dd>会员介绍</dd>
    <dd>生活旅行</dd>

    <dt><h5>配送方式</h5></dt>
    <dd>上门自提</dd>
    <dd>211限时达</dd>
    <dd>配送服务查询</dd>

    <dt><h5>支付方式</h5></dt>
    <dd>货到付款</dd>
    <dd>在线支付</dd>
    <dd>分期付款</dd>
</dl>
</body>
</html>

表格标签

语义：标记一段数据为表格

作用：

表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的。

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

html 复制代码

<table>
    <tr>
        <td></td>
    </tr>
</table>

tr代表表格的一行数据
td表一行中的一个普通单元格
th表示表头单元格

注意点：

表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框
表格标签<table></table>的属性:

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

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

rowspan: 单元格竖跨多少行

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

其他表格属性了解性知识点:

html 复制代码

#1、宽度和高度
    可以给table和td设置width和height属性
    
    1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高

    1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度


#2、水平对齐和垂直对齐
    水平对齐align可以给table、tr、td标签设置
    垂直对齐valign只能给tr、td标签设置

    ========水平对齐===========
    取值
    align="left"
    align="center"
    align="right"

    2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐
          强调：table只能设置水平方向

    2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐

    2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准

    ========垂直对齐===========
    取值
    valign="top"
    valign="center"
    valign="bottom"
    
    2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
    2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐


#3、外边距和内边距
    只能给table设置

    3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px
    3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px"

所谓细线表格,就是表中单元格与单元格之间只有一根线作为间隔,这样的表格看起来十分的美观。

制作细线表格:

html 复制代码

#2、方式二
 细线表格的制作方式：
        1、给table标签设置bgcolor
        2、给tr标签设置bgcolor
        3、给table标签设置cellspacing="1px"


      注意：
      table、tr、td标签都支持bgcolor属性

<table width="200px" height="200px" bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>

    <tr bgcolor="white" >
        <td>Egon</td>
        <td>male</td>
        <td>18</td>
    </tr>

    <tr bgcolor="white">
        <td>ALex</td>
        <td>male</td>
        <td>73</td>
    </tr>

    <tr bgcolor="white">
        <td>Wxx</td>
        <td>female</td>
        <td>84</td>
    </tr>
</table>

html 复制代码

为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类：
#1、<caption>表格的标题</caption>
    特点:相对于表格宽度自动居中对齐
    注意:
        1.1 该标签一定要写在table标签里，否则无效
        1.2 caption一定要紧跟在table标签内的第一个

#2、<thead>表格的表头信息</thead>
    特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字


#3、<tbody>表格的主体信息</tbody>
    注意：
        3.1 如果没有添加tbody，浏览器会自动添加
        3.2 如果指定了thread和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着表格的高度变化而变化

#4、<tfoot>表尾信息</tfoot>


<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px">

        <caption>学员信息统计</caption>
        <thead>
            <tr bgcolor="white">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody>
            <tr bgcolor="white">
                <td>egon</td>
                <td>male</td>
                <td>18</td>
            </tr>

            <tr bgcolor="white">
                <td>egon</td>
                <td>male</td>
                <td>18</td>
            </tr>

            <tr bgcolor="white">
                <td>egon</td>
                <td>male</td>
                <td>18</td>
            </tr>
        </tbody>

        <tfoot>
            <tr bgcolor="white">
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

合并单元格:

html 复制代码

#1、水平向上的单元格colspan
    
    <td colspan="2">单元格</td>
    #将同一行的两个单元格合并
    

#2、垂直向上的单元格rowspan

    <td rowspan="2">单元格</td>
    #将同一列的两个单元格合并

#注意:
1、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并

传统表格布局:

html 复制代码

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

#1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

#2、单元格里面嵌套表格

#3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

#4、通过属性或者css样式设置单元格中元素的样式

传统布局目前应用：
#1、快速制作用于演示的html页面

#2、商业推广EDM制作(广告邮件)

html 复制代码

<!--<table border="10" cellpadding="5" cellspacing="10">-->
<table border="10">   <!-- 加外边宽-->
    <!--表头: 存放字段信息-->
    <thead>
        <tr>  <!--一个tr就表示一行-->
            <th>username</th>   <!--加粗文本-->
            <td>password</td>   <!--正常文本-->
            <th>hobby</th>
            <th>others</th>
        </tr>
    </thead>

    <!--表单: 存放数据信息-->
    <tbody>
        <tr>
            <td>jason</td>
            <!--rowspan 合并行属性-->
            <td rowspan="3">123</td>
            <!--colspan 合并列属性(合并当前行的列)-->
            <td colspan="2">read</td>
        </tr>
        <tr>
            <td>egon</td>
            <!--<td>123</td>-->
            <td>DBJ</td>
            <td>吃生蚝</td>
        </tr>
        <tr>
            <td>tank</td>
            <!--<td>123</td>-->
            <td>摸鱼</td>
            <td>弹棉花</td>
        </tr>
    </tbody>
</table>

form表单标签

语义：标记表单

什么是表单 :表单就是专门用来接收输入或采集用户信息,然后将信息向服务器进行提交,或者直接向服务器请求数据,表单有一个method属性,其值有Get与Post两种,代表请求数据还是提交数据。

html 复制代码

   <form method = "数据处理方式">
        <表单元素>
    </form>

常用的表单元素有:

<input type="text"/>---单行文本输入框
<input type="radio"/>文本内容 --- 单选框 ,在同一个表单(<form></form>)当中,所有的单选框只能选一个。
<input type="checkbox"/>文本内容---多选框 ,在同一个表单(<form></form>)当中,所有的多选框可以选多个。
<input type="file"/>---上传文件。
<input type="password"/>---密码输入框。
<button type="submit">按钮文本</button>---提交数据按钮。
<button type="reset">按钮文本</button>---重置数据按钮。
<textarea rows="20px" cols="50px"></textarea>---多行文本输入框 ,rows为文本框高度，cols为文本框宽度,单位为像素(px)。

汇总:

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
            <title>学生信息登记</title>
    </head>

    <body>
        <form method="GET">   <!--提交数据-->
            姓名：
                <input type="text"/>
            <br/>

            性别：
                <input type="radio" name="sex"/>男
                <input type="radio" name="sex"/>女
            <br/>

            专业：
                <input type="checkbox" name="major"/>Java
                <input type="checkbox" name="major"/>C

                <input type="checkbox" name="major"/>python
            
            <br/>

            附件：<input type="file" name="file"/>
            <br/>
            
            密码：<input type="password"/>
            <br/>
            
            多行文本输入<textarea rows="20px" cols="50px"></textarea>

            <button type="submit">提交</button>

            <button type="reset">重置</button>

        </form>
    </body>
</html>

下拉选择列表

select标签：创建下拉选择列表。

option标签：定义选择列表中的选项，value属性是标签选择的值,通过该值可以确定用户选择的是哪一个选项,因此该值一般与文本内容保持一致。

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<title>下拉选择</title>  
		<meta charset="UTF-8"> 
	</head>  
	<body>
		<select>  <!--下拉选择列表-->
			<option value="java">java</option>
			<option value="python">python</option>
			<option value="mysql">mysql</option>
		</select>
	</body>  
</html>

iframe标签

iframe标签：在一个网页中嵌入另一个网页。

用法:

<iframe src="网址" width="500px" height="200px">---src为另一个网页网址,width,height 为另一个网页展示区域的宽和高。

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<title>嵌入列表</title>  
		<meta charset="UTF-8"> 
	</head>  
	<body>
		<iframe src="https:\\www.baidu.com" width="500px" height="200px">
		</iframe>
	</body>  
</html>