HTML标签笔记

最新推荐文章于 2024-09-23 15:22:36 发布

郭大胖ovo

最新推荐文章于 2024-09-23 15:22:36 发布

阅读量278

点赞数 1

分类专栏： HTML/CSS 文章标签： html

本文链接：https://blog.csdn.net/weixin_44066678/article/details/115532264

版权

HTML/CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML标签

HTML基本结构标签

标签名	定义	说明
html	HTML标签	页面最大的标签,我们称为根
head	文档的头部	注意在head标签中我们必须要设置的标签是title
title	文档的标题	让页面拥有一个属于自己的网页标题
body	文档的主体	元素包含文档的所有内容，页面内容基本都是放在body里面

网页声明标签

标签名	说明
<!DOCTYPE html	文档类型声明标签，告诉游览器这个页面采取html5版本来显示页面
<html lang=“en”	告诉游览器或者搜索引擎这是一个英文网站，本页面采取英文来显示
<meta charset=“UTF-8”/	必须写，采取UTF-8来保存文字，如果不写就会乱码

HTML常用标签

标题标签 h1-h6

标签语义：作为标题使用，并且依据重要性递减

特点:1.加了标题的文字会变的加粗，字号也会依次变大。

2.一个标题独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>
</body>
</html>

段落标签

标签语义：可以把HTML文档分割为若干段落。

特点：1.文本在一个段落中会根据游览器窗口大小自动换行。

2.段落与段落之间保有空隙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>我是第一行</p>
    <p>我是第二行</p>
</body>
</html>

换行标签

标签语义：强制换行。

特点：1.br是单标签

2.br标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>我是段落标签</p>
    <br>我是换行标签
</body>
</html>

文本格式化标签

标签语义：突出重要性，比普通文字更重要。

语义	标签	说明
加粗	strong 或者 b	更推荐使用 strong 标签加粗语义更强烈
倾斜	em 或者 i	更推荐使用 em 标签倾斜语义更强烈
删除线	del 或者 s	更推荐使用 del 标签删除线语义更强烈
下划线	ins 或者 u	更推荐使用 ins 标签下划线语义更强烈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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和span标签

和是没有语义的，它们就是一个盒子，用来装东西

特点：<div标签用来布局，但是现在一行只能放一个<div。大盒子

<span标签用来布局，一行可以有多个<span。小盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>一个div独占一行</div>
    <div>一个div独占一行</div>
    <span>一个span占自身大小，不换行</span>
    <span>一个span占自身大小，不换行</span>
</body>
</html>

<!--
    div标签用来布局，但一行只能放一个div。大盒子
    span标签用来布局，一行可以多个span。小盒子
-->

图像标签

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放到图像上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h4>图像标签的使用：</h4>
    <img src="images/07图像.jpg" />
    <h4>alt 替换文本 图像显示不出来的时候用文字代替</h4>
    <img src="images/07图像.jpg" alt="alt 替换文本 图像显示不出来的时候用文字代替" />
    <h4>title 提示文本</h4>
    <img src="images/07图像.jpg" title="我是你爹" />
    <h4>width给图像设定宽度</h4>
    <img src="images/07图像.jpg" width="300" alt="">
    <h4>height给图像设定高度</h4>
    <img src="images/07图像.jpg" height="100" alt="">
    <h4>border 给图像设定边框粗细</h4>
    <img src="images/07图像.jpg" border="10" alt="">
  </body>
</html>
<!--
  <img src="图片路径" alt="图片不显示时替代的文字" title="提示文本，鼠标放到图像上，显示的文字"
    width="设置图像的宽度" height="设置图像的高度" border="设置图像的边框粗细"/>
-->

超链接标签

语法格式

<a href=“跳转目标” target="目标窗口的弹出方式“>文本和图像</a

属性	作用
href	用于指定链接目标的url地址,（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="aa">锚点链接</h1>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    target打开窗口的方式 默认值是 _self 当前窗口打开页面  _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_self">传智播客</a>
    <h4>2.内部标签:网站内部页面之间互相链接</h4>
    <a href="07图像标签和路径.html" target="_blank">公司简介</a>
    <h4>3.空链接：#</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接：地址的链接是文件.exe或者是zip等压缩包形式</h4>
    <a href="08超链接标签.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="07图像.jpg" alt=""></a>
    <h4>6.锚点链接</h4>
    <a href="#aa">锚点链接</a>

</body>
</html>

特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特殊字符</title>
</head>
<body>
    <!-- 注释语句 -->
    <h1>特殊字符</h1>
    <p>空&nbsp;格</p>
    <p>小于号&lt;</p>
    <p>大于号&gt;</p>
    <p>和号&amp;</p>
    <p>人民币 &yen;</p>
    <p>版权&copy;</p>
    <p>注册商标&reg;</p>
    <p>摄氏度&deg;</p>
    <p>正负号&plusmn;</p>
    <p>乘号&times;</p>
    <p>除号&divide;</p>
    <p>平方2(上标2)&sup2;</p>
    <p>立方3(上标3)&sup3;</p>
</body>
</html>

表格标签

<table></table>是用于定义表格的标签
<tr></tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
<th></th>用于定义表格中的表头部分，必须嵌套在<tr></tr>标签中，会居中加粗显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <table border="1" align="center" padding="20">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>郭大胖</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>梁小瘦</td>
            <td>女</td>
            <td>20</td>
        </tr>
    </table>
</body>
</html>

<!--
    table 是用于定义表格的标签
    tr    标签用于定义表格的行，必须嵌套在table中
    td    标签用于定义表格中的单元格，必须嵌套在tr中
    th    标签用于定义表格中表头，必须嵌套在tr中
          会加粗居中显示
-->

表格属性

这些属性要写到table里面去

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpading	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认为2像素
width	像素值或百分比	规定表格的宽度

表格结构标签

    thead用于定义表格的头部。必须拥有tr标签，一般位于第一行。
    tbody用于定义表格的主体，用于放数据本体。
    以上标签都放在table标签中
    <table>
        <thead></thead>
        <tbody></tbody>
    </table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" align="center" padding="20">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>郭大胖</td>
                <td>男</td>
                <td>20</td>
            </tr>
            <tr>
                <td>梁小瘦</td>
                <td>女</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<!--
    thead用于定义表格的头部。必须拥有tr标签，一般位于第一行。
    tbody用于定义表格的主体，用于放数据本体。
    以上标签都放在table标签中
    <table>
        <thead></thead>
        <tbody></tbody>
    </table>
-->

合并单元格

 跨行合并：rowspan="合并单元格的个数"
 跨列合并: colspan="合并单元格的个数"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1" align="center" cellspacing="0" width="500" height="300">
      <tr>
        <td colspan="3"></td>
      </tr>
      <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
          <td></td>
          <td></td>
      </tr>
    </table>
  </body>
</html>

<!--
    跨行合并：rowspan="合并单元格的个数"
    跨列合并: colspan="合并单元格的个数"
-->

列表标签

无序列表

无序列表的各个列表项之间没有顺序之分，是并列的。

ul中只能嵌套li,直接在ul标签中输入其他标签或文字是不被允许的。

li之间相当于一个容器，可以容纳所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>
<!--
    无序列表的各个列表项之间没有顺序之分，是并列的。
    ul中只能嵌套li,直接在ul标签中输入其他标签或文字是不被允许的。
    li之间相当于一个容器，可以容纳所有元素
-->

有序列表

ol中只能嵌套li，直接在ol标签中输入其他标签或文字是不被允许的。

li相当于一个容器,可以容纳所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
</body>
</html>

<!--
    ol中只能嵌套li，直接在ol标签中输入其他标签或文字是不被允许的。
    li相当于一个容器,可以容纳所有元素
-->

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>名词1</dt>
        <dd>名词1解释</dd>
        <dd>名词2解释</dd>
    </dl>
</body>
</html>
<!--
    自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
    dl标签用于定义描述列表
    dt定义项目/名字
    dd描述每一个项目/名字
    dt和dd一起使用

    助记:dl-定列-定义列表
         dt-定题-自定义题目
         dd-弟弟-跟着标题大哥混

    dl里面只能包含dt和dd,dt和dd可以包含任何标签
    dt和dd个数没有限制，经常是一个dt对应多个dd
-->

表单标签

表单域

表单域是一个包含表单元素的区域。

form标签用于定义表单域，实现用户信息的收集和传递

form标签会把范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </form>

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

表单元素

input标签用于收集用户信息。

在input标签中，包含一个type属性，根据不同type属性，输入字段有很多形式。(可以是文本字段、密码字段、复选框、单选按钮等)

<input type="属性值"/>
<!--
<input/>标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
-->

type属性的属性值及其描述如下

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox	定义复选框
file	定义输入字段和’游览’按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码***
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

除type属性外，<input标签还有其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义input元素的名称。
value	由用户自定义	规定input元素的值。
checked	checked	规定此input元素首次加载时应当被选中。
maxlength	正整数	规定输入字段的字符的最大长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="10"><br>
        <!-- password 密码框 用户看不见输入的密码 -->
        密码:<input type="password" name="pwd"><br>
        <!-- radio 单选按钮 可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        性别:男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio" value="女" name="sex"><br>
        <!-- checkbox 复选框 可以实现多选 -->
        爱好:吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br>
        <!-- 点击提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写"><br>
        <!-- 普通按钮button 后期结合js搭配使用 -->
        <input type="button" value="获取验证码"><br>
        <!-- 文件域 使用场景 上传文件 -->
        上传头像:<input type="file">
    </form>
</body>
</html>

<!--
    form 标签 表单域，实现用户信息的收集和传递
    form 会把它范围内的表单元素信息提交给服务器。

    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </form>
    属性    属性值      作用
    action  url        用于指定接受并处理表单数据的服务器程序的url地址
    method  get/post   用于设置表单数据的提交方式，其取值为get或post
    name    名称        用于指定表单的名称，以区分同一个页面的多个表单域

    表单元素空间
    <input type="属性值" />
    <input />标签为单标签
    type 属性设置不同的属性值用来指定不同的控件类型

    type属性的属性值及描述如下：
    属性值      描述
    button      定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
    checkbox    定义复选框
    file        定义输入字段和'游览'按钮，供文件上传
    hidden      定义隐藏的输入字段
    image       定义图像形式的提交按钮
    password    定义密码字段，该字段中的字符被掩码****
    radio       定义单选按钮
    reset       定义重置按钮。重置按钮会清除表单中的所有数据。
    submit      定义提交按钮。提交按钮会把表单数据发送到服务器。
    text        定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。
-->

label标签

label标签为input元素定义标注（标签）

label标签用于绑定一个表单元素，当点击label标签内的文本时，游览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
<!--
	<label>标签的for属性应当与相关元素的id属性相同
-->
<!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>
    <label for="text">用户名:</label><input type="text" id="text">
    <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
    <input type="radio" id="nv" name="sex"> <label for="nv">女</label>
</body>
</html>

select下拉列表标签

    <select>
        <option selected="selected">选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>
<!--
	在select中至少包含一对<option>
	在<option>中定义selected = "selected"时，当前项即为默认选项
-->

<!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>
    <select>
        <option selected="selected">选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>
</body>
</html>

textarea文本域标签

    <form>
        <textarea rows="3" cols="20">你好啊！</textarea>
    </form>
<!--
通过<textarea>标签可以轻松地创建多行文本输入框。
cols="每行中的字符数"
rows="显示的行数"
-->

<!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>
    <form>
        <textarea rows="3" cols="20">你好啊！</textarea>
    </form>
</body>
</html>