Html+css知识点
1、HTML
HTML(Hypertext Markup Language)超文本标记语言。它负责网页的三个要素之中的结构。HTML使用标签的的形式来标识网页中的不同组成部分。所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。标签
:HTML中的标记指的就是标签。HTML使用标记标签来描述网页。结构:<标签名>标签内容</标签名> <标签名 />。
2、元素
我们还将一个完整的标签称为元素。这里我们可以将元素和标签认为是一个同 义词

一级标题

上边的h1我们就称为元素。

我是一个段落

。p也是一个元素,em是p的子元素,p是em的父元素。属性:可以为HTML标签设置属性。通过属性为HTML元素提供附加信息。属性需要设置在开始标签或自结束标签中。属性总是以名称/值对的形式出现。比如:name=“value”,有些属性可以是任意值,有些则必须是指定值。

标题


3、常见属性
Id:id属性作为标签的唯一标识,在同一个网页中不能出现相同的id属性值。class:class属性用来为标签分组,拥有相同class属性的标签我们认为就是一组,可以出现相同的class属性,可以为一个元素指定多个class。Title:title属性用来指定标签的标题,指定title以后,鼠标移入到元素上方时,会出现提示文字。
4、注释
HTML注释中的内容不会在网页中显示。格式: ,合理的使用注释可以帮助开发人员理解网页的代码。注释不能嵌套!
5、怪异模式
为了兼容一些旧的页面,浏览器中设置了,两种解析模式:标准模式(Standards Mode),怪异模式(Quirks Mode),怪异模式解析网页时会产生一些不可预期的行为,所以我们应该避免怪异模式的出现。避免的最好方式就是在页面中编写正确的doctype。
6、编码问题
在计算机的内部,文件都是以二进制编码保存的。所谓的二进制编码就是指1和0,也就是我们的所有内容都需要转换为1和0。中国两个字在计算机的底层保存的可能要转换为10100101这种二进制码,这一过程称为编码。计算机在读取文件时需要将10100101在转换为中国给我们显示这一过程称为解码。
7、字符集
这就带来一个问题,中国到底是10100101,还是01011010到底由谁说了算。所以我们还需要一个东西称为字符集,字符集规定了如何将文本转换为二进制编码。常见的字符集:ASKII、ISO8859-1、GBK、 GB2312、UTF-8。
8、乱码
如果我们保存文件时使用的是utf-8进行编码,而浏览器读取页面时使用gb2312,这样就会导致页面中的内容不能正常显示,也就是我们所说的乱码。所以我们只需要统一两者使用的字符集就可以解决乱码问题。这里为了页面有更好的使用性,我们一般使用utf-8。
9、
作用:标签用于告诉浏览器这个文档中包含的信息是用HTML编写的。
用法:所有的网页的内容都需要编写到html标签中,一个页面中html标签只能有一个。html标签中有两个子标签head和body 。
10、
作用:标签用来表示网页的元数据,head中包含了浏览器和搜索引擎使用的其他不可见信息。用法:head标签作为html标签的子元素的出现,一个网页中只能有一个head。
11、 <br/> 作用:<title>标签表示网页的标题,一般会在网页的标题栏上显示。title标签中的文字,是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。用法:建议将title标签紧贴着head标签编写,这样搜索引擎可以快速检索到标题标签。网站中的多个页面的title也不应该重复,这样不利于搜索隐藏检索。<br/> 12、<br/> 作用:标签用来设置网页的主体,所有在页面中能看到的内容都应该编写到body标签中。用法: body标签作为html的子标签使用。<br/> 13、<h1>~<h6><br/> 作用:h1<sub>h6都是网页中的标题标签,用来表示网页中的一个标题,不同的是,从h1</sub>h6重要性越来越低。标题标签相当于正文的标题,通常认为重要性仅次于页面的title。一般标题标签我们只会使用到h3,h3以后的标题标签对于搜索引擎就没有什么意义了。一个页面中只会使用一个h1标签。<p>作用:</p><p>标签表示网页中的一个段落。一般浏览器会在段落的前和后各加上一个换行,也就是段落会在页面中自成一行。<br/>作用:<br/>标签表示一个换行标签,使用br标签可以使br标签后的内容另起一行。<br/> 14、<hr/><br/> 作用:<hr/>标签是水平线标签,使用hr标签可以在页面中打印一条水平线,水平线可以将页面分成上下两个部分。<img/>作用:< img />标签是图片标签,可以用来向页面中引入一张外部的图片。属性:src指向一个外部的图片的路径。<br/> alt图片的描述。<a>作用:<a>标签是超链接标签,通过a标签,可以快速跳转到其他页面。属性:href指向一个链接地址,target设置打开目标页面的位置,可选值:_blank新窗口、_self当前窗口。<br/> 15、实体<br/> 在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。比如<和>,我们不能直接在页面中使用<和>号,因为浏览器会将它解析为html标签。 为了可以使用这些预留字符,我们必须在html中使用字符实体。语法: &实体名;<br/> 16、CSS<br/> 层叠样式表 (Cascading Style Sheets),css可以用来为网页创建样式表,通过样式 表可以对网页进行装饰。所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。而css就可以分别为网页的各个层次设置样式。<br/> 17、基本语法<br/> CSS的样式表由一个一个的样式构成,一个样式又由选择器和声明块构成。语法:选择器 {样式名:样式值;样式名:样式值 ; } p {color:red ; font-size:12px;}。行内样式:可以直接将样式写到标签内部的style属性中,这种样式不用填写选择器,直接编写声明即可。</a></a></p><p></p> 这种方式编写简单,定位准确。但是由于直接将css代码写到了html标签的内部,导致结构与表现耦合,同时导致样式不能够复用,所以这种方式我们不使用。<br/> 18、内部样式表<br/> 可以直接将样式写到 ,这样使css独立于html代码,而且可以同时为多个元素设置样式,这是我们使用的比较多的一种方式。但是这种方式,样式只能在一个页面中使用,不能在多个页面中重复使用。外部样式表:可以将所有的样式保存到一个外部的css文件中,然后通过标签将样式表引入到文件中。<link rel=“stylesheet” type="text/css"href=“style.css”>。这种方式将样式表放入到了页面的外部,可以在多个页面中引入,同时浏览器加载文件时可以使用缓存,这是我们开发中使用的最多的方式。<br/> 19、选择器<br/> 选择器(selector),会告诉浏览器:网页上的哪些元素需要设置什么样的样式。 比如:p这个选择器就表示选择页面中的所有的p元素,在选择器之后所设置的样式会应用到所有的p元素上。元素选择器:元素选择器(标签选择器),可以根据标签的名字来从页面中选取指定的元素。语法:标签名 { } ,比如p则会选中页面中的所有p标签,h1会选中页面中的所有h1标签。类选择器,可以根据元素的class属性值选取元素。语法:.className { },比如.hello会选中页面所有class属性为,hello的元素。ID选择器:ID选择器,可以根据元素的id属性值选取元素。语法:#id { },比如#box会选中页面中id属性值为box的元素,和class属性不同,id属性是不能重复的.复合选择器:复合选择器,可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素。语法:选择器1选择器2{},例如div.box1会选中页面中具有box1这个class的div元素。群组选择器:群组选择器,可以同时使用多个选择器,多个选择器将被同时应用指定的样式。语法: 选择器1,选择器2,选择器3 { },比如p,.hello,#box会同时选中页面中p元素, class为hello的元素,id为box的元素。通用选择器:通用选择器,可以同时选中页面中的所有元素。语法:<em>{ }<br/> 20、HTML族谱<br/> 标签之间的关系:祖先元素:直接或间接包含后代元素的元素。后代元素:直接或间接被祖先元素包含的元素。父元素:直接包含子元素的元素。子元素:直接被父元素包含的元素。兄弟元素:拥有相同父元素的元素。后代选择器:后代选择器可以根据标签的关系,为处在元素内部的代元素设置样式。语法:祖先元素 后代元素 后代元素 { },比如p strong 会选中页面中所有的p元素内strong元素。<br/> 20、伪类和伪元素<br/> 有时候,你需要选择本身没有标签,但是,仍然易于识别的网页部位,比如段落首行,或鼠标滑过的连接。CSS为他们提供一些选,择器:伪类和伪元素。其他 :获取焦点:focus,指定元素前 :before,指定元素后:after,选中的元素:::selection给段落定义样式,首字母:first-letter,首行:first-line。属性选择器<br/> 属性选择器可以挑选带有特殊属性的标签。语法:[属性名],[属性名=“属性值”]<br/> [属性名~=“属性值”] ,[属性名|=“属性值”] ,[属性名^=“属性值”] ,[属性名$=“属性值”] ,[属性名</em>=“属性值”]。 </h6></h1>

21、子元素选择器
子元素选择器可以给另一个元素的子元素,设置样式。语法:父元素 > 子元素{},比如body > h1将选择body子标签中的所有h1标签。其他子元素选择器 :first-child,选择第一个子标签 :last-child,选择最后一个子标签:nth-child,选择指定位置的子元素 :first-of-type ,:last-of-type ,:nth-of-type,选择指定类型的子元素。兄弟选择器:除了根据祖先父子关系,还可以根据兄弟关系查找元素。
语法:查找后边一个兄弟元素:兄弟元素 + 兄弟元素{} ,查找后边所有的兄弟元素,兄弟元素 ~ 兄弟元素{}。
22、否定伪类
否定伪类可以帮助我们选择不是其他东西的某件东西。语法: :not(选择器){},比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。继承:就像父亲的财产会遗传给儿子一样,在CSS中祖先元素的样式同样也会被子元素继承。
继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上。比如为父元素设置了字体颜色,子元素也会应用上相同的颜色。当然并不是所有的样式都会被继承。
23、选择器的权重
在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。比如:body h1,h1,上边的两个选择器都会选择h1元素,如果两个选择器设置的样式不一致那还好不会产生冲突,但是如果两个选择器设置的是同一个样式, 这样h1到底要应用那个样式呢?CSS中会默认使用权重较大的样式,权重又是如何计算的呢?权重的计算:不同的选择器有不同的权重值:内联样式:权重是 1000, id选择器:权重是 100,类、属性、伪类选择器:权重是 10,元素选择器:权重是 1,通配符:权重是 0 ,计算权重需要将一个样式的全部选择器相加,比如上边的body,h1的权重是20,h1的权重是10,所以第一个选择器设置的样式会优先显示。
24、
em标签用于表示一段内容中的着重点。strong标签用于表示一个内容的重要性。这两个标签可以单独使用,也可以一起使用。

警告:任何情况下不要接近僵尸。 他们只是 看起来 很友好,实际上他们是为了吃你的胳膊!

通常em显示为斜体,而strong显示为粗体。
25、
i标签会使文字变成斜体。b标签会使文字变成粗体。 这两个标签和em和strong类似,但是这两个标签没有语义。所以根据html5标准,当我们只想设置文本 特殊显示,而不需要强调内容时就可以使用i和b标签。
26、
small标签表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。浏览器在显示small标签时会显示一个比父元素小的字号。

©2016 尚硅谷. 保留所有权利.

使用cite标签可以指明对某内容的引用或参考。例如,戏剧、文章或图书的标题,歌曲、电影、照片或雕塑的名称等。

《七龙珠》讲的是召唤神龙的故事。

27、


blockquote和q表示标记引用的文本。blockquote用于长引用,q用于短引用。在两个标签中还可以使用cite属性来表示引用的地址。孟子曾经说过:

天将降大任于是人也…

他说的真对啊!

孔子曾经说过:学而时习之不亦说乎

sup和sub用于定义上标和下标。标主要用于表示类似于103中的3。下标则用于表示类似余H2O中的2。
28、

ins表示插入的内容,显示时通常会加上下划线。del表示删除的内容,显示时通常会加上删除线。

如果你的内容包含代码示例或文件名,就可以使用code元素。pre元素表示的是预格式化文本,可以使用pre包住code来表示一段代码。

function fun(){
alert("hello");
}

29、有序列表
使用ol和li来创建一个有序列表。无序列表:使用ul和li来创建一个无序列表。定义列表:使用dl、dd、dt来创建一个定义列表。
30、单位
Px:如果我们将一个图片放大的话,我们会发现一个图片是有一个一个的小色块构成的,这一个小色块就是一个像素,也就是1px,对于不同的显示器来说一个像素的大小是不同的。百分比:也可以使用一个百分数来表示一个大小,百分比是相对于父元素来说的,如果父元素使用的大小是16px,则100%就是16px,200%就是32px。Em:em和百分比类似,也是相对于父元素说的,1em就相当于100%,2em相当于200%,1.5em相当于150%。
31、颜色
在CSS中可以直接使用颜色的关键字来代表一种颜色。17中颜色aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。还有147种svg颜色,这里就不一一列举了,但是明显即使这些颜色变成double,也不足以描绘我们世界中所有的颜色。十六进制颜色:用的最多的颜色是十六进制符号。一个颜色值, 比如:#6600FF实际上包含了三组十六进制的数字。上边的例子中66代表红色的浓度,00代表绿色的浓度,FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的。如果每一组数中的两个数字都相同,就可以把十六进制的数字缩短为只有3个字符,如将#6600FF缩短为#60F。
32、RGB值
也可以使用计算机中常用的RGB值来表示颜色。可以使用0255的数值,也可以使用0%100%的百分比数。RGB(100%,0%,0%),RGB(0,255,0),第一个数表示红色的浓度,第二个数表示绿色浓度,第三个数表示蓝色的浓度。RGBA:RGBA表示一个颜色和RGB类似,只不过比RGB多了一个A(alpha)来表示透明度,透明度需要一个0-1的值。0表示完全透明,1表示完全不透明,RGBA(255,100,5,0.5)

33、字体(一)
通过font-family可以指定标签中文字使用的字体。例如:p{font-family:Arial}上边这行代码指定了p标签中使用名为arial作为字体一般来说只有用户计算机中安装了我们指定的字体时,它才会显示,否则这行代码是没有意义的。字体(二) :通过font-family可以同时指定多个字体。例如:p{font-family:Arial , Helvetica , sans-serif},如上我实际上指定了三种字体,那么到底使用的是哪个呢?浏览器会优先使用第一个,如果没有找到则使用第二个,以此类推。这里面sans-serif并不是指的具体某一个字体。而是一类字体。
34、字体分类
serif(衬线字体),sans-serif(非衬线字体),monospace (等宽字体),cursive (草书字体),fantasy (虚幻字体),以上这些分类都是一些大的分类,并没有涉及具体的类型,如果将字体指定为这些格式,浏览器会自己选择指定类型的字体。斜体和粗:font-style用来指定文本的斜体。指定斜体:font-style:italic,指定非斜体:font-style:normal,font-weight用来指定文本的粗体。指定粗体:font-weight:bold。指定非粗体:font-weight:normal。小型大写字母:font-variant属性可以将字母类型设置为小型大写。在该样式中,字母看起来像是稍微缩小了尺寸的大写字母。font-variant:small-caps
35、字体属性的简写
font可以一次性同时设置多个字体的样式。语法:font:加粗 斜体小型大写大小/行高字体。这里前边几个加粗、斜体和小型大写的顺序无所谓,也可以不写,但是大小和字体必须写且必须写到后两个。行间距line-height用于设置行高,行高越大则行间距越大。行间距 = line-height – font-size。大写化:text-transform样式用于将元素中的字母全都变成大小。大写:text-transform:uppercase,小写:text-tansform:lowercase,首字母大写:text-transform:capitalize,正常:text-transform:none
36、文本的修饰
text-decoration属性,用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。可选值:underline,overline,line-through,none。字母间距和单词间距,letter-spacing用来设置字符之间的间距。word-spacing用来设置单词之间的间距。这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离,而负数代表减少距离。对齐文本:text-align用于设置文本的对齐方式。可选值:left:左对齐,right:右对齐,justify:两边对齐,center:居中对齐。首行缩进:text-indent用来设置首行缩进。该样式需要指定一个长度,并且只对第一行生效。
37、盒子
CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里。为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。一个盒子我们会分成几个部分:内容区(content),内边距(padding),边框(border),外边距(margin)。内容区:内容区指的是盒子中放置内容的区域,也就是元素中的文本内容,子元素都是存在于内容区中的。如果没有为元素设置内边距和边框,则内容区大小默认和盒子大小是一致的。通过width和height两个属性可以设置内容区的大小。width和height属性只适用于块元素。内边距
顾名思义,内边距指的就是元素内容区与边框以内的空间。 默认情况下width和height不包含padding的大小。使用padding属性来设置元素的内边距。例如:
padding:10px 20px 30px 40px,这样会设置元素的上、右、下、左四个方向的内边距。内边距:padding:10px 20px 30px; 分别指定上、左右、下四个方向的内边距
padding:10px 20px;分别指定上下、左右四个方向的内边距,padding:10px;同时指定上左右下四个方向的内边距,同时在css中还提供了padding-top、padding-right、paddingright、padding-bottom分别用来指定四个方向的内边距。边框:可以在元素周围创建边框,边框是元素可见框的最外部。可以使用border属性来设置盒子的边框:border:1px red solid;上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。和padding一样,默认width和height并包括边框的宽度。
38、边框的样式
边框可以设置多种样式:none(没有边框),dotted(点线), dashed(虚线)solid(实线),double(双线),groove(槽线),ridge(脊线),inset(凹边)outset(凸边)。外边距:外边距是元素边框与周围元素相距的空间。使用margin属性可以设置外边距。用法和padding类似,同样也提供了四个方向的
margin-top/right/bottom/left。当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,所以这行代码margin:0 auto可以使元素居中。
39、display
我们不能为行内元素设置width、height、margin-top和margin-bottom。我们可以通过修改display来修改元素的性质。可选值:block:设置元素为块元素inline:设置元素为行内元素inline-block:设置元素为行内块元素none:隐藏元素(元素将在页面中完全消失)。
40、visibility
visibility属性主要用于元素是否可见。和display不同,使用visibility隐藏一个元素,隐藏后其在文档中所占的位置会依然保持,不会被其他元素覆盖。可选值: visible:可见的,hidden:隐藏的。Overflow:当相关标签里面的内容超出了样式的宽度和高度是,就会发生一些奇怪的事情,浏览器会让内容溢出盒子。可以通过overflow来控制内容溢出的情况。可选值:visible:默认值,scroll:添加滚动条,auto:根据需要添加滚动条,hidden:隐藏超出盒子的内容
41、overflow
当相关标签里面的内容超出了样式的宽度和高度是,就会发生一些奇怪的事情,浏览器会让内容溢出盒子。可以通过overflow来控制内容溢出的情况。可选值:visible:默认值,scroll:添加滚动条,auto:根据需要添加滚动条,hidden:隐藏超出盒子的内容
42、浮动
所谓浮动指的是使元素脱离原来的文本流,在父元素中浮动起来。浮动使用float属性。可选值:none:不浮动,left:向左浮动right:向右浮动.块级元素和行内元素都可以浮动,当一个行内元素浮动以后将会自动变为一个块级元素。当一个块级元素浮动以后,宽度会默认被内容撑开,所以当漂浮一个块级元素时我们都会为其指定一个宽度。当一个元素浮动以后,其下方的元素会上移。元素中的内容将会围绕在元素的周围。浮动会使元素完全脱离文本流,也就是不再在文档中在占用位置。元素设置浮动以后,会一直向上漂浮直到遇到父元素的边界或者其他 浮动元素。元素浮动以后即完全脱离文档流,这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。浮动元素默认会变为块元素,即使设置display:inline以后其依然是个块元素。
43、清除浮动
clear属性可以用于清除元素周围的浮动对元素的影响。也就是元素不会因为上方出现了浮动元素而改变位置。可选值:left:忽略左侧浮动,right:忽略右侧浮动,both:忽略全部浮动,none:不忽略浮动,默认值。
44、定位
position属性可以控制Web浏览器如何以及在何处显示特定的元素。可以使用position属性把一个元素放置到网页中的任何位置。可选值:static,relative ,absolute,fixed。相对定位:每个元素在页面的文档流中都有一个自然位置。相
对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。当将position属性设置为relative时,则开启了元素的相对定位。当开启了相对定位以后,可以使用top、right、bottom、left四个属性对元素进行定位。相对定位的特点:如果不设置元素的偏移量,元素位置不会发生改变。相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。相对定位不会改变元素原来的特性。相对定位会使元素的层级提升,使元素可以覆盖文本流中的元素。绝对定位:绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。
当将position属性设置为absolute时,则开启了元素的绝对定位。当开启了绝对定位以后,可以使用top、right、bottom、left四个属性对元素进行定位。绝对定位的特点:绝对定位会使元素完全脱离文本流。绝对定位的块元素的宽度会被其内容撑开。绝对定位会使行内元素变成块元素。一般使用绝对定位时会同时为其父元素指定一个相对定位,以确保元素可以相对于父元素进行定位。
45、固定定位
固定定位的元素会被锁定在屏幕的某个位置上,当访问者滚动网页时,固定元素会在屏幕上保持不动。当将position属性设置为fixed时,则开启了元素的固定定位。当开启了固定定位以后,可以使用top、right、bottom、left四个属性对元素进行定位。固定定位的其他特性和绝对定位类似。z-index当元素开启定位以后就可以设置z-index这个属性。这个属性可以提升定位元素所在的层级。z-index可以指定一个整数作为参数,值越大元素显示的优先级越高,也就是z-index,值较大的元素会显示在网页的最上层。
46、background-color
background-color属性用来为元素设置背景颜色。需要指定一个颜色值,当指定了一个颜色以后,整个元素的可见区域都会使用这个颜色作为背景色。如果不设置背景颜色,元素默认背景颜色为透明,实际上会显示父元素的背景颜色。
47、background-image
background-image可以为元素指定背景图片。和background-color类似,这不过这里使用的是一个图片作为背景。需要一个url地址作为参数,url地址需要指向一个外部图片的路径。例如:background-image: url(1.jpg)
48、background-repeat
background-repeat用于控制背景图片的重复方式。如果只设置背景图片默认背景图片将会使用平铺的方式,可以通过该属性进行修改。可选值:repeat:默认值,图片左右上下平铺,no-repeat:只显示图片一次,不会平铺,repeat-x:沿x轴水平平铺一张图片,repeat-y:沿y轴水平平铺一张图片
49、background-position
background-position用来精确控制背景图片在元素中的位置。可以通过三种方式来确定图片在水平方向和垂直方向的起点。关键字:top right bottom left center百分比,数值。background-attachment :background-attachment用来设置背景图片是否随页面滚动。可选值:scroll:随页面滚动fixed:不随页面滚动
50、表格
在Web的历史中,HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据,后来表格变成了一个极受欢迎的布局工具。但是有了CSS以后,CSS在布局网页方面实际上会更出色,所以现在我们使用表格的作用只有一个,就是用来表示格式化的数据。HTML中的表格可以很复杂,但是通常情况下我们不需要创建过于复杂的表格。
51、table、tr、th、td
使用table标签创建一个表格。tr表示表格中的一行。tr中可以编写一个或多个th或td。th表示表头。td表示表格中的一个单元格。caption、thead、tbody、tfoot:caption表示表格的标题。thead表示表格的头部。tbody表示表格的主体。tfoot表示表格的底部。合并单元格:合并单元格指将两个或两个以上的单元格合并为一个单元格。合并单元格可以通过在th或td中设置属性来完成。横向合并:colspan,纵向合并:rowspan
52、表格的样式
之前学习的很多属性都可以用来设置表格的样式,比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的距离。text-align:设置文本的水平对齐。vertical-align:设置文本的垂直对齐。可选值:top、baseline、middle、bottom,border-spacing:边框间距,border-collapse:合并边框,collapse:合并边框,separate:不合并边框。
53、表单
现实生活中的表单是用来提交信息的,比如:办理银行卡填写的申请表、找工作填写的简历、入学时填写的个人信息表。这些都是表单的一种网页中的表单是用来向服务器提交信息的,我们最常用到的表单就是baidu的搜索框在搜索框填入关键字后,点击搜索按钮,关键字会提交到baidu的服务器,服务器根据用户输入的关键字进行检索,返回相应信息。表单可以将用户填写的信息提交的服务器。
54、表单属性
input是我们使用的最多的表单项,它可以根据不同的type属性呈现不同的状态。type属性可选值:text:文本框password:密码框,submit:提交按钮,radio:单选按钮,checkbox:多选框,reset :重置按钮。select、option:select用于创建一个下拉列表。option表示下拉列表中的列表项。optgroup用于为列表项分组。Textarea:textarea用来创建一个文本域,实际效果和文本框类似,只是可以输入多行数据。可用属性:cols:文本域的列数,rows:文本域的行数。fieldset、legend、label:fieldset用来为表单项进行分组。legend用于指定每组的名字。label标签用来为表单项定义描述文字。

学习HTML+CSS知识点相关推荐

  1. css就近原则_细品100道CSS知识点(上)「干货满满」

    作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录 细品100道CSS知识点(上)[干货满满]本篇 细品100道C ...

  2. 保姆级教程 CSS 知识点梳理大全,超详细!!!

    保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...

  3. 信息安全学习----渗透测试知识点

    信息安全学习----渗透测试知识点 信息收集 服务器的相关信息(真实ip,系统类型,版本,开放端口,WAF等) 网站指纹识别(包括,cms,cdn,证书等),dns记录 whois信息,姓名,备案,邮 ...

  4. html+css知识点全面总结(三)

    前期文章: html+css知识点总结回顾(一) html+css知识点总结回顾(二) html+css知识点总结回顾(三) 文章目录 html+css知识点总结回顾(三) 1.标签的嵌套(拓展) 2 ...

  5. Java学习-14 CSS与CSS3美化页面及网页布局

    Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...

  6. 【CSS 知识总结】目录 - CSS 知识点梳理

    theme: fancy 「这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战」. 一,前言 伴随着整个11月份的忙碌,终于,还是匆匆地完结了 Promise 源码部分 (备注 ...

  7. css为什么要用浮动_细品100道CSS知识点(上)「干货满满」

    作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录 细品100道CSS知识点(上)[干货满满]本篇 细品100道C ...

  8. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  9. amazeui学习笔记--css(常用组件4)--关闭按钮Close

    amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...

最新文章

  1. webpack入门之简单例子跑起来
  2. 针对maven install 报错:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1 解决方案...
  3. 给线程变量pthread_t *thread动态分配空间
  4. eclipse工作空间在哪里配置?
  5. 系统架构设计师视频教程免费下载
  6. 服务器无显示器,服务器无显示器 远程桌面
  7. 怎样才算得上合格的程序员
  8. 自学前端,一天学4个小时左右,能到什么水平?
  9. 128 数据库基本操作
  10. 学习记录:由技术而产品,由产品而商务
  11. UWB定位系统在冬奥会上满足哪些需求
  12. 微信小程序怎么登录?如何正确登录微信小程序后台?
  13. Qwerty Learner:为键盘工作者设计的单词记忆与英语肌肉记忆锻炼网页
  14. 筑基九层 —— 指针详解
  15. 协同过滤入门介绍(转)
  16. 2019年十大网络流行语,你了解几个?
  17. python是一种跨平台、开源、免费的高级动态编程语言吗_智慧职教: §Python是一门跨平台、开源、免费的解释型高级动态编程语言。...
  18. JavaScript学习笔记(九)(验证框架,layer弹出层)
  19. docker--compose
  20. 路面附着系数估计_无迹 扩展卡尔曼滤波(UKF/EKF) 采用无迹/扩展卡尔曼滤波UKF进行路面附着系数估计,可实现“不变路面,对接路面和对开路面”等工况的路面附着系数估计

热门文章

  1. 高德地图 AMap.Driving
  2. 【MES】工业4.0之MES系统方案
  3. MySQL高可用之主备同步:电脑安装java步骤
  4. 计算机在智能建筑中的应用,【计算机技术在建筑智能化中的应用研究原稿_0材料】...
  5. PUN2多人联网之房间选择、创建房间
  6. 计算机程序前端和后端指什么,什么是前端和后端
  7. Java学习之【Object】
  8. C语言基础和语法知识
  9. python目前的最新版本是_最新版Python 3.8.6 版本发布
  10. Windows安装最新版Pygame