前端第二更:初识HTML+CSS

前端学习813.7K字数 2403阅读8分0秒阅读模式

HTML+CSS是前端学习必不可少的部分,HTML是描述网页的标记语言,在早期的HTML里面,HTML标签会有自己的很多样式。 不同浏览器兼容性上并不一样,在标签里面添加很多属性,造成文档内容复杂,使得独立于外观(表现层)的网站开发起来越发困难,为了解决上述困难,万维网联盟,在HTML4.0的基础上,研究出了样式,也就是CSS。HTML与CSS是即分开又有关联的,HTML出框架,然后CSS设置框架的属性样式,让网页看起来更完美!

摘下慕课的几段话:文章源自亦枫博客-https://yflad.cn/1585.html

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。文章源自亦枫博客-https://yflad.cn/1585.html

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。文章源自亦枫博客-https://yflad.cn/1585.html

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。文章源自亦枫博客-https://yflad.cn/1585.html

 文章源自亦枫博客-https://yflad.cn/1585.html

一、HTML

1、HTML的DocType的三种类型

1)什么是DOCTYPE?

HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。文章源自亦枫博客-https://yflad.cn/1585.html

DOCTYPE是Document Type(文档类型)的简写,用来指定页面所使用的XHTML(或者HTML)的版本。要想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE,XHTML里的标识和CSS才能正常生效。文章源自亦枫博客-https://yflad.cn/1585.html

注意的是:HTML5 不基于 SGML,所以不需要引用 DTD。文章源自亦枫博客-https://yflad.cn/1585.html

在 HTML5 中只需要注明头即可:[code]<!DOCTYPE html>[/code]文章源自亦枫博客-https://yflad.cn/1585.html

2)DOCTYPE的三种类型

  • 过渡型:一种要求不很严格的DTD,允许在页面中使用HTML4.01的标识(符合xhtml语法标准)。过渡的DTD的写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >文章源自亦枫博客-https://yflad.cn/1585.html

 文章源自亦枫博客-https://yflad.cn/1585.html

  • 严格型:一种要求严格的DTD,不允许使用任何表现层的标识和属性。严格的DTD的写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >文章源自亦枫博客-https://yflad.cn/1585.html

 文章源自亦枫博客-https://yflad.cn/1585.html

  • 框架型:一种专门针对框架页面所使用的DTD,当页面中含有框架元素时,就要采用这种DTD。框架的DTD的写法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >文章源自亦枫博客-https://yflad.cn/1585.html

 文章源自亦枫博客-https://yflad.cn/1585.html

2、HTML的标签

什么是 HTML 标签文章源自亦枫博客-https://yflad.cn/1585.html

  • HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
  • HTML 标签由开始标签和结束标签组成
  • 开始标签是被括号包围的元素名
  • 结束标签是被括号包围的斜杠和元素名
  • 某些 HTML 元素没有结束标签,比如 <br />

详细的一些例子可以参考:w3school文章源自亦枫博客-https://yflad.cn/1585.html

 文章源自亦枫博客-https://yflad.cn/1585.html

 文章源自亦枫博客-https://yflad.cn/1585.html

二、CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。文章源自亦枫博客-https://yflad.cn/1585.html

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

1、为什么使用css样式来设置网页的外观样式呢?

举个例子:我们想把“百度”、“谷歌”、“火狐”这三个文本颜色设置为红色,这时就可以通过设置样式来设置,而且只需要编写一条css样式语句。前端第二更:初识HTML+CSS

 

2、CSS的引用方式

1)[code]嵌入式[/code],在head部分加入

  1. <style type="text/css">
  2. span{
  3.    padding: 0;
  4.    margin: 0;
  5.    colorred;
  6. }
  7. </style>

2)[code]内联式[/code],直接在页面的标签里加

  1. <div style="border:1px red solid;">亦枫博客</div>
  2. <p style="color:red">我是红色的</p>

需要注意的是:css样式代码要写在""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。

3)[code]外部式[/code],在head部分加入<link rel="stylesheet" type="text/css" href="引入路径.css"/>,写在单独的一个文件中,引入这个文件的扩展名为“[code].css[/code]”。前端第二更:初识HTML+CSS

 

3、CSS引入方式的优先级

由下图可以看出:

我引入了一个外部名为“001.css”的外部文件,颜色设置为红色;

在<head>内嵌入了一个蓝色的样式属性;

在div后,内联了一个黑色的的样式属性

前端第二更:初识HTML+CSS

游览器却没有的显示红色的样式,由此可得出:

[code]内联式[/code] > [code]嵌入式[/code] > [code]外部式[/code]

PS:不排除其它情况,比如外部式在嵌入式的前面,其实总结来说,就是——就近原则(离被设置元素越近优先级别越高)。当然还有其它情况,这只是个初步认识!

 

最后推荐常看看手册,比如在线的“W3School”,里面还是很全面的。你也可以下载我整理的一些手册,方便随时查看,还是蛮全面的。前端第二更:初识HTML+CSS

 

下载信息 常用手册下载 Windows_x64 bit & x86 bit xxx 总计86.5MB
最近更新2019-5-11
网盘密码:发表评论并刷新可见
下载地址 查看演示
继续阅读
扫扫关注公众号
weinxin
我的微信
扫扫体验小程序
weinxin
我的公众号
亦枫
  • 本文由 发表于 2017年11月6日 00:37:44
评论  8  访客  7  作者  1
    • https://www.6058i.cn/
      https://www.6058i.cn/ 4

      非常专业,非常有水平的博文

      • 历史趣谈
        历史趣谈 1

        非常专业,非常有水平的博文

        • 请输入您的QQ号
          请输入您的QQ号 0

          总的来说搞不懂自己一直弄不清

          • 今日新闻头条
            今日新闻头条 1

            文章不错支持一下吧

            • 小斌博客
              小斌博客 0

              其实我还是喜欢用菜鸟教程

              • 夏日博客
                夏日博客 1

                html是最基础的,但里面好多元素又不太懂。

              匿名

              发表评论

              匿名网友 填写信息

              :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

              确定