一个后端开发者的前端语言基础：HTML5 & CSS

摘要：每个标签可有一个独立的号。该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。

前端语言基础：HTML5 & CSS (一) HTML5：超文本标记语言 (1) 基本概念

是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )

这些标签以<标签名称>的形式出现，用于标记文本内容的含义

浏览器通过元素标签解析文本内容并将结果显示在网页上，而元素标签本身并不会被浏览器显示出来

(2) 基本结构

HTML5元素的内容一般以起始标签<元素名>开始，以结束标签终止

......

主体内容

DOCTYPE是Document Type的简写，含义为文档类型。

HTML5文档基础结构中第一行就是HTML5的DOCTYPE声明

Html文件开始标签和结束的标签——文档的根标签

指定html文档的一些属性，例如页面标题，字符集和关键字等-

网页标题标签，即被收藏以及搜索引擎中搜索出的名称

元数据标签，不显示，但是机器可读，常用于搜索引擎索引(SEO优化)

字符集声明(网页编码声明)

关键词声明

页面描述声明

可用于定义文档中指定区域的字体风格、背景颜色、对 齐方式等各类样式信息

Eg：

链接标签

标签用于连接外部资源和当前HTML5文档，它只出现在首部标签 中，通常用于连接外部样式表

Eg：

此标签为可选，取决于当前页面是否需要使用脚本内容，比如JavaScript。该标签可以直接引用外部脚本文件，也可以直接将脚本命令写在标签中

显示在页面上的内容都写在body里面

(3) 基本规范

HTML5使用标签为文档进行注释 (多行或者单行)

早期的HTML规范中，标签的大小写是不敏感的，可能存在大写标签的情况

万维网联盟(W3C)明确规定了在新版本HTML5中必须使用小写格式，包括元素标签本身和其中可能出现的属性均需要遵守此规范

一些标签，没有结束标签 ，在标签内结束

比如 换行

(一般来说加上/更加标准)

XML规范中，所有的标签都必须有结束标签

在HTML5文档中存在一些特殊字符无法直接使用。例如小于符号(<)和大于符号(>)是无法直接输出的，因为它们会被误认为是元素标签的组成部分;而连续空格也无法正确显示，会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在HTML5中称为字符实体(Character Entities)

html的操作思想 (理解即可)

网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来(封装起来)，通过修改标签的属性值实现标签内数据样式的变化

一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容 器的属性值，就可以实现容器内数据样式的变化

(4) 常用标签

1. 文字标签：修改文字样式

属性：

size: 文字的大小 取值范围 1-7,超出了7，默认还是7

face: 文字

color: 文字颜色 (两种表示方式)

英文单词：red green blue black white yellow

使用十六进制数表示 #ffffff : RGB

2. 标题标签、段落标签、换行标签、水平线标签和特殊字符

A：标题标签

.......

B：段落标签

p元素有多种属性，比较常用的是对齐方式align属性

一段居中的文字

一段居右的文字

C：换行标签

换行标签用于在当前位置产生一个换行，相当于一次回车键所 产生的效果。该标签多带带使用，无结束标签

建议使用该标签代替回车键，因为回车键所产生的多个连续换行会被浏览器自动省略

标签每次只能换一行，如需多次换行，必须写多个标签

D：水平线标签

代码

属性

align属性值：left(左对齐)、center(居中)、right(右对齐)

width：表示宽度，可以使用百分数，也可以用像素表示

size：表示高度，其值是数字 取值范围 1-7

color：代表颜色，默认黑色

noshade：代表不显示阴影，默认情况是显示阴影

D：特殊字符**

< <

> >

空格

& &

3. 文本格式标签

A. 字体标签

B. 斜体字标签

C. 粗体字标签 和

D. 上标标签、下标标签 和

E. 修订标签 和

F. 预格式化标签

4. 列表标签

无序列表项1

无序列表项2

有序列表项1

有序列表项2

TYPE取值设置的符号样式1以数字进行排列 ，系统默认a以小写字母排列A以大写字母排列i以小写的罗马数字排列I以大写的罗马数字排列disc圆点符号，系统默认circle空心原点square空心方块

第一个词条

第一个词条的定义

......

5. 图像标签

语法结构为：

test/c.html

7. 超链接标签

A: 链接资源

显示在页面上的内容

href: 链接的资源的地址

target：设置打开的方式 ，默认是在当前页打开

可以取四个值

属性值表示的含义_parent在上一级窗口打开(常在框架页面中使用)_blank新建一个窗口打开_self在同一窗口打开，是默认取值_top忽略所有的框架结构，在浏览器的整个窗口打开

B: 定位资源

顶部

回到顶部

8. 移动文字标签

移动文字内容

属性功能说明属性取值各属性值的功能behavior设置文字的移动方式Scroll、Slide、alternate循环移动、移动一次停止、来回交替移动direction设置文字的移动方向left、right、up、down从右向左移动、从左向右移动、从下向上移动、从上向下移动bgcolor设置文字的背景颜色英文颜色名称表示所用颜色width设置文字背景的宽数字 (或者百分比)设置背景的绝对宽度heigth设置文字背景的高数字 (或者百分比)设置背景的绝对高度hspace和vspace设置文字背景和周围其他元素的空白间距数字设置文字背景和周围其他元素的空白间距的绝对值loop设置移动文字的循环次数infinite、正整数文字移动无限次、文字移动n次sscrollmount设置移动文字每次移动的距离数字(默认单位px)文字每次移动的距离scrolldelay设置移动文字每次移动后的间歇时间数字(默认单位px)文字每次移动后的间歇时间

9. 表格标签

可以对数据进行格式化，使数据显示更加清晰，可用于静态页面和动态页面的排版

: 表示表格的范围

width：宽度

border：边框

cellpadding：定义内容和单元格的距离

cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、

bgcolor：背景色

align：对齐方式

tr：定义行

bgcolor：背景色

align：对齐方式

td：定义单元格

colspan：合并列

rowspan：合并行

:表格的标题

10. 表单标签

概念：用于采集用户输入的数据，用于和服务器交互，例如登录或者注册界面

: 定义一个表单的范围

属性

action 指定提交数据的URL，默认提交到当前页面

method 指定表单提交方式，常用的有两种，get(默认)和post

简单说一说： get和post区别?

1、get请求地址栏会携带提交的数据，post不会携带

2、get请求安全级别较低，post较高

3、get请求数据大小的限制，post没有限制

输入项：可以输入内容或者选择内容的部分

大部分的输入项 使用

在输入项里面需要有一个name属性

普通输入项：

密码输入项：

单选输入项：

复选输入项：

文件输入项 (后面上传时候用到)

下拉输入项 (不是在input标签里面的)

1991 1992 1993

- 默认选择

selected="selected"

文本：

隐藏项(不会显示在页面上，但是存在于html代码里面)：

提交按钮：

使用图片提交：

重置按钮： 回到输入项的初始状态：

普通按钮：

11. 容器标签

A. 标签

标签可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。

该标签是一个块级元素(block level element)，浏览器会自动在和所标记的 区域前后自动放置一个换行符。每个标签可有一个独立的id号。

同样属于块级元素的还有段落标签、表格标签、标题标签-等。

B. 标签

标签通常作为文本的容器，它没有特定的含义和样式，只有与CSS同时使用才可以为指定文本设置样式属性。

该标签是一个内联元素(inline element)，与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认在同一行显示。

(二) 层叠样式表

多个样式可以作用在同一个html元素上，使得页面效果更加好，CSS将网页内容和显示样式进行分离，降低耦合度，提高了开发效率

(1) CSS和html结合的方式

内联样式在每个html标签上面都有一个属性 style，把css和html结合在一起

内部样式使用html的一个标签实现

补充样式style标签里面 使用语句(在某些浏览器下不起作用)

外部样式使用头标签 link，引入外部css文件，第一步 ，创建一个css文件

一般使用第四种方式

优先级(一般情况)

由上到下，由外到内。优先级由低到高。

后加载的优先级高

(2) CSS的基本选择器

含义：要对哪个标签里面的数据进行操作

(1) 标签选择器

使用标签名作为选择器的名称

div {

background-color:gray;

clolr:white;

}

(2) class选择器(div.ideal)

每个html标签都有一个属性 class

test

.ideal {

background-color:orange;

}

(3) id选择器 (div#ideal)

每个html标签上面有一个属性 id

test

#ideal {

background-color:#333300;

}

优先级：style > id选择器 > class选择器 > 标签选择器

(3) CSS的扩展选择器

(1) 关联选择器(调用加空格)

test

设置div标签里面p标签的样式，嵌套标签里面的样式

div p {

background-color:orange;

}

(2) 组合选择器

aaa

bbb

把div和p标签设置成相同的样式，把不同的标签设置成相同的样式

div,p {

background-color:orange;

}

(4) CSS的盒子模型

在进行布局前需要把数据封装到一块一块的区域内(div)

(1) 边框

border: 2px solid blue;

border：统一设置

上 border-top

下 border-bottom

左 border-left

右 border-right

(2) 内边距

padding:20px;

使用padding统一设置

也可以分别设置

上下左右四个内边距

(3) 外边距

margin: 20px;

可以使用margin统一设置

也可以分别设置

上下左右四个外边距

(4) float：浮动

left：文本流向对象的右边

right：文本流向对象的左边

(5) 布局定位

position：

属性值

absolute ：

将对象从文档流中拖出

可以是top、bottom等属性进行定位

relative ：

不会把对象从文档流中拖出

可以使用top、bottom等属性进行定位

结尾：

如果内容中有什么不足，或者错误的地方，欢迎大家给我留言提出意见, 蟹蟹大家 !^_^

如果能帮到你的话，那就来关注我吧!(系列文章均会在公众号第一时间更新)

在这里的我们素不相识，却都在为了自己的梦而努力 ❤一个坚持推送原创Java技术的公众号：理想二旬不止