admin管理员组文章数量:1794759
【Web前端开发】《零基础入门学习Web开发》（HTML5&CSS3）（小甲鱼）
1
P1:凉凉好像挺厉害的奥？ 听完了！
2P2: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:
服务器搭建？?
课程案例在线演示：demo.fishc
HTML5速查宝典：man.fishc/html5
CSS3速查宝典：man.fishc/css3
扩展阅读：bbs.fishc 课堂课后资料 阶段考核——项目！！！
img标签——插入一个图片 必须设置alt src属性（路径必须正确） 少见的没有内容的标签，即空标签。
a标签——定义超链接，让用户从一个网页跳转到另外一个网页
<a href="www.cskaoyan/forum.php">王道论坛，CS才是王道 </a>
herf指示了超链接的地址
第二重要的属性 target指定在何处打开超链接 _blank 在新窗口打开
<a href="www.cskaoyan/forum.php" target="_blank">王道论坛，CS才是王道 </a>
多个标签之间 空格隔开即可 如上的a标签和target标签。
3meta 很厉害呀，功能丰富！！! 参见man.ilovefishc/ 中的HTML5速查宝典
一、利用meta元素指定网页编码
编码问题曾经可能困扰了无数的攻城狮，但今天，你只要记住将源文件保存为 UTF-8 编码格式，然后在 HTML 文档中指定即可：
<meta charset="UTF-8">
二、实现网页尺寸 “自适应”所谓的自适应，就是无论你是使用 PC 端，还是使用手机、平板电脑来浏览这个网页，看到的内容都是令人感到舒适的。下面是没有使用 “自适应” 的页面：
<meta name="viewport" content"width=device-width,initial-scale=1.0"> 实现屏幕自适应
三、
3. 搜索引擎优化 百度（1）为搜索引擎提供关键词：
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
（2）描述网页内容：
<meta name="description" content="《零基础入门学习Web开发》案例演示">
（3）定义网页的作者：
<meta name="author" content="小甲鱼">
四、 meta 小技巧在早些时候，有些同学偶然间从来历不明的渠道获得小甲鱼的视频，看了两集觉得，诶，风格很是喜庆，看教程跟说相声似的，于是乎想要前来支持一波，但却找不到方式。
于是小甲鱼后脑勺一拍，灵机一动，就写了一个网页文件放在课程的压缩包里面。这样想要支持的朋友就可以随时点击过来咱的淘宝店啦。
那么这个网页就需要实现一个自动跳转功能，我们同样可以使用 meta 标签来实现：
<meta http-equiv="refresh" content="5;bbs.fishc"> 实现一定时间后网页刷新跳转链接 跳转到bbs.fishc
4一只特立独行的猪? 如何对页面进行美化调整<style>标签用于为HTML文档定制样式信
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相濡以沫不如相见于江湖
转载于:wwwblogs/wanwujiexu/p/10424625.html
版权声明：本文标题：【Web前端开发】《零基础入门学习Web开发》（HTML5&amp;CSS3）（小甲鱼） 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686795057a103889.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论