web前端入门科普集

最新推荐文章于 2023-03-16 17:14:56 发布

web世界之窗

最新推荐文章于 2023-03-16 17:14:56 发布

阅读量139

点赞数

文章标签： html css 前端 Web前端前端入门

本文链接：https://blog.csdn.net/weixin_45974707/article/details/103743948

版权

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

1:什么是html?

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

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

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

<html>
<body>
<h1>我是你的第一个页面！</h1>
    <p>hello world!</p>
</body>
</html>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

效果图:

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>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

效果图:

例子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 是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。
所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。
它的作用就是一个规范，告诉所有浏览器都统一标准，比如我给这段文字加个

标签，那就是告诉浏览器：这是一个段落。我加个标签：这是一张图片，别弄错了。浏览器看到后，就会正确解析，产生相应的行为。

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

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

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