html中class与ID

合集下载

html选择题

一：单选题1、CSS是什么的缩写？（）A. Colorful Style SheetsB. Cascading Style SheetsC. Creative Style SheetsD. Computer Style Sheets2、访问外部样式表的正确的HTML代码是（）A. <style src="mystyle.css" />B. <link rel="stylesheet" type="text/css" href="mystyle.css">C. <stylesheet>mystyle.css</stylesheet />D. <usecss file="mystyle.css" />3、HTML文档中什么位置比较适合于引用外部样式表？（）A. 在<head>部分B. 文档结尾C. 文档开始D. 在<body>中4、哪个HTML标签定义内部的样式表？（）A. <style>B. <css>C. <script>D. <cssStyle>5、哪个HTML属性定义内嵌的样式表？（）A. styleB. fontC. stylesD. class6、哪个是正确的CSS语法？（）A. {body;color:black}B. body:color=blackC. {body:color=black(body}D. body {color: black}7、CSS中如何插入注释？（）A. // this is a comment //B. ' this is a commentC. /* this is a comment */D. // this is a comment8、哪个属性是CSS用来改变背景颜色？（）A. background-color:B. color:C. bgcolor:D. set-Color:9、如何为<h1>元素添加背景颜色？（）A. h1.all {background-color:#FFFFFF}B. all.h1 {background-color:#FFFFFF}C. h1 {background-color:#FFFFFF}D. h1+all {background-color:#FFFFFF}10、如何改变一个元素中的文本的颜色？（）A. color:B. text-color=C. text-color:D. fgcolor:11、哪个CSS属性控制文字大小？（）A. font-styleB. font-sizeC. text-sizeD. text-style12、将所有的<p>元素全部加粗的CSS( )A. p {font-weight:bold}B. p {text-size:bold}C. <p style="font-size:bold">D. <p style="text-size:bold">13、如何让超链接不显示下划线？（）A. a {text-decoration:no underline}B. a {decoration:no underline}C. a {underline:none}D. a {text-decoration:none}14、如何让文本中每个单词都是大写字母开头进行显示？（）A. text-transform:uppercaseB. text-transform:smartC. text-transform:capitalizeD. 无法用CSS做到这点15、如何改变一个元素的字体？（）A. font=B. f:C. font-family:D. text-name:16、如何将文本加粗显示？（）A. font:bB. font:boldC. style:boldD. font-weight:bold17、边框样式设定如下:上边框10像素、底边框5像素、左边框20像素、右边框1像素，如何显示该样式（）A. border-width:5px 20px 10px 1pxB. border-width:10px 20px 5px 1pxC. border-width:10px 5px 20px 1pxD. border-width:10px 1px 5px 20px18、如何改变一个元素的左页边距？（）A. margin:B. margin-left:C. text-indent:D. indent:19、为了定义元素与其边框直接的空白区域，可以使用padding属性，但是是否可以将padding 设为负值呢？（）A. 可以B. 不可以C. 标准中没有规定D. 不同浏览器是不同的20、如何让一个列表中各个项之前显示实心的正方形(square)？（）A. type: squareB. type: 2C. list-style-type: squareD. list- style: square21.CSS是利用（）XHTML标签构建网页布局。

DIV标签详细介绍

DIV标签详细介绍DIV标签详细介绍div 是 division 的简写，division 意为分割、区域、分组。

⽐⽅说，当你将⼀系列的链接组合在⼀起，就形成了⽂档的⼀个 division。

<div> 可定义⽂档中的分区或节（division/section）。

<div> 标签可以把⽂档分割为独⽴的、不同的部分。

它可以⽤作严格的组织⼯具，并且不使⽤任何格式与其关联。

如果⽤ id 或 class 来标记 <div>，那么该标签的作⽤会变得更加有效。

id与class的区别class⽤于元素组（类似的元素，或者可以理解为某⼀类元素），⽽id⽤于标识单独的唯⼀的元素。

class可以在页⾯⾥⾯重复使⽤，id由于在页⾯⾥⾯只能出现⼀次，所以不能重复使⽤，所以尽量⽤class来写，这样能在页⾯⾥⾯重复引⽤你写的css，减⼩⼯作量和代码量。

这种情况尽量⽤id：页⾯⼤的模块⾥⾯，⽤id来区分不同的模块，⽐如页⾯⾥⾯有这样的模块：最新新闻，推荐新闻等，就可以考虑⽤id来区分。

还有⼀点，由于id是页⾯中唯⼀的，更多的是定义来留给给页⾯⾥⾯的javascript⽤。

补充：class和id在页⾯⾥⾯的使⽤⽅法：－－－－－－－－－－－－－－－－－－－class：footerid：footer定义class的css是⽤点：“.”，如.footer定义id的css是⽤井号“#”，如#footer如下⾯：* {margin: 0px;padding: 0px;}body{width:910px;height:auto;margin-left:auto;/*左右⾃动可以居中*/margin-right:auto;}.header{background-color: #F6F;float: left;height: 80px;width: 910px;}.content{background-color: #FCF;float: left;height: auto;width: 910px;margin-top: 20px;padding-bottom:20px;}.left{background-color: #930;float: left;height: 500px;width: 290px;margin-top: 20px;margin-left: 10px;display:inline;/*先把这个去掉看下，边距的问题，在IE6下双边据。

高职考技能考电子商务HTML代码测试题

高职考技能考电子商务HTML代码测试题姓名_________一.单选题（30分）1、HTML是什么意思？( )A.高级文本语言B.超文本标记语言C.扩展标记语言D.图形化标记语言2、关于web标准以下说法错误的是( )A.Web标准是一个复杂的概念集合，它由一系列标准组成B.这些标准全部都由W3C起草与发布C.Web标准可以分为3个方面D.Web标准里的表现标准语言主要包括CSS3、以下标签哪个不是空标签:( )A .<meta>B .<input>C .<hr> D. <form>4、以下关于CLASS和ID的说法，错误的是:( )A.class的定义方法是: . 类名{样式};B.id的应用方法:<指定标签id="id名">C.class的应用方法:<指定标签class="类名">D.id和class只是在写法上有区别，在应用和意义上没有任何区别5、关于ID选择符说法错误的是: ( )A. ID选择符的语法格式是“#”加上自定义的ID名称B.当我们使用ID选择符时，应先为当前元素定义一个id属性，如:<div id="top"></div>C.选择符更适合定义类样式D.一个id名称只能对应于文档中一个具体的元素对象6、HTML中<body text=red>,表示（）A.正在点击文字的色彩是红色。

B. 可可链接文字的色彩是红色。

C.非可链接文字的色彩是红色。

D. 已链接文字的色彩是红色。

7、表示跳转到页面的”bn”锚点的代码是：（）A.<a link="#bn"> ... </a>B.<a href="bn"> ... </a>C.<a href="#bn"> ... </a>D.<a herf="bn"> ... </a>8、在Dreamweaver CS3中下面可以用来做代码编辑器的是( )A.记事本程序(Notepad)B.PhotoshopC.flashD.以上都不可9、在HTML文档中使用无序列表应使用( )标记A.<ul>B.<ol>C.<li>D.<dl>10、表示新开一个窗口的超链接代码是（）A.<a href=URL target=_new>..</a>B.<a href=URL target=_self>..</a>C.<a href=URL target=_blank>..</a>D.<a href=URL target=_parent>..</a>11、CSS样式文件的类型不包括( )A.内部样式表B.内联样式表C.外部样式表D.包含样式表12、表示水平线对齐方式为左对齐的HTML代码是( )A.<br align=left>B.<tr align=left>C.<hr align=left>D.<hr align=right>13、<hr noshade>表示( )A.表示水平线没有阴影B.表示水平线没有边框C.表示页面边界没有阴影D.表示水平线不显视14、红色的十六进制代码是（）A. #00ff00B. #ff0000C. #0000ffD. #f0f0f015、表格的真正作用是( ).A. 网页排版布局B.显示数据C.处理图像D.优化网站16、以下有关列表的说法中，错误的是：（）A.有序列表和无序列表可以互相嵌套。

HTML,CSS编码规范

HTML、CSS编码规范1.基本原则* 遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式* 代码格式化，保持干净整洁2.HTML部分2.1.添加必须的utf-8的字符集，并且使用HTML5的简洁方式：<meta charset="utf-8" />2.2.遵循xhtml 1.0规则：1)所有标签必须小写2)标签属性必须使用成对引号（单引号或双引号）3)标签属性必须有值：<select><option selected="selected"></option></select><input type="checkbox" checked="checked" />4)特殊符号必须转义（&、<、>、©、»…）2.3.标签属性命名规范id：_连接符命名法“hello_world”class: -连接符命名法“hello-world”name：骆驼式命名法“helloWorld”1)表单元素的id必须加以下前缀label：lbltext：txtpassword：txttextarea：txtfile：txtradio：radcheckbox：chksubmit：btnreset：btnbutton：btnhidden：hid2)应使用统一的结构布局的元素id命名3)name命名一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用骆骆式命名法命名，例如id=”txt_id_card”，那么name=”idCard”。

2.4.要合理使用标签，语义化结构1)标签合理嵌套a、span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p2)避免多余的div、span、table标签，正确使用标签表现DOM结构，在文档去除css的情况下，仍然具有结构和可读性，以下是html标记的使用规范：p：文本段落；dl：定义列表，可包括标题和内容简介的列表；ul：无序列表；ol：有序列表；h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；strong/em：强调文本；img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css 处理，不使用img元素；3)合理化表单结构a)使用fieldset元素包裹相同类别的字段；b)使用legend元素表示字段类别名称；c)使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点；d)文本框不使用size属性定义宽度，而使用css的width属性；e)要添加maxlength属性限制输入字符的长度。

css选择器的使用

css选择器的使⽤css选择器的使⽤⽅法今天给⼤家分享⼀下css常⽤的选择器使⽤。

⾸先我们先了解⼀下为什么要使⽤选择器。

引⼊、要使⽤css对HTML页⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器。

HTML页⾯中的元素就是通过CSS选择器进⾏控制的，这就要⽤到我们的css选择器。

选择器的类别：1. 类型选择器2. id选择器3. class选择器4. 通⽤选择器5. 群组选择器6. 后代选择器7. 伪类选择器8. 属性选择器9. 层级选择器10. ...⼀、类型选择器的⽤法：样式：<style>div{width: 500px;height: 500px;background: #000;}</style>结构：<body><div></div></body><style>div{width: 500px;height: 500px;background: #000;}</style><body><div></div></body>运⾏结果：css通过类名来控制改变样式代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 200px;height: 100px;background: rgb(248, 2, 2);}</style></head><body><div id="box"></div></body></html>　id选择器⽤法给标签取⼀个id=“名称”的属性与属性值，属性值是⾃⼰命名。

xpath教程二----通过ID和Class检索

xpath教程⼆----通过ID和Class检索必备知识点在html中，id是唯⼀的在html中，class是可以多处引⽤的⼯具Python3版本lxml库【优点是解析快】HTML代码块【从⽹络中获取或者⾃⼰杜撰⼀个】requests【推荐安装，从⽹页上获取⽹页代码练⼿，再好不过了】Xpath学习先定义html代码块【这次只从body开始】<body><div class="container"><div id="first"><div class="one">都市</div><div class="two">德玛西亚</div><div class="two">王牌对王牌</div><a><div class="spe">特殊位置</div></a></div><div id="second"><div class="three">⽔电费</div><div class="three">说的话房间不开封</div><div class="four">三顿饭⿊客技术</div></div><div id="third"><div class="three">⽔电费</div><div class="three">说的话房间开封</div></div></div></body>"""再准备python代码块from lxml import etreehtml = etree.HTML(html_str)任务⼀：获取类名为one的⽂本值解决这个问题，有⾮常简单的xpath路径，直接匹配html代码中的class，然后获取⽂本值就⾏代码如下：print(html.xpath('.//div[@class="one"]/text()'))结果：['都市']这⾥需要解释多个地⽅： - @的作⽤：表⽰属性，div属于标签，它有⾃⼰的属性，例如class、id等等。

htmlattributes的用法

HTML属性（html attributes）是HTML元素提供的额外信息，它们可以用来描述元素的特征，如颜色、大小、对齐方式等等。

在HTML 中，属性通常用于控制元素的外观和行为，比如信息的目标、图片的大小、表格的边框等等。

1. 属性的基本语法HTML属性通常包含在开始标签中，并且以键值对的形式存在，即属性名=属性值。

<a href="">这是一个信息</a>中的href属性用来指定信息的目标位置区域。

属性值可以是单引号或双引号括起来的字符串，也可以是不带引号的字符串，具体取决于属性的类型和值的内容。

2. 常用的HTML属性HTML提供了许多属性用于控制元素的外观和行为，以下是一些常见的HTML属性：- href：用于指定信息的目标位置区域- src：用于指定图像、音频、视瓶等资源的文件路径- alt：用于指定图像的替代文本- title：用于指定元素的标题- width、height：分别用于指定图像、表格等元素的宽度和高度- class、id：用于指定元素的样式类和唯一标识符- style：用于指定元素的样式- target：用于指定信息的打开方式（在当前窗口、新窗口等）- colspan、rowspan：用于指定表格单元格的跨列和跨行数3. 自定义属性除了常见的HTML属性外，还可以使用自定义属性来存储额外的元素信息。

自定义属性以"data-"开头，可以用来在JavaScript中存储和读取元素的相关数据。

<div data-userid="12345">...</div>中的data-userid属性可以用来存储用户ID。

4. 属性的注意事项在使用HTML属性时，需要注意以下几点：- 属性名是大小写不敏感的，但通常建议使用小写字母，以保持一致性。

- 属性值应该用双引号括起来，这样可以避免因特殊字符导致的解析问题。

HTML重要标签总结归纳

HTML 重要标签： (1)样式/节 ①<style> 实例：<html> <head><style type=”text/css”> h1 { color:red } p { color:blue } </style></head> <body><h1>Header 1</h1> <p>A paragraph.</p></body></html>定义和用法<style> 标签用于为 HTML 文档定义样式信息。

在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。

type 属性是必需的，定义 style 元素的内容。

唯一可能的值是 "text/css"。

style 元素位于 head 部分中。

②<div>HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。

除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。

它取代了使用表格定义布局的老式方法。

使用 <table> 元素进行文档布局不是表格的正确用法。

<table> 元素的作用是显示表格化的数据。

实例：<html><body> <h3>This is a header</h3><p>This is a paragraph.</p> <div style="color:#00FF00"><h3>This is a header</h3><p>This is a paragraph.</p></div> </body></html>定义和用法 <div> 可定义文档中的分区或节（division/section）。

CSS优先级----ID,Class,style（内联）常见情况一览

CSS优先级----ID,Class,style（内联）常见情况⼀览⼀.外部CSS，内部CSS，内联CSS优先级 1.内联CSS（声明在元素上“style=“*****””）》内部CSS（声明在head标签内的）》外部CSS（引⽤css⽂件）⼆.ID，Class，Style（内联）优先级 1.3者的样式设置不冲突----------结论：3者的样式设置不重复，就会依照所有的样式去渲染元素，3者都采⽤。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><STYLE TYPE="text/css">.testclass{ /*⽤来测试class的字体⼤⼩设置*/font-size:50px;}#testid{border:1px solid black;/*⽤来测试id的边框样式设置*/}</STYLE></head><body><div id='grandfather' style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <p id="testid" class="testclass" style="color:blue;">测试⽤例元素</p></div></body></html> 2.局部2者重复碰撞设置---------------结论： style（内联样式）》 ID 》Class ①class 和 id 冲突设置（重复设置的边框样式是按照id来渲染的）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><STYLE TYPE="text/css">/*⽤来测试class的边框样式（绿⾊）*/.testclass{border:1px solid green;}/*⽤来测试id的边框样式（粉⾊）*/#testid{border:1px solid pink;}</STYLE></head><body><div id='grandfather' style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <p id="testid" class="testclass" style="color:blue;">测试⽤例元素</p></div></body></html> ②class 和 style 冲突设置（重复的部分是按照style（内联）样式来渲染的）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><STYLE TYPE="text/css">/*⽤来测试class的字体样式（绿⾊）*/.testclass{color:green;}/*⽤来测试id的边框样式（粉⾊）*/#testid{border:1px solid pink;}</STYLE></head><body><div id='grandfather' style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <p id="testid" class="testclass" style="color:black;">测试⽤例元素</p></div></body></html> ③id和style冲突设置（重复的部分是仍然是按style（内联样式）来渲染的）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><STYLE TYPE="text/css">/*⽤来测试class的字体样式（绿⾊）*/.testclass{color:green;}/*⽤来测试id的字体样式（粉⾊）*/#testid{color:pink;}</STYLE></head><body><div id='grandfather' style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <p id="testid" class="testclass" style="color:black;">测试⽤例元素</p></div></body></html> 3.3者冲突测试-------------------结论：冲突部分按照style（内联样式）》ID》Class 来渲染，不冲突部分全部采⽤并渲染。

什么是选择器？选择器都有什么种类？

什么是选择器？选择器都有什么种类？⾸先我们要理解什么是选择器？选择器是⽤来做什么的？我们都知道html它是超⽂本标记语⾔，是没有样式的，我们要给html添加样式就要⽤到css，但是我们怎样去知道要给哪⼀个元素添加样式呢？这个时候就需要有选择器来去选择需要添加样式的标签、元素等等，这也使得选择器分成了不同的类。

1.标签选择器：通过标签名选择⼀类元素（标签选择器的结构：标签名{css语句}）例：div{}、span{}、p{}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{width: 500px;height: 500px;background-color: salmon;border: 1px solid black;text-align: center;}p{font-style: italic;}span{font-size: 60px;}</style></head><body><div>hello world! <br><p>hello world!<span>你好呀世界！</span></p></div></body></html>2.id选择器：通过id属性选择⼀个元素（id选择器的结构：#id属性名{css语句}）#one （id=one）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#div{width: 500px;height: 500px;background-color: salmon;border: 1px solid black;text-align: center;}#p{font-size: 60px;}</style></head><body><div id="div">hello world! <br><p id="p">hello world!<span id="p">你好呀世界！</span></p></div></body></html>3.类选择器：通过class属性选择⼀类元素（类选择器的结构：.class属性名{css语句}）.one （class='one'）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{background-color: lawngreen;.one{background-color: seagreen;font-style: italic;}.two{background-color: slateblue;font-size: 70px;}</style></head><body><ul class="one"><li>aaaaaaaaaa</li><li>bbbbbbbbbb</li><li>cccccccccc</li></ul><ul class="two">xixixi<li>rrrr</li><li>tttt</li><li>yyyy</li></ul><ul class="one"><li>qqqqqqq</li><li>wwwwwww</li><li>bbbbbbb</li></ul></body></html>4.普遍选择器：所有元素都会被选中（结构：*{}）*所有选中所有⼀般不会使⽤，⽽且选中所有后，若其后还有其他样式将会把它覆盖（就近原则）（上例中有该⽤法）5.后代选择器：空格：选择所有后代元素>:选择直接⼦元素<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>table tr{background-color: lawngreen;}div>p{background-color: mediumblue;}/*改变了所有的<p>⽽且<p>中的<span>也改变了*/div>span{background-color: lightpink;}/*没有改变<p>⾥⾯的<span>改变了<p>外⾯的<span> 选择的是直接⼦元素*/</style></head><body><table><div>hello <br><p>world <br><span>喜喜</span></p><p>看看你改变不改变</p><span>那你呢</span></div><tr><td>dsvfv</td><td>fdsfd</td><td>fdsvd</td><td>sfdsd</td></tr><tr><td>你好</td><td>谢谢</td><td>再见</td><td>抱歉</td></tr></table></body></html>6.兄弟选择器+：选择当前元素之后的⼀个元素~：选择当前元素之后的所有元素测试时注意覆盖<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{border: 1px solid red;}div~p{border:2px solid green;}div+p{border:1px solid black;}</style></head><body><div id="obn"><p>hhhhhhhhhhhhhh <span>123</span></p><p>xixixixiixiixiixi</p></div><p>fsgrv;dhajoewdisdkjfocidsjvoiefhkd</p><p>覅绿化我是我欸的⼥警</p></body></html>7.组合选择器(实际开发中不要嵌套太多)div #one.onediv#onediv.one<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div #one.one{background-color: blue;font-size: 70px;}</style></head><body><table><div>hello <br><p id="one" class="one">world <br><p class="one">svrvsrv</p></p><p id="one" class="two">看看你改变不改变</p><span>那你呢</span></div></table></body></html>8.多选择器（元素、类、属性等等组合在⼀起选择）div,p,#one{}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div,#ds,.o{background-color: blue;}</style></head><body><table><div>hello <br><p>world <br><span>喜喜</span></p><p>看看你改变不改变</p><span>那你呢</span></div><tr><td id="ds">dsvfv</td><td>fdsfd</td><td>fdsvd</td><td>sfdsd</td></tr><tr><td class="o">你好</td><td>谢谢</td><td>再见</td><td class="o">抱歉</td></tr></table></body></html>9.属性选择器：根据元素的属性选择⼀类元素[id]:具有id属性的[id='one']:id属性为one的[class~='one'] //英⽂波浪线具有class属性并且属性值之⼀等于one[class^='one']具有class属性并且属性值以one开头[class$='one']具有class属性并且属性值以one结尾[class*='one']具有class属性并且属性值中包含one<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>[id]{background-color: blue;}[class='o']{background-color: red;}[class*='o']{background-color: yellow;}[class~='o']{background-color: brown;}</style></head><body><table><div>hello <br><p>world <br><span>喜喜</span></p><p>看看你改变不改变</p><span>那你呢</span></div><tr><td id="ds">dsvfv</td><td class="pq d o">fdsfd</td><td>fdsvd</td><td>sfdsd</td></tr><tr><td class="o">你好</td><td class="pqo">谢谢</td><td>再见</td><td class="o">抱歉</td></tr></table></body></html>伪类选择器：（结构：伪类名称{}）像类⼀样，但是是浏览器规定的⼀些种类元素:firt-child:last-child:nth-child(num/odd/even)(以上三个较其他⽐较常⽤):first-of-type:last-of-type元素状态相关的伪类选择器:link 未被访问的状态:visited 已访问过的状态:hover ⿏标悬停的状态:active 活动的状态（⿏标按下的状态）（以上4个常⽤）：focus 聚焦的状态：checked ⽤户选中的单选按钮或者多选按钮：default 默认选中的单选按钮或者多选按钮：enabled 、：disabled 可⽤的表单控件、禁⽤的表单控件：valid 、：invalid 验证通过的、不验证通过的：required 、：optional 必填的和选填的:in-range 、 :out-of-range 在范围内的、不在范围内的伪元素选择器（结构：：伪元素名称）：：first-letter 第⼀个元素：：first-line 第⼀⾏：：before 在当前元素之前添加东西（属性 content：''/url()）：：after 在元素之后添加东西：：selection 选择（类和伪类选择器会在下⼀篇博客做详细说明）。

HTML选择器的四种使用方法

HTML选择器的四种使⽤⽅法选择器<style>为了让.html代码更加简洁，这⾥引⼊选择器style本⽂总共介绍选择器的四种使⽤⽅式⼀、选择器的四种形式1.ID选择器id表⽰⾝份，在页⾯元素中的id不允许重复，因此id选择器只能选择单个元素2.类别选择器选择拥有该类别的多个元素3.标签选择器根据标签名称，选择对应的所有标签4.通⽤选择器针对页⾯中的所以标签都⽣效⼆、选择器的使⽤这是⼀段没有使⽤选择器的html代码：<!DOCTYPE html><html style="background-color: gainsboro"><head><meta charset="utf-8"><title></title></head><body style="margin: 0;"><div id="banner"><img src="img1/img2.png" style="width: 100%;" ></div><div id="navigation" style="height: 80px;text-align: center;line-height: 80px;background-color: white;"><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">关于我们</a><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">我们的故事</a><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">产品和解决⽅案</a><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">新闻和活动</a><a href="#" style=" text-decoration: none; color: black; margin: 0 15px;">联系我们</a></div><div id="botton" style="height: 40px;text-align: center;line-height: 40px;color: grey;">运⽤先进技术积极推动改变，让整个世界更美好。

动态网页设计习题答案

模块1 建设基础一、填空题1. 全球信息网2. html、htm3. 域名、空间4. cascading style shee，被称为层叠样式表或级联样式表5. 记事本、HotDog Professional、HomeSite、UltraEdit、WYSIWYG Web Builder 8.1、Dreamweaver、Frontpage6. uniform resource locator7. HTML、HTML8. W3C9.JavaScript二、简答题1.写出URL包含的3部分容的作用。

答：URL通常包括3部分，第一部分是Scheme，告诉浏览器该如何工作；第二部分是文件所在的主机；第三部分是文件的路径和文件名。

2.网页和有什么区别？答：网页是上的某一个页面，它是一个以扩展名为html或htm 的文件，向浏览者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML、JavaScript等语言来描述组成页面的元素，并通过浏览器进行解释，最后把结果信息通过浏览器在网页上显示出来。

（website）是指Internet上的一个固定的面向全世界发布消息的地方，由域名（也就是地址）和空间构成，通常包括主页和其他具有超文件的页面。

3.写出开发的基本流程。

答：1.建设前的市场分析2.建设的目的及功能定位3.技术解决方案4.容及实现方式5.进行网页设计6.选择网页设计的工具7.费用预算8.测试9.维护10.发布与推广模块2 Web标准及其构成一、填空题1. W3C和ECMA2. 表现标准语言主要包括CSS，行为标准语言主要包括对象模型（如W3C DOM）、ECMAScript3. eXtensible HyperText Markup Language、文档结构二、简答题1.什么是Web标准？为什么要使用Web标准来开发网页？答：Web标准不是某一个标准，而是一系列标准的集合。

Web标准是由W3C（world wide web consortium）和其他标准化组织制定的一套规集合。

HTML常用标签属性汇总(最新整理)

HTML 常用标签属性汇总<body> 标签 (1)<a> 标签 (2)1.可选的属性 (2)2.标准属性 (3)键盘属性 (4)<p> 标签 (4)1.可选的属性 (4)2.标准属性 (4)<a> 标签 (5)1.可选的属性 (5)2.标准属性 (6)键盘属性 (7)<img> 标签 (7)1.必需的属性 (7)2.可选的属性 (7)3.标准属性 (8)<table> 标签 (9)1.可选的属性 (9)2.标准属性 (10)<input> 标签 (11)1.可选的属性 (11)2.标准属性 (12)注：表示颜色的有三种方式； (13)<body> 标签1.背景属性:包括：bgcolor,background<body background-color:black> 背景颜色<body background-image : url(image/bg.gif)> 背景图片<body background-attachment : fixed> 固定背景<body background-repeat : repeat> 重复排列-网页预设<body background-repeat : no-repeat> 不重复排列<body background-repeat : repeat-x> 在x轴重复排列<body background-repeat : repeat-y> 在y轴重复排列<body background-position : 90% ,90%> 背景图片x与y轴的位置2,文字属性：包括：text,link,alink,vlink,<body text="red">字体颜色插入隐藏域<input name=”” type=”hidden” value=””>注：表示颜色的有三种方式；1，16进制颜色代码语法：#RRGGBB例：<font color="#ff0000">红色</font>2，10进制RGB码语法：RGB（RRR，GGG，BBB）例：<font color="rgb(255,000,000)">红色</font> 3,直接用颜色的英文名称例：<font color="red">红色</font>。

html name 命名规则

html name 命名规则
HTML名称命名规则是指在编写HTML文件时，命名标记、属性、id和class名称的一系列规则和约定。

以下是HTML命名规则的一些常见规则和最佳实践：
1. 标记名称应该使用小写字母，如：`<p>`而不是`<P>`。

2. 标记名称应该简明扼要，且尽可能准确地描述该标记的作用。

例如，使用`<nav>`而不是`<navigation>`。

3. 属性名称应该使用小写字母，且尽可能简单明了。

例如，使用`class`而不是`className`。

4. id和class名称应该描述元素的内容或作用，且尽可能简短明了。

例如，使用`<div id='header'>`而不是`<div
id='top_of_page'>`。

5. id名称应该是唯一的，不能重复。

6. class名称允许重复，可以用来将多个元素组合在一起，以实现样式的统一。

7. 遵循一致的命名规范，以便代码易于理解和维护。

8. 避免使用特殊字符或空格来命名标记、属性、id和class名称。

9. 尽量不要使用和HTML标记和属性名称相同的名称来命名id 和class。

总之，HTML命名规则旨在提高代码的可读性和可维护性，使开发者能够更有效地编写、理解和更新HTML代码。

关于Htmlclassid命名规范

关于Htmlclassid命名规范CSS命名规则头：header 内容：content/containe 尾：footer 导航：nav 侧栏：sidebar 栏⽬：column 页⾯外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo ⼴告：banner 页⾯主体：main 热点：hot 新闻：news 下载：download ⼦导航：subnav 菜单：menu ⼦菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab ⽂章列表：list 提⽰信息：msg ⼩技巧：tips 栏⽬标题：title 加⼊：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：voteXHTML⽂件中id的命名(1)页⾯结构容器: container 页头：header 内容：content/container 页⾯主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏⽬：column 页⾯外围控制整体布局宽度：wrapper 左右中：left right center(2)导航导航：nav 主导航：mainbav ⼦导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu ⼦菜单：submenu 标题: title 摘要: summary(3)功能标志：logo ⼴告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加⼊：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 提⽰信息：msg 当前的: current ⼩技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyrightCSS+DIV的命名规则：登录条:loginBar 标志:logo 侧栏:sideBar ⼴告:banner 导航:nav ⼦导航:subNav 菜单:menu ⼦菜单:subMenu 搜索:search 滚动:scroll 页⾯主体:main 内容:content 标签页:tab ⽂章列表:list 提⽰信息:msg ⼩技巧:tips 栏⽬标题:title 友情链接:friendLink 页脚:footer 加⼊:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态:status 按钮:btn 投票:vote 合作伙伴:partner 版权:copyRight 1.CSSID的命名主导航:mainNav ⼦导航:subnav 页脚:footer 整个页⾯:content 页眉:header 页脚:footer 商标:label 标题:title 主导航:mainNav(globalNav) 顶导航:topnav 边导航:sidebar 左导航:leftsideBar 右导航:rightsideBar 旗志:logo 标语:banner 菜单内容1:menu1Content 菜单容量:menuContainer ⼦菜单:submenu 边导航图标:sidebarIcon 注释:note ⾯包屑:breadCrumb(即页⾯所处位置导航提⽰) 容器:container 内容:content 搜索:search 登陆:login 功能区:shop(如购物车，收银台) 当前的current 2.样式⽂件命名主要的:master.css 布局版⾯:layout.css 专栏:columns.css ⽂字:font.css 打印样式:print.css 主题:themes.css说明：均为class，需要扩展，则在当前命名内以“_“(下划线)后缀⾃定名称。

html语言翻译

html语言基本常识<html> </html>标志着html文件的开始与结束<head> </head>头部标志符<title> </title>网页的标题<boby> </boby>构成web的主体1.background定义网页的背景图案2. bgcolor背景色（默认白）3. text文字颜色（默认黑）4. link超链接颜色（默认蓝）5. alink当前被选中的超链接颜色（默认红）6. vlink已被访问过的超链接颜色（默认紫）<font> </font> 标志符可以控制字符的样式1. face设置文字的字体效果2. color设置文字颜色3. size 设置字体大小<b></b>粗体<strike></strike> 删除线<big></big>大字体<sub></sub> 下标<i></i> 斜体<sup></sup> 上标<s></s> 删除线<u></u> 下划线<small></small> 小字体<hn></hn> 设置文件中的标题n 1~6的数字<p></p> (paragraph)划分段落<pre></pre>预格式化标志符<hr>换行并绘制一条水平线（没有结束标志符）1. width水平线长度2. size水平线粗细3. noshade无阴影4. align水平线的对齐方式（left center right)5. color水平线颜色<br>强制换行(没有结束标志符)<ol><li>......</li><li>......</li>.......</ol>设置有序列表li可是 1.2.3....或 a.b.c....或 A.B.C...或i.ii.iii.....或I.II.III....(两个属性:type start)<ul><li>......</li><li>......</li>......</ul>无序列表 (一个属性:type disc实心圆circle空心圆square方框)<a></a> 实现超链接1. href定义超链接所指向的文档的URL2. target目标窗口3. name锚名称（该属性一般在创建页面内超链接时使用)<a href="/URL"> </a>使用a标志符创建超链接时，可以使用相对路径（同一网站内的文件），也可以使用绝对路径（指向本站点以外的文件)<a > </a>.....<a href="#锚点名称"> </a>创建网面内超链接逻辑上分为两步，首先定义锚点，然后再创建指向锚点的超链接<a href="mailto:电子邮箱地址"> </a>指向电子邮箱的超链接<img>插入图像1. src设置被引用的图像文件所在的位置2. alt设置图像的简单文字说明3. width, height设置图像的宽度与高度4. align对齐方式(left,right,top,bottom,middle)5. border边框宽度6.hspace ,vspace定义了图像与周围元素的水平和垂直间距<map ><area><area>......</map><img src="/"usemap="#图像映射名称"> <map></map>定义了图像映射的区域img通过usemap可以确定与所建立的图像映射区域的关系area定义图像不同区域与不同文档之间建立链接1. shape形状(rec t矩形circle圆poly多边形)2. coords坐标3. target目标窗口4. alt替换文字<table><caption> </caption><tr><th> </th><th> </th>......</tr><tr><td> </td><td> </td>......</tr><tr><td> </td><td> </td></tr>......</table>table标记符定义表格caption定义表格标题 tr标记符定义表格的行th,td标志符定义表格的单元格th定义表头单元格table可以创建一个新的表格1. width (宽), height (高)2. border (边框)3. bgcolor (背景颜色)4. align (对齐方式left right center)5. cellpadding (填充距)6. cellspacing (单元格间距)7.rules (分隔线none无分隔线groups在行列之间有rows只有行分隔线cols只有列all所有)8. frame (边框void无边框above只显示顶部边框below只显示底部边框hsides只显示顶，底部边框vsides只显示左右边框lhs显示左边框rhs 显示右box显示所有)<tr> </tr>表行1. align 对齐方式(left center right)2. valign垂直对齐方式 (top middle bottom baseline)3. bgcolor 背景颜色<td></td>表格数据1. width (宽), height (高)2. align (对齐方式left right center)3. valign (top middle bottom)4. bgcolor背景颜色5. rowspan单元表的行数6. colspan单元表的列数<frameset><frame><frame>......<frame></frameset> frameset是将窗口分割成若干个子窗口，子窗口数取决于frame的个数<frame> 标记符来标识子窗口(无结果符)1. name2. src (源) 设置框架内容的URL3. frameborder (框架边框)4. marginwidth (框架的左右边距)5. marginheight (框架的上下边距)6. scrolling (是否显示滚动条 auto自动 yes显示 no不显示)7. noresize (不允许调整框架的尺寸)<a herf="目标文件"target="目标框架名">超链接内容</a>1. _top表示将超链接的目标文件装入整个浏览器窗口2. _self表示将超链接的目标文件装入当前框架，以取代该框架中正在显示的文件3. _blank表示将超链接的目标文件装入一个新的浏览窗口4. _parent表示将超链接的目标文件装入当前框架的父框架<iframe></iframe> 定义了一个页面内的框架1. src (源) 设置框架内容的URL2. name3. width,height4. align (top middle bottom)5. frameborder (框架边框)6. marginwidth (框架左右边框), marginheight (框架上下边框)7. scrolling (是否显示滚动条auto yes no)<form></form> 表单1. method (方法) 定义表单的提交方式2. action (动作) 指定表单所对应的处理程序<input>定义了一个用于用户输入的表单元素(无结束标记符)1. name标识表单元素2. type 指定表单元素的类型(text文本password密码checkbox复选框radio单选框submit提交按钮reset重置按钮)<input type="text">将type指定为text,在浏览器中显示一个文本输入框，供用户输入信息1. value (初始值)2. size (尺寸)3. maxlength (输入文本的最大字符数)<input type="password">密码文本框例:<form>密码:<input type="password"size="10"maxlength="15"></form><input type="checkbox">复选框例:<from><p>你的爱好:</P><input type="checkbox"value="music"checked>音乐<input type="checkbox"value="sports">体育<input type="checkbox"value="other">其它</form><input type="radio">单选框例:<form><p>公司的人数:</p><p><input type="radio">少于10人</p><p><input type="radio"checked>10人至100人</p><p><input type="radio">100人以上</p></form><input type="submit">提交按钮<form><input type="submit"value="提交"></form><input type="reset">重置按钮<input type="image">图像提交按钮<input type="file"><input type="buttom"><input type="hidden"><textarea> </textarea>定义一个用于用户多行输入的表单元素1. name指定文本域的名称2. rows指定文本域的高度3. cols指定文本域的宽度<select><option></option><option></option>......<option></option></select>定义了一个选项列表表单元素1. name指定选取项列表的名称2. size指定列表选项显示时一次显示选项的数目3. multiple使用该属性可以允许多重选择4. value指定当该选项被选中并提交后，浏览器传给服务器的数据5. selected 指定哪一个选项在默认状态下是选中状态<label></label>选中该控件<marquee></marquee>创建一些滚动字幕1.direction (方向left right up down)2.behavior(行为scroll绕圈滚动slide只滚一次 alternate来回滚动)3.loop (循环)4.scrollamount (滚动的速度)5.scrolldelay (滚动延时)6.align (对齐方式top middle bottom)7.bgcolor8.height,width9.hspace,vspace (垂直和水平间距)<applet><param><param>......</applet> applet用来在网页中插入一个Java小应用程序对象1. code (源代码) 指定Java小应用程序的源代码文件(.class文件)2. name3. width,height4. alignparam 用来定义Java小应用程序中的参数2.value (值)给变量赋值3.valuetype (值类型 data表示value指定的值将作为一个字符串传递的对象ref 表示value指定的值是一个URLobject表示value指定的值是一个指向同一文档中一个object的标志符)4. type (类型)当valuetype属性的值设置为ref时，此属性指定了URL 所代表资源的内容类型<object><param><param>......</object> object可以定义很多种不同的多媒体文件1. classid:该属性指定了浏览器中用来播放相应多媒体对象的控件ID2.codebase :定义多媒体文件相对位置的根目录3.codetype: 指定当下载由classid所指定的对象时使用的数据内容的类型4.data:定义多媒体文件的位置5.type:定义多媒体文件的类型6.width,heightselector{property1:value1;property2:value2......} selector 表示需要应用式样的对象property 表示由css标准定义的样式属性value表示样式赂性的值例:h2{text-align:center;font-family:楷体_gb2312}selector.classname{property1:value1;......} 标记符类.classname{property:value;......} 通用类#IDname{property:value;......}用户定义ID虚类a:link或:link当超链接末被访问过时，超链接的显示方式a:visited或:visited当超链接已经被访问过时，超链接的显示方式a:active或:active当超链接当前为选中姿态时，超链接的显示方式a:hover或:hover当鼠标指针悬停在超链接上时，超链接的显示方式例: a:link{color:blue}长度单位1.em:它所代表的长度是当前字体中m字母的宽度2.ex:它所代表的长度是当前字体中x字母的高度3.px:像素，它是相对于计算机屏幕的分辨率来定义的in:英寸，1in=2.54cm 1cm=10mmpt:点,1点=1/72in pc:帕 1帕=12点font-family(字体族)font-family:字体名称 | 字体族名称例： p{font-family:黑体，宋体，serif}font-style(字体风格)font-style:字体风格名称例: p{font-style:oblique}font-size (字体大小)font-size:绝对大小 | 相对大小 | 百分比font-variant(字体变形)font-varient:字体变形值1.normal(普通)2.small-caps(小型大写字母)font-weight(字体加粗)font-weight:字体加粗值1.normal(普通)2.bold(加粗)3.bolder(更粗)4.lighter(更细)letter-spacing(字符间距)letter-spacing:数值text-decoration(文字修饰)text-decoration:文字修饰效果1.none 无2.underline 下划线3.overline 上划线4.line-through 删除线5.bink 闪烁text-transform(文本转换)text-transform:文本转换方式1.none 无2.capitalize 使所有单词的第一个字母大写3.uppercase 使所有单词字母都大写4.lowercase 使所有单词字母都小写text-align(文本对齐方式)text-align:对齐方式1.left2.right3.justify 可调整text-indent(文本缩放)text-indent:缩放的数值line-height(行高)line-height:数值margin(页边距)margin:数值padding(填充距)padding:数值例： table{padding:2cm 3cm 5cm}上填充距2cm,左右填充距为3cm,下填充距5cmborder-style(边框样式)border-style:边框样式1.none2.dotted 点线3.dashed 虚线4.solid 实线5.double6.groove 凹线7.ridge 凸线8.inset 内陷9.outset 外凸border-color(边框颜色)border-color: 颜色值border-width(边框宽度)border-width:数值1.thin 细2.medium 中3.thick 宽border(边框)border:边框样式|边框宽度|边框颜色常用的HTML代码一、文字标记基本代码如下：<P align=center><FONT color=#0066ff face=隶书size=5>插入文字</FONT></P>align=center 表示字体居中，可选值为居右（right）居左（left）color=颜色代码face=字体常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等size=字体大小，这里的最大值为7 取值越大文字就越大1.字体变化 <font>..........</font>a.字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大b.指定字型 <font face="字体名称">..........</font>c.文字颜色 <font color=#rrggbb>..........</font>rr：表红色（red）色码gg：表绿色（green）色码bb：表蓝色（blue）色码rrggbb也可用6位颜色代码数字2.粗体字 <b>..........</b>3 字体加粗<STRONG>..........</STRONG>和<b>标签差不多的效果4.换行（也称回车） <br>5.分段标记 <p>文字的对齐方向 <p align="#"> #号可为 left：表向左对齐（预设值）center：表向中对齐 right：表向右对齐 P.S.<p align="#">之后的文字都会以所设的对齐方式显示，直到出现另一个<p align="#">改变其对齐方向，遇到<hr>或<h#>标签时会自动设回预设的向左对齐。

HTML、CSS里面关于 id、class、name 属性的区别和用法

id name class 区别博客分类：html/cssCSS应用服务器JavaScriptIE脚本html中id与Name的区别一个name可以同时对应多个控件，比如checkbox和radio，而id必须是全文档中唯一的id的用途1、 id就是Client端HTML元素的Identity（标记），主要是在客户端脚本里用。

2、 label与form控件的关联如<label for="MyInput">My Input</label><input id="MyInput" type="text">for属性指定与label关联的元素的id，不可用name替代3、脚本中获得对象：IE支持在脚本中直接以id（而不是name）引用该id标识的对象。

例如上面的input，要在脚本中获得输入的内容，可以直接以 MyInput.value来获得。

如果用DOM的话，则用document.getElementById("MyInput").value，如果要用name 的话，通常先得到包含控件的form，例如document.forms[0]，然后从form再引用name，注意这样得到的是经过计算后将发送给服务器的值name的用途用途1: 主要是用于获取提交表单的某表单域信息，作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、框架元素(iframe、frame、 window的名字，用于在其他frame或window指定target ) 和button等，这些元素都与表单(框架元素作用于form的target)提交有关，浏览器会根据name来设定发送到服务器的request，在表单的接收页面只接收有name的元素, 所以赋ID的元素通过表单是接收不到值的。

html中各种标签和属性（最基础的基本都有）

html中各种标签和属性（最基础的基本都有）1、标题标签： h1~h6 ctrl+1~62、段落标签： p ctrl+shift+p3、换⾏标签： br shift+回车4、⽔平线： hr5、加粗标签： strong ctrl+b6、倾斜标签： em ctrl+i7、空格标签：  8、图⽚标签：<img src=’图⽚路径’ alt=’图⽚加载错误提⽰⽂字’ title=’⿏标悬停⽂字’ width=’宽度’ height=’⾼度’ />9、超链接：<a href=’链接路径’ traget=’_blank’>⽂本/图⽚</a>10、锚链接：(1) 定义锚：给标签加id属性，id=”top”(2) 跳转到锚：<a href=”#top”>top</a>11、⾏级标签1.Strong2.Em3.A4.Img12、块级标签1.标题标签2.段落标签Display：inline-block设置元素具有⾏级标签和块级标签的属性.da dl dd p:nth-of-type(1)：当dd下⾯的段落p有好⼏个的时候，你有只想给第⼀个段落p加样式的时候⽤到这个Float：浮动Z-index：层次 z-index：1⽐z-index：2 低⼀层设置div半透明的代码：opacity:0.7；设置div溢出隐藏的代码：overflow:hidden;设置css的动画效果：transition: all 0.5s linear1、linear：规定以相同速度开始⾄结束的过渡效果2、ease：规定慢速开始，然后变快，然后慢速结束的过渡效果3、ease-in：规定以慢速开始的过渡效果4、ease-out：规定以慢速结束的过渡效果5、ease-in-out：规定以慢速开始和结束的过渡效果设置css时图⽚在div中同⽐例放⼤或者同⽐例缩⼩：transform: scale(1.1)第⼆章1、⽆序列表标签： ul li2、有序列表标签： ol li3、定义列表标签： dl dt dd4、表格：(1) Table① Tr ⾏② Td 单元格③ thead标签：表格的表头④ Tbody标签：表格的主体(2) 合并⾏：rowspan(3) 合并列：colspan(4) 表格内部的框合并（双线框变单线框）border-collapse:collapse;5、视频播放(1) Video autoplay⾃动播放 control控制按钮① Sorce src=’视频的地址’1、内联框架(1) Iframe6、⽹页结构(1) 头部：header(2) 主体：section(3) 底部：footer第三章1、表单：<form method=post action=’提交的地址’>表单元素</form>2、表单元素：<input type=’表单元素类型’ name=’名称’ value=’默认值’ />(1) ⽂本框：type=text （⽤户名，编号....）(2) 密码框：type=password（密码）(3) 单选按钮：type = radio（选男还是选⼥）(4) 复选框：type=checkbox（爱好.....）(5) 数字：type=number(6) 电⼦邮箱：type=email(7) ⽹址：type=url(8) ⽂件：type=file（上传头像....）(9) 下拉列表框<select name=’city’><option>济南市</option><option>青岛市</option></select>（像选择城市，选择时间）(10) ⽂本域：<textarea cols=’列’ rows-’⾏’></textarea>（像个⼈简介之类的）(11) 图像按钮：type=image（注册选择的是点击图⽚就⽤到了这个）(12) 提交按钮：type=submit（⽴即注册）(13) 重置按钮：type=reset（重新注册）(14) 想让⽂本框中出现提⽰词语的话⽤这个：placeholder:”请填写正确的密码”；3、表单的⾼级应⽤(1) 只读（readonly="readonly"）(2) 禁⽤（）(3) 表达你的初级验证：placeholder（搜索提⽰）Required（⾮空）Pattern（正则表达式，就是⼿机号必须是11位之类的）第四章1、选择器(1) 标签选择器：直接⽤标签名字命名，不需要调⽤(2) 类选择器：.类名调⽤：class=’类名’(3) ID选择器：#名称调⽤：id=’名称’ id选择器⼀个页⾯只能⽤⼀次(4) 优先级：id>类>标签2、⾼级选择器(1) 层次选择器①后代选择器：E F②⼦选择器：E>F③相邻兄弟选择器：E+F④通⽤兄弟选择器：E~F(2) 结构伪类选择器① E:fist-child 取得第⼀个标签② E:last-child 取得最后⼀个标签③ E:nth-of-type(n) 取得第n个标签(3) 属性选择器① E[attr]:具有attr属性的E标签② E[attr=val]:具有attr属性且值等于val的E标签③ E[attr^=val]: 以val开头的.....④ E[attr$=val]:以val结尾的....⑤ E[attr*=val]：包含val的....第五章1. Color:字体颜⾊2. Font-size：字体⼤⼩3. Font-weight：字体粗细：bold粗，lighter细4. Font-family：字体样式5. Letter-spacing：字间距6. Line-height：⾏间距7. Width：宽度8. Height：⾼度9. Left左10. Right右11. Bottom下12. Top上13. Center中间14. Justify两端对齐15. Backgroun-color：背景颜⾊16. Text-align：⽔平对齐17. Text-indent：⾸⾏缩进18. Border-radius:10px设置边框⾓的弧度19. Text-decoration：none去掉超链接下划线20. Text-decoration：underline加上超链接下划线21. Text-shadow：color x-offset y-offset blur-radius（color阴影颜⾊x-offset沿横向移动y-offset沿纵向移动blur-radius阴影模糊）22. Font-style：italic倾斜23. Vertical-align:middle当图⽚和字⼀起，让字在图⽚的中间对齐时引⽤这个1. Margin：0px去掉外边距2. Padding：0px去掉内边距3. Margin：auto⽹页中的整个元素在⽹页中左右居中4. List-style：none去掉列表默认样式，去掉⼩⿊点5. A:hover⿏标悬停样式6. 背景图像：background-repeat属性 1.repeat：沿⽔平和垂直⽅向平铺2. no-repeat不平铺，只显⽰⼀次3. repeat-x横向平铺4. 3. repeat-x横向平铺4.3. repeat-y纵向平铺（background：url（图⽚） no-repeat 横向纵向）第六章⼀、盒⼦模型：border：边框border-color: #F00; 边框的颜⾊border-width: 10px; 边框的线条⼤⼩border-style 边框的线型边框的线型：solid实线double双实线dotted点线dashed虚线background: linear-gradient(to bottom, #cdcdff, #FFF)*背景颜⾊的渐变to bottom从上往下Border-top：#C0F 1px dotted意思是上边框颜⾊是#c0f 线条的宽度是1px⽤的是点线！⼆、圆：border-radius: 50%;实现圆的效果，三、box-shadow:2px 2px 10px #333; 阴影box-shadow:阴影⽔平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值阴影颜⾊；四、position:relative; /*相对定位*/ 相对于⾃⼰的位置发⽣了偏移，但是原来的位置还是占据！五、Position：absolute； /*绝对定位*/ 相对于⾃⼰的位置发⽣了偏移，但是原来的位置还是不占据！css获取li标签中的第⼏个标签选择器：1.li: first-child表⽰选择列表中的第⼀个标签2.li:last-child表⽰选择列表中的最后⼀个标签3.nth-child(3) 表⽰选择列表中的第3个标签4. nth-child(2n) 这个表⽰选择列表中的偶数标签，即选择第2、第4、第6…… 标签5. nth-child(2n-1) 这个表⽰选择列表中的奇数标签，即选择第1、第3、第5、第7……标签。