谷歌浏览器推出的几种格式
webp 图片
webm 视频
1. html基本结构
<标签(开始标签)>标签的内容</标签(结束标签)>
<html>
<!-- 这里是HTML注释
<html> 是根标签，所有的内容都应该在它里面
--->
<head>
<title>这里的内容不会出现在页面上，而是标签中</title>
</head>
<body>
<h1></h1>
<h2></h2>
...
<h6></h6>
<!--
标签一般成对出现，但是存在一些自结束标签
-->
<p></p>
<p></p>
<img> //自结束标签
<img /> //自结束标签
<input> //自结束标签
<input /> //自结束标签
</body>
</html>
2. meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<!--
meta标签用于设置元数据
charset 指定字符集
name 指定数据名称
content 指定数据内容
-->
<meta charset="UTF-8">
<meta name="keywords" content="HTML5,前端,CSS3">
<!--
keywords 表示网页关键字
可以同时指定多个关键字，关键字之间使用英文逗号分隔
-->
<meta name="description" content="这是一个非常不错的网站">
<!--
description 用于指定网站的描述
该描述会显示在搜索引擎的搜索结果中
-->
<title>实体</title>
<!--
title标签中的内容会显示在浏览器标签页上
还会作为搜索结果的超链接上的文字显示
-->
<meta http-equiv="refresh" content="3,url=https://www.baidu.com">
<!--
http-equiv会将页面重定向到另一个网站
上面的语句表示3s之后自动跳转到百度的主页
http-equiv 还有其它用法，请参考：
https://www.iteye.com/blog/kinglyhum-827807
-->
</head>
<body>
<!--
在网页中编写的多个连续空格默认情况下会自动被浏览器解析为一个空格
在html中有些时候不能直接书写一些特殊符号
比如：多个连续的空格、大于号、小于号
如果想要在网页中书写这些特殊符号，则需要使用html中的实体(转义字符)
实体的语法：“&实体的名字;”
Example：
空格
>大于
<小于
©版权符号
-->
<p>今天天气真不错。</p>
</body>
</html>
3. 语义标签1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
在网页中，HTML专门用来负责网页结构
因此在使用html标签时，应该关注的是标签的语义，而不是它的样式
标题标签：
h1 ~ h6 一共有6及标签
重要性依次递减，h1的重要性仅次于title标签，一般情况下一个网页里面只会有一个h1
一般情况下只会用到h1~h3，h4~h6很少用到
在页面中独占一行的元素，称为块元素(block element)
标题标签和p标签都是块元素
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--
p标签标示页面中的一个段落
-->
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
<!--
em标签用于表示语音寓意的一个加重(斜体)
strong标签(加粗)
在页面中不会独占一行的元素称为行内元素(inline element)
-->
<p>今天天气<em>真</em>不错</p>
<p>你今天必须要<strong>完成</strong>作业</p>
<!--
blockquote标签(长引用)
q标签(短引用，自带双引号)
-->
<p>鲁迅说：</p>
<blockquote>
这句话我从来没说过。
</blockquote>
<p>子曰：<q>学而时习之，不亦说乎。</q></p>
<!--
br标签：换行
-->
<br><br><br>
<p>换行了</p>
</body>
</html>
4. 语义标签强调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
块元素(block element)
- 在网页中，一般通过块元素对页面进行布局
行内元素(inline element)
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本上什么都能放，但是有个例外：
- p元素中不能放任何的快元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如： 标签写在了根元素外部
p元素中嵌套了块元素
根元素中出现了初head和body以外的子元素
。。。
-->
<p>
<h1>haha</h1>
</p>
</body>
</html>
<h1>我就要写在html标签的外部</h1>
4.2 查看html源码在浏览器内存中的位置
查看网页在内存中的结构。
查看浏览器是否对不符合规范的html源码进行了纠正：
F12->Elements
5. 语义标签2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
布局标签(结构化语义标签)
-->
<!--
header 表示网页的头部(顶部)，也可以表示网页中某一个部分的顶部
main 表示网页的主体部分(一个页面中只会有一个)
footer 表示网页的底部，也可以标示网页中某一个部分的地步
nav 表示网页中的导航
aside 表示网页中和主体相关的其它内容(侧边栏)
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用
div 没有语义，就用来表示一个区块，目前来讲 div 还是我们主要的布局元素
span 行内元素，没有任何语义，一般用于在网页中选中文字
-->
<header>aa</header>
<main>bb</main>
<footer>cc</footer>
<nav>dd</nav>
<aside>ee</aside>
<section>ff</section>
<div>ee</div>
</body>
</html>
6. 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
列表(list)
html 中的列表一共有三种
1、有序列表 //用的最多
2、无序列表 //基本不用
3、定义列表 //用的很少
有序列表，使用ol标签来创建有序列表，使用li来表示列表项
无序列表，使用ul标签来创建无序列表，使用li来表示列表项
定义列表，使用dl标签来创建定义列表，使用dt来表示定义的内容、使用dd来对内容进行解释说明
列表中可以互相嵌套
-->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<dl>
<dt>结构</dt>
<dd>结构标识网页的结构，用来规定网页中哪里是标题，哪里是段落</dd>
<dt>表现</dt>
<dt>行为</dt>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-2-1</li>
<li>aa-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
7. 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SuperLink</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到其它页面
或者是当前页面的其它位置。
使用 a 标签来定义超链接
属性:
href 指定跳转的目标路径
- 它的值可以是一个外部网站的地址
- 也可以是一个内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套任何元素，除了a元素
-->
<a href="https://www.baidu.com">百度</a>
<!--
这里的“semantic_label.html”和当前的html文件处于同一目录下，因此可以直接写文件名即可
-->
<a href="semantic_label.html">超链接2</a>
</body>
</html>
7.1 超链接增强版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#bottom">去底部</a>
<!--
点击超链接时，打开一个新的标签页而不是当前页跳转的方法：
target 属性，用来指定超链接打开的位置
可选值：
_self: 默认值，在当前页打开超链接
_blank: 在一个新的标签页中打开超链接
标签的id属性：
每一个标签都可以添加一个id属性，用来唯一标识一个标签
href="#标签id" 可以生成一个跳转到指定标签位置的超链接
href="javascript:;" 可以生成一个无法跳转到任何位置的超链接
-->
<a href="./webStudy_02.html" target="_blank">webStudy_02</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet perspiciatis corrupti, soluta unde laudantium nihil, explicabo, laboriosam eos quia magnam repellat? Veniam porro dicta magni sapiente amet vero, dolore sequi?</p>
<a id="bottom" href="#">回到顶部</a>
<br>
<a href="javascript:;">这是一个无法跳转到任何位置的超链接</a>
</body>
</html>
8. 图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
img 标签用于向当前页面中引入一个外部图片
这是一个自结束标签
img 这种元素属于替换元素，介于行元素和块元素之间
src 属性指明了一个路径或者链接
alt 属性是对图片的一个描述，这个描述默认情况下不会显示，但是有些浏览器会在图片无法加载时显示
如果不写 alt 属性，则图片不会被搜索引擎所收录
width 图片的宽度（单位是像素）
height 图片的高度
<宽度和高度如果只修改了一个，另一个会等比例缩放>
<一般情况下在pc端，不建议修改图片的大小>
<在移动端，经常需要对图片进行缩放（主要是大图缩小）>
图片的格式：
jgp(jpeg) -- 支持的颜色比较丰富，不支持透明效果和动画
一般用来显示照片
git -- 支持的颜色比较少，支持简单透明和动图
颜色单一的图片，动图
png -- 支持的颜色丰富，支持复杂透明，不支持动图
颜色丰富，复杂透明图片(专为网页而生)
webp -- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
-- 它具备其它图片格式的所有优点，而且图片还特别小
-- 致命缺点：兼容性不好
base64 -- 将图片使用base64编码，这样可以将图片转化为字符，通过字符的形式来引入图片
-- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样的用小的，效果不一样的，用效果好的。
-->
<img width="200" src="./sources/微信图片_20200710163415.jpg">
</body>
</html>
9 内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe</title>
</head>
<body>
<!--
内联框架用于向当前页面中引入一个其它页面
src 制定引入网页的链接/路径
frameborder 指定是否有边框，0表示无边框，1表示有边框
内联框架中的资源不会被搜索引擎所关注
-->
<iframe src="https://www.baidu.com/" width="800" height="600" frameborder="0"></iframe>
</body>
</html>
10 音频和视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio and Video</title>
</head>
<body>
<!--
audio 标签用来向页面中引入一个外部的音频文件
音视频文件引入时，默认不允许用户自己控制播放停止
属性：
controls 是否允许用户控制播放(这是一个没有值的属性，存在即表示允许)
autoplay 自动播放
- 如果设置了autoplay，则音乐在打开页面时，音乐会自动播放，但是目前大部分浏览器都不会对音乐进行自动播放
- 播放过以后再刷新就会自动播放。
loop 音乐是否循环播放
-->
<!--
<audio src="./sources/周杰伦 - 青花瓷.mp3" controls autoplay loop></audio>
-->
<!--
下面的写法，支持播放器的浏览器就会显示并且播放音频，不支持的浏览器则会忽略相关的标签，但是会显示文字
另外，下面这种写法在使用资源时，可以起到一个兼容性的效果
多个音频文件并不会同时播放，按照顺序优先选择，如果不支持，则会向下找
-->
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./sources/周杰伦 - 青花瓷.mp3">
<!--
如果支持上面写法的浏览器，就会在走到embed之前就会停止，如果是IE8等不支持audio标签的浏览器，就会走到embed这里
-->
<!--
IE8支持的写法
type 指定文件类型、audio表示音频这个大类、mp3表示具体的文件格式
同时为避免出现控制界面特别小的尴尬情况，我们还需要指定width和height
-->
<embed src="./sources/周杰伦 - 青花瓷.mp3" type="audio/mp3" width="200" height="100"><source src="./sources/周杰伦 - 青花瓷.mp3">
</audio>
<!--
使用 video 标签来向网页中引入一个视频，用法和audio类似
-->
<video controls>
<!--<source src="./sources/01 回顾-基本类型.webm">-->
<source src="./sources/01 回顾-基本类型.mp4">
<embed src="./sources/01 回顾-基本类型.mp4" type="video/mp4">
</video>
<!--
音视频是比较耗硬盘和带宽的，可以将其上传到第三方的音视频网站上，然后在里面点击分享，然后复制通用代码粘贴到自己的网页中，即可
-->
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=m0034lj5r3t" allowFullScreen="true"></iframe>
</body>
</html>
11. 表格
11.1 表格基础
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>Table</title>
</head>
<body>
<!--
在网页中通过table标签来创建一个表格
-->
<table border="1" width='50%' align='center'>
<!--
在table中使用tr表示表格中的一行，有几个tr就有几行
在tr中使用td表示一个单元格
如果要一个单元格占两个格子，需要指定其colspan属性
-->
<tr>
<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>
<!--
colspan 横向合并单元格
-->
<td colspan="2">C4</td>
</tr>
</table>
</body>
</html>
11.2 长表格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>长表格</title>
</head>
<body>
<table border='1' width='50%' align='center'>
<!--
可以将表格分成三个部分
头部 thead 可以简写成th
主体 tbody 可以简写成tb
地步 tfoot 可以简写成tf
-->
<thead>
<tr>
<td>日期</td>
<td>收入</td>
<td>支出</td>
<td>合计</td>
</tr>
</thead>
<tbody>
<tr>
<td>2020.07.25</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>2020.07.26</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>0</td>
</tr>
</tfoot>
</table>
</body>
</html>
12. 表单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>表单</title>
</head>
<body>
<!--
表单
在生活中表单用于提交数据
在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
使用form标签来创建表单
form 的属性
action 必选，指定表单提交的服务器的地址
-->
<form action="./target.html">
<!--
添加表单项
-->
<!--
文本框
注意：数据要提交到服务器中，必须要为元素指定一个name属性值
-->
文本框<input type="text" name='UserName'>
<br>
密码框<input type="password" name='Password'>
<!--
单选按钮
互斥的单选按钮必须有一个相同的name属性
这种选择框必须要指定一个value属性，最终会作为用户填写的值传递给服务器
check 可以将单选按钮设置为默认选中
-->
<br>
单选按钮 <input type="radio" name='a' value='v'>
<input type="radio" name='a' value='v' checked>
<br>
<!--
多选框
-->
多选框<input type="checkbox" nam='test' value='1'>
<input type="checkbox" name='test' value='2'>
<input type="checkbox" name='test' value='3'>
<br>
<!-- 下拉列表 -->
<select name="selectTest" id="">
<option value="i">选项1</option>
<option value="ii">选项2</option>
<option value="iii">选项3</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value='注册'>
</form>
</body>
</html>
12.1 按钮表单项
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>表单按钮</title>
</head>
<body>
<form action="./target.html">
<!--
浏览器会自动记住输入框中曾经输入过的内容，下次再使用该输入框时，会有自动补全提示
通过设置 autocomplete='off'可以关闭自动补全，当它卸载form中时，所有输入框的自动补全都会关闭
readonly 将表单项设为只读，数据会提交
disabled 将表单项设为禁用，数据不会提交
autofocus 设置表单项自动获取焦点
-->
<input type="text" name='UserName' value='Hello HTML' autocomplete='off'>
<input type="text" name='UserName' autofocus>
<br>
<input type="submit">
<input type="reset">
<input type="button" value='按钮'>
<br>
<button type='submit'>提交</button>
<button type='reset'>重置</button>
<button type='button'>按钮</button>
<br>
<input type='color'></form>
</body>
</html>
13. 设置网站图标
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>网站图标</title>
<link rel="icon" href="icon_path_link">
</head>
<body>
</body>
</html>
14. 代码压缩
为了访问速度，项目上线之前需要进行代码压缩，去掉所有多余的字符。
15 less
15.1 基础
vscode中安装Easy Less插件，然后编写的less文件在保存时会自动生成一份css文件。
// less中的单行注释，注释用的内容不会被解析到css中
/* css注释风格，此种写法的注释会被解析到css文件中 */
body {
background-color: #bbffaa;
}
// 变量，可以在变量中存储一个任意的值，并且我们可以在需要时任意的修改变量的值
// 变量的语法 @varName:varValue
@a:100px;
.box5 {
// 使用变量时，如果是直接使用，则以 @varName 的形式使用即可
width: @a;
}
// 作为类名或者一部分值使用时， @{varName} 的形式使用
@c:box6;
.@{c} {
width: @a;
background-color: url("@{c}/1.png");
}
@d:200px;
@d:300px;
div {
// 变量发生重名时，会优先使用比较近的变量
@d:115px;
width: @d;
height: @e;
}
// 可以在变量声明前就使用该变量
@e:335px;
div {
width: 300px;
// 新版语法
height: $width;
}
15.2 进阶用法——mixins
.box1 .box2 {
color: red;
}
.box1 > .box3 {
color: chocolate;
}
.box1hover {
color: orange;
}
.p1,
.p2 {
width: 100px;
height: 200px;
}
.p2 {
color: red;
}
.p3 {
width: 100px;
height: 200px;
}
.p5 {
width: 100px;
height: 100px;
background-color: #bbffaa;
}
15.3 mixins进阶
// 混合函数 在混合函数中可以直接设置变量，并且还可以传递默认值
.test(@w:100px, @h: 200px, @bg-color: chocolate) {
width: @w;
height: @h;
border: 1px solid @bg-color;
}
div {
// 调用混合函数，按顺序传递参数
.test(200px, 300px, red);
// 传值时指定参数
.test(@h: 200px, @w: 300px, @bg-color: yellow);
}
// 预定义的一些函数
// average(color1, color2) 返回两个颜色的平均值
// darken(color, percent) 将color加深percent之后返回
15.4 进阶用法——其它less文件的引入和less调试
// @import可以将其它less引入到当前文件
@import "syntax2.less";
.box1 {
// 在less中所有的数值都可以进行运算
// + - * /
width: 100px + 100px;
height: 100px * 2;
background-color: chocolate;
}
// 由less文件编译成的css文件不方便进行调试，因此可以设置 Easy Less 的配置文件，使得可以再生成一个less和css的映射关系的文件
// 将下面的代码添加到less配置文件相应的位置上，然后保存即可
// "less.compile": {
// "compress": true,
// "sourceMap": true,
// "out": true,
// },
16. flex 弹性盒
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>flex弹性盒</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
ul {
width: 800px;
border: 10px red solid;
display: flex;
/*
flex-direction 指定容器中弹性元素的排列方式
可选值
row 默认值，弹性元素在容器中水平排列(左向右) 主轴自左向右
row-recerse 弹性元素在容器中反向水平排列 主轴自右向左
column 弹性元素在容器中纵向排列(自上向下) 主轴自上向下
column 弹性元素在容器中反向纵向排列 主轴自下向上
主轴：
弹性元素的排列方向称为主轴
侧轴：
与主轴垂直方向的称为侧轴
*/
/* flex-direction:column; */
}
li {
width: 100px;
height: 100px;
background-color: orange;
font-size: 50px;
text-align: center;
line-height: 100px;
/*
弹性元素的属性：
flex-grow 指定弹性元素的伸展系数，默认为0(不伸展)
当父元素有多余空间时，子元素该如何伸展
flex-grow 还能为每一个元素分别设置
*/
flex-grow: 1;
/*
flex-shrink 收缩系数
当父元素中的空间不足以容纳所有的子元素时。如何对子元素进行收缩
用法和flex-grow基本一致
*/
flex-shrink: 0;
}
li:nth-child(2) {
background-color: chocolate;
}
li:nth-child(3) {
background-color: darkcyan;
}
</style>
</head>
<body>
<!--
flex(弹性盒、伸缩盒)
是css中又一种布局手段，它主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变
弹性容器：
要使用弹性盒，必须先将一个元素设置为弹性容器
可以通过display完成设置
display:flex 设为块级弹性容器
display:inline-flex 设为行内的弹性容器
弹性元素
弹性容器的直接子元素是弹性元素(弹性项)
一个元素可以同时是弹性容器和弹性元素
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
扫一扫
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
