1、打开网页发现乱码鬼畜的现象：
image.png
1.1 这是编码的问题:
- 将源文件保存为UTF-8的编码格式（head部分）；
- 在HTML文档中指定相应的编码；
<meta charset="UTF-8">
1.2 meta元素的各种用法：
- 实现网页尺寸的“自适应”；（pc端、手机、平板打开的页面都是赏心悦目的）
<meta name="viewport"content="width=device-width.initial-scale=1.0">
-
搜索引擎优化（SEO）：
image.png
<!DOCTYPE html>
<html>
<head>
<title>懒得写（反正你们也看不到）</title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<meta name="keywords"content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description"content="《零基础入门学习Web开发》案例演示，内容非常精彩哦，快来收录我吧~">
<meta name="author"content="小甲鱼">
</head>
<body>
<h1>“自适应”演示</h1>
<p>请分别在PC和手机上打开该页面！</p>
<img id="target" src="../img/FishC.png" alt="鱼C-Logo" width="256px" height="256px">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
- 小技巧(自动跳转到某个链接)：
<meta http-equiv="refresh"content="5;http://fishc.taobao.com">
image.png
2、页面设置：
-
<style> 标签用于为 HTML 文档定义样式信息。style 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 style 元素。
image.png - 颜色设置：
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<style type="text/css">
h1 {color: red}
p {color: blue}
a{
color:yellow;
background:black;
}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
<a href="http://bbs.fishc.com"target="_blank">快点开，里面有好东西！</a>
</body>
</html>
image.png
- 文章的排版：
<!DOCTYPE html>
<html>
<head>
<title>一只特立独行的猪</title>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<meta name="keywords"content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description"content="《零基础入门学习Web开发》案例演示">
<meta name="author"content="小甲鱼">
<style>
body{
background-image:url("./img/bc.jpg")
}
h1{
text-align: center;
color: black;
}
h2{
margin-left: 60%;
color: black;
}
p{
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color: black;
}
img{
position: absolute;
left: 50%;
margin-left: -181px;
}
</style>
</head>
<body>
<h1>一只特立独行的猪</h1>
<h2>王小波</h2>
<p>
插队的时候，我喂过猪、也放过牛。假如没有人来管，这两种动物也完全知道该怎样生活。它们会自由自在地闲逛，饥则
食渴则饮，春天来临时还要谈谈爱情；这样一来，它们的生活层次很低，完全乏善可陈。人来了以后，给它们的生活做出
了安排：每一头牛和每一口猪的生活都有了主题。就它们中的大多数而言，这种生活主题是很悲惨的：前者的主题是干活，
后者的主题是长肉。我不认为这有什么可抱怨的，因为我当时的生活也不见得丰富了多少，除了八个样板戏，也没有什么
消遣。有极少数的猪和牛，它们的生活另有安排。以猪为例，种猪和母猪除了吃，还有别的事可干。就我所见，它们对这
些安排也不大喜欢。种猪的任务是交配，换言之，我们的政策准许它当个花花公子。但是疲惫的种猪往往摆出一种肉猪
（肉猪是阉过的）才有的正人君子架势，死活不肯跳到母猪背上去。母猪的任务是生崽儿，但有些母猪却要把猪崽儿吃掉。
总的来说，人的安排使猪痛苦不堪。但它们还是接受了：猪总是猪啊。</p>
<p>
对生活做种种设置是人特有的品性。不光是设置动物，也设置自己。我们知道，在古希腊有个斯巴达，那里的生活被设置得
了无生趣，其目的就是要使男人成为亡命战士，使女人成为生育机器，前者像些斗鸡，后者像些母猪。这两类动物是很特别
的，但我以为，它们肯定不喜欢自己的生活。但不喜欢又能怎么样？人也好，动物也罢，都很难改变自己的命运。</p>
<p>
以下谈到的一只猪有些与众不同。我喂猪时，它已经有四五岁了，从名分上说，它是肉猪，但长得又黑又瘦，两眼炯炯有光。
这家伙像山羊一样敏捷，一米高的猪栏一跳就过；它还能跳上猪圈的房顶，这一点又像是猫——所以它总是到处游逛，根本就不
在圈里呆着。所有喂过猪的知青都把它当宠儿来对待，它也是我的宠儿——因为它只对知青好，容许他们走到三米之内，要是别
的人，它早就跑了。它是公的，原本该劁掉。不过你去试试看，哪怕你把劁猪刀藏在身后，它也能嗅出来，朝你瞪大眼睛，噢
噢地吼起来。我总是用细米糠熬的粥喂它，等它吃够了以后，才把糠对到野草里喂别的猪。其他猪看了嫉妒，一起嚷起来。这
时候整个猪场一片鬼哭狼嚎， 但我和它都不在乎。吃饱了以后，它就跳上房顶去晒太阳，或者模仿各种声音。它会学汽车响、
拖拉机响，学得都很像；有时整天不见踪影，我估计它到附近的村寨里找母猪去了。我们这里也有母猪，都关在圈里，被过度
的生育搞得走了形，又脏又臭，它对它们不感兴趣；村寨里的母猪好看一些。它有很多精彩的事迹，但我喂猪的时间短，知道
得有限，索性就不写了。总而言之，所有喂过猪的知青都喜欢它，喜欢它特立独行的派头儿，还说它活得潇洒。但老乡们就不
这么浪漫，他们说，这猪不正经。领导则痛恨它，这一点以后还要谈到。我对它则不止是喜欢——我尊敬它，常常不顾自己虚长
十几岁这一现实，把它叫做“猪兄”。如前所述，这位猪兄会模仿各种声音。我想它也学过人说话，但没有学会——假如学会了，
我们就可以做倾心之谈。但这不能怪它。人和猪的音色差得太远了。</p>
<p>
后来，猪兄学会了汽笛叫，这个本领给它招来了麻烦。我们那里有座糖厂，中午要鸣一次汽笛，让工人换班。我们队下地干活时，
听见这次汽笛响就收工回来。我的猪兄每天上午十点钟总要跳到房上学汽笛，地里的人听见它叫就回来——这可比糖厂鸣笛早了一
个半小时。坦白地说，这不能全怪猪兄，它毕竟不是锅炉，叫起来和汽笛还有些区别，但老乡们却硬说听不出来。领导上因此开
了一个会，把它定成了破坏春耕的坏分子，要对它采取专政手段——会议的精神我已经知道了，但我不为它担忧——因为假如专政是
指绳索和杀猪刀的话，那是一点门都没有的。以前的领导也不是没试过，一百人也治不住它。狗也没用：猪兄跑起来像颗鱼雷，
能把狗撞出一丈开外。谁知这回是动了真格的，指导员带了二十几个人，手拿五四式手枪；副指导员带了十几人，手持看青的
火枪，分两路在猪场外的空地上兜捕它。这就使我陷入了内心的矛盾：按我和它的交情，我该舞起两把杀猪刀冲出去，和它并
肩战斗，但我又觉得这样做太过惊世骇俗——它毕竟是只猪啊；还有一个理由，我不敢对抗领导，我怀疑这才是问题之所在。总
之，我在一边看着。猪兄的镇定使我佩服之极：它很冷静地躲在手枪和火枪的连线之内，任凭人喊狗咬，不离那条线。这样，
拿手枪的人开火就会把拿火枪的打死，反之亦然；两头同时开火，两头都会被打死。至于它，因为目标小，多半没事。就这样
连兜了几个圈子，它找到了一个空子，一头撞出去了；跑得潇洒之极。以后我在甘蔗地里还见过它一次，它长出了獠牙，还认
识我，但已不容我走近了。这种冷淡使我痛心，但我也赞成它对心怀叵测的人保持距离。</p>
<p>
我已经四十岁了，除了这只猪，还没见过谁敢于如此无视对生活的设置。相反，我倒见过很多想要设置别人生活的人，还有对
被设置的生活安之若素的人。因为这个原故，我一直怀念这只特立独行的猪。</p>
<img alt=" 猪猪" src="img/pjg.jpg" width="256px" height="256px">
</body>
</html>
网页显示
image.png
-
<style> media:media 属性指定样式适用的媒体。media 属性可用来表明文档在什么情况下应该使用该元素中定义的样式。
image.png
注意：设备的归类是由浏览器负责的，有些设备（比如 screen 和 print）在各种浏览器上的解释比较一致；但有一些设备（比如 handheld）的解释可能各家并不完全一致。因此，在实际开发中需要先核实一下为佳。
image.png
除了可以为指定设备定制样式，media 还支持通过一些特性来设计更具体的条件，运算符就是用于组合设备和特性条件的。
image.png
- 利用media设置打印模式：
<style media="print">
h1{
color: black;
}
h2{
color: black;
}
p{
color: black;
}
</style>
image.png
- 网页像素显示设置：
<style media="screen and (min-width:512px) and (max-width:1024px)">
body{
background-image:url("./img/电子科技大学校徽.jpg");
}
</style>
image.png
设置了网页的大小，缩小后改变了背景
