html css 知识点全面总结

最新推荐文章于 2024-04-27 12:50:08 发布

Spring宇轩

最新推荐文章于 2024-04-27 12:50:08 发布

阅读量406

点赞数

分类专栏：总结文章标签： xml css html

本文链接：https://blog.csdn.net/m0_58032275/article/details/120727192

版权

总结专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html

html（HyperText Markup Language），超文本标记语言，是一种解释执行的文本类标记语言，是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

html是一种规范、标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本

文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，例如:

文字如何处理

画面如何安排

图片如何显示

…

浏览器按顺序解析html页面，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其

错误，且不停止其解释执行过程，程序员只能通过浏览器中显示的效果，来分析出错原因和出错位置。

基本HTML结构

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head> </head> 
    <body> </body> 
</html>

XML与HTML的区别

比较与XML来说：html可以自动过滤空格，语法要求不是很严格，不区分大小写，有固定的标签集而xml却相反，xml中是严格的树状结构没有固定的标签集，是可扩展的，可自定义的。对于两者的作用来说html用来显示数据，xml用于描述数据，存放数据，可以作为数据持久化的一种介质，html将数据和显示结合在一起，在页面中将数据显示出来，而xml，将数据和显示分开。html语法错误时不会显示出来，程序员需要根据，html页面显示的内容判断，写的内容是否正确，xml的语法错误会使得文件报错。

html显示颜色

RGB（255,255，255）

255^3种

html 解析

编写好的html页面，可以使用浏览器来解析、运行、显示，这时候有俩种方式：

使用浏览器直接打开本地的html页面（需要使用本地地址）

使用浏览器访问服务器软件中部署的html页面（需要使用服务器地址）

1.可以使用本地路径直接访问

2.服务器访问

可以支持html页面（静态资源）访问的web服务器，例如apache服务器、nginx服务器等（软件）

可以支持java代码（动态资源）访问的web服务器，例如tomcat服务器、jboss服务器等（软件）

当前，我们可以先选用nginx服务器，因为现在只有静态页面（html），之后的学习中，可以再选择支持动态资源访问的web服务器。

ngix服务器使用

双击ngix.exe开启服务器默认监听端口号为80
浏览器访问http://localhost:80
显示欢迎界面即为启动成功
然后就可以将写好的html文件放入nigx中的html目录中
就可以通过浏览器访问http://localhost/文件名.html

在eclipse中创建静态的web项目（静态页面的体验）

在WebContent中新建html页面
写好后run as HTTPServer
在Publishing Diretory中设置为nigx文件路径中的html文件夹
最后添加到Server中，最后可在浏览器访问

html文档结构

在html中，会有不同的文档结构，分别需要使用不同的头部声明来表示

1、严格的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2、宽松的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3、frameset框架文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

4、HTML5文档类型(常见)

<!DOCTYPE html>

html标签

块元素（block）

特点，一个标签，需要独自占一行的空间

常见的此类型标签有：

1. <h1>~<h6> ，标题
有字体大小的设置
文本有加粗强调设置
上下文之间有较大间距
2. <p> ，段落
独占一行
上下文之间具有距离
3. <ul> <li> ，无序列表
俩者需要配合使用
ul li都独占一行空间
ul 上下文之间有很大空间
li与列表的样式显示(默认点状)，并且有文本缩进
例如
<ul>
    <li>列表1</li>
    <li>列表2</li> 
</ul>


4. <ol> <li> ，有序列表

5. <dl> <dt> <dd> ，自定义列表
三个标签配合使用，一个dl下面可以有若干个dt，
一个dt下面可以有若干个dd dl dt dd独占一行空间dl上下文之间有很大空间dd有文本缩进
例如
<dl>
    <dt>列表标题</dt> 
    <dd>列表内容</dd> 
    <dd>列表内容</dd> 
    <dd>列表内容</dd> 
</dl>

6. <div>
独占一行

行内元素（inline）

也可以称为内联元素。特点：不会独占一行，可以和其他行内元素并列一起显示

常见的此类型标签有：

<span>

最干净的内联标签（没有任何修饰）

不独占一行

<a> ，超链接
不独占一行
点击可以发生跳转（或进行对应其他操作），默认的语法颜色为绿色
文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示

<u>下划线修饰</u> 
<i>斜体修饰</i> 
<b>加粗</b> 
<em>强调</em> 
<strong>加粗</strong> 
<s>删除线</s> 
<sup>上标</sup> 
<sub>下标</sub>

<img> ，图片
src属性中，可以写上图片的地址
<!-- 服务器路径 -->
<img src="http://www.baidu.com/car.jpg"> 
<!-- 相对路径 -->
<img src="../a.jpg">

超链接

从一个web资源到另外一个web资源的链接

1、链接路径

常见的路径分类：

服务器路径

例如，http://www.briup.com/hello http://127.0.0.1:8989/hello

相对路径

例如，hello.html …/hello.html

本地路径

例如，file:///d:/html/index.html

但是，超链接中不能写本地路径

2、链接状态

未访问

已选择

已访问

3、属性

超链接标签中，有一个很重要的属性href，该属性中可以设置链接的URI地址

绝对路径：http://www.baidu.com

相对路径：hello.html

邮件地址：mailto:test@briup.com

锚点：#id

空连接：javascript:void(0);

link

只能出现在head标签中，定义了当前文档和另一个资源之间的联系。

通常用于链接到外部css样式表

例如

<link rel="stylesheet" href="style.css" type="text/css">

href：定义关系链接地址

rel: 定义当前文档与所连接文档之间的关系

type: 文档类型

base

只能出现在head标签中，设置页面中所有文档的相对路径，相对的基准URI

如果设定了基准链接地址，当前页面中的所有相对路径都基于该路径

例如，

<base href="http://localhost:8888/web">

html表格

在html中，使用

可以定义一个表格，用来定义表格中的一行，用

来定义列

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>test</title> 

</head> 

<body>

<table> 

<tr>

<td>编号</td> 

<td>姓名</td> 

<td>年龄</td> 

</tr> 

<tr>

<td>1</td> 

<td>tom1</td> 

<td>21</td> 

</tr> 

<tr>

<td>2</td> 

<td>tom2</td> 

<td>22</td> 

</tr> 

</table> 

</body> 

</html>

此处，练习了用表格写出个人简历（详见另一篇：https://blog.csdn.net/m0_58032275/article/details/120727925?spm=1001.2014.3001.5502）

form

<form> 是html中的表单，它的属性有：

action

method

name

enctype

accept-charset

1、action

设定处理表单数据URI的地址

2、method

设定数据传送到服务器的方式

get 将输入的数据追加到action地址后面

post 将输入的数据保存到HTTP协议的报文中

3、name

设定表单的名称

4、enctype

设定表单数据的内容类型

application/x-www-form-urlencoded

在发送前编码所有字符（默认），以属性=值&属性=值的形式进行处理

multipart/form-data

不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。

5、accept-charset

设置服务器端可以处理的字符编码（一般不需要单独设置）

例如，一般情况下，设置action和method两个属性即可

<form action="login.action" method="post"> </form>

例如，如果是上传，那么一定要设置enctype属性

<form action="login.action" method="post" enctype="multipart/form-data"> </form>

input

<input> ，基本表单控件

type属性可以控制，这个表单控件的具体类型

text 单行文本框

password 密码框

radio 单选按钮

checkbox 复选框

file 文件（上传）

hidden 隐藏域

submit 提交按钮

reset 重置按钮

name属性，控件名称，这个名称将与控件的当前值，形成"名称=值"，一同随表单提交

value属性，用于设定初始化，可选。

checked属性，单选框，复选框默认选中属性

button

按钮控件

name属性，控件名称

value属性，控件初始值

type属性，控件类型

button 普通按钮

submit 提交按钮

reset 重置按钮

onclick可以添加点击事件

select

下拉列表

<select name="sel"> 
    <option value="值1">选项1</option> 
    <option value="值2">选项2</option> 
</select>

<select> 标签
name属性， 控件名称
size属性， 列表框中行的显示数量
multiple属性， 是否允许多选

ps:如果select元素不包含属性size和属性multiple时，表单类型显示为菜单（组合框），如果使用了属

性size和属性multiple中的任意一个，则表单类型显示为列表框

<option> 标签
value属性， 定义控件的初始值。提交表单时，初始值会被提交给服务器。

textarea

多行文本框（文本域）

name属性，控件名称

rows属性，定义文本框行数

cols属性，定义文本框列数

other

disabled 禁用

支持该属性的控件：button,input,option,select,textarea

禁止的控件的值不与表单一起被提交

readonly 只读

支持该属性的控件：input,textarea

只读元素的值可以与表单一起被提交

css

css（Cascading Style Sheet），层叠样式表，用来渲染HTML中元素内容的呈现的形式

语法

CSS属性和值之间用冒号分隔
CSS属性之间用分号分隔
CSS的值有多个的时候使用空格分隔

使用

1、内嵌式

每个HTML元素都包含有一个style属性，使用该属性可以直接指定样式

<div style="font-size: 60px;color: red;">hello world</div>

2、嵌入式

CSS样式定义内容位于style元素之间，其type属性必须被定义为text/css

把样式直接嵌入到html页面中

<!DOCTYPE html>
<html> 
<head> <meta charset="UTF-8"> 
<title>test</title>
<style type="text/css"> 
div{
font-size: 60px; color: red; } 
</style> 
</head> 
<body>
<div>hello world</div> 
</body> 
</html>

3、外部引用

可以在多个文档间共享样式表，提高效率；可以改变样式表而无须改变HTML文档

只需在html中链接css路径

<link rel="stylesheet" href="css/test.css" type="text/css">

css选择

css选择器，其实只是一种css的语法，可以让我们选中需要渲染的标签元素。

css中有多种选择器，可以针对指定的html元素，进行样式渲染。

常用的选择器如下：

1、标签选择器

通过HTML元素的标签名，来选择指定的元素

例如，选择html中的div元素，进行样式渲染

div{

font-size: 50px; 

}

2、类选择器

通过HTML元素的class属性值，来选择指定的元素

例如，选择html中所有class的值为rr的元素，进行样式渲染

<p class="rr">one</p> 
<span class="rr">two</span>
<div class="rr">three</div>

注意，一个标签class属性中的值，可以有多个，例如

one

.rr{

color :red; 

}

3、ID选择器

通过HTML元素的id属性值，来选择指定的元素

<p class="rr">one</p> 
<p id="two" class="rr">two</p> 
<p class="rr">three</p>

#two{
    background-color:green; 
}

4、通配符选择器

*{ 
    color:red; 
}

5、组合选择器

使用逗号,隔开选择器，可以减少样式表的重复声明

h1,h2,h3,h4{ 
    color:red; 
}

6、关联选择器

选择div标签里面的所有a元素（儿子元素和后代元素），然后进行样式渲染

div a{
    color:red;
		}

选择div标签中直接子元素里面的a元素（只有儿子元素），然后进行样式渲染

div > a{ color:red; }

<!DOCTYPE html> 
<html> <head> <meta charset="UTF-8"> 
    <title>test</title> 
    <link rel="stylesheet" href="css/test.css" type="text/css">
    </head>
    <body>
        <div><a>test</a> <span><a>test</a> 
            </span> </div> </body> 
</html>

7、伪类选择器

是指对同一个HTML元素的不同状态的一种定义/选择方式

例如

/* 超链接没有任何动作前的状态 */ 

a:link{ 

color: red; 

}

/* 光标移动到超链接上的状态 */ 

a:hover{ 

color: green; 

text-decoration:none; 

}

常见

CSS常见的样式属性和值

1、尺寸属性

width 设置元素的宽度

height 设置元素高度

max-height 设置元素的最大高度

max-width 设置元素的最大宽度

min-height 设置元素的最小高度

min-width 设置元素的最小宽度

2、字体属性

font-family 字体族科

微软雅黑 Microsoft YaHei

font-size 字体大小

font-style 字体风格

normal 正常;italic 斜体;oblique 倾斜

font-weight 字体加粗

normal 正常;bold 粗体;bolder 更粗;lighter 更细

text-decoration 规定添加到文本的修饰

none 默认，定义标准的文本

underline 定义文本下的一条线

overline 定义文本上的一条线

line-through 定义穿过文本下的一条线

blink 定义闪烁的文本

3、颜色

color 设定文本的颜色

opcity 设置透明度

所有浏览器都支持 opacity 属性

IE8 以及更早的版本支持替代的 filter 属性

例如，filter:Alpha(opacity=50)

一般两个属性一起写，保证兼容性

opacity：0.5;

filter:Alpha(opacity=50)

24、背景

设置元素的背景颜色，background-color:#CCC;

background-image

设置元素的背景图像

url(bgimage.gif)

background-repeat

设置是否及如何重复背景图像

repeat 默认。背景图像将在垂直方向和水平方向重复

repeat-x 背景图像将在水平方向重复

repeat-y 背景图像将在垂直方向重复

no-repeat 背景图像将仅显示一次

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动

fixed 固定

scroll 滚动

background-position

设置背景图像的开始位置

background

简写属性在一个声明中设置所有的背景属性

5、边框属性

border-style

设置4个边框的样式

dotted 定义点状边框。在大多数浏览器中呈现为实线

solid 定义实线

double 定义双线

…

如果4个值都给定了，分别应用于上，右，下，左

如果给定1个值，应用于各边

如果给定2个值，第一个值应用于上下边，第二个值应用于左右边

border-width

设置4个边框的宽度

border-color

设置边框颜色

border

在一个声明设置所有的边框属性border:1px solid #ff0000

6、鼠标光标属性

cursor，属性规定要显示的光标的类型（形状）

none 无

auto 默认。浏览器设置的光标

pointer 光标呈现为指示链接的指针（一只手）

wait 此光标指示程序正忙（通常是一只表或沙漏）

help 此光标指示可用的帮助（通常是一个问号或一个气球）

7、列表属性

list-style 在一个声明中设置所有的列表属性

list-style: square inside url(’/i/eg_arrow.gif’)

list-style-image 将图象设置为列表项标记

list-style-image:url("/i/arrow.gif");

list-style-position 设置列表项标记的放置位置

inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标

记对齐

list-style-type 设置列表项标记的类型

none 无标记

disc 默认。标记是实心圆

circle 标记是空心圆

square 标记是实心方块

decimal 标记是数字

ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)

upper-roman 大写罗马数字(I, II, III, IV, V, 等。)

lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

lower-latin 小写拉丁字母(a, b, c, d, e, 等。)

upper-latin 大写拉丁字母(A, B, C, D, E, 等。)

8、表格

color

font-size

text-align 文字对齐

background

border 边框，只能用于table,th,td

margin 间距，只能用于table,captionpadding 内间距，只能用于th,td

width 宽，只能用于table,td,th

height 高，只能用于table,td,th

Spring宇轩

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html css 知识点全面总结

htmlhtml（HyperText Markup Language），超文本标记语言，是一种解释执行的文本类标记语言，是Internet上用于编写网页的主要语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。html是一种规范、标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，例如:文字如何处理画面如何安排图片如何显示…浏览器按顺序解析html页面，然后根据标记符解释和显示其
复制链接

扫一扫