【从0-1的HTML】第2篇:HTML标签

文章目录

1.标题标签

标题标签:h1、h2、h3...h6,1-6表示标题层级,最大h1,最小h6

html 复制代码
<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>

2.段落标签

可以使用段落标签来将内容分成若干个段落

html 复制代码
<p>This is a paragraph</p>
<p>This is another paragraph</p>

3.文本标签

br

一个空的HTML元素,关闭标签没有任何意义,但在HTML之后的版本中,不允许使用没有结束标签的HTML元素,所以推荐使用

b

仅加粗文本

strong

加粗文本,表示标签中的内容的重要性,两者在显示并没有差别

sub

下标文本

sup

上标文本

html 复制代码
<p><b>Everything happens for a reason!</b> <br/> <strong>You can change your odds!</strong> <br> <strong>You can change your life!</strong></p>
<!--下标文本-->
<sub>下标文本</sub>
<!--上标文本-->
<sup>上标文本</sup>

4.超链接标签

超链接(Hyperlink)通常简称为链接(Link),是指从一个网页指向另一个目标的连接关系,这个目标可以是另一个网页,也可以是当前网页中的其它位置,还可以是图片、文件、应用程序等

html 复制代码
<!--href属性:1、可以指向网页,2、可以指向图片,3、可以指向压缩文件,4、可以指向本地文件,指向可以是相对路径,也可以是绝对路径-->
<a href="http://www.w3school.com.cn/" target="_blank">访问 W3School</a>

5.图片标签

HTML 使用 标签插入图片,img 是 image 的简称,自闭和标签,只包含属性,没有结束标签

html 复制代码
<!--图片-->
<!--src:必填属性,指定图片的地址(网络图片)或者路径(本地图片)-->
<!--alt:可选属性,当图片无法正常显示的时候,会显示alt属性中的信息-->
<img src="64960446_p0.jpg" alt="wlop">

6.表格标签

在 HTML 中,我们使用 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的,都包括行、列、单元格、表头等元素。

html 复制代码
<!--table表格-->
<!--tr:行-->
<!--th:表头-->
<!--td:表格单元格标签-->
<!--border-collapse:表格边框合并-->
<table border="1" style="border-collapse: collapse">
    <tr>
        <th>朝代</th>
        <th>开国皇帝</th>
    </tr>
    <tr>
        <td>秦</td>
        <td>嬴政</td>
    </tr>
    <tr>
        <td>汉</td>
        <td>刘邦</td>
    </tr>
</table>

7.列表标签

HTML 列表(List)可以将若干条相关的内容整理起来,让内容看起来更加有条理

有序列表ol

html 复制代码
<!--有序列表:ol order list缩写-->
<ol>
    <li>有序1</li>
    <li>有序2</li>
</ol>

无序列表ul

html 复制代码
<!--无序列表:ul unordered list缩写-->
<ul>
    <li>无序1</li>
    <li>无序2</li>
</ul>

定义列表dl

html 复制代码
<!--定义列表:dl definition list缩写
            dt definition term缩写,标题
            dd definition description缩写,描述
-->
<dl>
    <dt>标题1</dt>
    <dd>标题1的描述</dd>
    <dt>标题2</dt>
    <dd>标题2的描述</dd>
</dl>

8.表单标签

表单属于 HTML 文档的一部分,其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件,用户通过修改表单中的元素(例如输入文本,选择某个选项等)来完成表单,通过表单中的提交按钮将表单数据提交给后端程序。

html 复制代码
<!--表单-->
<!--action属性:表示将表单数据提交的url,默认是当前页面,当姓名和年龄输入点击提交时,提交到当前网页-->
<!--http://localhost:63342/FrontEnd/HTML/%E6%A0%87%E7%AD%BE.html?username=kii&age=25-->
<!--input:表示定义输入框-->
<!--method:表示表单数据提交方式,主要是get和post方式-->
<!--    get:请求数据直接拼接在路径后面 ?username=kii&age=25,大小有限制-->
<!--    post:请求数据通过请求体传递 username=lisi&age=19, 大小无限制-->
<!--    如果要提交数据,必须添加name属性-->
<form action="" method="get">
    姓名:<input type="text" name="username" id="1">
    年龄:<input type="number" name="age" id="2">
    <input type="submit" value="get提交">
</form>
<form action="" method="post">
    姓名: <input type="text" name="username">
    年龄: <input type="text" name="age">
    <input type="submit" value="post提交数据">
</form>

9.音频标签

html 复制代码
<!-- 音频标签audio
    src: 设置视频资源路径
    controls: 播放控件 [注意: 当值和key一样的时候,可以省略值]
-->
 <audio src="./audio/news.mp3" controls></audio>

10.视频标签

html 复制代码
<!-- 视频标签
        src属性:视频路径
        controls属性:播放控件
-->
<video src="./video/news.mp4" controls width="950px" ></video>

11.HTML元素分类

HTML元素主要分为两个类别,块级元素和内联元素

块级元素

html 复制代码
通常是以新行来开始,块级元素主要包括div、h、table、p

内联元素

html 复制代码
通常不会以新行开始,内联元素主要包括span、a-

12.HTML布局

HTML4布局主要通过div实现

HTML5布局有很多其他标签:header、nav...稍微了解就行,具体使用可以查看手册

html 复制代码
<div>
    <li>HTML教程</li>
    <li>CSS教程</li>
    <li>JS教程</li>
    <li>Java教程</li>
    <li>Python教程</li>
</div>

13.内联框架

iframe:可以在网页中显示网页,可以设置width和height

html 复制代码
<iframe src="https://www.w3school.com.cn/" frameborder="0"></iframe>
>CSS教程</li>
    <li>JS教程</li>
    <li>Java教程</li>
    <li>Python教程</li>
</div>

13.内联框架

iframe:可以在网页中显示网页,可以设置width和height

html 复制代码
<iframe src="https://www.w3school.com.cn/" frameborder="0"></iframe>
相关推荐
前端进阶者1 分钟前
js通知提醒
前端·javascript
拖孩6 分钟前
微信群太多,管理麻烦?那试试接入AI助手吧~
前端·后端·微信
乌兰麦朵23 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Code季风23 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾24 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿25 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸25 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic26 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮27 分钟前
vite打包的简单配置
前端
Codebee27 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试