博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【Web前端开发】《零基础入门学习Web开发》(HTML5&CSS3)(小甲鱼)
阅读量:2241 次
发布时间:2019-05-09

本文共 1901 字,大约阅读时间需要 6 分钟。

1

P1:凉凉好像挺厉害的奥?      听完了!

2

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

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

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

1  2  3        4           第一个程序 5        6        7           

Hello world

8

2020 CS

9 10

第一行:声明——由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标签——定义超链接,让用户从一个网页跳转到另外一个网页

 

               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 文档中指定即可:

  <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;http://bbs.fishc.com">         实现一定时间后网页刷新跳转链接    跳转到http://bbs.fishc.com

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

<style>标签用于为HTML文档定制样式信息

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

 

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

1     

 

1           

 

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

1           

 

 

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

1           

 

 

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

 

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

你可能感兴趣的文章
69道Spring面试题和答案
查看>>
40个Java多线程问题总结
查看>>
Oracle数据库面试题
查看>>
java面试中的智力题
查看>>
本地如何连接hbase数据库
查看>>
Maven出错-Missing artifact org.apache.openejb:openejb-core:jar:4.1.0-SNAPSHOT:test
查看>>
dubbo配置文件xml校验报错
查看>>
eclipse生成export生成jar详解
查看>>
oracle 模糊查询忽略大小写
查看>>
Java项目导出可运行的jar文件
查看>>
Java文件夹操作,判断多级路径是否存在,不存在就创建(包括windows和linux下的路径字符分析),兼容Windows和Linux
查看>>
JAVA读取PROPERTIES配置文件
查看>>
Linux中执行shell脚本的4种方法总结
查看>>
BufferedInputStream(缓冲输入流)详解
查看>>
修改linux文件权限命令:chmod
查看>>
Linux vi/vim编辑器常用命令与用法总结
查看>>
如何使用Git Bash Here,将本地项目传到github上
查看>>
eclipse git控件操作 回退到历史提交 重置 删除(撤销)历史的某次提交
查看>>
Oracle | 给表和字段添加注释
查看>>
java比较日期大小及日期与字符串的转换【SimpleDateFormat操作实例】
查看>>