HTML与CSS介绍

  • Web 基本介绍

1.web 就是world wide web 的缩写，称之为全球广域网，俗称 WWW。 

2.我们可以将 web 理解为就是当前的一种互联网。对于我们来说更多的就是网站服务。 

3 .网站我们可以认是由多个网页组合在一起而形成一种服务。 

4.web 前端就是来负责一个网站当中前台网页里的内容。 

5.网页就是由前端工程师使用HTML 语言编写而成的一种文件，它里面会包含 文字 图 片 超链接 声音 视频......（网页本质就是一个html 文件）

  • HTML 基本介绍 

一、定义 

 HyperTextmarkup language 超文本标记语言，其中的超指的就是它能表达的内容不仅仅只是文字。 

 二、HTML 语言发展历史 

 1．在互联网最初的时候是没有 HTML的，我们只能通过网络传输最简单的文字内容 

 2．随着用户的要求越来越多，同时也是我们的技术的不断发展，就出了一种可以表达文字内容之外的语言---HTML1.0

 3．在最初的时候就是html1.0----xhtml1.0( 过渡 )----xhtml2.0( 放弃 )------html5 

1.4HTML 网页骨架

 1 网页是我们通过 HTML语言来书写。 

 2 因为我们需要使用 HTML语言来书写网页所以我们要有相应的书写代码工作。 

 3 在我们使用 HTML 语言去书写网页的过程我们会发现有一些结构是默认必须存在的， 这个结构我们就叫做 网页(html)骨架 

 

<!DOCTYPEhtml> 

<html>

<head> 

<metacharset="UTF-8"> 

 <title>标题</title> 

 </head>

<body>

</body>

</html>

                     

  • html语法和标签的介绍

 

一.HTML标签

所谓HTML标签是HTML发明者人为定义好的一些“单词”，相当于汉语中的字。

二.语法

语法就是用来定义这些“字”应该如何去解析或者书写的规则。

三.HTML标签中常见的标签及基本语法。

1 DocType html : 向浏览器声明当前的文档是 Html 类型。

 

2 html ：它是网页当中最大的一个标签，我们称之为根标签

 

3head : 网页头的部，它里面的内容是写给浏览器看的。

 

4 meta : 如果有 charset 那就表示在设置当前网页的显示编码

 

5 title：网页的标题，它里面的内容会在浏览器的标签页上显示

 

6 body：网页主体，它里面的内容会显示在浏览器的空白区域内。

 

1.我们认为的将HTML标签分为单标签和双标签两种。

单标签<标签名 />双标签<标签名></标签名>

2.常见的标签

（1）标题标签：在HTML当中人为定义了六种标题，分别h1-h6，他们都是双标签，在一个网页当中，我们只允许出现一个h1.<h1>标题内容</h1>双标签

（2）段落标签：<p>内容</p> 双标签

（3）换行标签<br />单标签

（4）空格&nbsq；

3.标签的书写语法

（1）在HTML当中允许多个标签相互嵌套使用，但不允许交叉嵌套。

 

<四.>HTML中图片使用

Img是一个单标签，它的作用是在网页中插入图片，src是img标签的属性，它里面的值称为属性值，具体用来表示想要加载的图片存在哪里。标签的身上可以有属性，属性名与标签名之间用空格隔开。属性值与属性名之间用单等号连接。一个图片可以有多个标签属性，要求多个属性之间用空格隔开。

（1）<img src=“”/>例src=“”叫做标签属性，标签属性与标签名之间用空格隔开，标签属性由名字和值二部分组成，属性名与属性值之间用等号进行连接，标签值需要放在引号李，单引双引无所依（如果属性值是数字，那么可以省略引号。）src里面写的就是一个地址。例：<img src=“04.jepg”/>

（2）一个图片可以有多个标签属性，要求多个属性之间用空格隔开。例<img src=“04.jepg”width=“400” height=“200”/>

（3）带标题的图片<img src=“”alt=“”/> alt当图片加载失败的时候会显示它里面的文字。

（4）<img src=“” title=“”/>  title表示当鼠标悬停在图片上面时候会显示它里面的文字。

<五.>HTML中超链接标签

（1）a双标签，标签默认情况下身上也有一个属性教href ，他的作用和img身上的src很像。它里面写的内容就是目标网页的地址。例如：<a href=“https://www.baidu.com”>百度一下，你就知道</a><a href=“目标地址”>内容</a>

（2）<a href=“#”>百度一下，你就知道</a>空链接一般出现在开发阶段，因为很多网页的线上真实的地址还没有写出来。空链接用#代替，用户点的时候不会跳转。

（3）打开窗口设置<a href=“https://www.baidu.com”target=“_blank”>百度一下，你就知道</a>会在浏览器另一个窗口打开。target这个属性可以设置页面在哪个窗口打开，当值为_blank的时候可以在窗口打开。

<六.>路径

一、绝对路径

绝对路径一般是以盘符为起点来进行查找，或者就是一个绝对URL地址。

https://www.baidu.com/img/bd_logo1.png ，但是在实际的工作中，我们不建议大家使用绝对路径。

二、相对路径

相对路径就是相对某一个已知的文件为起点进行资源的查找。

我们人为的将相对路径分为三种：同级路径、下级路径、上级路径。

以查找图片为例的含义就是我们要在一个 HTML网页中插入一张 HTML文件之外的图片，

同时采用的是相对路径，所以这里的相对起点就是 HTML网页) 

1. 同级路径：同级指的就是 HTML网页和目标图片在同一级目录里。对于同级路径的使用，我们只需要在 src 中写入目标图片的名称即可。

2. 下级路径：下级指的就是图片在 html 文件的下级目录中。此时我们需要使用一个/来向下进行穿透查找。（***下的***）

2. 上级路径：图片在 html 文件的上级目录里，时我们需要使用../ 来向上回退进行查找。此注：

注释:01 上述的路径规则虽然都是以查找图片为例，但是总结的规律适用于其它类型资源的查找。02 / 表示向下级查找，可以无限级穿透。 ../ 表示向上级返回，同样可以无限级返回。

<七.>表单基本介绍

一.表单格式说明

表单就是一种在互联网上用于收集用户信息的一种结构，在 HTML当中事先定义好一

个标签来完成这件事。标签名称叫 form ，它是一个双标签,我们称之为表单域。

<form action=""method=""></form>

注释:

1.form 标签就是 HTML 当中定义好的一个用来表示整个表单结构的双标签，我们称之

为表单域。

2. form 默认就相当于一张"白纸"，如果想让它收集用户的相关信息，HTML 里又准备

了很多的表单标签。这些标签里使用最多的一个叫 input 。

3. action 属性值表示将当前表单中的数据提交到哪里。

4. method 属性值表示以什么样试来提交当前表单中的数据。最常见的就是 get

post 。其中 get 方式就是指将数据在 URL 中进行提交，这种方式是明文。所以相对不安全，

而 POST 方式就是指将数据写在 HTTP 请求的请求体当中( )。

二.常见的表单元素

From 标签只负责定义具体的表单整体，它里面如果想要收集用户数据，就必须再有一些能

够让用户进行输入填写的模块，此时 HTML 当中就定义许多的表单标签来让用户完成输

入。最常见的表单标签就是 Input ，因为标签名称都叫input ，所以 HTML当中就设置通

过 type 属性来进行区分。

01 文本输入框：<inputtype="text" />

02 密码输入框: <inputtype="password " />

03 提交按钮：<inputtype="submit" />

04 单选框：<inputtype="radio" />

05 复选框: <inputtype="checkbox" />

06 文本域: <textarearows="行数" cols="列数"></textarea>

07 下拉框：

<select>

<optionvalue="">选项 1</option>

........... 

</select>

08 重置按钮：<inputtype="reset"/>

09 普通按钮: <inputtype="button" value="按钮" />

 

三..表单元素注意细节

1. name 属性：form 表单通过不同的表单元素来收集数据，在这个过程中很多的表单元素名

称都叫 input ,此时如果直接将这些数据提交到后台，就会出现这些数据无法区分的问题，

此时为了分别哪个数属于什么样的表单项。我们就人为的在 Input 身上设置 name 属性。这

样一来数据到达后端之后就会变成以下格式：username="syy" pwd="123" gender="男".... 

2.value: 它的作用就是定义某些表单元素的默认显示内容（文本输入框、提交按钮、重置

按钮、普通按钮）

3.checked: 这是一个属性并且它的属性值就等于这个属性名。用来设置单选和复选框中的默认被选中的某些。

4.selected：这也是一个属性值等于属性名的属性，添加在下拉选项身上实现某个选项被默认选中。

  • CSS基本介绍和基本使用

一、css基本介绍

（1）web 标准

所谓的 web 标准指的就是一系统规范网页书写的要求，它是由 W3C 组织制定，在它里面要求网页的结构、样式、行为三者相分离。

（2）名词解释

1．结构：就是通过 HTML 标签搭建的网页的结构。

2．样式：就是通过 CSS 对当前的网页结构进行修饰和美化

3．行为：通过 JS 让网页可以理解用户的一些操作。从而用户与网页之间产生交互。

二、css基本使用

Css 在国内被称之为级联样式表、层叠样式表、样式表，它的作用就是修饰当前网页中的HTML元素。

Css使用步骤:

1．CSS 与 HTML 可以看做是二门互相独立的语言，时如果想用 CSS 来操作 HTML 那么此就需要先将二者建立关系。

2．此时在 HTML 当中就准备了一个叫 style 的标签( 它是一个双标签 )，在这个标签对之间就可以用来书写我们的 CSS 代码。常见的存放位置可以是 head 标签里 title 标签下。

3．通过 CSS 的选择器找到我们想要操作的元素然给它设置样式( 写在 style 标签之中 ) 

Css体验：

1. 常见的 CSS 元素属性：width 定义元素宽度单位是 px ，height 定义高度，background-color     

设置背景颜色。

2. CSS 代码书写的固定语法: 

选择器{ CSS 代码 }

3. 建议大家在开发阶段将 CSS 样式分行写，且每行的结尾用 ; 结束。

 

三.css选择器

一、定义

所谓的 CSS 选择器就是 CSS 中已经定义好的用来选中某些元素的固定语法。的作用它就是选中我们想要设置样式的元素。

二、CSS 选择器的分类

在 CSS 中有很多种选择器，我们人为的分成二大类：简单选择器 + 复合选择器。

三、简单选择器：

 

 

1．标签名选择器：通过具体的 HTML标签名称来选择元素。【会将当前网页中所有叫该名字的标签都选中】

2．类名选择器：通过标签类名来选择元素

3．id 选择器：通过 id 名称选择元素。

类名选择器

一、为什么需要类名选择器

一个完整的网页需要很多标签组合在一起进行编写实现，因为 HTML 标签的种类有限，所以同名的一个标签有可以会在一个网页中出现多次。此时如果想对这些同名的标签分别设置不相同的样式。那么直接使用标签名选择器就没有办法实现。这种情况下我们就可以使用类名选择器。

二、类名选择器的基本使用步骤

1．定义 HTML 网页结构，然后在我们想选中的元素身上设置 class属性。

2．将我们想要一起选中的元素们身上设置相同的 class属性值( 类名 )

3．此时我们只需要在 style 标签中按着固定的语法来调用我们的类名: .类名

三、id选择器

一、为什么需要 id 选择器

如果我们只想从一堆元素当中选中其中的某一个元素，那么就可以使用 id 选择器。这个 id 就和人的身份证号是一样的。

二、Id 选择器使用

1．在我们想要选中的元素身上设置一个 id 属性。

2．给这个 id 属性设置一个值，我称为 id 名。

3．在 style 当中通过固定的语法来进行调用： #id名{} 

4．注：要求在一个网页当中不能出现同名的 id 值【虽然有效果但也不能这么做】

 

四.css简单选择器总结

1. 标签名选择器和类名选择器默认可以一次性选中多个元素，id 名选择器一次只能选中一个元素。

2. 一个标签的身上可以既具有类名又具有 id 名，且这二个属性值是可以相同的。

3. 允许一个标签的身上同时设置多个类名，要求多个类名之间用空格隔开。

4. 关于 id 选择器要求一个页面当中同一个 id 名称只能出现一次。

五.id名与类名命名规则

1. 名称不能是纯数字或者以数字开头( 但是我们经常会以数字结尾 ) 

2. 名称不能使用中文

3. 名称不能包含特殊字符，但（ - _ ）可包含

4.起名字时要做到见名知意

<九.>元素展示类型

在 HTML 当中本身定义了很多的元素，这些元素默认在网页上展示的时候会存在自已

默认的状态，例如有些元素默认情况下宽高属性不起作用，有些元素默认情况下都独占一行

显示。种现象我们就称之为元素展示类型，这为了记忆我们人为的将元素展示类型分为三种：

块元素、行内元素、行内块元素。

1.块元素：当同时存在多个块元素的时候，每个块元素都会独占一行显示，且默认情况

下它的宽高属性可以起作用。

2.行内元素：当同时存在多个行内元素的时候，这些元素都会显示在一行，如果一行放

不下自动折行。默认情况下它的宽高属性不起作用

3.行内块元素：当同时存多个行内块元素的时候，这些元素会显示在一行，默认情况下

它的宽高属性起作用。

4.注：不需要去死记哪些元素是行内，哪些是块，哪些是行内块

<十.>布局标签补充

1. div 标签，它是 HTML 当中定义好的一个双标签( DIV+CSS )。我们人为的认为它是一个体

积最大的标签。

2. span 标签，它也是一个双标签，主要用来放文字，我们人为的认为这体积很小。

3. 段落标签里不能包裹标题，因为浏览器不能正常解析。

 

<十一.>元素展示类型换

在我们进行网页布局过程中往往会遇到一些"特殊的模块"，对于这种模块来说我们之前的一

些常见标签在使用的时候就会显示 "语义" 有些不对应，所以我们可以使用相应的标签进行

强制的类型转换，从而让它可以展示成设计稿上的样子。在 CSS 当中有一个 display 属

性，可以设置不同的值来完成元素类型的转换。

1.转成块元素： display:block; 

2.转成行内块：display:inline-block

3. 转成行内元素：display:inline;  none

简单选择器权重

权重：我们就可以理解为是不同类型的 CSS 选择器在对同一个元素进行样式设置的时候，出

现的控制能力不同的现象。

对于简单选择器来说： id 选择器》类名选择器》标签名选择器

CSS特性

1.在权重相同的情况下，同一个元素后写的CSS样式会覆盖先写的 CSS 样式。【覆盖性】

2.CSS 的定义存在继承的特点，子元素会继承父元素的一些样式【继承性】

(1) 不是所有的 CSS 属性都可以被继承。

(2) 不是所有类型的元素都会去继承祖先元素的样式( 继承一般发生在块元素的身上.

(3) 继承指的就是子元素可以使用祖先元素的一些样式

(4)不同选择器对同一个元素的CSS 控制能力存在着强弱。【优先级】

 

<十二.> 复合选择器

一、为什么需要复合选择器

在实际的网而制做过程中往往会出现很多结构层级嵌套很深的现象，而这种结构模块又

很多，大家使用的标签名称又一样。所以此时我们就可以通过复合选择器，将这些简单选择

器进行组合。从而让我们选择元素变得简单。

 

二、常见的复合选择器：

1．后代选择器：这种选择器就是以某一个元素为起点，将它做为祖先然后不停的向下进行

穿透查找，去选择它下面的后代元素。

起点元素后代元素 .....{ 设置样式 } 

注：

01 后代选择器当中的每个部分都可以采用任意的简单选择器代替。

02 不同的部分之间要用空格隔开。

03 ...... 就表示可以不停的向下层查找。

2．并列选择器：就是将多个选择器使用逗号进行连接，表示同时选中这些元素，然后

设置相同的样式。其中每个部分的选择器都可以由任意类型的选择器构成。

选择器权重总结

1 简单选择器:      id 名》 class 名》 element 名

2复合选择器: 需要在大家明白的就是复合选择器由多个其它类型选择器组合而成，为了方便比

较，我们人为的给每个简单选择器都定义了一个数值，分别是： Id(100)class(10) ele(1),这三个

数值我们也称之为权重值，有了它们之后只需要将当前选择器中出现的权重值

进行相加求，最终的结果就是该选择器的权重。数值越大的权重越大

3切记权重比的就是不同选择器对同一个元素的控制力比较（区别继承的影响）

CSS文件存放位置

CSS代码可以被我们放在很多的地方，习惯性的有三种写法：内嵌 CSS 、外链 CSS、行内

CSS 。

1.内嵌 CSS 指的就是将 CSS 代码写在 html 网页中。

2.外链 CSS 指的就是就将 CSS 代码写在外部的独立 CSS 文件中。

3.行内 CSS 指的就是将 CSS 代码写在具体的 HTML 标签身上。

注：

01 依据浏览器渲染页面原理，我们选将 CSS 代码写在 HTML 文件靠前的位置。

02 使用外链 CSS 写法的时候，外部独立的 CSS 文件当中不需要写style 标签，同时还

需通过 link 标签将某个 CSS 文件引入到具体的 HTML 文件当中。【rel 属性对不要省略】

<linkhref="目录 CSS 文件路径" type="text/css"rel="stylesheet" />

 

03对于上述的三种 CSS 文件存放位置来说，行内 CSS 的权重是最高，但是外链与内

嵌并不存在谁一定大于谁的现象( 权重 )，它的控制能力完全取决于各自所使用的选择器权重。

04如果想要直接将某一个样式的权提至最高，我们只需要在该句 CSS 代码的最后设置 !important . 

P{ color:pink!important; } 

<十三.>音频视频标签(video与audio用法相同)

<audio autoplay controls loop>

降级的说明性文字

<sourcesrc="格式 1 路径" />

....... 

</audio>

注：01 audio 是一个双标签，用来定义一个声音资源模块。

02 autoplay 用来设置自动播放

03 controls 调用当前设备的播放控制。

04 loop 设置当前音频循环播放。

05 默认 audio 里的文字不显示，只有在当前浏览器不支持这个标签的时候会显示文字

<十四.>常见的文字样式

1.  行高：line-height, 当我们将行高的大小设置成当前元素的高度时，可以实现单行文本在当前元素中垂直方向居中显示的效果。

2.水平对齐方式：text-align: left |center | right ，分别表示设置文字在当前盒子当中水平的对齐。

3.字体大小：font-size,单位是px，一般情况下浏览器都会有一个最小的显示字体。

4.字体粗细：font-weight,可以设置关键字，或者数值( 100-900 ). 关键字有normal 表示正常，还有bold 表示加粗。

5.字体名称： font-family，一般常用的就是"微软雅黑""黑体"

6.字体颜色：color，可以设置颜色单词，还可以是十六进制的数字。

文字阴影

  1. 字体样缩写

Font: 文字粗细大小/行高字体名称; 

Font: bold20px/200px '微软雅黑'; 

  1. CSS3 中的文字阴影

Text-shadow: x y r color; 

Text-shadow: 0px 0px 0px red; 

 

注：

01 x 表示阴影在水平方向的偏移量，可以设置负值，正负不表示大小，只表示方向。

水平向右为正，向左为负，单位是px 

02 y表示阴影在垂直方向的偏移量，垂直向上为负，向下为正单位px 

03r表示阴影的模糊程度，数值越大阴影越模糊，单位px

04 color表示阴影的颜色

05 C3允许一段文字有多层阴影，多层之间用逗号隔开，每一层内，不同参数之间用空格隔开。

过渡属性

过渡属性的作用就是在元素的默认样式与最终样式变化之间产生一个过程。在 C3 中新增了

一个属性叫transition 

Transition: all 1s linear 0s; 

注：

01 第一个参数的作用是设置元素身上的哪些属性产生过渡，一般用all表示所有的属性都过渡。

02第二个参数的作用设置过渡需要时长，单位是s 不要省略

03 第三个参数的作用设置过渡的动画形式，linear 表示匀速

04 第四个参数设置当前过渡等待多久之后才会执行( 延时 )。即使为0，单位也不能省。

05 :hover选择某个元素被鼠标移上时的状态。

06 transition 这个属性既可以添加在元素默认状态，也可以添加在鼠标移上状态，区别就是

第二种做法在鼠标离开的时候不会在有过渡变化。

说明：文章部分内容通过网络整理，如有侵权，请联系作者删除。

 

posted @ 2020-07-04 20:27  看日出  阅读(847)  评论(0)    收藏  举报