HTML+CSS笔记

网页的基本结构

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" /> 
        <!-- charset="utf-8" 告诉浏览器采用 utf-8 的编码格式解码，防止出现乱码 -->
        <!-- 浏览器默认采用的是 gb2312 的编码格式 -->
		<title>网页标题</title>
	</head>
	<body>
        <!-- 在网页中显示的内容 -->
	</body>
</html>

：为 HTML5 的文档声明，表示以 HTML5 的标准编写。
：HTML文档中的根标签，有且仅有一个，所有内容都被其包括。
：用于设置网页头部信息，提供给浏览器观看，浏览器通过提供的信息从而解析网页，其内容不会显示在网页中。
：表示网页的主体，承载着需要在网页中显示的全部内容。
：meta标签设置网页中的一些元数据，比如网页的字符集（charset）、关键字和简介等。
：用于设置网页的标题

常用的标签

1. 标题标签（h1~h6)

<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

运行效果：

一级标题

一级标题

一级标题

一级标题

一级标题

一级标题

说明：标题中的文字由h1~h6依次从大到小进行展示。且h1标签的重要性仅次于title标签，搜索引擎在检索玩title边前后会立即查看h1中的内容，因此h1标签会影响到页面在搜索引擎中的排名，且页面只能写一个h1。

2. 段落标签（p)

<p>
    第一行段落   文字...，
    第二行段落文字---，
    第三行段落文字！！！，<br />
    第四行段落文字+++。
</p>

运行效果：

第一行段落文字...，第二行段落文字---，第三行段落文字！！！，
第四行段落文字+++。

说明：

在p标签中，无论有多少空格，最终只会显示一个空格。

及时在p标签中通过回车换行，但是不会有任何效果，即无法通过回车换行。

如果想在p标签进行换行，则需要借助 标签。

3. 水平线标签（hr）

<hr />

运行效果：

说明：在指定位置画出一条直线。

实体（转义字符串）

在HTML中，一些如：<、>这类特殊字符是不能直接使用的，因此需要一些特殊的字符来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）。示例如下

<p>
    a<b>c <!-- 原意为：a小于b大于c -->
</p>

运行效果：

ac

运行发现，无法正常显示，并且字符 c 有加粗效果，因为标签就是将其包裹的文字进行加粗处理，如果想正常显示出，则需要借助实体来进行转换。

实体语法：

&实体名字;：例如<显示一个小于号（less than），>显示一个大于号（greater than）。

 ac 空格：一段测    试文字, 版权符号：© 

运行效果：

ac
空格：一段测试文字,
版权符号：©

说明：

 (non-breaking space)：不间断显示空格，可以解决在标签中无法显示多个空格的问题。

更多实体符号可参考HTML实体符号参考手册

图片格式

在开发过程中，常见的图片格式有jpg（jpej）、png和gif，不同格式的图片展现的效果不同，因此使用时有一定的原则，但并非硬性要求。

三中图片格式的特点：

jpg（jpeg）：支持的图片颜色比较多，图片可以压缩，但不支持透明的，一般用来保存颜色丰富的图片。

png：支持的颜色多，并且支持复杂的透明，一般用来保存颜色复杂的透明图片。

gif：支持的颜色少，只支持简单的透明，但是支持动态图，一般用于保存颜色单一或者动态的图片。

图片使用原则（非硬性要求）：

图片效果一致，使用图片大小最小的。

图片效果不一致，使用图片效果好的。

元素类型

在HTML中元素可分为两类，一种是行内元素（内联元素），另一种是块元素。

行内元素：无法对其设置宽高，自身的大小由包裹的元素决定，不会单独占据一行。

块元素：可以通过设置宽高改变自身的大小，且单独占据一整行。

<div width="200px" height="50px" style="background-color: red"> 我是块元素 </div> 我是行内元素 

运行效果：

我是块元素
我是行内元素
注意：其实还有一种元素叫行内块元素,比如img标签，它不会单独占据一行，但是却可以设置宽高，并且这三种元素类型都可以通过display属性进行转换。

HTML5标签

1.图片标签（img）

由于在纯文本中无法直接添加图片，但在网页中需要通过图片去展示一些信息，因此需要通过<img />标签间接引入图片，示例如下：

<img src="http://pic.51yuansu.com/pic3/cover/03/47/75/5bac12ac81be0_610.jpg" alt='logo' />

运行效果：

说明：

src属性是引入的图片地址，既可以是网页上的链接，也可以是电脑中的图片路径。

相对路径：引入的图片路径是相对于当前文件（编写HTML的文件）所在文件夹的路径。

绝对路径：引入的图片路径是电脑中某个盘中图片所在位置的完整路径。

../可用来返回上一级

alt属性的作用是当图片无法正常先试时，则用属性值代替图片，并且搜索引擎可以通过alt的属性值来搜索图片。比如：在搜索框中输入logo，这张图片就会被搜索引擎找到。

如果要设置图片的尺寸，则可用width和height属性，其两者的属性值单位为px，当仅仅设置两者中的一个时，图片等比例缩放。

2. META标签（meta）

meta标签一般用来设置网页中的一些元数据，比如网页的字符集（charset）、关键字和简介等，通常放在head标签里面。示例如下：

<meta charset="utf-8" />  <meta name="keywords" content="java,javascript,python,前端" /> <meta http-equiv="refresh" content="5;url=http://www.baidu.com" />

说明：

charset：用于告诉浏览器通过哪种编码格式对网页进行解码，以防出现乱码现象。

name="keywords"：用于设置网页的关键字，多个关键字在content属性值中以逗号隔开。

http-equiv="refresh"：对网页进行重定向处理，此时content中的值为：秒数;url=重定向的网址。

3. 内联框架（iframe）

使用内联框架可以引入一个外部页面。在实际开发中并不推荐使用，因为内联框架的内容不会被搜索引擎检索。

<iframe src="http://www.baidu.com" width="100px"></iframe>

运行效果：

4. 超链接（a）

点击后进行网页跳转

<a href="http://www.baidu.com" target="_self">百度一下</a>

运行效果：

百度一下

说明：

href：该属性值为点击后跳转的网址。

target：主要设置一怎样的方式展示跳转后的网页。

_self：默认值，在当前窗口打开网页。

_blank：在新窗口打开网页。

_top：一般用于内联框架中，在最顶部的框架中打开网页。

_parent：一般用于内联框架中，在父框架中打开网页。

如果属性值为内联框架中的name属性的属性值，则在该框架中打开网页。

实现页内跳转：

返回顶部：只需把属性href的值设置为#即可实现。

返回指定位置：在指定跳转的地方选择一个标签，并为其取一个id名，然后将a标签的属性href值设置为：#id名（相当于 CSS3 中的id选择器），即可实现。

5. DIV标签（div）

div标签是一个常用的块元素，它主要用来对页面进行布局，无特殊作用。

6. SPAN标签（span）

span这一个行内元素（内联元素），即自身的大小由包含的内容所决定，不会单独占据一整行，它专门用来选中需要进行样式设置的文字，无特殊作用。

CSS的三种样式表

1. 内联式样式表

直接将css样式写在标签中style属性的方式成为内联式样式表。示例如下：

 一段用来测试css内联式样式表的文字。 

运行效果：

一段用来测试css内联式样式表的文字。

说明：

每一种css样式都以：属性: 属性值（冒号后的空格可有可无）的方式书写，并且都以分号进行分割。

这种方式不推荐使用。因为不方便后期的维护，并且复用性太低。

2. 嵌入式样式表

在head标签添加style标签，并将css样式写在style标签内，然后通过css选择器选择指定的标签，对其进行css样式渲染的方式称为内嵌式样式表，示例如下：

<html> <head> <style type="text/css"> p{ font-size: 24px; color: red; } </style> </head> <body> 第一段用来测试css内嵌式样式表的文字。 第二段用来测试css内嵌式样式表的文字。 第三段用来测试css内嵌式样式表的文字。 </body> </html>

运行效果：

第一段用来测试css内嵌式样式表的文字。

第二段用来测试css内嵌式样式表的文字。

第三段用来测试css内嵌式样式表的文字。

说明：

该方式必须先使用css选择器选择需要渲染样式的标签，然后将css样式书写在选择器后面的大括号中。

这种方式进一步实现了结构和表现的分离，后期易于维护，并且复用性较高，推荐使用这种方式，

3. 外部式样式表

专门创建一个.css的文件用于编写css样式，然后在head标签中通过link标签将其引入的方式称为外部样式表。示例如下：

<html> <head> <link rel="stylesheet" type="text/css" href="test_style.css" /> </head> <body> 第一段用来测试css内嵌式样式表的文字。 </body> </html>

创建一个test_style.css的文件，并在内部编写如下代码：

p{ color: #22CCFF; font-size: 24px; }

运行效果：

第一段用来测试css内嵌式样式表的文字。

第二段用来测试css内嵌式样式表的文字。

说明：

link标签中的rel="stylesheet"和type="text/css"是固定的，不许更改，而href属性的属性值为引入的外部样式表的路径。

这种方式完全实现了结构和表现的分离，而且一个样式表可以提供给多个页面使用，使得样式的复用性达到最大化，因此非常推荐使用该种方式。

CSS常用选择器

1. 元素选择器

语法：标签名{ }，选中的元素不唯一，示例如下：

/* 选中所有的 div 元素 */ div{ width: 200px; height: 100px; background-color: blue; }

2. id选择器

语法：#id名{ }，由于id不可重复，所以选中的元素唯一，示例如下：

/* 选中id名为 div_id 的元素 */ #div_id{ width: 200px; height: 100px; background-color: blue; }

2. class选择器

语法：.class名{ }，class名可重复，依次选中的元素不唯一，示例如下：

/* 选中class名为 div_class 的所有元素 */ .div_id{ width: 200px; height: 100px; background-color: blue; }

注意：每一元素都可以有多个class名，每一个class名之间用空格隔开。

3. 分组选择器

语法：选择器1, 选择器2, 选择器3, ...{ }，通过这种方式可以同时选择多个选择器对应的元素，示例如下：

div, #div_id, .div_class{ width: 200px; height: 100px; background-color: blue; }

4. 通配选择器（通配符）

语法：*{ }，对页面中所有元素进行设置，示例如下：

/* 将所有元素的内、外边距设置为 0px */ *{ padding: 0px; margin: 0px; }

5. 复合选择器（后代选择器）

语法：选择器1 选择器2 选择器3 ...{ }，从选择器1开始，每一级都是一种包含关系，直到最后一个选择器为止，示例如下：

/* 先选择 div 下的 id 名为 div_id 的元素，然后选择 div_id 下的class 名为 div_class 的元素 */ div #div_id .div_class{ width: 200px; height: 100px; background-color: blue; }

6. 子元素选择器

语法：父元素选择器 > 子元素选择器{ }，实例如下：

<div> 我是div的子元素 我是div的后代元素，是p的子元素 </div>  div > span{ background-color: blue; }

运行上述效果为，第二行的span标签所包含的文字背后变成蓝色，而p标签所包含的span标签内容无变化。

CSS伪类选择器

伪类是专门用来表示元素的一种特殊的状态的。比如正常的超链接，访问后的超链接和获取焦点后的文本框等。当我们需要为处在特殊状态的元素设置样式时，就可以使用伪类。

1. link（正常状态）

语法：选择器:link{ }，当某元素处于正常状态时，元素内容所显示的样式。示例如下：

<a href="#">正常的超链接</a>  /* 正常状态为蓝色，现在更改为橙色 */ a:link{ color: orange; }

2. visited（访问过的状态）

语法：选择器:visited{ }，当某元素被访问过时，元素内容显示的状态。示例如下：

<a href="#">访问过的状态</a>  /* 将访问过的文字颜色该问蓝色 */ a:visited{ color: blue; }

3. hover（鼠标移入的状态）

语法：选择器:hover{ }，当鼠标移入某元素时，元素所显示的状态。示例如下：

<a href="#">鼠标移入时的状态</a>  /* 鼠标移入时文字变成红色 */ a:hover{ color: red; }

****语法：注意：：当active表示作用在a标签时，则在IE7之前的浏览器是不支持的。

4. active（被点击的状态）

语法：选择器:active{ }，当鼠标点击某元素时所展现的状态。示例如下

被点击时出现黑色  /* 点击时文字出现黑色背景 */ p:active{ background-color: #333333; }

****语法：注意：当active表示作用在a标签时，则在IE7之前的浏览器是不支持的。

5. focus（获取焦点）

语法：选择器:focus{ }，当某元素获取焦点时，元素所出现的状态。示例如下：

 <input type="text" />  /* 当鼠标移入时，文本框背景色变为黄色 */ input:focus{ background: yellow; }

6. selection（选中的内容样式）

语法：选择器::selection{ }，特别注意两者之间有两个冒号，用于设置选中的文字的样式。

选中这段文字看看，他的颜色不一样哦  /* 将选取的内容背景色改为了紫色 */ p::selection{ background-color: purple; }

伪元素选择器

伪元素是用来表示元素中某些特殊的位置。比如：元素内容的第一行、元素内容的第一个字、最前端和最后端等。

1. first-letter（第一个字符）

语法：标签名:first-letter{ }，选取元素中的第一个字符。示例如下：

试试改变我第一个字符的样式  /* 将第一个字符改为橙色 */ p:first-letter{ color: orange; }

2. first-line（第一行）

语法：标签名:first-line{ }，选取第一行内容。示例如下：

看看你学的怎样 将上一行字的背景色修改一下吧  /* 将第一行字的背景色改为天空蓝 */ p:first-line{ background-color: skyblue; }

3. before（元素内容前）

语法：选择器:before{ }，选取到内容前的区域，选取的内容为空，因此需要配合content属性使用，可在内容前添加其他内容，示例如下：

在我前面添加一些文字吧  /* 在p标签的内容前添加文字：你好呀， */ p:before{ content: "你好呀，"; }

4. after（元素内容后）

语法：选择器:after{ }，选取到内容后的区域，选取的内容为空，因此需要配合content属性使用，可在内容后添加其他内容，示例如下：

在我后面添加一些文字吧  /* 在p标签的内容后添加文字：。恭喜添加成功！ */ /* 并把字体颜色改成了紫色 */ p:after{ content: "。恭喜添加成功！"; color: purple; }

属性选择器

通过标签的某些属性或属性值进行元素的选择。

1. 选取含指定属性的元素

语法：选择器[属性名]{ }，示例如下：

我有title属性。 我没有title属性。  /* 将有title属性的元素内容的背景色改为橙色 */ p[title]{ background-color: orange; }

2. 选取含指定属性值的元素

语法：选择器[属性名=属性值]{ }，示例如下：

我有title属性。 我没有title属性。  /* 将有title属性的元素内容的背景色改为橙色 */ p[title="title"]{ background-color: orange; }

3. 选取以指定字符开头的属性值的元素

语法：选择器[属性名^="字符"]{ }，示例如下：

我有title属性，且值为title 我有title属性，且值为tial 我没有title属性。  /* 将以“tit”开头的title属性的元素内容的背景色改为橙色 */ p[title^="tit"]{ background-color: orange; }

4. 选取以指定字符结尾的属性值的元素

语法：选择器[属性名$="字符"]{ }，示例如下：

我有title属性，且值为title 我有title属性，且值为abcle 我没有title属性。  /* 将以“tle”结尾的title属性的元素内容的背景色改为橙色 */ p[title$="tle"]{ background-color: orange; }

5. 选取指定属性中存在指定字符的元素

语法：选择器[属性名*="字符"]{ }，示例如下：

我有title属性，且值为title 我有title属性，且值为aitle 我没有title属性。  /* 将存在“it”字符的title属性的元素内容的背景色改为橙色 */ p[title*="it"]{ background-color: orange; }

子元素的伪类选择器

1. :first-child

语法：选择器:first-child，在子元素中选择指定元素的第一个子元素，示例如下：

 我是body的第一个子元素 我是body的第二个子元素 <div> 我是div的第一个子元素 我是div的第二个子元素 </div>  p:first-child{ background-color: orange; }

运行效果：

说明：以上述为例，只要p标签在某个包裹它的元素中是第一个子元素，则选择器就会选择它，如果p标签不是第一个子元素，则不会选择，如下述代码所示，我们将之前的代码添加一行，再看运行效果。

 我是body的第一个子元素 我是body的第二个子元素 <div> 我是用来测试的元素 我是div的第一个子元素 我是div的第二个子元素 </div>  p:first-child{ background-color: orange; }

运行效果：

2. :last-child

语法：选择器:last-child，在子元素中选这指定元素的最后一个元素，该效果与:first-child伪类相似，不在重复赘述。

3. :nth-child(参数/数值)

语法：选择器:last-child(参数/数值)

当参数为数值时，则表示在子元素中选择指定选择器的指定位置的元素，且nth-child(1)和first-child的效果一致

当参数为参数时，可以通过参数选取具有某些特征的元素。以下说明几种参数

odd：选取子元素中标签数为奇数的所有元素。

even：选取子元素中标签数为偶数的所有元素。

3n+1：参数为表达式也可以，表达式表示每隔两个选取一个，即每两个选取的元素相差3。

4. :first-of-type

语法：选择器:first-of-type，在子元素中选取第一个指定选择器的元素，即不论这个选择器是否是子元素的第一个元素，只需要在子元素中，这个指定的选择器存在，示例如下：

 我是body的第一个子元素 我是body的第二个子元素 <div> 我是用来测试的元素 我是div的第一个子元素 我是div的第二个子元素 </div>  p:first-of-type{ background-color: orange; }

运行效果：

说明：将运行效果图与first-child的效果图比较可知，div中的第一个p也被选取，即与选取的子元素与它所在的位置无关。

5. :last-of-type

语法：选择器:last-of-type，在子元素中选这指定元素的最后一个元素，该效果与`:first-of-type伪类相似，不在重复赘述。

6. :nth-of-type

语法：选择器:nth-of-type(参数/数值)，该效果与:nth-child(参数/数值)伪类相似，不在重复赘述。

总结

first-child、last-child和nth-child这三个在选择元素时，它们关注指定元素在所有兄弟元素的位置，受不同于指定选择器的元素的限制。

first-of-t 、last-of-type和nth-of-type这三个在选择元素时，它们不关注指定元素在所有兄弟元素的位置，而是侧重所有指定选择器的元素所排列的位置，不受不同于指定选择器的元素的限制。

posted @ 2020-08-28 18:09 _成风阅读(182) 评论(0) 收藏举报

刷新页面返回顶部

_成风

HTML+CSS笔记

网页的基本结构

常用的标签

1. 标题标签（h1~h6)

一级标题

一级标题

一级标题

一级标题

一级标题

一级标题

2. 段落标签（p)

3. 水平线标签（hr）

实体（转义字符串）

图片格式

元素类型

HTML5标签

1.图片标签（img）

2. META标签（meta）

3. 内联框架（iframe）

4. 超链接（a）

5. DIV标签（div）

6. SPAN标签（span）

CSS的三种样式表

1. 内联式样式表

2. 嵌入式样式表

3. 外部式样式表

CSS常用选择器

1. 元素选择器

2. id选择器

2. class选择器

3. 分组选择器

4. 通配选择器（通配符）

5. 复合选择器（后代选择器）

6. 子元素选择器

CSS伪类选择器

1. link（正常状态）

2. visited（访问过的状态）

3. hover（鼠标移入的状态）

4. active（被点击的状态）

5. focus（获取焦点）

6. selection（选中的内容样式）

伪元素选择器

1. first-letter（第一个字符）

2. first-line（第一行）

3. before（元素内容前）

4. after（元素内容后）

属性选择器

1. 选取含指定属性的元素

2. 选取含指定属性值的元素

3. 选取以指定字符开头的属性值的元素

4. 选取以指定字符结尾的属性值的元素

5. 选取指定属性中存在指定字符的元素

子元素的伪类选择器

1. :first-child

2. :last-child

3. :nth-child(参数/数值)

4. :first-of-type

5. :last-of-type

6. :nth-of-type

总结

公告