目录

webHTML

web—HTML

什么是web

●Web:全球广域网,也称为万维网(www World Wide Web),能够通过浏览器访问的网站。

https://i-blog.csdnimg.cn/img_convert/970b630663806fd7d247c4a1dc3113a6.png

在浏览器中呈现精美的网页。

1.网页由那几部分组成?

文字、图片、视频、音频、超链接,,,

2.我们看到的网页,背后本质是什么?

程序员写的前端代码

3.前端代码如何转换成用户眼中的网页?

通过浏览器转换成用户看到的网页。

浏览器对代码进行解析渲染的部分,称为浏览器内核。

由于不同浏览器,内核不同,对于相同的前端代码解析的效果可能会存在差异所以我们有一个统一规范叫做web标准。

web标准

●Web标准也称网页标准,由一系列的标准组成,大部分由W3C(World Wide Web Consortium,万维网联盟)负责制定。

●三个组成部分:

·HTML:负责网页的结构(页面元素和内容)。

·CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。

·JavaScript:负责网页的行为(交互效果)。

什么是HTML

●HTML(HyperText Markup Language):超文本标记语言。

◆超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。

◆标记语言:由标签“<标签名>”构成的语言

HTML标签都是预定义好的。例如:使用

展示标题,使用展示图片,使用

HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

https://i-blog.csdnimg.cn/img_convert/e1bdaa366c0fff004b426385153054cb.png

什么是css

●CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。

前端开发工具

●Visual Studio Code(简称VS Code)是Microsoft于2015年4月发布的一款代码编辑器。

●VS Code对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、JaVa、Python、PHP、Go等)。

●VS Code提供了非常强大的插件库,大大提高了开发效率。

●官网:

定义标签

标题排版标签

https://i-blog.csdnimg.cn/img_convert/82785843c7de7117a810803e760eda59.png

https://i-blog.csdnimg.cn/img_convert/2c18fa650a43d552462769829586ebbd.png

标题样式

https://i-blog.csdnimg.cn/img_convert/24dd4912a0465df159631d56bd76d14b.png

https://i-blog.csdnimg.cn/img_convert/bf78f0e3153d1086e392a618353c2b89.png

https://i-blog.csdnimg.cn/img_convert/874bf14dfa42a24d21a9dd02acb876ed.png

https://i-blog.csdnimg.cn/img_convert/5c4cc9bd97717ae14f1692b12e27c5d8.png

https://i-blog.csdnimg.cn/img_convert/24fa1b02e24fd705028f72344009f3b2.png

颜色表示形式:

https://i-blog.csdnimg.cn/img_convert/417829c2d63d7ded17ff20567042302a.png

https://i-blog.csdnimg.cn/img_convert/9ccd825dee94cc0e738092bee10927bd.png

https://i-blog.csdnimg.cn/img_convert/ff0e1e793ac4cfa42e1d4ef74cc53847.png

CSS选择器是用来选取需要设置样式的元素(标签)的。

https://i-blog.csdnimg.cn/img_convert/b84423b4221d8f620321af272ebbdca2.png

优先级:id选择器>类选择器>元素选择器

https://i-blog.csdnimg.cn/img_convert/20cad659e8dd165c42bbe1bc737e2acb.png

标签

超链接标签:

<a href=" 新浪政务

target 是标签的打开方式。

用标签插入一个视频:

video用来定义视频的

https://i-blog.csdnimg.cn/img_convert/50e97a929604c86d4afc37a5eae1f8a6.png

用标签插入一张图片

https://i-blog.csdnimg.cn/img_convert/8b2a819f5d18c254f77cb156e41b5c8d.png

三个标签总结:

https://i-blog.csdnimg.cn/img_convert/0a91f41d5b8a7e4dfceded4aa33bb048.png

https://i-blog.csdnimg.cn/img_convert/5d386a7272af996402a110fd43747505.png

盒子模型

盒子:页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局

盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

https://i-blog.csdnimg.cn/img_convert/0dd60fd54ea134eecaf2507302571265.png

布局标签:网页开发中,会使用div和span这两个没有语义的布局标签

https://i-blog.csdnimg.cn/img_convert/913d8fd4d92aa781296e630afd69f7e8.png

https://i-blog.csdnimg.cn/img_convert/329c7170572576dfdb5659015dbfea03.png

https://i-blog.csdnimg.cn/img_convert/995694f6987f475fa6abe7b1d4239100.png

https://i-blog.csdnimg.cn/img_convert/efb80e801fab74e502011d42ee75181c.png

宽度:400像素:默认是内容展示区域的宽度·/,如果加上fxo-sizing:border-box展示的宽高为

https://i-blog.csdnimg.cn/img_convert/109156415282bee9175c66acd9fab9c0.png

如果不加上fxo-sizing:border-box则展示的宽度为

https://i-blog.csdnimg.cn/img_convert/6f726350dca223cdd70b9db77454fe88.png

这里面的

小结:

https://i-blog.csdnimg.cn/img_convert/b75986097b3061b244113515f5849e71.png

flex布局

flex是flexible Box的缩写,意为"弹性布局",是一种一维的布局模型。fLex布局可以为元素之间提供强大的空间分布和对齐能力。

通过给父容器添加fLex的相关属性,来控制子元素的位置和排列方式。

https://i-blog.csdnimg.cn/img_convert/02a7e7cf78ceb05ab1dc193eabe78a10.png

常见的属性:

https://i-blog.csdnimg.cn/img_convert/aaa51f2ce949d27ca5080f4464921cd2.png

表单标签

表单:在网页中主要负责数据采集功能,如注册、登录等数据采集。

标签:

表单项:不同类型的input元素、下拉列表、文本域等。

:定义表单项,通过type属性控制输入形式(text/password/.·,)