【Web前端开发】《零基础入门学习Web开发》（HTML5CSS3）（小甲鱼）

1

P1:凉凉好像挺厉害的奥？听完了！

2

P2:HTML是用来描述网页的一种语言

官方：超文本标记语言 Hyper Text Markup Language

使用标签来描述网页 < >括起来的就是标签，成双成对开始标签+结束标签

 1 <!DOCTYPE html>
 2 <html>
 3       <head>
 4           <title>第一个程序</title>
 5       </head>
 6       <body>
 7           <h1>Hello world</h1>
 8           <p>2020 CS</p>
 9       </body>
10 </html>

第一行：声明——由HTML5（最新）编写。声明的作用是帮助编译器去解析你的代码。

html元素：描述所有网页的内容

head元素：所有头部元素的容器 title指定网页的标题

body:包含网页中所有可见的内容

h1:标题的尺寸往下由h1,h2,h3,h4,h5,h6 h1最大

p元素：定义了一个段落，存放文本

P3:

服务器搭建？?

课程案例在线演示：http://demo.fishc.com

HTML5速查宝典：http://man.fishc.com/html5

CSS3速查宝典：http://man.fishc.com/css3

扩展阅读：bbs.fishc.com 课堂课后资料阶段考核——项目！！！

img标签——插入一个图片必须设置alt src属性（路径必须正确）少见的没有内容的标签，即空标签。

a标签——定义超链接，让用户从一个网页跳转到另外一个网页

<a href="http://www.cskaoyan.com/forum.php">王道论坛，CS才是王道 </a>

herf指示了超链接的地址

第二重要的属性 target指定在何处打开超链接 _blank 在新窗口打开

<a href="http://www.cskaoyan.com/forum.php" target="_blank">王道论坛，CS才是王道 </a>

多个标签之间空格隔开即可如上的a标签和target标签。

3

meta 很厉害呀，功能丰富！！! 参见https://man.ilovefishc.com/ 中的HTML5速查宝典

一、利用meta元素指定网页编码

编码问题曾经可能困扰了无数的攻城狮，但今天，你只要记住将源文件保存为 UTF-8 编码格式，然后在 HTML 文档中指定即可：

二、实现网页尺寸 “自适应”

所谓的自适应，就是无论你是使用 PC 端，还是使用手机、平板电脑来浏览这个网页，看到的内容都是令人感到舒适的。

下面是没有使用 “自适应” 的页面：

三、

3. 搜索引擎优化百度

（1）为搜索引擎提供关键词：

（2）描述网页内容：

（3）定义网页的作者：

四、 meta 小技巧

在早些时候，有些同学偶然间从来历不明的渠道获得小甲鱼的视频，看了两集觉得，诶，风格很是喜庆，看教程跟说相声似的，于是乎想要前来支持一波，但却找不到方式。

于是小甲鱼后脑勺一拍，灵机一动，就写了一个网页文件放在课程的压缩包里面。这样想要支持的朋友就可以随时点击过来咱的淘宝店啦。

那么这个网页就需要实现一个自动跳转功能，我们同样可以使用 meta 标签来实现：

<meta http-equiv="refresh" content="5;http://bbs.fishc.com"> 实现一定时间后网页刷新跳转链接跳转到http://bbs.fishc.com

4一只特立独行的猪? 如何对页面进行美化调整

style元素可以出现在文档的各个部分，一个文档可以包含多个style元素

在头部即head中设置标签对应内容样式

1     <style type="text/css">
2         h1 {color: red}
3         p {color: blue}
4     </style>

1           <style type="text/css">
2                  h1 {color: red}
3                  p {color: blue}
4                  a {                    注意：a 和{ 之间必须有空格，否则无效。原因未知233
5                    color yellow;
6                    background:black;
7                  }
8           </style>

设置段落背景图片：（引号内为文件相对位置）（..l 相对路径上一级）

1           <style>
2                  body{3                        background-image:url("CS学习/旦.JPG")
4                  }
5           </style>

实现满足三个条件——即屏幕，两个像素值时改变背景图片

1           <style media="screen and (min-width:512px) and (max-width:1024px)">
2                 body {3                      background-image: url("CS学习/旦.JPG");
4           </style>

5相濡以沫不如相见于江湖

转载于:https://www.cnblogs.com/wanwujiexu/p/10424625.html