昨天写的比较水，今天写真正内容了，争取结束HTML（只是争取）
1.1进制
十进制：满十进一，计数：0 1 2 3 4 5 6 7 8 9（十个数字 日常使用）
二进制：满二进一，计数：0 1（两个数字，只有0和1，计算机底层进制）
所有数据在计算机都是二进制。
8 bit = 1 byte 1024 byte =1 kb,以此类推1024MB=1GB
八进制：满八进一，计数：0 1 2 3 4 5 6 7（八个数，但是八进制不常用）
十六进制：满十六进一，计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 …1a 1b 1c。
十六进制辅助二进制，因为二进制很长，所以一般转换成16进制显示，如11111111（二进制）表示为16进制就是ff。
1.2字符编码
比如保存到计算机的时候，星星->1111100000010（瞎编的）
在读取的时候：1111100000010->星星。
所有数据在计算机都是以二进制存储，文字也是。
编码：将字符转换为二进制码的过程中为编码，如星星转换为1111100000010
解码：将二进制码转换为字符的过程中为解码，如1111100000010转化为星星
字符集（charset）：
编码和解码采用的规则就是字符集
乱码问题：
编码和解码采用字符集不同，比如拿我们的解密方式解读敌人的加密电报，就会得到一堆乱码。
计算机常见字符集：
ASCLL码
GBK
UTF-8（万国码，各个国家能看，不会乱码，默认编码格式）
GB2312（中国编码）
通过meta标签设置网页字符集：
<!DOCTYPE html><!--声明有助于浏览器正确显示网页，证明是h5版本-->
<!--网页中所有内容都要写在HTML根元素里-->
<html>
<head><!--head是头部，不会在网页直接出现，主要用来帮助浏览器解析网页-->
<meta charset="UTF-8"><!--设置编码格式为utf-8，防止出现乱码-->
<title>页面标题</title><!--网页标题，显示在浏览器标题栏-->
</head>
<body><!--表示网页的主体，网页所有可见内容都在body里-->
<h1>我的第一个标题</h1><!--网页一级标题-->
<p>我的第一个段落。</p>
</body>
</html>
HTML标签合集，忘了标签可以查。
这里是HTML标签查询（请点击）
引自菜鸟教程
1.3实体
HTML会忽略空格，代码里面空格很多在页面上它只会空一格。如图所示：
空格是
<!-- 大于小于号 ，正常写会被认为是标签-->
>
<!--大于号-->
<
<!--小于号-->
还有很多不能直接输出的东西就叫实体，这里提供一个查询地址。
这是菜鸟教程实体查询（请点击）
以上介绍的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鲁大学生网</title>
</head>
<body>
<!-- html会忽略直接空格 -->
<p>鲁大 学生网</p>
<!-- 大于小于号 ，正常写会被认为是标签-->
>
<!--大于号-->
<
<!--小于号-->
</body>
</html>
1.4 meta标签
这里直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta一般一般用于设置网页中的一些元数据，不是给用户看的，是便于浏览器解析的 -->
<meta name="keywords" content="html5,css3,前端，鲁大学生网">
<!-- 关键字，让别人更容易搜索你的网站 -->
<meta name="description" content="这是一个不错的网站">
<!-- 网站描述 -->
<meta http-equiv="refresh" content="3;url=http://daohang.xpwl.xyz/">
<!-- 重定向跳转到鲁大学生网工具导航页面，这里设置的是三秒，这个一般不常用 -->
<title>鲁大学生网</title>
</head>
<body>
</body>
</html>
1.5语义化标签
关注语义，但是没必要关注样式，这里举几个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鲁大学生网</title>
</head>
<body>
<!-- 标题标签 -->
<h1>鲁</h1>
<h2>大</h2>
<h3>学</h3>
<h4>生</h4>
<h5>网</h5>
<h6>鲁</h6>
<!-- 段落标签 -->
<p>表示段落</p>
<!-- 标题分组 -->
<hgroup>
<h1>鲁大学生网</h1>
<h2>隶属于鲁东大学</h2>
</hgroup>
<!-- 强调标签 -->
<p>鲁大学生网<strong>真的好</strong>社团</p>
<!-- 分块标签 -->
<header></header>
<!-- 网页头部 -->
<main></main>
<!-- 网页主体，一般只有一个 -->
<footer></footer>
<!-- 网页底部 -->
<nav></nav>
<!-- 网页导航 -->
<aside></aside>
<!-- 和主体相关的其他内容 -->
<article></article>
<!-- 文章 -->
<section></section>
<!-- 独立区块 -->
<div></div>
<!-- 表示区块，布局元素 -->
<span></span>
<!-- 行内元素，一般用于网页中选中文字 -->
</html>
<!-- 块元素：网页中通过块元素对页面进行布局 -->
<!-- 行内元素：主要用来包裹文字，一般块元素内放行内元素，p元素里不能放任何块元素 -->
标签速查推荐一个链接：
这是html标签速查（请点击）
1.6列表
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鲁大学生网</title>
</head>
<body>
<!--
列表
html里面三种列表
有序，无序，定义列表
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!-- 无序 -->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!-- 有序 -->
<dl>
<dt>结构</dt>
<dd>结构表示网页结构，结构用来规定网页那里是标题，哪里是段落</dd>
<dd>结构表示网页结构，结构用来规定网页那里是标题，哪里是段落</dd>
<dd>结构表示网页结构，结构用来规定网页那里是标题，哪里是段落</dd>
</dl>
<!-- 列表可以互相嵌套 -->
<ul>
<li>
<ul>
<li>
<li>
</li>
</li>
</ul>
</li>
</ul>
</body>
</html>
1.7超链接
直接上代码：
这代码我命名为7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鲁大学生网</title>
</head>
<body>
<!-- 跳转到其他页面，或者当前页面其他位置 -->
<!-- 超链接也是一个行内元素，在里面可以嵌套除了他自身外的任何元素 -->
<a href="http://daohang.xpwl.xyz/">鲁大学生网</a>
<a href="6.html">6.html</a>
<!-- herf后面的指定跳转路径可以是一个外部网站的地址，也可以是内部页面的地址 -->
<br>
<br>
</body>
</html>
只需要知道a href ="url"是跳转页面的就行
1.8相对路径和绝对路径
上面的http://daohang.xpwl.xyz/就是相对路径，相对路径很直观
下面来讲绝对路径
./表示当前文件所在目录，一般可省略
上面的./6.html和6.html就是一样的，因为我的7.html和6.html在一个文件夹下，所以能直接6.html
../表示当前文件所在目录的上一级目录
如一个html文件在path文件夹下，path文件夹里又有一个inner文件夹，inner文件夹里有target.html，要从1.html跳到target.html那么应该写./inner/target.html。
表示在当前文件夹下找inner文件夹，接着在inner文件夹里找terget.html
如图所示：
一个html文件在path文件夹下，path文件夹里又有一个inner文件夹
inner文件夹里有target.html
另一种情况：
要从1.html跳到2.html
需要../path/2.html，就可以实现跳转，这就是相对路径几种情况。
1.9新标签页打开以及超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鲁大学生网</title>
</head>
<body>
<!-- 新标签页打开 -->
<!-- target属性
_self 默认值，当前页打开链接
_blank 在一个新的窗口打开新链接
-->
<a href="6.html" target="_blank">链接</a>
<br>
<br>
<br>
<!-- 去底部用到ID属性 ，ID唯一，不能出现重复的ID-->
<a href="#ldxsw">去网页底部</a>
<!-- 这里就是去到ID为ldxsw的地方 -->
<br>
<a href="#p4">tiao</a>
<!-- 跳到ID为P4的那一行 -->
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p>ldxsw</p>
<p id="p4">ldxsw</p>
<p>ldxsw</p>
<!-- 回到顶部 -->
<a id="ldxsw" href="#">回到网页顶部</a>
</body>
</html>
2.0图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--当前页面引入外部图片 width是设置图片宽度，height是设置图片高度-->
<img width="500" height="300" src="./img/timg.jpg">
</body>
</html>
我的图片在img文件夹里
所以引用图片路径用./img/timg.jpg
然后就能显示：
2.1图片的格式
常见图片格式
jpg（jepg）：支持颜色较丰富，但是不支持透明，不支持动图，一般用来显示照片
gif：支持颜色较少，支持简单透明，支持动图，用来显示颜色变较少的动图
png：支持颜色丰富，支持复杂透明，但是不支持动图，颜色丰富，复杂透明图片
png是网页里面用的最多，效果一样，用小的，效果不一样，用好的。
gif最小，png最大，越小图片显示加载越快
webp：谷歌新推出专门用来表示网页中图片的一种格式
具备以上所有优点，而且还小。
致命问题：兼容性不好，在老IE浏览器里不能用
base64：将图片转换成编码，这样可以将图片转换为字符，一般都是需要和网页一起加载的时候才会用。
2.2内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 用于向当前页面引入显示其他页面 -->
<iframe src="https://www.baidu.com" width="500" height="400"></iframe>
</body>
</html>
这个其实并没有什么实际很大作用，就是在一个网页嵌入显示另一个网页
2.3音视频播放（用得不多）
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
2.4小结：
根据尚硅谷的教程，html已经结束啦，跟着看以及敲到这里，你相当于已经看了七个半小时的尚硅谷课程。目前对html也应该有了一定的了解，加油加油，明天继续！
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
