web笔记

最新推荐文章于 2024-05-30 18:03:57 发布

早睡.

最新推荐文章于 2024-05-30 18:03:57 发布

阅读量1.6k

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/2303_76593060/article/details/130373540

版权

HTML文档结构

完整的HTML文件包括头部和主体两大部分。代码示例如下：

HTML文档结构

其中：

文档类型说明：<!DOCTYPE html>

文档的开始和结束标签：

<html>

......

</html>

文档头部的开始和结束标签：

<head>

......

</head>

文档主体的开始和结束标签：

<body>

......

</body>

网页标题的开始和结束标签：

<title>

......

</title>

一级子标题的开始和结束标签：

<h1>

......

</h1>

对齐属性：align属性用于设定标题的对齐方式，其取值可以为left、center、right、justify。

HTML5基础

HTML5-文档头部

1.页面标题及字符集的设置

1）title标签

title标签用于定义HTML页面的标题。它是双标签，开始和结束标签之间的内容就是要设置的页面标题。

它的作用是：

在浏览器的标题栏中显示标题

标题可以用作默认快捷方式或收藏夹的名称

标题还可以作为搜索引擎结果中的页面标题

应用时注意：

一个网页只能有一个标题

标题名称的长度不超过64个字符数

标题标记对之间不允许有其它的标签存在

用法示例：

2）charset属性

在html5中，可直接通过meta标签的charset属性设置页面的字符编码格式。在理论上，可以使用任何字符编码，但并不是所有浏览器都能够解释它们。常用的编码有：

ISO-8859-1：国际标准化组织针对不同的字母表/语言定义的标准字符集（拉丁字母表的字符编码），是浏览器默认的字符集

utf-8：Unicode 联盟开发的标准，utf-8 是网页和电子邮件的首选编码。

gb2312：信息交换用汉字编码字符集，中国国家标准总局1980年发布。适用于汉字处理、汉字通信等系统之间的信息交换。

用法示例：

2.元信息的设置

1）meta标签的作用

meta标签用于定义页面的元信息，可重复出现再头部标签中。它是单标签，通过“名称/值”的形式成对使用其属性。

meta标签主要分为两大类，一类对页面进行设置，另一类对搜索引擎进行设置。

对页面进行设置的格式：<meta http-equiv="名称" content="值"/>

对搜索引擎进行设置的格式：<meta name="名称" content="值"/>

2）http-equiv/content

http-equiv/content属性对用于设置刷新、失效期、 cookie等页面信息。

用法示例：

1.页面停留20秒后跳转到www.educoder.net

2.网页于2020年7月26号8点过期

3.设置cookie并进行页面缓存

3）name/content

http-equiv/content属性对用于设置关键字、简介、作者、机器人向导、版权、编辑器等。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP54ix5LiN5aSf5Y-v54ix,size_20,color_FFFFFF,t_70,g_se,x_16

用法示例：

1.用于标注网页的作者和Email

2.为搜索引擎提供网站简介

3.为搜索引擎提供关键字

4.为搜索引擎提供编辑器类型

5.为搜索引擎提供提供最新版本信息

3.link标签

link标签可引用外部文件。它是单标签，一个页面允许使用多个link标签引用多个外部文件。

它的作用是：

指定引用外部文档的地址

指定当前文档与引用的外部文档的关系

说明引用外部文档的类型

格式说明：

href设置外部文档的地址

rel设置当前文档与引用的外部文档的关系

type设置外部文档的类型。

用法示例：链接一个外部样式表

HTML5-文本控制类标签

1.HTML5-网页背景及标题段落标签

1）设置网页背景图

如需用图像作网页背景图，可在<body>中添加background属性，其属性取值即为图像的路径。

用法示例：

2）设置网页背景色

如需为网页添加背景色，可在<body>中添加bgcolor属性，其属性取值颜色单词或颜色代码。

用法示例：

3）文本标题标签

文本标题标签<hi>是双标签，块级元素，用于规定文本内容标题的层次。在HTML中提供了6级标题标签，从一级<h1>开始到六级<h6>，字号大小依次减小。

默认情况下，在大多数浏览器中显示<h1><h2><h3>的内容大于文本在网页中的默认尺寸，<h4>的内容与默认文本的大小基本相同，而<h5>和<h6>的内容较默认文本小一些。可设置文本标题的对齐属性。

4）段落标签

段落标签<p>是双标签，块级元素，用于将文本内容定义为一个段落，段落内容从新的一行开始，并于上一段之间有一个空行。可设置段落文本的对齐属性。

表格标签—表格高级样式的设置

1.表格高级样式设置相关概念

1)外边框线样式属性frame

表格的外边框线的样式可用属性frame的取值来确定，frame取值与相应的样式如下：

above：显示上边框

below：显示下边框

hsides：显示上下边框

vsides：显示左右边框

lhs：显示左边框

rhs：显示右边框

border：显示上下左右边框

void：不显示边框

2)内部边框样式属性rules

表格的内部边框的样式可用属性rules的取值来确定，rules取值与相应的样式如下：

all：显示所有内部边框

none：不显示内部边框

rows：仅显示行边框

cols：仅显示列边框

groups：显示介于行组和列组间边框

3)单元格合并

在制作稍复杂的表格时，需要对表格中的行或列进行合并。

水平方向单元格的合并

需要将水平方向的单元格合并时，可在<th>或<td>标记中添加colspan属性，属性的取值即为合并的单元格数目。

垂直方向单元格的合并

需要将垂直方向的单元格合并时，可在<th>或<td>标记中添加rowspan属性，属性的取值即为合并的单元格数目。

设置表格的外边框样式

1)table标签的一般属性

table标签的属性通常有border、width、height、align、bgcolor、background等，前面已经介绍过，这里不在赘述。

2)外边框样式的设置

frame属性可用来设置表格的外边框样式，属性取值可以是：above、below、hsides、vsides、lhs、rhs、border、void。

例如，如果表格的外边框只需显示上边框，属性设置如下：

设置表格的内边框样式

1）表格内部边框属性的设置

表格内部边框可以使用rules属性来设置，其取值可以为all、none

rows、cols、groups。

例如，如果表格的外边框只需显示上边框，内部边框显示列边框线，属性设置如下：

4.表格中单元格的合并

1）水平方向单元格的合并

将两个或多个水平方向的单元格合并，可以在th或td标签中使用colspan属性来设置，属性的取值为合并的单元格的数目。

用法示例：

示例如下：

<tr>

</tr>

2）垂直方向单元格的合并

将两个或多个垂直方向的单元格合并，可以在th或td标签中使用rowspan属性来设置，属性的取值为合并的单元格的数目。

用法示例：

<tr>

<td>大会主题报告</td>

<td>分会专题报告</td>

</tr>

<tr>

结构元素

1.文档结构元素相关概念

1）header元素

header元素是一种表示头部的结构元素，通常用来放置整个网页或页面内一个内容区块的标题，但也可以包含其他的元素，例如标题（<h1>~<h6>）、导航部分（<nav>）或普通内容（<p>和<span>）等部分。

2）article元素

article元素是一种表示大段内容的结构元素。使用article元素可以在网页中定义独立的、完整的内容，例如：文章、博客、帖子、评论等。

3）aside元素

aside元素用于定义当前页面或当前文章的附属信息，包括当前页面或当前文章的相关引用、侧边栏、广告以及导航等有别于主体内容的部分。

4）footer元素

footer元素用于定义脚注部分，例如在父级内容块中添加注释、在文章区中添加作者信息、在网页底部添加版权信息等。

5）figure/figcaption元素

figure元素用于表示独立的流内容，例如图像、图表、照片、代码等等。figcaption元素用于定义figure元素的标题，要嵌套在<figure>中，通常被置于 <figure> 中的第一个或最后一个子元素的位置。

2.header元素和article元素的应用

文章区的结构

设计要求中的文章区由文章标题和文章内容组成。HTML5中的语义化元素article可表示一个文章区，在其中可以嵌套header元素来表示文章的标题，文章的内容可用段落标签来设定。

代码结构如下：

<article?

<p>文章的段落内容</p>

</article>

3.figure元素和figcaption元素的应用

文章区中引入图类对象的语义元素

设计要求的文章区中要插入能被搜索引擎识别的图类对象，可用HTML5中的语义化元素figure来设置，在其中可以嵌套figcaption元素来表示图的名称，该元素通常被置于figure 元素的第一个或最后一个子元素的位置。

代码结构如下：

</figure>

页面结点元素

1.页面结点元素相关概念

section元素

section 元素用于定义文章的节（区段），比如章节、页眉、页脚或文档中的其他部分。通常由内容及其标题组成。

nav元素

nav元素用于代表页面的一个部分，是一个可以作为页面导航的链接组，主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域。

address元素

address元素用于一般被作者用来提供该文档的联系人信息，一般放在一个网页的开头或者结尾，最常用的是和其他内容包含在footer元素内。如果address元素位于article元素内部，则它表示article元素所包含文章内容的作者的联系信息，如果直接位于body元素内，那么表示该网页的作者的联系信息。

2.section元素的使用

文章节的设置

HTML5中的语义化元素section可表示一个文章的节，在其中可以嵌套节标题，文章节的内容可用段落标签或其他标签来设定。

代码结构如下：

<header>文章的节标题</header>

<p>文章的段落内容</p>

</section>

nav元素的使用

文章区的结构

设计要求文章区设置一个导航区。HTML5中的语义化元素nav可表示一个导航区，在其中可以嵌套超链接标签（a）来实现跳转，外部超链接的常用属性有href和title，href的取值为链宿的路径，title的取值为鼠标悬停在链源上显示的文本。

代码结构如下：

<nav>

......

</nav>

4.footer元素和address元素的使用

页脚区的设置

footer元素用于定义文档或节的页脚。作为文档的页脚，通常可以包含页面的版权信息和联系人信息。

交互元素

1.交互元素相关概念

1）progress元素

progress元素属于状态交互元素。用来表示页面中的某个任务完成的进度。progress元素具有max和value两个属性：

max:表示任务的总量，默认值为1.

value:表示已完成任务的数量。

应用中，可以有以下三种情况。

用法示例1：

用法示例2：

用法示例3：

2）meter元素

meter元素属于状态交互元素。可用于投票系统中候选人各占比例情况、考试分数统计等。

meter元素具有如下属性：

form：规定meter元素所属的一个或多个表单，其取值为表单标签form所定义的id名。

value：设置或获取meter元素的当前值，其数值必须介于min和max值之间。

max:设置meter元素的最大值，默认为1.

min:设置meter元素的最小值，默认为0.

high:设置过高的阈值，当value值大于high并小于max时，显示过高的颜色。

low：设置过低的阈值，当value值小于low并大于min时，显示过低的颜色。

optimum:设置最优值

3）details/summary元素

etails元素用于用于描述文档或文档某个部分的细节。在特定的浏览器下(如Chrome、 Safari ）能够产生像手风琴一样展开和折叠的交互效果。summary元素通常作为details元素的标题部分，嵌套在details元素中。应用时，details元素中标题内容是可见的，当单击标题时将会显示/隐藏details元素中的详细信息。

meter元素的属性主要就是open:

open:用于控制details元素是否显示,取值为true时，元素内部的子元素被展开显示，当open属性值为false时，其内部的子元素被收缩起来不显示。默认不显示。用法示例：

<summary>单击可显示/隐藏详细内容</summary>

<p>这里详细介绍details元素所涉及的知识</p>

</details>

4）menu元素

menu元素用于创建上下文、工具栏和弹出菜单。目前的浏览器仅支持创建上下文的菜单。menuitem元素用于定义菜单项

menu元素主要有以下两个属性:

label:用于设置菜单的可见标签。

menu：用于设置菜单的类型，取值为context表示上下文菜单，取值为toolbar表示工具条，取值为popup表示弹出式菜单。用法示例：

</menuitem>

</menu>

5）command元素

command元素用于定义各种类型的命令按钮。利用该标记的icon属性可以添加图片，并且实现图片按钮效果；另外，改变标记中的“type”属性值，还可以定义按钮类型。 command元素主要有以下属性：

icon:规定用于代表 command 元素的图像。

label：设置规定 command 元素的可见标签。

type：设置command 元素的类型，可以取checkbox（复选）、radio（单选）、command（操作按钮）。默认取 "command"。

radiogroup：设置radio 类型按钮的组名。

用法示例：

请单击

</command>

2.progress元素

进度条的设置

HTML5中的交互元素progress可在网页中显示一个进度条，该元素有两个属性，属性max表示任务总量，属性value表示当前的任务量。

3.meter元素

HTML5中的交互元素meter可在网页中显示度量条，该元素的属性主要有：

value：当前值

max:最大值

min:最小值

high:：高阈值

low：低阈值

optimum:最优值

4.details/summary元素

details/summary元素的设置

HTML5中的交互元素details可在网页中描述文档或文档某个部分的细节，summary元素可设置details折叠时看到的标题内容。

文本层次语义元素

1.文本层次语义元素相关概念

1）em和strong

em和strong都是HTML5中定义的带有加强语义的元素，页面呈现加粗显示效果。

em:把文本定义为强调的内容。显示时为斜体加粗。

strong:把文本定义为语气更强的强调的内容。

2）cite

cite元素创建一个引用标记，用来指明某内容的引用或参考源，如书籍或杂志或新闻报道等的标题，规范、报纸、法律文件，网络文章的URL等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a> 标签中，从而把一个超链接指向该联机版本。

3）mark

mark元素定义带有记号的文本，可以高亮显示文档中的文字以达到醒目的效果。

4）time

time元素定义日期或时间,该元素能够以机器可读的方式对日期和时间进行编码，比如用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

5）dfn

dfn元素用来定义术语，可以通过可选的 title属性来提供对术语的准确定义。例如：

9）var

var元素定义变量。这个标签经常与 <code> 和<pre>标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用 <var> 标签标记的文本通常显示为斜体。

2.文本层次语义元素

em元素、strong元素、mark元素、def元素均为HTML5中定义的语义化元素，分别强调、更加强调、醒目显示、和定义术语的语义。这些元素均为行内元素，排版时如需换行，应使用标签。

1.分组元素相关的概念

1）div

div元素是没有语义的通用分组元素，早期设计中常用div标签进行网页布局。

2）blockquote

blockquote元素表示摘自另一个源的大段内容的语义化元素。在显示上有段落空隙，在左右两边缩进（增加外边距）。

3）pre

pre元素用来定义预格式化文本，在<pre>标签内容中的文本通常会保留空格和换行符，显示为等宽字体。

4）figure/figcaption

figure元素代表一个和文档相关的图，figcaption是这个图的标题。

5）ul/li

ul可创建无序列表，在这个标签中可以用li标签设置多个列表项。基本格式如下：

<ul>

<li>无序列表项1</li>

<li>无序列表项2</li>

<li>无序列表项3</li>

</ul>

无序列表<ul>有一个可选属性type，用来规定列表里项目符号的类型,其取值可以是disk(实心圆）、circle（圆）或square（实心正方形）。

6）ol/li

ol可创建有序列表，在这个标签中可以用li标签设置多个列表项，显示时每个列表项独占一行。基本格式如下：

<ol>

<li>有序列表项1</li>

<li>有序列表项2</li>

<li>有序列表项3</li>

</ol>

在HTML5中，有序列表<ol>有三个可选属性，type用来规定列表里项目编号的类型，start属性用于指定列表的开始编号，reversed属性用于将列表反向进行编号。

7）dl/dt,dd

dl可创建定义列表，在这个标签中可以用dt标签设置需要定义的术语，每个术语后可用1~n个dd标签设置定义的解释体。基本格式如下：

<dl>

</cl>

应用时注意，一个列表中不允许含有相同名字的术语，也不允许有重复的术语解释。

2.无序列表

无序列表示例

HTML中的ul元素表示不排序的项目列表，属性type 可设置列表符号样式，取值为disk表示实心圆，取值为circle表示圆，取值为square表示实心正方形，默认项目符号类型为disk。例如以下代码：

<ul>

<li type=disk>第一项实心圆</li>

<li type=square>第三项实心正方形</li>

</ul

3.有序列表

有序列表示例

HTML中的ol元素表示排序的项目列表，属性type 可设置列表符号样式，取值为1表示按数字排序，取值为A表示按大写英文字母排序，取值为a表示按小写英文字母排序，取值为I表示按大写罗马数字排序，取值为i表示按小写罗马数字排序，默认按数字排序。属性start 设置列表符号初值，取值可以是1、2、3 ...,例如以下代码：

</ol

1.表单的基本概念

1）表单的结构

表单是收集用户数据的容器。一个表单通常由表单控件和相关的提示信息组成。

表单控件：实现用户输入的组件。如文本框、密码框、单选按钮、复选按钮、下拉列表框、多行文本框、文件域等控件。

各种表单控件及提示信息

</form>

2）form的属性

表单在向服务器传输数据时需要一些进行一些设置，可通过form标签的属性来实现。

name

每个表单及其表单控件都有一个 name 属性，用于在提交表单时对表单及数据进行识别。

action

在提交表单时，action属性用于指定接收并处理表单数据的服务器程序的url地址。

method

在提交表单时，method属性用于设置表单数据的提交方式。有两种方法：get方法和post方法。

get方法

采用GET方法时，浏览器会与服务器建立连接，然后将表单数据直接附在action属性设置的URL之后，通过URL在一个传输步骤中发送所有的表单数据，URL和表单数据之间用问号进行分隔。显然这种方法用户数据要显示在地址栏中，保密性很差，而且对用户发送的数据量也有限制。

post方法

采用POST方法是在HTTP请求中嵌入表单数据。浏览器首先与action属性中指定的服务器建立连接，一旦建立连接之后，浏览器按分段传输的方法将数据发送给服务器。显然这种方法用户数据嵌入在http请求中而不是地址栏的，保密性较好，对用户发送的数据量也无限制。但post方法发送的信息是未经加密的，容易被黑客获取。

3）表单控件的类型

常用的表单控件有以下几种：

input控件：是单行输入型控件，用来接受用户输入的信息。

textarea控件：用来创建一个支持多行的文本输入区域。

select控件：用于创建下拉列表框。

button控件：用于定义一个按钮。

1.input控件相关概念

1)input控件的属性

input标签是单标签，用于创建采集用户输入信息的表单控件。input控件常用的属性有type、name、value、size、readonly、disabled、checked、maxlength、min。

type：控件类型，取值为text 、password、radio 、 checkbox 、 button、 submit、 reset、 file image、 hidden等

name：控件名称，取值由用户定义

value：控件中默认文本，取值由用户定义。对于不同的input控件类型，value的含义不同，例如button、reset和submit，value定义按钮上显示的文本；text、password和hidden，value定义域的初始值；checkbox、radio、image，value定义与输入相关联的值。

size：控件在页面中显示宽度，取值正整数

readonly：控件内容为只读，取值为readonly

disabled：首次加载页面时禁用该控件（显示为灰色），取值为disabled

checked：定义选择控件默认值被选中，取值checked

maxlength：控件允许输入的最多字符数，取值正整数

min：控件允许输入的最少字符数，取值正整数

2)input控件的类型

input控件通过type属性的取值设置不同类型，主要有：

text：定义单行文本框，文本框的默认宽度是20个字符。

password：定义密码框，密码域中的字符会被掩码（显示为星号或原点）。

radio：定义单选按钮，单选按钮允许用户在一定数目的选择项中必须且仅能选取一个。

checkbox：定义复选框，复选框允许用户在一定数目的选择项中不选、选取一个或多个。

button：定义按钮，单击按钮时需自行定义行为。button常用于在用户单击按钮时启动JavaScript程序，响应用户。

submit：定义提交按钮，提交按钮用于向服务器发送表单数据。数据会发送到表单action属性中指定的位置。

reset：定义重置按钮，重置按钮会清除表单中的所有数据。

file：定义文件域，包括输入字段和“浏览”按钮，供文件上传。

image：定义图像形式的提交按钮，需配合src属性和alt属性使用。

hidden：定义隐藏域，隐藏域对于用户是不可见的，隐藏域通常会存储一个默认值。

date:定义日期选择域，鼠标点击输入框，可以看到浏览器原生的日历框。

month:定义月份选择域，效果类似date。

week:定义周选择域，效果类似date。

time:定义时间选择域。

datetime-local:定义本地日期时间选择域。

datetime:定义日期时间选择域。

2.创建文本框

在input标签中,将type属性设置为text，可显示单行文本框。使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。使用size属性可规定文本框的宽度，使用maxlength属性可规定控件允许输入的最多字符数。

示例如下：姓名：<input type="text" name="userName" size="20" maxlength="16"/>

4.创建单选按钮

在input标签中,将type属性设置为radio，可设置单选框；使用name属性来规定input元素的名称，要求单项选择中的每个选项都具有相同的name；使用value属性可规定与输入相关联选项值。

示例如下：性别：<input type="radio" name="sex" value="man"/>男<input type="radio" name="sex" value="woman"/>女

创建文本区域

1.textarea控件相关概念

1）textarea标签的属性

textarea标签用于定义多行文本区域，文本区域中可容纳无限数量的文本，其中文本的默认字体是等宽字体（Courier）。

2）textarea的基本属性

textarea的基本属性主要有：

cols：规定每行中的字符数

rows：规定可见的行数

name：规定文本区域的名称

readonly：规定文本区域为只读

disabled：规定文本区域为不可用

1）fieldset标签

fieldset标签用于定义表单的一个子容器，将所包含的内容以边框环绕方式显示。

fieldset标签没有必需的或唯一的属性，可添加的属性有：

name：规定fieldset的名称

form：规定fieldset所属的一个或多个表单

2）legend标签

legend标签用于定义分组的标题，fieldset标签中的第一个元素一般是legend标签。

CSS3语法

CSS3样式规则

1.CSS基础知识

1）什么是CSS

CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web文档添加样式的简单机制，是一种表现HTML或XML等文件外观样式的计算机语言，是一种网页排版和布局设计的技术。

2）CSS的特点

网页载入更快

降低流量费用

修改设计时效率高

更容易被搜索引擎收录

5）引入CSS样式的方法

在网页中应用CSS样式有内联式、内嵌式、外链式和外导式4种方法。

内联式：通过标记的style属性直接把CSS样式添加到HTML的标签中。例如：<span style="color:red; font-weight:bold;">内联样式</span>

内嵌式：将CSS代码集中写在HTML文档的头部标签中。并用<style>标记定义。例如：

span{color:red;

font-weight:bold;}

</style>

外链式：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。例如： <link type="text/css" rel="stylesheet" href="style.css" />

外导式：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过@import url(“外部样式表相对路径”)语句将外部样式表文件链接到HTML文档中。例如：

@import url("style.css");

</style>

常用的文本样式属性有：

color：设置文本的颜色

font-family：设置文本的字体

font-size：设置文本的字号大小

text-align：文本水平对齐方式

line-height：设置文本的行间距

3.用内嵌式引入CSS样式

在HTML头部添加CSS样式

在HTML标签中,使用style标签来添加CSS样式，其方法是将CSS代码集中写在HTML文档的头部的style标签中。示例如下：

body{background-image:url(背景图的路径);

background-size:cover;}

div{position:fixed;

left:500px;

top:200px;

color:red

}

</style>

常用的背景样式属性有：

background-color：设置元素的背景颜色

background-image：设置元素的背景图像，取值格式为url(背景图像的路径)

background-size：设置元素的背景图像大小。

4.用外链式引入CSS样式

在HTML中链接外部样式表文件

在HTML标签中,使用link标签来链接CSS样式文件。

示例如下：

link标签属性有：

href：取值为外部样式文件的

type：设置外部文档的类型。取值为text/css时，表示外部文档的类型为CSS样式表；取值为text/javascript时，表示外部文档的类型为javascript脚本

样式格式

标签名,标签名{属性1:属性值1; 属性2:属性值2;}

用法示例

h1,h2,h3{color:green;}

2）后代选择器

当标签发生嵌套时，内层标签就成为外层标签的后代。后代选择器用来选择元素或元素组的后代，选择器的写法是外层元素写在前面，内层元素写在后面，中间用空格分隔。

样式格式

外层元素,内层元素{属性1:属性值1; 属性2:属性值2;}

法示例

div p {background-color:#CCC; }

3）子元素选择器

子元素选择器选取某个元素的直接子元素（间接子元素不适用）；子元素选择器元素之间使用大于号（>）隔开。

样式格式

父元素>子元素{属性1:属性值1; 属性2:属性值2;

结构设置

标签<em>...</em>是CSS3中引入的文本格式化标签，可使作用的文本呈现斜体效果，并具有强调的语义。

strong

标签<strong>...</strong>是CSS3中引入的文本格式化标签，可使作用的文本呈现粗体效果，并具有强调的语义。

样式设置

color

color属性用于设置文本的颜色。

font-size

font-size属性用于设置字号。

font-family

font-family属性用于设置字体。

CSS3文本外观样式

color属性用于定义文本的颜色

letter-spacing

letter-spacing属性用于定义字符(字母或汉字）间距。其属性值可为不同单位的数值，允许使用负值，默认为normal。

line-height

line-height属性用于设置行间距，即字符的垂直间距，一般称为行高。

text-align

text-align属性用于设置文本内容水平对齐，相当于html中的align对齐属性。 text-align可用属性值如下：

left：左对齐（默认值）

right：右对齐。

center：居中对齐。

text-transform

text-transform属性用于控制英文字符的大小写。 text-transform可用属性值如下：

capitalize：首字母大写。

uppercase：全部字符转换为大写。

lowercase：全部字符转换为小写。

text-decoration

text-decoration属性用于设置文本的下划线，上划线，删除线等修饰效果。 text-decoration可用属性值如下：

none：没有装饰（正常文本默认值）。

underline：下划线。

overline：上划线。

line-through：删除线。

text-indent

text-indent属性用于设置首行文本的缩进。 text-indent属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置

text-shadow

text-shadow属性可以为页面中的文本添加阴影效果。

h-shadow用于设置水平阴影的距离

v-shadow用于设置垂直阴影的距离

blur用于设置模糊半径

color用于设置阴影颜色。

text-indent

text-indent属性用于设置文本的缩进。

line-height

line-height属性用于设置文本行高。

text-decoration

text-decoration属性用于设置文本的修饰。

早睡.

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
web笔记

HTML中的ol元素表示排序的项目列表，属性type 可设置列表符号样式，取值为1表示按数字排序，取值为A表示按大写英文字母排序，取值为a表示按小写英文字母排序，取值为I表示按大写罗马数字排序，取值为i表示按小写罗马数字排序，默认按数字排序。HTML5中的语义化元素nav可表示一个导航区，在其中可以嵌套超链接标签（a）来实现跳转，外部超链接的常用属性有href和title，href的取值为链宿的路径，title的取值为鼠标悬停在链源上显示的文本。另外，改变标记中的“type”属性值，还可以定义按钮类型。
复制链接

扫一扫