本文介绍了HTML的基础结构，包括DOCTYPE声明、title标签、meta标签、网页标题、实体、常用标签如h1-h6、p、strong、em、br、img等的使用，并通过实例展示了新闻咨询页和歌曲推荐页的创建。强调了HTML标签的语义性和响应式开发的配置，同时提醒了开发者良好的编码规范和注意事项。
一、简单的网页结构
html必不可少head和body部分，这两部分一样重要
<!-- ctrl+/ 注释符号 通过注释给大家写一些笔记 -->
<!-- html标签，根标签/根元素所有的网页内容都要写在html里面
开始标签和结束标签中间，一个页面只能一个html标签 -->
<html>
<!-- head标签 保存一些元信息 它里面的内容，用户是看不到的
主要是帮助浏览器其编译代码 -->
<head></head>
<!-- body标签 书写网页的主体内容，所有的给用户看的,都写在body里面 -->
<body>
我的第一个页面
</body>
</html>二、文档声明
<!-- 文档声明 写在html最上面，告诉浏览器我是按照html的规范来编写代码的
浏览器你也要按照规范给我编译，以免代码编译陷入怪异模式，出现乱码
-->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- jw是随机加字 -->
</body>
</html>三、title标签
这个标签指的是网页标题
<!DOCTYPE html>
<!-- 目前学习的代码是html的标签，我们学习html标签，要时刻关注语义，而不是样式 -->
<html>
<head>
<!-- title标签是网页的标签，显示在标题栏中，
我们不关注它显示在哪里，关注的是它的语义最重要的意义是 -->
<title>你看我在哪里？？？</title>
</head>
<body>
终侯蒲是重自后鲜就。
</body>
</html>四、meta标签
<!DOCTYPE html>
<html>
<head>
<!-- meta标签 是一个自结束标签，也可以存一些元信息，帮助浏览器编译代码
自结束标签有两种写法 <meta> 、 <meta />
在开始标签里，我们可以加属性和属性值
charset 是字符集属性 设置密码本
utf-8 万国码属性值 某一个密码本
GB 中国的
GBK 中国扩展版
charset的设置就是为了防止出现乱码
-->
<!--
编码：文字、图片、音视频⇨二进制
解码：二进制⇨文字、图片、音视频
乱码：编码和解码用的不是一个密码本
-->
<meta charset="utf-8">
<!-- keywords/ descreption 都可以帮助浏览器检索内容 -->
<title>网页的标题</title>
</head>
<body>
藏变付，无。
</body>
</html>五、完整网页结构
shift+! 再按enter，可以直接构建基础框架
<!-- shift+! 网页结构快捷键 -->
<!-- 格式化代码：1.右击⇨格式化代码
shift+alt+f -->
<!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>
</body>
</html>六、html的总结规范
<!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>
<!--
1.html标签有成双成对的，也有自结束标签
2.html中不区分大小写，但一般用小写居多
3.标签可以嵌套，但不可以交叉嵌套
4.养成良好的注释习惯，简单、明了，注释也不可以嵌套
5.html,css,js都是一种宽泛的语言，它的容错率较高
它会给你自动纠错，但我们要尽量避免，防止网站的性能有所影响
而且它改的不一定是你想要的
-->
</body>
</html>七、实体
实体要特别注意，很多符号都不能直接输入输出，要用特定的代码
<!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>
<!--实体
什么是实体
在编写网页的时候，有一些字符我们是没有办法打出来的，例如空格、大于号、小于号等
这些字符已经提前被编译器或者浏览器征用，我们不能正常使用，我们要用一些额外的字符来替代
这些额外的字符就叫实体
实体的语法
&实体的名字
常用的实体
空格
大于号 >
小于号 <
版权符号© ©
-->
今天见到同学们 很开心
</body>
</html>八、常用的标签
这是我们常用的标签
<!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 主要就学一些标签，30-40个就够用
css 样式
-->
<!-- 标签 html 要关注语义，不关注样式 -->
感觉快下雨了
感觉快下雨了
感觉快下雨了
<!-- 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>
<!-- 面试题：在htlm中，有两个强调标签，他们有什么区别？
默认样式上有区别：strong强调的是内容，em强调的是语音语调
一般情况，在实际的使用过程中，em,strong不做区别
-->
<p>
同学们，你们可<em>真</em><strong>帅</strong>
</p>
<!-- 6、br 强制换行 是一个自结束标签-->
永派洪用三了这，洪孔传妙惶无，<br>
本气在自如貂王褒死就，<br>
向倒是
<!-- 7、hr 分割线 是一个自结束标签
-->
事偶使他杨同竟弟韩雷区样劫降人，丰在在。
<hr>
<!-- 8、del 删除线 -->
原价：<del>1999元</del><br>
现价：1.99元
<!-- 9、center 有居中效果-->
<center>
<h1>变若艳自。</h1>
</center>
<!-- 10、div 是一个没有任何语义的标签,是块元素 -->
常胜狱牙中，松太年。
<div>
仍便不后文孔，之力。
</div>
<!-- 11、span 是一个没有任何语义的标签，一般就用来包裹文字 -->
<!-- 12、引用标签
默认样式：加双引号
-->
子曰：<q>学而时习之</q>
</body>
</html>九、img标签
用于插入图片
<!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标签 引入外部的图片
也是一个自结束标签
4个属性
src 引入图片的路径 暂时将html文件和图片放在同一个文件夹下
alt 是对图片的描述，正常情况下，alt的内容是不显示，
当图片的路径出现问题，图片引入不成功，alt就会显示
它可以帮助浏览器检索图片，养成写alt的习惯
width 设置图片的宽度
height 设置图片的高度
一般情况下，不会同时设置width和heigh，
只要单独设置width或者height，另外一个就会自适应调整
-->
<img src="" alt=""width="800px">
</body>
</html>作业
以下是用今天所学知识制作的两个页面
作业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>
<center>
<h1>看不见的完美硬币 ：细节的负担</h1>
</center>
<center>
<h2>创新公司皮克斯的启示</h2>
</center>
<hr>
<center>
2015年05月05日 17:47
</center>
<center>
<img src="./book.jpg" alt="书本">
</center>
<p>
<em>
细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。<br>
但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。<br>
怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答<br>
</p>
</em>
</p>
<p>
<strong>
看不见的完美硬币：细节的负担
</strong>
</p>
<p>
在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。
</p>
<p>
皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect
coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她，而她还是一步步走到了两摞高高堆起的CD旁，“别乱动！”麦克大喊起来，可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张，
CD全部倒塌散落在了地板上。麦克抱怨道：“哎，那些CD都是按字母顺序排列好的！”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只能够看到几个CD盒而已，但皮克斯的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。
</p>
<p>
“你能看到所有CD盒吗？看不到。”萨拉菲安接着说，“把所有CD盒全部设计一遍，这工作有意思吗？其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这其中的乐趣只有当事人才能体会吧。”
</p>
</body>
</html>作业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>
<h1>
<center>
歌曲推荐
</center>
</h1>
<hr>
<h2>
<center>
I Really Want to Stay At Your House
</center>
</h2>
<h3>
<center>
Cyberpunk
</center>
</h3>
<p>
<center>
I couldn't wait for you to come and clear the cupboards<br>
But now you're gone and leaving nothing but a sign<br>
Another evening I'll be sitting reading in between your lines<br>
Because I miss you all the time<br>
So get away<br>
Another way to feel what you didn't want yourself to know<br>
And let yourself go<br>
You know you didn't lose your self-control<br>
There's no end of the rainbow<br>
Turn away<br>
Another way to be where you didn't want yourself to go<br>
And let yourself go<br>
Is that a compromise<br>
</p>
<img src="./图片1.png" alt="图1" width="700px">
<p>
So what do you wanna do what's your point of view<br>
There's a party screw it do you wanna go<br>
A handshake with you what's your point of view<br>
I'm on top of you I don't wanna go<br>
'Cause I really wanna stay at your house<br>
In the palace it all works out<br>
But you know how much you broke me apart<br>
I'm done with you I'm ignoring you<br>
I don't wanna know ah-<br>
And I'm aware that you were lying in the gutter<br>
'Cause I did everything to be there by your side-ide<br>
So when you tell me I'm the reason I just can't believe the lie-es<br>
And why do I still wanna call you<br>
Call you call you call you<br>
</p>
<img src="./图片2.jpg" alt="图2" width="700px">
<p>
So what do you wanna do what's your point of view<br>
There's a party screw it do you wanna go<br>
A handshake with you what's your point of view<br>
I'm on top of you I don't wanna go<br>
'Cause I really wanna stay at your house<br>
In the palace it all works out<br>
But you know how much you broke me apart<br>
I'm done with you I'm ignoring you<br>
I don't wanna know ah-<br>
Oh-oh oh-oh-oh<br>
I don't know where I'm going<br>
So get away<br>
Another way to feel what you didn't want yourself to know<br>
And let yourself go<br>
You know you didn't lose your self-control<br>
There's no end of the rainbow<br>
Turn away<br>
Another way to be where you didn't want yourself to go<br>
And let yourself go<br>
Is that a compromise<br>
</p>
<img src="./图片3.jpg" alt="图3" width="700px">
<p>
So what do you wanna do what's your point of view<br>
There's a party screw it do you wanna go<br>
A handshake with you what's your point of view<br>
I'm on top of you I don't wanna go<br>
'Cause I really wanna stay at your house<br>
In the palace it all works out<br>
But you know how much you broke me apart<br>
I'm done with you I'm ignoring you<br>
I don't wanna know ah<br>
</p>
</center>
<hr>
<center>
友情链接：A网站|B网站|C网站
</center>
<p>
<center>
回到顶部|联系我们
</center>
</p>
</body>
</html>作为初学者，希望有错误的话大家请多指正
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
