标签分为单标签和双标签
双标签,有开始标签和结束标签,如:<h1></h1>
单标签,只有一个标签,如:<br>
目录
文本格式化:加粗(strong、b)、倾斜(em、i)、下划线(ins、u)、删除线(del、s)
标题: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)
标签 | 标签 | 说明 |
---|---|---|
b | strong | 加粗 |
u | ins | 下划线 |
i | em | 倾斜 |
s | del | 删除线 |
<!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属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入单行文本 |
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属性值 | 说明 |
---|---|---|
button | submit | 提交按钮,点击之后提交数据给后台服务器 |
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:网页文章
字符实体
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
" | 引号 | " |
' | 撇号 | ' |
¢ | 分(cent) | ¢ |
£ | 镑(pound) | £ |
¥ | 元(yen) | ¥ |
€ | 欧元(euro) | € |
§ | 小结 | § |
© | 版权(copyright) | © |
<!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>
大于号:><br>
和号:&<br>
引号:"<br>
撇号:'<br>
分:¢<br>
镑:£<br>
元:¥<br>
欧元:€<br>
小结:§<br>
版权:©<br>
</body>
</html>