你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

Html基本结构、语法规则、常用标记/标签_请列出与创建标记语言文档相关的文档技术、网页组件、组织程序和指南的五条规则?

作者：你好赵伟 | 2024-03-01 12:51:36

踩

请列出与创建标记语言文档相关的文档技术、网页组件、组织程序和指南的五条规则?

Html基本结构、语法规则、常用标记/标签及空格符

一、HTML的定义:

HTML:是超文本标记语言（Hpyer text markup language）;

XHTML是可扩展超文本标记语言（扩展成XML文档）（Extensible text markup language）;

HTML5:指的是第五次大修改规范（新标准）；

二、站点的定义：

是存放整个网站的素材，网页及他们之间的联系；

站点文件夹的命名：

文件夹名只能以小写英文字母开头，下划线、数字组合；不能以汉字、空格、特殊字符开头和包含他们；

三、html基本结构、语法标准：

1、html文档命名：

①、必须一小写英文字母开头、下划线、数字组合；

②、不能用汉字、空格、特殊字符(标点符号)；

③、文档后缀名：html/htm;

④、首页必须命名成index.html或index.htm(这主要是因为加超链接必须以此规则命名)

2、html基本结构：

<!doctype html>（声明文档类型）   
<html>（说明写的是html标记语言）
<head>（头部信息）
<meta charset="utf-8"/>（告诉服务器用的是国际编码格式）
<title>网站标题</html>（显示在网页状态栏上）
</head>
<body>
所要写的网站内容（网页的内容可以是文本、图像等）
</body>
</html>
1
2
3
4
5
6
7
8
9
10

3、用电脑中的记事本/文本文档（text）,来写HTML5文档，不能插入图片，只能用写文本和标记（经常用，要会）

说明：保存的时候要另存为html格式且编码格式要勾选成utf-8;

4、html的语法（就是标准）：

1>、<标记属性=“属性值” 属性=“属性值”>内容文本</标记> （双标记）；

如：<a href="#" title=" " target="-blank/-self"></a>

2>、<标记属性=“属性值”/>(单标记)

说明：

1）写在<>中的第一个单词叫做标记、标签、元素名；

2）标记和属性用空格隔开，属性与属性值用”=“（等号）链接，属性值要写在""(双引号内)；

3）一个标记可以没有属性也可以有多个属性，属性与属性之间部分先后顺{一个属性也可以有多个属性值（如：标记的id/class名可以取多个名；）}

4）单标记没有结束标记，用"/"来代替结束；

5、网页中有哪些结构：

段落结构

表单结构

列表结构

标题结构

超链接结构

图片结构

表格结构等

6、html的常用标签（重点要死记）：

1）、文本标题标签：

<h1>标题文本</h1>；

<h2>标题文本</h2>

<h3标题文本</h3>；

<h4>标题文本</h4；

<h5>标题文本</h5>；

<h6标题文本</h6>；

特点：字体加粗、加大、自动换行；从h1到h6字体依次减小；

作用：用户可以通过标题快速浏览网页，标题来呈现文档结构很重要，一般用h1是大标题 h2是小标题；

2）、段落标签：

段落文本

;

说明：段落与段落之间自动生成段间距且自动换行；

作用标记一个段落

3）、定义字体加粗的html标签：<strong>文本</strong>/<b>文本</b>；

4）、定义字体倾斜的html标签：<i>文本</i>/<em>文本</em>；

5）、定义下标文字标签：<sub>内容</sub>；

6）、定义上标文字标签：<sup>内容<sup>；

7）、定义文字删除线的html标签：<del>内容</del>；

8）、强制换行标签：<br/>;

9）、水平线：<hr/>;

10）、定义空格符： (注意分号";"不能丢，不是标签、标记、元素因为没有<>号且他的定义与字体大小和系统有关；)

CSS的核心属性分类（重点）

一、css的核心属性分类：

1、关于文本的属性(text)；

2、关于列表(符号)的属性(ul/ol/dl)；

3、关于背景的属性(background);

4、关于浮动的属性（float）;

二、css的三大属性机制：特殊性、继承性、重叠性

特殊性：就是之前的权重；

继承性：子元素会继承父元素的一些属性；

重叠性：样式冲突时，会如何加载：

1、选择器权重值大的优先加载；

2、权重值一样时，按照css修饰文档中的书写顺序，后写的会覆盖先写的样式（重点理解）；

三、css属性定义：

1、css的语法:选择符（selector）{声明（decolaration）}组成

注意：声明又包括属性（property）和属性值（value）组成；

2、css属性：是指定选择符具有的样式，他是css的核心，css2共有150多个属性；

3、css属性值：属性值包括法定属性值和常规的数值加单位或颜色值（color value）;

四、几类核心属性：

1、关于文本的属性：

1>、文本的大小：font-size:数值px; 如:font-size:12px;

说明：

①、属性值为数值型时，必须给属性值加单位，属性值为0时除外；

②、单位还可以为pt; 9pt=12px;

③、为吧减小字体显示差异（电脑系统），IE公司1999年开会确定16px,为网页的默认值大小（字体）；即：1em, 1em=16px, 0.75em=12px;

④、常用的绝对大小关键字：

xx-small:9px;

x-small:11px;

small:13px;

medium:16px;

large:19px;

x-large:23px;

xx-large:27px;

2>、文本的颜色：color：#数值px；

用十进制表示颜色值：0 1 2 3 4 5 6 7 8 9

用十六进制表示颜色值： 0 1 2 3 4 5 6 7 8 9 A B C D E F

颜色模式：光色模式

R G B

FF 00 00

当表示三原色的三组数字同时相同时，可以缩写为三位; 当用十六进制表示颜色值时颜色值前必须加“#”

红色：#f00;

绿色：#0f0;

蓝色：#00f;

黄色：#ff0;

紫色:#f0f;

青色：0ff;

3>、字体样式：font-family:“字体”,“字体”,…

说明:

①、当字体为中文时必须加双引号"";

②、当英文字体名称是多个英文单词组时，需加双引号"";

③、当字体名称是单个英文单词时，不需要加双引号；

④、字体与字体之间用逗号”，“隔开；

⑤、标点符号必须为英文状态；

⑥、当一段代码已经使用过双引号之后，里面只能使用单引号”’“；

⑦、当有多个字体时，浏览器会按先后顺序寻找浏览者电脑上有的字体显示，如果浏览者电脑上没有，则显示默认字体；

4>、字体加粗样式：font-weight:bold(加粗)/bolder(更粗)/100-900/normal(取消加粗)；

说明：100-500常规字体；600-900加粗字体；

（注意：样式都是用css来改，记住包括加粗、倾斜、等）

5>、字体倾斜样式：font-style:italic(倾斜小)/oblique(倾斜大的)/normal(取消倾斜)；

说明：italic与oblique都是倾斜，浏览器区别不大；

6>、文字的水平对齐方式：text-align:left/right/center/justify(两端对齐，对中文不明显，主要针对英文不常用)

7>、文字的垂直对齐方式：vertical-align:top/middle/bottom;

说明：他不能单独使用，只能和display属性配合是使用；

8>、文本的行高：line-height:数值px;(用的多注意理解)

说明：

①、当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

②、当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；

③、当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位（IE6及以下版本存在浏览器兼容问题）

倍行高：{line-height:2;} 2倍，{line-height:1.5;}1.5倍；注：当使用倍行高为单位时，不加px；

注意：此属性的理解，写网页时往往先从行高入手，用的多，实际工作中多为用ps测量出来

9>、文字属性简写：font:font-style font-weight font-size/line-height font-family；

如：font:italic bold 12px/24px “黑体”，“微软雅黑”，roman，”segoe script“;

说明:font的属性值应按以下次序书写(各个属性值之间用空格隔开) 顺序: font-style font-weight font-size / line-height font-family

(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。

(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style 他们会使用缺省值。

10>、文本下划线修饰：text-decoration:none(没有下划线)/underline(下划线)/overline(上划线)/line-through(删除线)；注意：此属性没有继承性；

11>、边框属性：border:数值px 线型颜色（#f00）;如：border：1px solid(实线)/dashed(虚线)/dotted(点划线)/double(双线) #f00;

说明：

可以设置单个边的样式：

border-right:solid;右边框

border-left:dashed;左边框

border-top:dotted;上边框

border-bottom:double;下边框

注意：此属性没有继承性；

12>、首行缩进：text-indent:数值px; 如：text-indent:12px;

说明：

①、text-indent可以取负值；

②、text-indent属性只对第一行起作用；

③、缩进两个字符可以写成：text-indent:2em;

注意：border（边框）属性、text-decoration（下划线）属性、background（背景）属性，没有继承性，即：子元素不会继承父元素的这些属性

13>、可以了解的属性：

①、字间距:letter-spacing:value; 控制英文字母或汉字的字距。

②、词间距:word-spacing:value; 控制英文单词词距。

③、控制文本大小写 text-transform: capitalize(首字母大写)/uppercase（全大写）/lowercase（全小写）

④、小型大写字母：font-variant: small-caps

⑤、文本流控制 layout-flow:horizontal（自左向右）/vertical-ideographic（自上而下）;

（注：此属性只有IE浏览器支持）

2、关于列表的属性（主要针对ul(无序列表)/ol(有序列表)）：

1、定义列表符号样式：list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；

2、使用图片作为列表符号： list-style-image：url( 所使用图片的路径及全称 )；

3、定义列表符号的位置： list-style-position:outside(外边)/inside(里边)；

list-style:none;去掉列表符号

注意：此属性加载的列表符号，各个浏览器显示列表符号与内容的间距不一样，导致我们不用此属性加载列表符号；常用ist-style:none;去掉列表符号，然后用给每个li加背景当列表符号（重要常用）

3、关于背景的属性：（注意此属性没有继承性）

1、背景颜色 background-color:颜色值;

2、背景图片 background-image：url( 背景图片的路径及全称 )；

3、网页上有两种图片形式：插入图片、背景图；

插入图片：属于网页内容，也就是结构。

背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等

背景图片的显示原则：

1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;

2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。

4、背景图片平铺

background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺) }

5、背景图片的位置

background-position:值1 值2;

说明：

①属性值有两个值组成，值1是水平位置的坐标值，值2是垂直位置的坐标值；

②值1 = left/center/right/数值；值2 = top/center/bottom/数值;当两个值都是center的时候可缩小为一个；

③当属性值是数值时，向右方向，向下方向正值

6、背景属性的缩写语法：

background:属性值1（背景颜色）属性值2（背景图片）属性值2（背景平铺）属性值3（背景的定位：值1（x）值2(y)）属性值4（背景固定）；

如：background:url（背景图片的路径及全称） no-repeat center top；

注意：此属性值没有顺序要求，但但定位的background-position的属性值不能分开；

7、背景图的固定

background-attachment:scroll(滚动)/fixed(固定);（此属性主要针对标签用）；

8、网页上常用的图片格式

1)jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )（适用于banner图及轮播图）

2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像; （适用于网页上的小图标）

3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的源文件格式，适用于颜色数量较少的图像;

9、浮动属性：

（浮动后脱离了文档流）

浮动属性float:none/left/right;

10、清除浮动

（某一侧不出现浮动元素） Clear:both/left/right

注意：

1、浮动的元素要放在一个容器元素里面；

2、float：none;是元素不浮动，该元素不具有浮动的特性；

clear：both；是清除元素的两边浮动，此时是浮动元素被拽下，被拽下来的浮动元素具有浮动的特性；通俗的讲就是把加有浮动元素的元素，从浮动的位置上拽下来，回到原来的位置，此时被拽下来的元素具有浮动的特性（比如：浮动元素的宽高是有内容撑起来的）（注意理解重要）

属性值有是none的属性：list-style(列表样式取消)/text-decoration（下划线样式取消）/float(浮动取消)

五、CSS选择符

(选择器)的定义、常用的10种选择符、以及他们的权重值

一、css选择符的定义：

选择符表示要定义元素的对象，可以是元素的本身，也可以是一类元素或制定的元素名称。

二、10种常用选择符：

1、类型选择符（类选择符、元素选择符）：

语法:元素名称{属性：属性值；}

例如：a{font-size:12px;}

说明：

①、使用中的元素中的元素名称直接作为选择符，如：body、div、p、img等；

②、所有的页面元素都可以作为类型选择符；

③、功能：

A、要改变一个标签的默认样式，可以用类型选择符；

B、要统一网页面中某一元素的样式可以用类型选择符；

注意：对于div、span等通用结构元素，不建议使用类型选择符，除非有十足的把握，以为他们应用的范围广泛，使用类型选择符会相互干扰，影响效果；

2、id选择符：

语法:#id名称{属性：属性值；}

例如：#box{width：300px; height:300px;} (其中box为

)

说明:

①、使用id选择符时，需要给元素定义一id属性及属性值；如：

;

②、在css文件中写id选择符时，id名称前需加#；如：#box{width:300px; height:300px;}

③、取id名时，只能取英文名但不能用关键字（所有的元素、标记、标签都是关键字xua；）

④、id选择符的基本作用：对每个页面中唯一出现的元素进行样式定义；

注意：一个元素、标签可以同时取id名和class名，并且可以用这两个名进行修饰；如：<div id="box1"空格class=“box2”>

3、class选择符：

语法:.class名{属性：属性值；}

说明：

①、使用class选择符时需要先为元素定义一个class属性及属性值；如：

②、一个class属性可以定义多个属性值（即可以定义多个class名，class名用空格隔开）；如：

;（css可以用他任何一个class名对该元素进行样式修饰，且在符合css三大属性机制的（继承性、层叠性、特殊性）的前提下，样式互不影响：注意理解）；

③、作用：

A、可以对同类（相同的）元素、标签进行不同样式设定；

B、可以对不同的元素、标签进行相同的样式设定；

扩展：div.box{background：red;} 指定选择符

只会给class名为box的div标签进行样式修饰，不给

标签修饰；（了解此选择符即可）

4、群组选择符：

语法:选择符1，选择符2，选择符3，等{属性：属性值；}

说明：

A、对一组具有相同样式的元素进行样式指定；如：h1,h2,h3,p{font-size:12px; color:#fff；}

B、使用逗号对选择符进行分离，对页面中使用相同样式的地方，只需书写一次即可，可减少代码量，改善css代码的结构；

5、包含选择符（后代选择符）：

语法:选择符1 选择符2 选择符3 {属性：属性值；}

说明：

A、对某个元素的子元素进行样式的设定；例如:div a{font-size:12px; color:#848488;}；

B、包含选择符指选择符组合中前一个标签包含后一个标签，中间用空格隔开；

C、使用包含选择符可以避免过多的使用class及id名的设置；

D、并且直接对所需要设置的元素进行样式设置；

E、选择符除了二级包含，还可以多级包含；

注意：标记、标签不能随便嵌套：尤其h1-h6标题标签就不能互相随便嵌套，还有p标签也不能自己互相嵌套；

6、伪类选择符（针对超链接标签）：

语法

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/174090