ITPub博客

首页 > 应用开发 > Html/css > web前端小白科普集

web前端小白科普集

原创 Html/css 作者:智云编程 时间:2019-12-10 18:38:51 0 删除 编辑

每一个写前端的人都有不同的故事.但是都是基础从零开始.实习公司用的框架也好,网上查到的例子也好,都是需要基础才可以看懂的.那基础是什么呢,我觉得就是常用的前端的一切.我刚写前端三个月.整理一下自己学到的知识.


1:什么是html?

HTML是World Wide Web上统一的语言。指的是超文本标记语言 (Hyper Text Markup Language),使用它所提供的标签,人类已经创建了令人惊奇、姿态万千的超链接的文档网络。这里要注意的是:HTML不是一种编程语言,而是一种标记语言 (markup language)。

它的基本语法是以"<>"尖括号标签开始,以""尖括号中带刚斜杠的标签结束,标签通常是成对出现的,标签对中的第一个标签是开始标签,第二个标签是结束标签,或者称为开放标签和闭合标签.

使用到的场景:
比如说你需要写一个页面.那你可以这样写:

<html>
<body>
<h1>我是你的第一个页面!</h1>
    <p>hello world!</p>
</body>
</html>
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)

效果图:



2:什么是css样式?

CSS是一种向网页添加样式的机制,样式表可描述文档如何被显示、打印或发音。CSS(Cascading Style Sheet),中文意思为“层叠样式表”或“级联样式表”

CSS层叠样式表是一系列格式设置的规则,它们控制网页内容的外观。使用CSS设置页面格式时,可以将内容与表现形式分开。页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。可以更加灵活地控制具体的页面外观,从精确的布局定位到特定的字体和样式,还可以使HTML文档代码更加简练,缩短浏览器的加载时间。对了,CSS是由W3C的CSS工作组产生和维护的。

知道了CSS是什么以后,我们就可以利用html+css来构建我们的网页.

比如给div中的文字加个颜色:
代码:

<html>
<body>
    <style>
        div{
            color: brown;
        }
    </style>
<h1>我是你的第一个页面!</h1>
    <p>hello world!</p>
    <div>我会好好努力</div>
</body>
</html>

效果图:



还有很多种样式的写法,都可以实现同样的效果,先举例两个:
例子1:
代码:

<html>
<body>
    <style>
        .div{
            color: brown;
        }
    </style>
<h1>我是你的第一个页面!</h1>
    <p>hello world!</p>
    <div class="div">我会好好努力</div>
</body>
</html>
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)

效果图:


例子2:
代码:

<html>
<body>
<h1>我是你的第一个页面!</h1>
    <p>hello world!</p>
    <div style="color:brown;">我会好好努力</div>
</body>
</html>

效果图:


实现想要的效果有很多种方式.但是等你知道如何实现效果后就要开始考虑性能了,考虑修改起来是否方便.所以推荐的还是我的第一种写法,把css样式提出来,写到style里面.这是简单的一个页面里包含样式.如果是在项目里.最好把样式写在less文件里.然后在需要的地方导入引用.整理起来就会方便很多.

3:css的版本背景:

1996年12月17日,CSS1作为一项 W3C推荐被发布。而后于1999年1月11日被重新修订。其中包含非常基本的属性,比如字体,颜色、空白边。

1999年1月11日,CSS2作为一项 W3C推荐被发布。CSS2添加了对媒介(打印机和听觉设备)和可下载字体的支持。CSS2 在CSS1基础上添加了高级概念(比如浮动和定位)以及高级的选择器(比如子选择器、相邻同胞选择器和通用选择器)。

CSS3计划将 CSS划分为更小的模块。CSS3把很多以前需要使用图片和脚本来实现的效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程,还能加快页面载入速度。

4:XHTML,XML,HTML有什么区别?

HTML:HyperText Markup Language / 超文本标记语言
XML: Extensible Markup Language / 可扩展标记语言
XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语

HTML 是用来描述和定义网页内容的标记语言,是构成网页的最基本的东西。
所谓超文本,就是说它除了能标记文本,还能标记其他的内容,比如:图片,链接,音频,视频等。
它的作用就是一个规范,告诉所有浏览器都统一标准,比如我给这段文字加个 <p> 标签,那就是告诉浏览器:这是一个段落。我加个 <img> 标签:这是一张图片,别弄错了。浏览器看到后,就会正确解析,产生相应的行为。

XML 它的表现形式就是给一个文档加一堆标签,说明每段文字是干什么的,有什么意义。这样做的目的是方便存储、传输、分享数据,人和机器都可以很方便的阅读。XML 和 HTML 有一个明显的区别就是:HTML 的标签都是预定义的,你不可以自己随便增加,比如你不能自造一个标签叫 <nihao>, 但是 XML 可以,你可以自己“发明”标签————这也是“可扩展的”一个含义。

XHTML 就是以 XML 的语法形式来写 HTML.
XHTML 出现的原因是:HTML 是一种语法形式比较松散的标记语言,语法要求也不严格。比如大小可以混用,属性值随便你加不加引号,单引号还是双引号也随便你,标签也可以不闭合。HTML 标准的制定者 W3C 一看这样下去不行,所谓无规矩不成方圆,所以就把 XML 的语法形式往 HTML 上一套,出现了 XHTML,所以你也可以把 XHTML 理解为 HTML 的严格语法形式,除此之外,其它方面基本一样。
比如 XHTML 有一些强制的要求,如下:

必须包含一个文件头声明 <!DOCTYPE>

  1. 所有元素名必须小写
  2. 所有空元素必须关闭
  3. 所有属性名必须小写
  4. 所有属性值必须加引号
  5. 所有布尔值属性必须加上属性值

5:常用的代码编辑器,网页编辑器

代码编辑器:Eclipse,VScode,IDEA


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69901074/viewspace-2667853/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
从事前端5年,希望在贵平台分享前端技巧,知识心得

注册时间:2018-12-03

  • 博文量
    657
  • 访问量
    530888