HTML标签

标签分为单标签和双标签

双标签,有开始标签和结束标签,如:<h1></h1>

单标签,只有一个标签,如:<br>

目录

标题:h1~h6

段落:p

换行:br

水平线:hr

文本格式化:加粗(strong、b)、倾斜(em、i)、下划线(ins、u)、删除线(del、s)

图片:img+src

相对路径和绝对路径

音频:audio+src

视频:video+src

超链接:a+href

列表标签

无序列表:ul+li

有序列表:ol+li

自定义列表:dl+dt、dd

表格:table+th、td

表单:form

输入:input+type

按钮:button

下拉菜单:select+option

文本域:textarea

文本:label

语义化标签

div:没有语义

span:没有语义

手机中使用的标签

字符实体


标题:h1~h6

  • 文字加粗
  • 文字变大,从h1 ~ h6 依次递减
  • 独占一行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

段落:p

  • 段落之间存在间隙
  • 独占一行
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落</title>
</head>

<body>
    <p>好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。</p>
    <p>好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。好好学习,天天向上。</p>
</body>

</html>

 

换行:br

  • 单标签

  • 让文字强制换行显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行</title>
</head>

<body>
    宫廷玉液酒<br>一百八一杯
</body>

</html>

水平线:hr

  • 单标签
  • 在页面中显示一条水平线
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平分割线</title>
</head>

<body>
    静夜思<hr>
    床前明月光,疑是地上霜。<br>
    举头望明月,低头思故乡。
    
</body>

</html>

文本格式化:加粗(strong、b)、倾斜(em、i)、下划线(ins、u)、删除线(del、s)

标签标签说明
bstrong加粗
uins下划线
iem倾斜
sdel删除线
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>

<body>
    普通文字效果<br><br>
    <strong>strong加粗</strong> <b>b加粗</b><br><br>
    <ins>ins下划线</ins> <u>u下划线</u><br><br>
    <em>em倾斜</em> <i>i倾斜</i><br><br>
    <del>del删除线</del> <s>s删除线</s>

</body>

</html>

图片:img+src

  • src:图片的路径
  • alt:图片无法正常显示的时候,显示的提示文字
  • title:鼠标悬停的时候显示的文字
  • width & height:宽度 和 高度(单位是数字)
    • 如果只设置了 width 或 height 中的一个,另一个没设置的会等比缩放(图片不变形)
    • 如果同时设置了 width 和 height,图片可能会变形

属性的注意:

  • 属性写在标签的内部
  • 一个标签可以有多个属性
  • 属性之间用空格隔开
  • 标签名与属性名之间也用空格隔开
  • 属性之间没有顺序之分
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片</title>
</head>

<body>
    <!-- alt:当图片无法正常显示的时候,显示的文本 -->
    <!-- title:鼠标悬停的时候,显示的文字 -->
    <img src="./001.jpg" alt="这是一个图片" title="鼠标悬停的时候显示的文字" width="400" height="300">

</body>

</html>

相对路径和绝对路径

相对路径 :从当前文件开始的路径

  • 当前目录:./
  • 上级目录:../

绝对路径:从盘符(Win)或从根目录(Mac、Linux)开始的路径

  • 网址也是绝对路径

音频:audio+src

  • src:音频文件的地址
  • controls:显示播放控件
  • autoplay:自动播放(部分浏览器不支持)
  • loop:循环播放
  • 目前支持 mp3、Wav、Ogg 三种格式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频</title>
</head>

<body>
    <!-- autoplay没有效果,不持支自动播放 -->
    <audio src="./music.mp3" controls autoplay loop></audio>

</body>

</html>

视频:video+src

  • src:视频的路径
  • controls:显示播放控件
  • autoplay:自动播放(谷歌浏览器中需要配合 muted 实现静音播放)
  • loop:循环播放
  • muted:静音播放
  • 视频标签目前支持 mp4、WebM、Ogg 三种格式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频</title>
</head>

<body>
    <!-- src:视频文件地址 -->
    <!-- controls:显示控制面板 -->
    <!-- autoplay + muted:自动静音播放 -->
    <!-- loop:循环播放 -->
    <!-- width:设置大小 -->
    <video src="./video.mp4" controls autoplay loop muted width="400"></video>

</body>

</html>

超链接:a+href

  • href:要跳转的地址(如果还不知道要跳转的地址,可以先使用 #
  • target:新页面的打开方式
    _blank:在新页面打开
    _self:在当前页面打开(默认)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>

<body>
    <!-- href:跳转的地址 -->
    <!-- target:新页面的打开方式 -->
    <a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
</body>

</html>

列表标签

无序列表:ul+li

标签名说明
ul表示无序列表的整体,用于包裹标签名
li表示无序列表的每一项,用于包含每一行内容
  • ul 标签中只允许包含 li 标签
  • li 标签可以包含任意内容
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>

<body>
    <!-- 无序列表 -->
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
</body>

</html>

 

有序列表:ol+li

标签名说明
ol表示有序列表的整体,用于包裹标签
li表示有序列表的每一项,用于包含每一行的内容
  • ol 标签中只允许包含 li 标签
  • li 标签可以包含任意内容
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>

<body>
    <!-- 有序列表 -->
    <ol>
        <li>张三:100</li>
        <li>李四:80</li>
        <li>王五:60</li>
    </ol>
</body>

</html>

 

自定义列表:dl+dt、dd

标签名说明
dl表示自定义列表的整体,用于包裹 dt / dd 标签
dt表示自定义列表的主题
dd表示自定义列表的对应主题的每一项内容
  • dl 标签中只允许包含 dt / dd 标签
  • dt / dd 标签可以包含任意内容
  • dd 前会默认显示缩进效果
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表</title>
</head>

<body>
    <!-- 自定义列表 -->
    <dl>
        <!-- dt:自定义列表的主题 -->
        <dt>帮助中心</dt>
        <!-- dd:自定义列表主题下的每一项 -->
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>

        <dt>服务支持</dt>
        <dd>售后政策</dd>
        <dd>自助服务</dd>
        <dd>相关下载</dd>
    </dl>
</body>

</html>

 

表格:table+th、td

标签名说明
table表格标签,可用于包裹多个 tr
caption表格标题
tr表格每行,可用于包裹  th / td
th表头单元格,可用于包裹内容
td表格单元格,可用于包裹内容
  • 表格的嵌套关系:table > tr > th、td 
  • table 的属性
    • border:表格线的宽度(单位是数字)
    • width:表格的宽度(单位是数字)
    • height:表格的高度(单位是数字)
  • td 的属性
    • colspan:跨列合并
    • rowspan:跨行合并
  • 合并单元格
    • 1、明确要合并的单元格
    • 2、保留最左上单元格的内容,删除其余单元格
    • 3、给保留的单元格设置 colspan 和 rowspan 属性
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>

<body>
    <!-- table:表格 -->
    <!-- border:边框线 -->
    <!-- width & height:表格的宽度和高度 -->
    <table border="1" width="300" height="200">
        <!-- caption:表格标题 -->
        <caption>成绩单</caption>

        <!-- tr:表格的每一行 -->
        <tr>
            <!-- th:表头单元格 -->
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>

        <tr>
            <!-- td:表格单元格 -->
            <td>小明</td>
            <!-- rowspan:跨行合并 -->
            <td rowspan="2">100</td>
            <!-- colspan:跨列合并 -->
            <td colspan="2">80</td>
            <!-- <td>80</td> -->
        </tr>

        <tr>
            <td>小红</td>
            <!-- <td>100</td> -->
            <!-- 跨行、跨列合并 -->
            <td colspan="2" rowspan="2">90</td>
            <!-- <td>90</td> -->
        </tr>

        <tr>
            <td>小绿</td>
            <td>80</td>
            <!-- <td>90</td> -->
            <!-- <td>90</td> -->
        </tr>
    </table>
</body>

</html>

 

表单:form

  • 登录、注册、搜索的时候,会用到表单标签
  • action:表单提交到的地址

输入:input+type

  • input标签可以通过 type 属性值的不同,展示不同效果
标签名type属性值说明
inputtext文本框,用于输入单行文本
password密码框,用于输入密码
radio单选框,用于多选一
checkbox多选框,用于多选多
file文件选择,用于文件上传
submit提交按钮,用于提交表单
reset重置按钮,用于重置表单
button普通按钮,默认无功能,配合 js 添加功能
  • input 其他属性
    • placeholder:默认提示文本(可以用在文本框和密码框中)
    • radio:单选框,name属性相同的radio是同一组单选框
    • chechbox:多选框,name属性相同的checkbox是同一组多选框
    • name:分组,有相同name属性的单选或多选框为一组
    • checked:默认选中项,可以用在单选和多选中
    • multiple:多文件上传,配合type=‘file’一起使用
    • value:用于更改按钮的显示文字(submit、reset、button)

按钮:button

标签名type属性值说明
buttonsubmit提交按钮,点击之后提交数据给后台服务器
reset重置按钮,点击之后恢复表单默认值
button普通按钮,默认无功能,配合 js 添加功能
  • 谷歌浏览器中 button 默认是提交按钮
  • button 标签是双标签,更便于包裹其他内容:文字、图片等

下拉菜单:select+option

  • 下拉菜单,就是提供多个选项的表单控件
  • select :下拉菜单的整体
  • option:下拉菜单的每一项(select的子标签)
  • selected:下拉菜单的默认选中项(option 的属性)

文本域:textarea

  • textarea:文本域,可以用来在网页中输入多行文本
  • 属性
    • cols:规定可文本域可见宽度
    • rows:规定了文本域可见行数
  • 注意
    • 右下角可以拖动改变大小
    • 实际开发中针对与样式效果,推荐使用css设置

文本:label

  • 可以用来绑定 单选 / 多选 和文字,增大点击范围
  • 方式一
    • 1、单选 / 多选 标签指定 id
    • 2、label 标签包裹文字,for 属性与单选 / 多选 指定的 id 属性值相同
  • 方式二
    • 使用 label 标签,包裹 单选 / 多选 按钮和文字(单选 / 多选按钮,不要for属性

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>

<body>
    <!-- form:表单标签 -->
    <form action="#">
        <!-- text:文本框,写什么就显示什么 -->
        姓名:<input type="text" placeholder="请输入姓名">
        <br><br>
        <!-- password:密码框,输入的内容以圆点加密的形式显示 -->
        密码:<input type="password" placeholder="请输入密码">
        <br><br>
        性别:
        <!-- radio:单选框,name属性相同的radio是同一组单选框,只有一个可以被选中 -->
        <!-- label:可以用来绑定选个框和文本,增大点击范围 -->
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <label><input type="radio" name="gender" checked>女</label>
        <br><br>
        爱好:
        <!-- checkbox:多选框 -->
        <!-- checked:默认选中项 -->
        <label><input type="checkbox" name="hobby" checked>足球</label>
        <label><input type="checkbox" name="hobby">篮球</label>
        <label><input type="checkbox" name="hobby">乒乓球</label>
        <br><br>
        <!-- file:文件上传 -->
        <!-- multiple:多文件上传,可以同时上传多个文件 -->
        文件:<input type="file" multiple>
        <br><br>
        城市:
        <!-- select:下拉列表 -->
        <select>
            <!-- option:下拉列表的每一项 -->
            <!-- selected:默认选中项 -->
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option selected>天津</option>
        </select>
        <br><br>
        个人简介:
        <br><br>
        <!-- textarea:文本框,可以输入多行文本 -->
        <textarea cols="30" rows="5" placeholder="请介绍一下自己"></textarea>
        <br><br>
        <!-- submit:提交表单,默认文字是提交 -->
        <input type="submit" value="注册">
        <!-- reset:重置表单,默认文字是重置 -->
        <input type="reset" value="重新填写">
        <!-- button:自定义按钮 -->
        <!-- value:可以用来修改按钮的显示文字,适用于submit、reset、button -->
        <input type="button" value="自定义按钮">
        <br><br>
        <!-- button:按钮 -->
        <button type="submit">btn提交</button>
        <button type="reset">btn重置</button>
        <button type="button">btn自定义</button>
    </form>
</body>

</html>

语义化标签

做网页布局用的,很常用

div:没有语义

  • 一行只显示一个(独占一行)

span:没有语义

  • 一行可以显示多个
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化标签</title>
</head>

<body>
    <!-- div:独占一行 -->
    <div>这是div标签</div>
    <div>这是div标签</div>
    <br>
    <!-- span:一行可以显示多个 -->
    <span>这是span标签</span>
    <span>这是span标签</span>
</body>

</html>

手机中使用的标签

  • header:网页头部
  • nav:网页导航
  • footer:网页底部
  • aside:网页侧边栏
  • section:网页区块
  • article:网页文章

字符实体

显示结果描述实体名称
 空格&nbsp;
<小于号

&lt;

>大于号

&gt;

&和号

&amp;

"引号

&quot;

'撇号

&apos;

¢分(cent)

&cent;

£镑(pound)

&pound;

¥元(yen)

&yen;

欧元(euro)

&euro;

§小结

&sect;

©版权(copyright)&copy;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实体字符</title>
</head>

<body>
    空格:&nbsp;<br>
    小于号:&lt;<br>
    大于号:&gt;<br>
    和号:&amp;<br>
    引号:&quot;<br>
    撇号:&apos;<br>
    分:&cent;<br>
    镑:&pound;<br>
    元:&yen;<br>
    欧元:&euro;<br>
    小结:&sect;<br>
    版权:&copy;<br>
</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值