0
点赞
收藏
分享

微信扫一扫

html 常用标签(元素)

cnlinkchina 2022-01-06 阅读 57

html 常用标签(元素)

目录

html 常用标签(元素)

(1) 标签相关概念

1. HTML版本

2. HTML文件

3. 标签及其语法

(2) 结构标签

(3) 文本标签

(4) 列表

(5) 链接

(6) 图片

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

(8) 表格

(9) 表单

(10) iframe 标签


(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="http://www.baidu.com">百度</a>
    <!-- 单标签 -->
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <!-- 单标签后面的/,是可选的 -->
    <img src="" alt="" />

</body>
</html>

(2) 结构标签

一个网页的骨架标签

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

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

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

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

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

    • charset 定义文档的字符编码。h5 新增
    • name 属性规定元数据的名称,取值通常有keywordsdescriptionauthor 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="http://www.baidu.com">百度</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="http://www.baidu.com">百度</a>
        <a href="http://www.baidu.com" target="_blank">百度2</a>
    </body>
    </html>
    

(6) 图片

<img> 定义图片

  1. alt 图片不显示时的替代文本
  2. src 要显示图片的 URL
    src属性的值可以是本地图片,网络图片,或者是base64格式的文本。
<!DOCTYPE html>
<html lang="en"> 
<body>
   <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.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="http://www.huruqing.cn: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> 定义 checkboxradio 元素的标注#

  • 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="http://zl.huruqing.cn" frameborder="0"></iframe>
    </body> 
    </html>
举报

相关推荐

0 条评论