首页 前端知识 HTML基本标签使用详解

HTML基本标签使用详解

2024-04-01 10:04:31 前端知识 前端哥 275 398 我要收藏

       

目录

一、标题标签:

标题

二、段落标签:

内容

三、换行标签:

四、img标签

4.1、src属性:指定图片路径

4.2、alt属性

4.3、title属性

4.4、width/height属性

4.5、border属性

五、超链接标签:a

5.1、href属性

5.2、target属性

对图片建立超链接

 对文字建立超链接

六、表格标签

 七、列表标签

八、表单标签

 8.1、input 标签

label 标签&&select 标签&&textarea 标签

操作实例:

1、绘制行星表格图

2、个人资料的上传


 在正式讲解标签使用之前,需要先说明,标签这里只做简单用法说明,如果大家在有疑惑的地方,可以翻到最后有实例练习,结合实例一同食用可能会更加清楚标签的用法。

一、标题标签:<h1>标题</h1>

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

二、段落标签:<p>内容</p>

    <p>
        zhes11111111111111111
    </p>
    <p>
        22222222222222222222222222221111111111111111111
    </p>
    <p>
        99999999999999999999999999999999999999999999999999999999999999999999999999999999999999
    </p>

显示效果:

三、换行标签:<br/>

换行标签换行后间隙比段落标签间隙小


    <p>
        zhes11111111111111111
    </p>
    <p>
        22222222222222222222222222221111111111111111111
    </p>
    <p>
        9999999999999999999<br/>9999999999999999999999999999999999
    </p>

四、img标签

4.1、src属性:指定图片路径

在该文件同级目录下有这样一张图片

4.2、alt属性

替换文本,当文本不能正确显示时,会显示一个替换的文字。图片正确显示则不替换文字

<img src="./534.png" alt="图片加载失败">

路径正确,则显示图片成功,路径不正确则替换所给文字。

4.3、title属性

提示文本,鼠标放在图片上就会有提示

<img src="./534.png" alt="图片加载失败" title="C++图片">

4.4、width/height属性

控制宽度高度,高度宽度一般改一个就行,另一个会等比例缩放。参数是像素。

    <img src="./534.png" alt="图片加载失败" title="C++图片" width="100px">

4.5、border属性

边框,参数是宽度的像素,但是一般使用CSS来设定。设置方法同width/height。

注意:

1. 属性可以有多个, 不能写到标签之前。

2. 属性之间用空格分割, 可以是多个空格, 也可以是换行。

3. 属性之间不分先后顺序。

4. 属性使用 "键值对" 的格式来表示。

五、超链接标签:a

5.1、href属性

必须具备, 表示点击后会跳转到哪个页面。

    <a href="https://www.baidu.com/">跳转到百度</a>

5.2、target属性

打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开。 

对图片建立超链接

<a href="https://www.baidu.com/">
        <img src="./534.png" alt="图片加载失败">
    </a>

 对文字建立超链接

 <p>
        222222222<a href="https://www.baidu.com/">222</a>22222222222222221111111111111111111
    </p>

六、表格标签

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

tbody: 表格得到主体区域.

        表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置. 这些属性都要放到 table 标签中。

align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)。

border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框。

cellpadding: 内容距离边框的距离, 默认 1 像素。

cellspacing: 单元格之间的距离. 默认为 2 像素。

width / height: 设置尺寸。

注意, 这几个属性, vscode 都提示不出来。

         合并单元格:向下和向右合并单元格,最重要的是找准要合并的单元格,然后删除掉多余的单元格

跨行合并: rowspan="n"

跨列合并: colspan="n"

 七、列表标签

无序列表:ul li

有序列表:ol li

 快速生成列表的方法:ul>li*n:一次性生成n行列表。

注意:ul/ol 中只能放 li 不能放其他标签, li 中可以放其他标签。

八、表单标签

表单域: 包含表单元素的区域. 重点是 form 标签。描述了要把数据按照什么方式, 提交到哪个页面中。

表单控件: 输入框, 提交按钮等.重点是input标签。

 8.1、input 标签

各种输入控件, 包括单行文本框(text), 按钮(button), 单选框(radio), 复选框(checkbox)。下面是input标签的各种属性:

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等。

name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一。

value: input 中的默认值。

checked: 默认被选中. (用于单选按钮和多选按钮)。

 重点说一下单选框和提交按钮、清空按钮。单选框的name的值必须一样才能达到单选的效果。

性别: 
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

提交按钮:提交按钮、清空按钮肯定之前要有提交的内容,所以提交按钮之前一般会有各种标签。

<form action="要提交到的网页链接">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

label 标签&&select 标签&&textarea 标签

这几个标签用法较为简单,结合实例就能看懂用法。

九、操作实例:

1、绘制行星表格图

以下代码用到的图片未提供,大家可自行找图片替代。

<!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">
<thead>
    <tr>
        <td colspan="2"></td>
        <td><strong>名字</strong></td>
        <td><strong>图片</strong></td>
        <td><strong>质量(10的24次方kg)</strong></td>
        <td><strong>直径(km)</strong></td>
        <td><strong>密度(kg/m3)</strong></td>
        <td><strong>重力(m/s2)</strong></td>
        <td><strong>天长(小时)</strong></td>
        <td><strong>与太阳距离(10的6次方km)</strong></td>
        <td><strong>平均温度</strong></td>
        <td><strong>卫星数量</strong></td>
        <td><strong>备注</strong></td>
    </tr>
</thead>
       <tbody>
        <tr>
            <td colspan="2" rowspan="4"><strong>类地行星</strong></td>
            <td><strong>水星</strong></td>
            <td><img src="./实验1/行星/mercury.jpg" alt=""></td>
            <td>0.330</td>
            <td>4879</td>
            <td>5427</td>
            <td>3.7</td>
            <td>4222.6</td>
            <td>57.9</td>
            <td>167</td>
            <td>0</td>
            <td>距太阳最近</td>
        </tr>
        <tr>
            <td><strong>金星</strong></td>
            <td><img src="./实验1/行星/venus.jpg" alt=""></td>
            <td>4.87</td>
            <td>12104</td>
            <td>5243</td>
            <td>8.9</td>
            <td>2802.0</td>
            <td>108.2</td>
            <td>464</td>
            <td>0</td>
            <td></td>
        </tr>
        <tr>
            <td><strong>地球</strong></td>
            <td><img src="./实验1/行星/earth.png" alt=""></td>
            <td>5.97</td>
            <td>12756</td>
            <td>5514</td>
            <td>9.8</td>
            <td>24.0</td>
            <td>149.6</td>
            <td>15</td>
            <td>1</td>
            <td>我们的世界</td>
        </tr>
        <tr>
            <td><strong>火星</strong></td>
            <td><img src="./实验1/行星/mars.jpg" alt=""></td>
            <td>0.642</td>
            <td>6792</td>
            <td>3933</td>
            <td>3.7</td>
            <td>24.7</td>
            <td>227.9</td>
            <td>-65</td>
            <td>2</td>
            <td>红色星球</td>
        </tr>
        <tr>
            <td rowspan="4"><strong>类木行星</strong></td>
            <td rowspan="2"><strong>气巨星</strong></td>
            <td><strong>木星</strong></td>
            <td><img src="./实验1/行星/jupiter.jpg" alt=""></td>
            <td>1898</td>
            <td>142984</td>
            <td>1326</td>
            <td>23.1</td>
            <td>9.9</td>
            <td>778.6</td>
            <td>-110</td>
            <td>67</td>
            <td>太阳系最大</td>
        </tr>
        <tr>
            <td><strong>土星</strong></td>
            <td><img src="./实验1/行星/saturn.jpg" alt=""></td>
            <td>568</td>
            <td>120536</td>
            <td>687</td>
            <td>9.0</td>
            <td>10.7</td>
            <td>1433.5</td>
            <td>-140</td>
            <td>62</td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2"><strong>冰巨星</strong></td>
            <td><strong>天王星</strong></td>
            <td><img src="./实验1/行星/uranus.jpg" alt=""></td>
            <td>86.8</td>
            <td>51118</td>
            <td>1271</td>
            <td>8.7</td>
            <td>17.2</td>
            <td>2872.5</td>
            <td>-195</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td><strong>海王星</strong></td>
            <td><img src="./实验1/行星/neptune.jpg" alt=""></td>
            <td>102</td>
            <td>49528</td>
            <td>1638</td>
            <td>11.0</td>
            <td>16.1</td>
            <td>4495.1</td>
            <td>-200</td>
            <td>14</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"><strong>矮行星</strong></td>
            <td><strong>冥王星</strong></td>
            <td><img src="./实验1/行星/pluto.jpg" alt=""></td>
            <td>0.0146</td>
            <td>2370</td>
            <td>2095</td>
            <td>0.7</td>
            <td>153.3</td>
            <td>5906.4</td>
            <td>-225</td>
            <td>5</td>
            <td>2006年降格,但尚存争议</td>
        </tr>
       </tbody>
    </table>
</body>
</html>

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>
    <form action="https://mock.apifox.cn/m1/1893392-0-default/form/process1" method="post">
        <style>  
            legend {  
                text-align: center; 
            }  
        </style>
        <style>  
            fieldset {  
                width: 500px;  
            }  
        </style>
        <fieldset>
            <legend>个人资料</legend>
            姓名:
            <input type="text" name="username">
            <br/>

            性别:
            <input type="radio" name="gender" id="male" checked="checked">
            <label for="male">男</label>
            <input type="radio" name="gender" id="female">
            <label for="female">女</label>
            <br/>

            出生日期:
            <input type="date" name="birthday">
            <br/>

            主要经历:
            <textarea name="history" id="" cols="30" rows="10"></textarea>
            <br/>

            兴趣爱好:
            <input type="checkbox" name="hobby">唱歌
            <input type="checkbox" name="hobby">打球
            <input type="checkbox" name="hobby">下棋
            <input type="checkbox" name="hobby">上网
            <input type="checkbox" name="hobby">购物

        </fieldset>
        <br/>

        <fieldset>
            <legend>专业与课程</legend>
            所学专业:
            <select name="major" id="">
                <option value="">计算机及应用</option>
            </select>
            <br/>
            <hr>
            最喜欢的课程:
            <select name="course" id="">
                <option value="">计算机网络</option>
                <option value="">数据库原理与应用</option>
                <option value="">计算机组成原理</option>
                <option value="">C语言程序设计</option>
            </select>

        </fieldset>
        <br/>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4357.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!