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-写在后面
这是跟着李立超老师学习的留下的笔记,有错误的地方还请多多担待,这些笔记用来复习之前学过的知识点,希望对大家有用!