HTML 常用标签用法

最新推荐文章于 2023-08-20 11:26:25 发布

²º¹⁷旧人不必等

最新推荐文章于 2023-08-20 11:26:25 发布

阅读量328

点赞数 2

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_62274623/article/details/131657838

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

目录

一、HTML文件基本结构

二、标签层次结构

三、常见标签

1.注释标签

2.标题标签

3.段落标签: p

2.换行标签: br

3.格式化标签

4.图片标签: img

5.超链接标签: a

6.表格标签

7.列表标签

8.input 标签

9.label 标签

10.select 标签 (下拉标签)

11.无语义标签: div & span

一、HTML文件基本结构

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

二、标签层次结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

其中:

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签. head 是 title 的父标签.
head 和 body 之间是兄弟关系.

三、常见标签

1.注释标签

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

2.标题标签

标题标签 : h1-h6

<h1> hello world </h1>

<h2> hello world </h2>

<h3> hello world </h3>

<h4> hello world </h4>

<h5> hello world </h5>

<h6> hello world </h6>

3.段落标签: p

p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格.

2.换行标签: br

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

3.格式化标签

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

        <del>浪潮软件（600756.SH）</del>
        <em>平台表示，公司</em>
        <strong>6月21日</strong>
        <i>在投资者互动</i>

4.图片标签: img

img 标签必须带有 src 属性. 表示图片的路径.

<img src = "rose.jpg" > 此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中

img 标签的其他属性
alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

<img id="55" src="h.png" alt="这是一个图片" title="遇事不决,可问春风" width="300px" height="200px"><br>

5.超链接标签: a

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

链接的几种形式 :

外部链接: href 引用其他网站的地址
<a href="http://www.baidu.com" target="_blank">百度</a>
内部链接: 网站内部页面之间的链接. 写相对路径即可.
 <a href="2.html" target="_blank">内部链接</a>
空链接: 使用 # 在 href 中占位.
<a href="#">空链接</a>
下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
<a href="h.zip">下载图片</a>
网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="http://www.baidu.com" target="_blank">
               <img src="h.png" alt="这是一个图片" title="遇事不决,可问春风" width="300px" height="200px">
           </a>
锚点链接: 可以快速定位到页面中的某个位置
        <a href="#1">第一集</a>
        <a href="#two">第二集</a>
        <a href="#three">第三集</a>
        <a href="#55">倒数第二张图</a>
        <p id="two">
           第二集剧情 <br>
           第二集剧情 <br>
         ...
        </p>
        <p id="three">
           第三集剧情 <br>
           第三集剧情 <br>
         ...
        </p>

6.表格标签

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

 <table border="1" width="400px">
                    <thead>
                            <th>
                                姓名
                            </th>
                            <th>
                                性别
                            </th>
                            <th>
                                年龄
                            </th>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="2">张三 男</td>
                        
                            <td rowspan="2">18</td>
                        </tr>
                        <tr>
                            <td>李四</td>
                            <td rowspan="2">女</td>
                            
                        </tr>
                        <tr>
                            <td>王五</td>                     
                            <td>22</td>
                        </tr>
                    </tbody>
            </table>

7.列表标签

无序列表[重要] ul li
有序列表[用的不多] ol li
自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.

        <h3>自定义列表</h3>
<dl>
    <dt>我的老婆们</dt>
    <dd>甘雨</dd>
    <dd>凝光</dd>
    <dd>凌华</dd>
</dl>

        <h3>无序列表</h3>

        <ul>
            <li>钟离</li>
            <li>猪猪侠</li>

        </ul>
        <h3>有序列表</h3>
        <ol>
            <li>吕洞宾</li>
            <img src="ljt1.jpg" width="300px" height="600px">
            <li>大瓜</li>
        </ol>

8.input 标签

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

1) 文本框

<input type = "text" >

2) 密码框

<input type = "password" >

3) 单选框

性别 :

<input type = "radio" name = "sex" > 男

<input type = "radio" name = "sex" checked = "checked" > 女

4) 复选框

锻炼:

<input type = "checkbox" > 跳绳 <input type = "checkbox" > 跑步 <input type = "checkbox" >

打篮球

5) 普通按钮

<input type = "button" value = " 按钮 " >

6) 提交按钮

<form action = "test.html" >

<input type = "text" name = "username" >

<input type = "submit" value = " 提交 " >

</form>

7) 清空按钮

<form action = "test.html" >

<input type = "text" name = "username" >

<input type = "submit" value = " 提交 " >

<input type = "reset" value = " 清空 " >

</form>

8) 选择文件

<input type = "file" >

9.label 标签

搭配 input 使用 . 点击 label 也能选中对应的单选 / 复选框 , 能够提升用户体验 .

for 属性 : 指定当前 label 和哪个相同 id 的 input 标签对应 .
<label for="male">男</label> <input id="male" type="radio" name="sex">