HTML(HTML (Hyper Text Markup Language)中文译为︰超文本标记语言。专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
HTML骨架标签由html标签(网页的整体)、head标签(网页的头部)、body标签(网页的身体)、title标签(网页的标题)组成。
HTML注释:
HTML标签的结构:
<head>
<title>title>
head>
<head>head>
<body>body>
<h1>1级标题h1>
<h2>2级标题h2>
<h3>3级标题h3>
<h4>4级标题h4>
<h5>5级标题h5>
<h6>6级标题h6>
<p>我是一段文字p>
<br>
<hr>
<b>加粗b>
<strong>加粗strong>
<u>下划线u>
<ins>下划线ins>
<i>倾斜i>
<em>倾斜em>
<s>删除线s>
<del>删除线del>
<img src ="" alt="">
src属性
alt属性
title属性
属性名:title
属性值:提示文本
注意点:title属性不仅可用于图片标签,还可以用于其他标签
width和height标签
属性名:width和height
属性值:宽度和高度
注意点:
绝对路径
相对路径
代码步骤:
下级目录:目录文件在下级目录中
代码步骤:< img src=“images/目标图片.gif”>
上级目录:目录文件在上级目录中
<audio src=" ./music.mp3" controls> audio>
属性名 | 功能 |
---|---|
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
<video src=" ./video.mp4" controls>video>
属性名 | 功能 |
---|---|
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需要配合muted实现静音播放) |
loop | 循环播放 |
<a href="./目标网页.html">超链接a>
href属性
属性名:href
属性值:目标网页的路径
显示特点:
target属性
属性名:target
属性值:目标网页的打开形式
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
空链接
<a href="#">空链接a>
标签名 | 说明 |
---|---|
ul | 表示无序列表的整体,用于包裹li标签 |
li | 表示无序列表的每一项,用于包含每一行的内容 |
<ul>
<li>榴莲li>
<li>香蕉li>
<li>苹果li>
ul>
标签名 | 说明 |
---|---|
ol | 表示有序列表的整体,用于包裹li标签 |
li | 表示无序列表的每一项,用于包含每一行的内容 |
<ol>
<li>C:100li>
<li>C++:95li>
<li>Java:80li>
ol>
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表的针对主题的每一项内容 |
<dl>
<dt>帮助中心dt>
<dd>账户管理dd>
<dd>购物指南dd>
dl>
标签名 | 说明 |
---|---|
table | 表格整体,可用于包裹多个tr |
tr | 表格每行,可以用于包裹td |
td | 表格单元格,可用于包裹内容 |
属性名 | 属性值 | 效果 |
---|---|---|
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
<table border="1" width="600" height="400">
<tr>
<td>姓名td>
<td>成绩td>
<td>评语td>
tr>
<tr>
<td>王兴唐td>
<td>100分td>
<td>优秀td>
tr>
<tr>
<td>百的类td>
<td>85分td>
<td>良好td>
tr>
table>
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表头单元格 | 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 |
<table border="1">
<caption><strong>学生成绩单strong>caption>
<tr>
<th>姓名th>
<th>成绩th>
<th>评语th>
tr>
<tr>
<td>张三td>
<td>100分td>
<td>真棒, 第一名td>
tr>
<tr>
<td>李四td>
<td>99分td>
<td>真棒, 第二名td>
tr>
<tr>
<td>王二td>
<td>78td>
<td>再接再厉,第三名td>
tr>
table>
标签名 | 名称 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
<table border="1">
<caption><strong>学生成绩单strong>caption>
<thead>
<tr>
<th>姓名th>
<th>成绩th>
<th>评语th>
tr>
thead>
<tbody>
<tr>
<td>张三td>
<td>100分td>
<td>真棒, 第一名td>
tr>
<tr>
<td>李四td>
<td>99分td>
<td>真棒, 第二名td>
tr>
tbody>
<tfoot>
<tr>
<td>王二td>
<td>78td>
<td>再接再厉,第三名td>
tr>
tfoot>
table>
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,将多行的单元格垂直合并 |
colspan | 合并单元格的个数 | 跨列合并,将多列的单元格水平合并 |
<table border="1">
<caption><strong>学生成绩单strong>caption>
<thead>
<tr>
<th>姓名th>
<th>成绩th>
<th>评语th>
tr>
thead>
<tbody>
<tr>
<td>张三td>
<td rowspan="2">100分td>
<td>真棒td>
tr>
<tr>
<td>李四td>
<td>真棒td>
tr>
tbody>
<tfoot>
<tr>
<td>总结td>
<td colspan="2">非常不错td>
tr>
tfoot>
table>
type属性值 | 说明 |
---|---|
text | 文本框,用于输入单行密码 |
password | 密码框,用于输入密码 |
radio | 单选框,用于多选一 |
checkbox | 多选框,用于多选多 |
file | 文件选择,用于之后上传文件 |
submit | 提交按钮,用于提交 |
reset | 重置按钮,用于重置 |
button | 普通按钮,默认无功能,之后配合js添加功能 |
文本框: <input type="text">
<br>
<br>
密码框: <input type="password">
<br>
<br>
单选框: <input type="radio">
<br>
<br>
多选框: <input type="checkbox">
<br>
<br>
上传文件: <input type="file">
文本框
属性名 | 说明 |
---|---|
placeholder | 占位符,提示用户输入内容的文本 |
(扩展)value属性和name属性作用的介绍
密码框
属性名 | 说明 |
---|---|
placeholder | 占位符,提示用户输入内容的文本 |
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
单选框
属性名 | 说明 |
---|---|
name | 分组。有相同name属性值的单选框为一组,一组中同时只能有一个被选中 |
checked | 默认选中 |
性别: <input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
<input type="checkbox" checked>
复选框
属性名 | 说明 |
---|---|
checked | 默认选中 |
文件选择
属性名 | 说明 |
---|---|
multiple | 多文件选择 |
<input type="file" multiple>
按钮
场景:在网页中显示不同功能的按钮的表单控件
type属性值:
标签名 | 说明 |
---|---|
submit | 提交按钮,点击之后提交数据给后端服务器 |
reset | 重置按钮,点击之后恢复表单默认值 |
button | 普通按钮,默认无功能,配合js添加功能 |
代码:
用户名: <input type="text">
<br>
<br>
密码: <input type="password">
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮">
标签名 | 说明 |
---|---|
submit | 提交按钮,点击之后提交数据给后端服务器 |
reset | 重置按钮,点击之后恢复表单默认值 |
button | 普通按钮,默认无功能,配合js添加功能 |
<button>我是按钮button>
<button type="submit">提交按钮button>
<button type="reset">重置按钮button>
<button type="button">普通按钮, 没有任何功能button>
<select>
<option>北京option>
<option selected>上海option>
<option>广州option>
<option>深圳option>
select>
<textarea cols="60" rows="30">textarea>
性别:
<input type="radio" name="sex" id="nan"> <label for="nan">男label>
<label><input type="radio" name="sex"> 女label>
普通文字
<div>这是div标签div>
<div>这是div标签div>
<span>这是span标签span>
<span>这是span标签span>
标签名 | 语义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 |  ; | |
< | 小于号 | & lt; |
> | 大于号 | & gt; |
& | 和号 | & amp; |
" | 引号 | & quot; |
‘ | 撇号 | & apos;(IE不支持) |
¢ | 分(cent) | & cent; |
£ | 磅(pound) | & pound; |
¥ | 元(yen) | & yen; |
€ | 欧元(euro) | & rueo; |
§ | 小节 | & sect; |
© | 版权(copyright) | & copy; |
® | 注册商标 | & reg; |
™ | 商标 | & trade; |
× | 乘号 | & times; |
÷ | 除号 | & divide; |
MDN Web Docs(旧称Mozilla Developer Network、Mozilla Developer Center,简称MDN)是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。
https://developer.mozilla.org/zh-CN/