HTML常用知识点
01-实体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--浏览器将多个空格默认为一个空格
在HTML中不能直接书写一些特殊字符，比如
连续的空格，字母两侧的大于、小于符号
如果我们需要在网页中书写这些符号，这时候就要用到html中的实体（转义字符）
实体的语法：
空格
>大于符号
<小于符号
©版权符号
-->
<p>今天 天气不错</p>
</body>
</html>
02-meta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字使用，隔开
description 用于指定网站的描述
<meta name="description" content="专业的综合网上购物商城">
<meta name="Keywords" content="1，2，2，3">
<meta name="description" content="这是一个非常不错的网站">
-->>
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个很不错的网站">
<!--
<meta http-equiv="refresh" content="3;url=https://www.mozila.org">
-->>
<title>Document</title>>
</head>
<body>
</body>
</html>
03-语义化标签1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是他的样式
标题标签：
h1-h6一共有六级标题，h1最终要，h6最不重要
在页面中独占一行的元素称为块元素（block element）
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h1>回乡偶书（两首）</h1>
<h2>其一</h2>
<p>今天<em>真</em>天气不错！</em></p>
<!--
em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素
-->
<!--
p标签表示页面中的一个段落
-->
<!--
<q>表示短引用
<blockquote>表示长引用
<br>表示换行
-->
<p>一个段落</p>
孔子曰<blockquote>朽木不可雕也</blockquote>
鲁迅说<q>时间就是生命</q>
<!--强调标签 strong-->
<br>
<strong>你好</strong>
</body>
</html>
04-语义化标签2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
块元素(block element)
- 在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
- 行内元素主要包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中方块元素
- 块元素中基本什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在根元素的外部
p元素中嵌套块元素
根元素中出现了除了head和body以外的子元素
-->
<p>
<h1>哈哈</h1>
</p>
</body>
</html>
<h1>就写在外面</h1>
05-语义化标签3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
-->
<!--
header 表示网页的头部
main 表示网页的主体部分（一个页面中只会有一个main）
footer 表示网页的底部
nav 表示网页中的导航
aside 和主题相关的内容（侧边栏）
article 表示一个文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何的语义，一般用于网页中选中文字
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
</body>
</html>
06-列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
列表 （list）
1、尺子
2、铅笔
3、橡皮
在html中，列表有三种：
1、有序列表
2、无序列表
3、定义列表
有序列表：
使用ol标签创建无序列表，使用li表示列表项
无序列表：
使用ul标签来创建无序列表，使用li表示列表项
定义标签：
使用dl标签创建，使用dd来解释说明
列表之间可以嵌套
-->
<ul>
<li>劫后</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>行为</dl>
<dd>行为分为好坏</dd>
<ul>11
<ul>22
<ul>33</ul>
</ul>
</ul>
</body>
</html>
08-超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
超链接可以跳转到其他页面或者是当前页面的其他的位置
使用a标签来定义超链接
属性：
href 指定跳转的目标路径
可以是一个外部网站的地址
也可以写内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套除他自身以外的元素
-->
<a href="https:www.baidu.com">01</a>
<a href="07-列表.html">02</a>
</body>
</html>
09-超链接2
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!DOCTYPE html>
</head>
<body>
<!--
target 属性，用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在新的页面中打开超链接
-->
<a href="07-列表.html" target="_blank"> 超链接</a>
</body>
</html>
10-图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
img 这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有谢谢浏览器会图片无法加载时显示
搜索引擎会根据alt中内容来识别图片，如果不写alt属性则图片不会被搜索引擎所找到
width 图片的宽度（像素）
height 图片的高度
-宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg（jpg）
-支持的颜色比较丰富，不支持透明效果，不支持动图
- 一般用来显示照片
gif
-支持的颜色比较少，支持简单透明，支持动图
-颜色单一的图片，动图
png
- 支持的颜色比较丰富，支持复杂透明，不支持动图
- 颜色丰富，复杂透明图片（专为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他格式所有优点，而且文件特别小
- 缺点，兼容性不好
base64
-将图片使用base64编码，这样可以将图片转换为字符
- 一般都是一些需要和网页一起加载的图片才会用base64
效果一样，用小的。
效果不一样，用效果好的。
-->
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3564333316,2149460339&fm=26&gp=0.jpg" alt="">
</body>
</html>
11- 内敛框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
-->
<iframe src="https://www.qq.com" width="800" height="600 " frameborder="0"></iframe>
</body>
</html>
12-音视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
control 是否用户控制播放
autoplay 音频文件是否自动播放
- 如果设置autoplay 则音乐再打开页面时会自动播放
但目前来讲大部分浏览器都不能自动对音频进行播放
loop 音乐是否循环播放
-->
<audio src="./path/安家 第32集 2020-03-20 22-16-56.mp4" controls autoplay loop></audio>
<embed src="./path/安家 第32集 2020-03-20 22-16-56.mp4" type="">
<!--
使用video和audio一样
-->
<video src="">
<source src="./path/安家 第32集 2020-03-20 22-16-56.mp4">
<embed src="./path/安家 第32集 2020-03-20 22-16-56.mp4" type="video/mp4">
</video>
<iframe src="//player.bilibili.com/player.html?aid=671954725&bvid=BV1KU4y1p7Js&cid=305610379&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="800" height="600"> </iframe>
</body>
</html>
13-表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width='device-width', initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
在现实生活中，我们经常需要使用表格来创建一些格式化的数据：
课程表、人名单、成绩单。。。
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格
-->
<table border="1" width='50%' align="center">
<!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
<tr>
<!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<!-- rowspan 纵向的合并单元格 -->
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<!--
clospan 横向的合并单元格
-->
<td colspan="2">C4</td>
</tr>
</table>
</body>
</html>
14-长表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width='50%' align="center">
<!--
可以将一个表格分为三个部分：
头部 thead
主体 tbody
底部 tfood
th 表示头部的单元格
-->
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
</body>
</html>
15-表格的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 50%;
border: 1px black solid;
margin: 0 auto;
/* border-spacing 指定边框之间的距离 */
/* border-spacing: 0px; */
/* border-collapse: collapse; */
border-collapse: collapse;
}
td{
border: 1px black solid;
/* 默认情况下元素在td中是垂直剧居中的 可以通过vertical-align 来设置 */
vertical-align: middle;
text-align: center;
height: 100px;
}
/* even选中偶数行2n，odd选中奇数行2n+1 */
/*
如果表格中没有使用tbody而是直接使用tr
那么浏览器会自动创建一个tbody，并且将tr全都放在tbody中
！！tr不是table的子元素
*/
tbody > tr:nth-child(odd){
background-color: #bfc;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 将元素设置为单元格 */
display: table-cell;
/* text-align: center; */
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>16</td>
<td>女儿国</td>
</tr>
</table>
</body>
</html>
16-表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
表单：
- 在现实生活中表单用于提交数据
- 在网页中也可以使用表单、网页中的表单用于将本地的数据提交给远程的服务器
- 使用form标签来创建一个表单
-->
<!--
form的属性
| action 表单要提交的服务器的地址
-->
<form action="target.html">
<!--
文本框
注意：数据要提交到服务器中，必须为元素指定一个name属性
-->
文本框<input type="text" name="hello">
<br><br>
<!-- 密码框 -->
密码框<input type="password" name="password">
<br><br>
<!-- 单选按钮
- 像这种选择框，必须要制定一个value属性，value属性最终会作为用户填写的传给服务器
- checked 可以将单选按钮设置为默认选中
-->
单选按钮<input type="radio" name="je" value="a">
<input type="radio" name="je" value="b" checked>
<br><br>
<!-- 多选框 -->
多选框 <input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">选项一</option>
<option value="ii" selected>选项二</option>
<option value="iii">选项三</option>
</select>
<br><br>
<!--
提交按钮
-->
<input type="submit" value="注册">
</form>
</body>
</html>
17-表单的补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="target.html" autocomplete="off">
<!--
antocomplete="off" 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点
-->
<input type="text" name="username" value="hello" readonly>
<br><br>
<input type="text" name="username" autofocus>
<br><br>
<input type="text" name="b">
<br><br>
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通的按钮 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
18-target
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>您的数据已经收到！</h1>
</body>
</html>
19-写在后面
这是跟着李立超老师学习的留下的笔记，有错误的地方还请多多担待，这些笔记用来复习之前学过的知识点，希望对大家有用！
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
