一.简单的网页结构
1.声明DOCTYPE
文档声明 写在html最上面，告诉浏览器我是按照html的规范来编写代码的
浏览器你也要按照规范给我编译，以免代码编译陷入怪异模式，出现乱码
<!-- 文档声明 写在html最上面，告诉浏览器我是按照html的规范来编写代码的
浏览器你也要按照规范给我编译，以免代码编译陷入怪异模式，出现乱码 -->
<!DOCTYPE html>2.html（根标签/根元素）
html标签，根标签/根元素 所有网页内容都要写进去 只能有一个
<html></html>
<!--head标签 保存一些元信息 它里面的内容用户看不到 帮助浏览器编译代码 -->3.head标签和body标签head标签
head标签 保存一些元信息 它里面的内容用户看不到 帮助浏览器编译代码
body标签 书写网页的主题内容 所有的给用户看的 都写在这里面
<!--head标签 保存一些元信息 它里面的内容用户看不到 帮助浏览器编译代码 -->
<head></head>
<!-- body标签 书写网页的主题内容 所有的给用户看的 都写在这里面-->
<body></body>4.title标签
title标签是网页的标题，显示在标题栏中，我们不关注它显示在哪里，关注的是它的语义
最重要的意义是可以帮助推广部门做推广，给浏览器搜索到
<title>你看我在哪里？？？</title>5.meta标签
（1）meta标签 是一个自结束标签 , 也可以存一些元信息，帮助浏览器编译代码
自结束标签有两种写法 <meta> <meta/>
在开始标签里，我们可以加属性和属性值
charest 字符集属性 设置密码本
utf-8 万国码属性值 某一个密码本
GB 中国的
GBK 中国扩展版
charest的设置就是为了防止出现乱码
（2）编码：文字、图片、音视频==》二进制
解码：二进制===》文字、图片、音视频
乱码：编码和解码用的不是一个密码本
<meta charset="utf-8">
<!-- keywords/description 都可以帮助浏览器检索内容 -->
<meta name="keywors"content="手机大全，手机报价">6.html规范总结
1、html标签有成双成对的，也有自结束标签
2、html中是不区分大小写，但一般小写居多
3、标签可以嵌套，但不可以交叉嵌套
4、养成良好的注释的习惯，简洁，明了
5、html、css、js都是一种宽泛的语言，它的容错率比较高
它会给你自动纠错，但我们要尽量的避免，防止网站的性能有所影响
而且它改的不一定是你想要的
6、快捷键：
shift+! 网页结构快捷键
格式化代码 shift+alt+f
7.实体
1.什么是实体？
在编写网页的时候，有一些字符是没办法打出来的，例如空格、大于号、小于号等。 这些字符已经提前被编译器或者浏览器征用，我们不能正常使用，我们要用一些额外的字符来代替，这些额外的字符叫实体。
2.实体的语法： &实体的名字
3.常用的实体：
空格  ；
大于号 >；
小于号 <；
版权符号 ©；
8.常用的标签
标签要关注语义，不关心样式
<!-- 1、标题标签 h1,h2,h3,h4,h5,h6
h1 一级标题
h2 二级标题
默认样式：h1-h6,字体的大小逐步减小，字体会加粗，会变黑
从语义上看：h1-h6,语义是逐步降低的，也是可以帮助浏览器检索内容，提高网络排名
注意：常用的标题标签：h1-h3
h1的语义是最重的
标题标签会独占一行，是块元素
-->
<h1>斯生娘土中杨，会要。</h1>
<h2>了的惶命，接策以笔。</h2>
<h3>救出韩的拢，未者与。</h3>
<!-- 2、段落标签 p
默认样式:段落与段落之间有较大的空隙
段落标签也会独占一行，是块元素
-->
办量化系中哉词病乐娟故下不，事的持死大，轻老后承而谭五秦人变她者领最在考三郭落，君视文的胜否法招上谷他揽了了次已，故皇么命氏的入派天极变第败，虽撒可婵人不对气与洪见对一，国白自老见玉妙以绪，之登人云。
<p>
于外无梵自报感要从远关，土彷不，厅决生。
</p>
<p>
中说车一对天生虑我丑程问丐司会负人头他。
</p>
<!-- 3、标题分组 让标题之间有关系，没有默样式 -->
<hgroup>
<h1>古诗一首</h1>
<h3>杜甫</h3>
</hgroup>
<!-- 4、strong 强调标签
默认样式：字体加粗也加黑了-->
<p>
吴是兴，<strong>浪漫</strong>变何也劝要。
</p>
<!-- 5、em 强调标签
默认样式：字体斜体了 -->
<p>
也二<em>看看就</em>求谓了六们与个。
</p>
<!-- 面试题： 在html中有两个强调标签，他们的区别？
默认样式上有区别
语义上也有区别：strong强调的是内容，em强调的是语音语调
一般情况下。在实际的使用当中，em,strong不做区别 -->
<!-- 6、 br 强制换行
-->
承人成活在血小，揽。<br>不圣洪之就由子。<br>
的郭可升。
<!-- 7、hr 分割线 -->
<hr>
<!-- 8、del 删除线 -->
原价：<del>1999999</del>元
现价：1.9元
<!-- 9、center 有居中效果 -->
<center>
<h1>杜甫</h1>
</center>
<!-- 10、 div 是一个没有任何语义的标签,独占一行是块元素 -->
<div>
躲和沫今火，爱你变。
</div>
<!-- 11、span 是一个没有任何意义的标签，不是块元素，不独占一行-->
<!-- 12、引用标签
默认样式：加双引号 -->9.img标签
1.开始标签里 可以添加多个属性，用空格隔开即可；
2. img标签 引入外部的图片也是一个自结束标签；
3.4个属性：
src 引入图片的路径 暂时将html文件和图片放在同一个文件夹下；
alt 是对图片的描述，正常情况下，alt的内容是不显示；
当图片的路径出现问题了，图片引用不成功，alt就会显示；
它可以帮助浏览器检索图片，养成写alt的习惯；
width 设置图片的宽度；
height 设置图片的高度；
一般情况下，不会同时设置width和height,只要单独设置width或者height,另外一个就会自适应。
<img src="./u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG.jpg"alt="风景"height="300px">10.京东新闻资讯页
<!DOCTYPE html>
<html>
<head>
<title>
京东新闻资讯
</title>
</head>
<body>
<center>
<h1>
看不见的完美硬币 ：细节的负担
</h1>
</center>
<center>
<div>创新公司皮克斯的启示</div>
</center>
<hr>
<center>
2015年05月05日 <font color=red>17:47</font>
</center>
<center><img src="./book.jpg"height="300px"></center>
<p>
<em>
细节从来都是个好东西，完美的细节往往给我们<strong>赢</strong>得商业上的胜利。
</em>
</p>
<p>
<em>
但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。
</em>
</p>
<p>
<em>
怎么打造完美的细节？又怎么<strong>赢</strong>得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。
</em>
</p>
<h2>
看不见的完美硬币：细节的负担
</h2>
<div> 在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负
担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。
</div><br>
<div>
皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人
员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两
个怪物想要制止她，而她还是一步步走到了两摞高高堆起的CD旁，“别乱动！”麦克大喊起来，可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张， CD全部倒塌散落在了地板上。麦克抱怨道：“哎，那些CD都是按字母顺序排列好的！”小女孩摇
摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只能够看到几个CD盒而已，但皮克斯的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。
</div><br>
<div>
“你能看到所有CD盒吗？看不到。”萨拉菲安接着说，“把所有CD盒全部设计一遍，这工作有意思吗？其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这
其中的乐趣只有当事人才能体会吧。”
</div>
</body>
</html>11.歌曲推荐
<!DOCTYPE html>
<html>
<head>
<title>歌曲推荐</title>
</head>
<body>
<center>
<h1>
歌曲推荐
</h1>
</center>
<hr>
<center>
<h2>
夜曲
</h2>
</center><br>
<center>
<h3>
周杰伦
</h3>
</center><br>
<center>
<div>
一群嗜血的蚂蚁<br>
被腐肉所吸引<br>
我面无表情看孤独的风景<br>
失去你爱恨开始分明<br>
失去你还有什么事好关心<br>
当鸽子不再象征和平<br>
我终于被提醒<br>
广场上喂食的是秃鹰<br>
我用漂亮的押韵<br>
形容被掠夺一空的爱情<br>
啊乌云开始遮蔽<br>
夜色不干净<br>
公园里葬礼的回音<br>
在漫天飞行<br>
送你的白色玫瑰<br>
在纯黑的环境凋零<br>
乌鸦在树枝上诡异的很安静<br>
静静听我黑色的大衣<br>
想温暖你日渐冰冷的回忆<br>
走过的走过的生命<br>
啊四周弥漫雾气<br>
我在空旷的墓地<br>
老去后还爱你<br>
为你弹奏肖邦的夜曲<br>
纪念我死去的爱情<br>
跟夜风一样的声音<br>
心碎的很好听<br>
手在键盘敲很轻<br>
我给的思念很小心<br>
为你弹奏肖邦的夜曲<br>
纪念我死去的爱情<br>
而我为你隐姓埋名<br>
在月光下弹琴<br>
对你心跳的感应<br>
还是如此温热亲近<br>
怀念你那鲜红的唇印<br>
那些断翅的蜻蜓<br>
<img src="./夜曲1.jpg"height="500px"><br>
散落在这森林<br>
而我的眼睛没有丝毫同情<br>
失去你爱恨开始分明<br>
失去你我连笑容都有阴影<br>
风在长满青苔的屋顶<br>
嘲笑我的伤心<br>
像一口没有水的枯井<br>
我用凄美的字型<br>
描绘后悔莫及的那爱情<br>
为你弹奏肖邦的夜曲<br>
纪念我死去的爱情<br>
<img src="./夜曲2.jpg"height="500px"><br>
跟夜风一样的声音<br>
心碎的很好听<br>
手在键盘敲很轻<br>
我给的思念很小心<br>
你埋葬的地方叫幽冥<br>
为你弹奏肖邦的夜曲<br>
纪念我死去的爱情<br>
而我为你隐姓埋名<br>
在月光下弹琴<br>
对你心跳的感应<br>
还是如此温热亲近<br>
怀念你那鲜红的唇印<br>
一群嗜血的蚂蚁<br>
被腐肉所吸引<br>
我面无表情看孤独的风景<br>
失去你爱恨开始分明<br>
失去你还有什么事好关心<br>
当鸽子不再象征和平<br>
我终于被提醒<br>
广场上喂食的是秃鹰<br>
我用漂亮的押韵<br>
形容被掠夺一空的爱情<br>
</div>
</center>
</body>
</html>
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
