一、简单的网页结构
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>
作为初学者,希望有错误的话大家请多指正