首页 > 编程入门 文章详情

​html 常用标签（元素)

编程入门 行业动态 更新时间:2024-10-08 18:39:54

​html 常用标签（<a href=https://www.elefans.com/category/jswz/34/1771401.html style=元素)"/>

​html 常用标签（元素)

(1) 标签相关概念#

1. HTML版本#

html的版本有:

  1. HTML1.0
  2. HTML2.0
  3. HTML3.2
  4. HTML4.0
  5. HTML4.01（微小改进）
  6. HTML5：2008年正式发布,现在都在用第5版的html

2. HTML文件#

  • 一个html文件用浏览器打开就是一个网页

  • 第一个网页(有文字, 有链接和图片)

3. 标签及其语法#

  1. 标签也叫元素,网页就是由标签的来组成

  2. 标签语法:

    • 注释 <!-- 注释内容 -->
    • 标签对
    • 单标签
    • 标签属性(给标签提供附加信息)
    • 多个空格只算一个
<!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><!-- 标签对,多个空格只能算一个 --><h3>我的                    第一个网页</h3> <!-- 标签属性:href是属性名称,="xxx" xxx是属性的值 --><a href="">百度</a><!-- 单标签 --><img src=".png" alt=""><!-- 单标签后面的/,是可选的 --><img src="" alt="" /></body>
</html>

(2) 结构标签#

一个网页的骨架标签

  1. <html> 页面的根标签，最顶层标签。

  2. <head> 定义关于文档的信息（不会显示到页面）

  3. <body> 定义文档的主体(要显示到页面中的内容)

  4. <title>定义文档的标题，显示到浏览器的选项卡中。该标签必须写在<head>标签内部。

  5. <meta>描述 HTML 文档的元数据。通过标签中属性设置其相关的信息

    • charset 定义文档的字符编码。h5 新增
    • name 属性规定元数据的名称,取值通常有keywords、description、author name 属性需要配合 content属性一起使用。

  6. <link>定义文档与外部资源的关系

    • href 定义被链接文档的位置。

    • rel 规定当前文档与被链接文档/资源之间的关系。常用取值如下：

      • stylesheet 表示要导入的样式表的 URL。

      • icon 导入表示该文档的图标。 浏览器标签栏图标格式为 .ico 图片在线转换 ICO

(3) 文本标签#

标签列表

  1. <h1> ... <h6> 标题标签
  2. <div> 区块标签(大)
  3. <span> 区块标签(小)
  4. <p> 段落
  5. <br> 换行
  6. <hr> 水平线
  7. <strong> 定义语气更为强烈的强调文本
  8. <i> 斜体文本
  9. <pre> 预格式文本
<!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>hello</title>
</head>
<body><!-- 标题标签 --><h1>hhhhhhhhhhhhhhhhhh</h1><h2>hhhhhhhhhhhhhhhhhh</h2><h3>hhhhhhhhhhhhhhhhhh</h3><h4>hhhhhhhhhhhhhhhhhh</h4><h5>hhhhhhhhhhhhhhhhhh</h5><h6>hhhhhhhhhhhhhhhhhh</h6><!-- 区块标签(大) --><div>div1</div><div>div2</div><div>div3</div><!-- 区块标签(小) --><span>啊啊啊啊啊啊啊啊啊啊啊啊</span><span>span2</span><span>span3</span><!-- 段落标签 --><p>ppppppppppp</p><p>ppppppppppp</p><p>ppppppppppp</p><!-- 换行 --><p>我爱<br/>中国</p><!-- 水平线 --><hr><!-- 加强语气 --><p>我爱<strong>中国</strong></p><!-- 斜体 --><i>我爱中国</i><!-- 保留格式 --><p>function add() {console.log(111)}</p><pre>function add() {console.log(111)}</pre> 
</body>
</html>

其他文本标签

- <b>          粗体文本                   
- <em>         强调文本                   
- <ins>        被插入文本                 
- <u>          下划线文本                 
- <s>          加删除线的文本             
- <del>        被删除文本                 
- <sub>        下标文本                   
- <sup>        上标文本                   
- <code>       计算机代码文本

(4) 列表#

  1. <ul> 无序列表

  2. <ol> 有序列表

    • <li> 列表项,<ul><ol>列表的子级标签

  3. <dl> 自定义列表

    • <dt> 自定义列表中项

    • <dd> 自定义列表项的描述

    <!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><!-- 无序列表 --><ul><li>红色</li><li>黄色</li><li>蓝色</li></ul><!-- 有序列表 --><ol><li>红色</li><li>黄色</li><li>蓝色</li></ol><!-- 自定义列表 --><dl><dt>广东城市列表</dt><dd>广州</dd><dd>深圳</dd><dd>清远</dd><dt>广西城市列表</dt><dd>桂林</dd><dd>柳州</dd><dd>南宁</dd> </dl> 
</body>
</html>

(5) 链接#

<a> 定义一个链接

  1. href 规定链接的目标 URL, 有四个取值

    • 互联网上的一个地址, 比如
    • 本地的一个html文件
    • # 回到顶部
    • #aa 回到一个id="aa" 的元素那里
    <!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><a href="">百度</a><a href="./demo1.html">demo1</a><p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p><div id="aa">这是div标签</div><p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p><a href="#">回到顶部</a><a href="#aa">去div标签</a> 
</body>
</html>

  2. target 定在何处打开目标 URL。仅在 href 属性存在时使用。常用取值

    1. _self 在本业面中打开(默认)
    2. _blank在新的页面中打开
    <!DOCTYPE html>
<html lang="en"> 
<body><a href="">百度</a><a href="" target="_blank">百度2</a>
</body>
</html>

(6) 图片#

<img> 定义图片

  1. alt 图片不显示时的替代文本
  2. src 要显示图片的 URL
    src属性的值可以是本地图片,网络图片,或者是base64格式的文本。
<!DOCTYPE html>
<html lang="en"> 
<body><img src=".png" alt=""><img src="./img/aaaaaaaaaaaaaaaaaaaaaaaaa.png" alt=""><!-- alt图片加载失败或者不存在时显示的文字描述 --><img src="./img/aaaaa.png" alt="图片不存在"><!-- base64格式 --><img src="data:image/png;base64,iVBORw0KGgoAAAAN.... />
</body>
</html>

(7) html转义字符(字符实体)#

显示结果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
¥元（yen）&yen;&#165;

HTML 字符实体

<!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><h3>我爱&nbsp;&nbsp;&nbsp;&nbsp;web</h3><p>&yen; 100.00</p> </body>
</html>

(8) 表格#

  1. 表格里的标签

    • <table> 定义一个表格
    • <caption> 定义表格标题
    • <thead> 定义表格中的表头内容
    • <th> 定义表格中的表头单元格
    • <tbody> 定义表格中的主体内容
    • <tfoot> 定义表格中的表注内容（脚注）
    • <tr> 定义表格中的行
    • <td>
    <!DOCTYPE html>
<html lang="en"> 
<body><table><!-- 表格标题 --><caption>web1115班通讯录</caption><!-- 表头 --><thead><!-- tr 一行 --><tr><!-- 表头里的单元格 --><th>姓名</th><th>性别</th><th>手机号码</th></tr></thead><!-- 表格的主体内容 --><tbody><tr><!-- 主体的单元格 --><td>欧*祥1</td><td>男</td><td>1380000000000</td></tr><tr><!-- 主体的单元格 --><td>欧*祥2</td><td>男</td><td>1380000000000</td></tr><tr><!-- 主体的单元格 --><td>欧*祥3</td><td>男</td><td>1380000000000</td></tr></tbody> </table> 
</body>
</html>

  2. 在表格中<thead>和<tfoot>只能有一个但<tbody>可以有多个 (了解)

  3. 通常情况下，在写表格时不写<thead>，<tbody>，<tfoot>标签而是直接在<table>中写<tr>,<td>。代码在浏览器中执行时会自动补全<tbody> (了解)

  4. 表格设置

    • 为表格设置边框：<table border="1"> </table>
    • 合并表格边框 <table border="1" cellspacing="0"></table>
    • 设置表格宽度 <table border="1" cellspacing="0" width="800"></table>
    • 设置表格对齐方式 <table border="1" cellspacing="0" width="800" align="center"></table>
    <!DOCTYPE html>
<html lang="en"><body><table border="1" cellspacing="0" width="400" align="center"><caption>web1115班通讯录</caption><thead><tr><th>姓名</th><th>性别</th><th>手机号码</th></tr></thead><tbody><tr><td align="center">欧*祥1</td><td align="center">男</td><td align="center">1380000000000</td></tr><tr><td align="center">欧*祥2</td><td align="center">男</td><td align="center">1380000000000</td></tr></tbody> </table> 
</body> 
</html>

  5. 单元格设置

    1. 单元格对齐 <td align="center">小明</td>

    2. 设置单元格宽高<td height="100" width="100" align="center">小明</td>

    3. 合并单元格：通过设置 <td> 属性可以合并单元格

      • colspan 设置单元格可横跨的列数 (合并后占几列)
      • rowspan 设置单元格可横跨的行数 (合并后占几行)

      技巧:

      • 给合并者添加colspan或者rowspan, 设置合并的个数
      • 注释或者删掉被合并者
    <!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><table border="1" cellspacing="0" width="400" align="center"><thead><tr><th>第1列</th><th>第2列</th><th>第3列</th></tr></thead><tbody><tr><td align="center" colspan="2">1</td><!-- <td align="center">2</td> --><td align="center">3</td></tr><tr><td align="center">4</td><td align="center">5</td><td align="center" rowspan="2">6</td></tr><tr><td align="center" colspan="2">7</td><!-- <td align="center">8</td> --><!-- <td align="center">9</td> --></tr> </tbody> </table>
</body>
</html>

(9) 表单#

表单是构成 Web 页面的重要组成部分。它们提供了大量你所需要用来与网站进行交互所需的功能。比如注册、登录、发送评论反馈、购买商品等等。

01 <form> 定义一个 HTML 表单#

以下三个属性了解即可, 现在几乎用不到

  1. action：规定当提交表单时向何处发送表单数据。
  2. method：发送表单数据的 HTTP 方法，get/post。
  3. target：在何处打开 action URL，取值_blank，_self。

02 <input> 输入控件#

  1. type:指定输入控件的类型,常用取值：

    • text 文本输入框
    • password 密码输入框
    • radio 单选框
    • checkbox 多选框
    • file 文件上传
    • reset 重置按钮
    • submit 提交按钮
    <!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 action=":3009/aa" method=""><p>用户名: <input type="text" placeholder="请输入用户名"> </p><p>密码:  <input type="password" placeholder="请输入密码"></p><p><!-- 必须加上相同的name,才能实现单选 -->性别: 男<input type="radio" name="aa"> 女<input type="radio" name="aa"></p><p>爱好: 音乐<input type="checkbox"> 运动<input type="checkbox"> 电影<input type="checkbox"></p><p>上传: <input type="file"></p><p><input type="submit"> <input type="reset"></p></form>
</body>
</html>

  2. 表单属性

    - placeholder占位符

    - value:控件的输入值。

    - disabled:禁用元素。

    - readonly：文本只读。

    - name:元素名称。

    - maxlength: 最大长度

    <!DOCTYPE html>
<html lang="en"> <body><p>value属性: <input type="text" placeholder="请输入用户名" value="我是老胡"></p><p>disabled属性: <input type="text" value="我是老胡2" disabled></p><p>readonly属性: <input type="text" readonly value="哈哈哈"> <br></p><p>name属性:1<input type="radio" name="aa">2<input type="radio" name="aa"></p><p>maxlength属性: <input type="text" maxlength="11" placeholder="手机号码"></p>
</body> 
</html>

03 <label> 定义 checkbox、radio 元素的标注#

  • for:规定 label 与哪个表单元素绑定, 主要针对单选框和多选框

    <!DOCTYPE html>
<html lang="en"> <body>男<input type="radio" name="aa" id="man">女<input type="radio" name="aa" id="woman"><hr><label for="man">选择男的</label><label for="woman">选择女的</label> 
</body> 
</html>

04 <textarea> 文本域，可以输入多行文本#

  1. disabled:禁用文本框。

  2. readonly：文本只读。

  3. name: 元素名称。

  4. rows: 行

    <!DOCTYPE html>
<html lang="en">  
<body><textarea cols="5" rows="5"></textarea> 
</body> 
</html>

05 <button> 定义按钮#

  1. type: 规定按钮的类型,取值：button, reset, submit,默认button

  2. disabled:禁用该按钮。

    <!DOCTYPE html>
<html lang="en">  
<body><!-- 普通按钮 --><button>普通按钮</button><!-- 使用button标签的重置和提交 --><button type="reset">重置</button><button type="submit">提交</button><hr><!-- 使用input标签的重置和提交 --><input type="submit"><input type="reset">
</body> 
</html>

06 <select> 下拉列表#

  1. disabled:禁用。
  2. name:元素名称。

<optgroup> 定义下拉列表中的选项组

  1. label：为选项组规定描述。
  2. disabled:禁用该选项组。

<option> 定义下拉列表中选项

  1. value：定义送往服务器的选项值。
  2. selected：默认选中。
  3. disabled:禁用该选项。
<!-- 简单的下拉列表 -->
<!DOCTYPE html>
<html lang="en">  
<body><select><option value="">南山区</option><option value="" selected>福田区</option><option value="">龙华区</option></select>
</body> 
</html><!-- 选项组(了解) -->
<!DOCTYPE html>
<html lang="en">  
<body><select><optgroup label="广东城市"><option value="">广州1</option><option value="">广州2</option><option value="">广州3</option></optgroup><optgroup label="广西城市"><option value="">南宁1</option><option value="">南宁2</option><option value="">南宁3</option></optgroup></select>
</body> 
</html>

07 表单的一些规则#

(1) 提交按钮`submit` 可以触发`<form>`向服务器端发送请求。(了解)
(2) 表单提交时当前页面会刷新。(了解, 这种方式现在几乎不用了)
(3) `<form>`通常不会使用 *action*等属性 向服务器发送数据，现在使用 ajax将表单数据发送到服务器。
(4) 表单控件需要设置name,id等属性。
(5) 重置按钮`reset` 只有在 `<form>`中才可以重置表单控件中数据。
(6) 表单控件可以不在`<from>`中单独使用。

(10) iframe 标签#

  • 网页中的网页

    <!DOCTYPE html>
<html lang="en">  
<body> <h3>我的网页</h3><iframe width="600" height="400" src="" frameborder="0"></iframe>
</body> 
</html>

(11) 作业#

(1) 使用所学标签实现百度注册页面#

(2) 实现以下的表格#

<!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><table border="1" align="center" cellspacing="0"><caption>风车</caption><tr><td align="center" width="50" height="50" colspan="2">1</td><!-- <td align="center" width="50" height="50">2</td> --><td align="center" width="50" height="50" rowspan="2">2</td></tr><tr><td align="center" width="50" height="50" rowspan="2">4</td><td align="center" width="50" height="50">5</td><!-- <td align="center" width="50" height="50">6</td> --></tr><tr><!-- <td align="center" width="50" height="50">7</td> --><td align="center" width="50" height="50" colspan="2">3</td><!-- <td align="center" width="50" height="50">9</td> --></tr></table>
</body>
</html>

(3) 实现华容道表格#

<!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><table border="1" align="center"><caption>三国华容道</caption><tr><td align="center" height="50" width="50" rowspan="2">张飞</td><td align="center" height="50" width="50" rowspan="2" colspan="2">曹操</td><!-- <td align="center" height="50" width="50">1-3</td> --><td align="center" height="100" width="50" rowspan="2">马超</td></tr><tr><!-- <td align="center" height="50" width="50">2-1</td> --><!-- <td align="center" height="50" width="50">2-2</td> --><!-- <td align="center" height="50" width="50">2-3</td> --><!-- <td align="center" height="50" width="50">2-4</td> --></tr><tr><td align="center" height="50" width="50" rowspan="2">赵云</td><td align="center" height="50" width="50" colspan="2">关羽</td><!-- <td align="center" height="50" width="50">3-3</td> --><td align="center" height="50" width="50" rowspan="2">黄忠</td></tr><tr><!-- <td align="center" height="50" width="50">4-1</td> --><td align="center" height="50" width="50">卒</td><td align="center" height="50" width="50">卒</td><!-- <td align="center" height="50" width="50">4-4</td> --></tr><tr><td align="center" height="50" width="50">卒</td><td align="center" height="50" width="50" colspan="2"></td><!-- <td align="center" height="50" width="50">5-3</td> --><td align="center" height="50" width="50">卒</td></tr></table>
</body>
</html>

更多推荐

​html 常用标签（元素)

本文发布于:2024-03-09 03:08:44，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1723556.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：元素   常用   标签   html

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表