快速上手HTML——总结HTML中常用标签的用法

最新推荐文章于 2024-03-27 22:16:12 发布

今天秃头了吗？？

最新推荐文章于 2024-03-27 22:16:12 发布

阅读量1.2k

点赞数 16

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_56776909/article/details/132817752

版权

认识HTML
HTML是由标签构成的
<>中括起来的就是标签名，例如<body></body>，<h1></h1>
标签一般都是成对的，结束标签会带 / ，例如</body>， </h1>
少数标签只有开始标签成为单标签，例如换行标签:<br>
开始标签和结束标签之间，写的是标签的内容

HTML文件基本结构

在VScode中，输入！加tab键，会自动补全为如下格式：

html标签是整个html文件的跟标签
head标签中写页面的属性
body标签中写的是页面上显示的内容
title标签中写的是页面的标题

在body标签里面我们可以写入我们想要在页面展示的内容，并用其他标签给内容赋予结构。

HTML常见标签

注释标签

注释不会显示在界面上，目的是提高代码的可读性

ctrl + / 键可以快速进行注释

标题标签:h1-h6

数字越小表示标题等级越大，字体越大，h1表示一级标题，h2表示二级标题，以此类推。

<!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>hello</h1>
    <h2>hello</h2>
    <h3>hell0</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>
</body>
</html>

段落标签：p

如果我们想在页面展示一篇文章，直接把文章复制到body中是不可行的，因为它不会帮你自动分段，我们看到的文章就是所有段落连在一起的，没有换行。

<!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>
    这是第一段
    这是第二段
</body>
</html>

加入p标签后：

<body>
    <p>这是第一段</p>
    <p>这是第二段</p>
</body>

换行标签：br

br是break的缩写，表示换行

br是一个单标签（不需要结束标签）
br标签不像p标签那样带有一个很大的空隙
<br/>是规范写法，不建议写成<br>

<body>
    这是第一段<br/>
    这是第二段
</body>

格式化标签

加粗：strong标签和 b 标签
倾斜： em标签和 i标签
删除线： del标签和 s标签
下划线： ins标签和 u标签

<body>
    <strong>strong：这是加粗标签</strong><br/>
    <b>b: 这是加粗标签</b><br/>
    <em>em: 这是倾斜标签</em><br/>
    <i>i: 这是倾斜标签</i><br/>
    <ins>ins： 这是下划线标签</ins><br/>
    <u>u: 这是下划线标签</u><br/>
    <del>del: 这是删除线标签</del><br/>
    <s>s: 这是删除线标签</s>
</body>

图片标签

img标签必须要有src属性，用来表示图片的路径，可以是绝对路径，也可以是相对路径。

alt: 替换文本，当文本不能正确显示的时候，会显示一个替换的文本。
title: 提示文本，当鼠标在图片上悬停的时候，就会出现提示文字。
width/height: 图片的宽和高，单位是px
border：边框，单位是px

<body>
    <img src="C:\Users\WANG-PC\Pictures\Saved Pictures\111.jgp" alt="动漫头像" title="这是一张图片" height="200px" border = "2px">
</body>

我们可以看到，当图片裂了，text的文字不能正常显示，这是alt就会显示它的提示文本，让我们知道这原本是一个“动漫头像”。

那么图片为什么会裂开？如果访问的是本地的图片，可能是图片路径不对，如果是网络上的图片地址，可能是网络问题。那么这里我们用的本地图片，检查路径后发现，111.jpg写成了111.jgp。修改之后就能正常显示了。这时候alt的替换文字也不会出现了。

超链接标签：a

href:必须具备，表示点击后会跳转到哪个页面，herf的值为#时，表示跳转到当前页面
target：表示打开链接的方式，默认是_self就在当前页面打开链接所在的页面，——blank会新开一页跳转到链接所在页面

<body>
   <a href="#"> 跳转到当前页面</a>
    <br/>
    <a href="https:www.baidu.com">跳转到百度</a>
</body>

<body>
    <a href="https://www.baidu.com" target="_blank">用新的标签页跳转到百度</a>
</body>

表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.

<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>小w</td>
            <td>男</td>
            <td>11</td>
        </tr>
        <tr>
            <td>小y</td>
            <td>女</td>
            <td>10</td>
        </tr>
    </table>
</body>

为什么会看起来不像表格？这是因为表格还有一个重要的属性border（边框）。border默认为0px所以我们看不到有表格。加了边框后：

会发现单元格与单元格之间有间隙，这是因为table中的cellspacing属性，即：单元格之间的距离。默认为 2 像素。我们把它设置为0px就可以了。

 <table border="1px" cellspacing = "0px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>小w</td>
            <td>男</td>
            <td>11</td>
        </tr>
        <tr>
            <td>小y</td>
            <td>女</td>
            <td>10</td>
        </tr>
    </table>

input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框。

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮,（radio）具有相同的 name （同一类）才能多选一
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.

文本框和密码框

<body>
    这是一个文本框：<input type="text"> 
    <br/>
    这是一个密码框：<input type="password" > 
</body>

单选框和复选框

<body>
    <p>
        <input type="radio" name="gender" id="">男
        <input type="radio" name="gender" id="">女
    </p>
</body>

要实现单选框的必须就是要给选项设置相同的“name"，相当于把它们分成一组，一组里面只能选一个。如果没有设置name属性或者说name属性的值不同，那么就不能达到单选的效果，这样就会导致可以同时选中多个选项。

对于单选框的体验优化，我们可以用label标签搭配radio的id实现，它达到的效果就是我们点击文字的时候也可以选中，这样就优化了点击的体验，扩大了选中的面积，更易于用户选中。

<body>
    <p>
        <input type="radio" name="gender" id="male"><label for="male">男</label>
        <input type="radio" name="gender" id="female"><label for="female">女</label>
    </p>
</body>

这样我们点击“男”或者点击“女”的时候也能选中了。

复选框中label的作用和单选框相同。这里有一个checked属性，如果设置为checked会默认选中该复选框（默认选中重庆）。单选框radio中也有该属性。

<body>
    <p>
        <input type="checkbox" name="city" id="cq" checked="checked"> <label for="cq">重庆</label>
        <input type="checkbox" name="city" id="sc"> <label for="sc">四川</label>
        <input type="checkbox" name="city" id="gz"> <label for="gz">广州</label>
        <input type="checkbox" name="city" id="hz"> <label for="hz">杭州</label>
    </p>
</body>

按钮

<body>
    <p>
        <input type="button" value="我是普通按钮" onclick="alert('hello')"> 
    </p>
    <p>
        <input type="submit" value="提交">我需要搭配表单使用，用于提交用户输入的表单内容
    </p>
    <p>
        <input type="reset" value="清空">我需要搭配表单使用，用于重置用户输入的表单内容
    </p>
</body>

点击普通按钮会出现跳出hello的弹出框，这是因为我们在button中设置了onclick(点击属性），只要鼠标点击按钮就会出现一个弹出框（alert），弹出框显示：hello。onclick是属于js的，按钮搭配js使用可以实现很多丰富多彩的功能。

后面的两个按钮，提交和清空都要搭配表单使用，但是因为这里我们没有写表单，所以点击他们是没有变化的。或者说我们看不见变化。

选择文件

<body>
    <input type="file" >
</body>

select标签

select就是一个下拉菜单，里面的每个option就是一个“菜”

<body>
    <select name="year" id="">
        <option>1990</option>
        <option>1991</option>
        <option>1992</option>
        <option>1993</option>
        <option>1994</option>
        <option>1995</option>
    </select>
</body>

textarea标签

文本框，我们可以用cols 和 rows来限制文本框每行写多少字，可以写几行。

<body>
    <textarea cols="100" rows="10"></textarea>
</body>

无语义标签div和span

这两个都是用于网页布局的标签，我们可以把它们视为两个盒子，用他们来存放东西（内容）。

div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子.

<body>
   <div>第一个div</div>
   <div>第二个div</div>
   <div>第三个div</div>
    换行 <br/>
   <span>第一个span</span>
   <span>第二个span</span>
   <span>第三个span</span>
</body>

今天秃头了吗？？

关注

16
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
快速上手HTML——总结HTML中常用标签的用法

点击普通按钮会出现跳出hello的弹出框，这是因为我们在button中设置了onclick(点击属性），只要鼠标点击按钮就会出现一个弹出框（alert），弹出框显示：hello。对于单选框的体验优化，我们可以用label标签搭配radio的id实现，它达到的效果就是我们点击文字的时候也可以选中，这样就优化了点击的体验，扩大了选中的面积，更易于用户选中。如果我们想在页面展示一篇文章，直接把文章复制到body中是不可行的，因为它不会帮你自动分段，我们看到的文章就是所有段落连在一起的，没有换行。
复制链接

扫一扫