2023年HTML初级知识点总结最详细的总结.docx
HTML。超文本标记语言，一种规范。预定义，已经定义好的各种标记，只需要我们把相应的标记放到合适的位置一.HTML基本语法与基本结构（重点）。标记的使用。001.标记一般成对出现，包含开始标记和结束标记。2、标记可以嵌套使用，但是不能交叉使用。3、标记不区分大小写。属性的使用（属性控制内容的格式,额外的格式）01、书写位置在开始标记中2、格式：属性名="属性值”，多个属性之间使用空格分割。3、不同的标记属性也许相同也也许不同。4、属性使用的标记中，只能对本标中的内容记产生影响。5、属性不冲突时，效果叠加，属性冲突时，就近原则。 h t ml的基本结构<html>声明网页取值:。void默认值，不显示边框£>»«> ° a b ove仅显示上边框b e low仅显示下边框moh sides显示上下边框mmvsides显示左右边框。« 1 h s仅显示左边框rhs仅显示右边框b o x > border显示四个边框mrules控制表格内部分割线m 取值：。none 默认值，不显示。r ow s 显示行分割线2co Is显示列分割线。a II显示所有分割线。 bo r derco 1 o r控制边框的颜色，b o rder控制表格的所有边框，取值为像素，c ells p acing控制单元格与单元格之间的空白，取值为像素cellp a dd i n g控制单元格内容和单元格边框之间的空白，取值为像，width设立单元格的宽度，取值为像素或者百分数h eight设立单元格的高度，取值为像素或者百分数al i gn控制表格的对齐方式，取值left （默认值）|ce n t er|ri g h t。 b gcol o r设立表格的背景色backg r ound设立表格的背景图。当背景色和背景图同时设定期，优先使用背景图 c aption表格的标题，必须书写在table之间0。属性:a 1 ig n 控制表格标题的位置.，取值top （标题在表格的顶部）I b o ttom（标题在 表格的底部）3。V t r定义表格的行。属性：align控制整行单元格内容的水平对齐方式，取值Ie ft （默认值， 缺省值）1 c enter|rightv a lign控制整行单元格内容的垂直对齐方式，取值top Imiddle （默认 值）| bo ttomooohe i ght设立行的高度，取值为像素3bge olor设立行的背景色bac k groun d设立行的背景图oo.borderco 1 o r设立行的边框颜色。<td> 列标记。<t h >列标题标记。都可以作为列使用，<th>列标题标记,内容有加粗显示的效果，并且带有自动居中。属性：align控制单元格内容的水平方向对齐方式，取值1 eft|center|righ t。 a lign控制单元格内容的垂直方向对齐方式，取值top|mid d I e （默认值）I bo t tom，he i ght设立单元格的高度，取值以像素为单位，当同一行中不同的单元 格设立的高度也不相同时，整行的高度取值按最大值来。o width设立单元格的宽度，取值以像素为单位，当同一列中不同行的单元格设立的宽度不相同也整列的宽度取值按最大值来-bgcolo r设立单元格的背景色。 bak g r ound设立单元格的背景图-row s pan 合并行col s p an合并列。合并行和合并列的取值都是整数，合并几个单元格取值就是几六.框架的应用1、框架。框架集标记f r ames e t,在原有的h t ml结构基础上，f r ames e t替换了 Vb o dy的位置，换句话说e se t 和Vbo d y不能共存，只能 出现一个。属性:row s 设立横向框架的数量和高度，框架的数量取决于rows属性的 取值个数，每个框架的高度取决于值的大小。cols设立纵向框架的数最和宽度，框架的数量取决于c ols属性的取值个数，每个框架的宽度取决于值的大小。r ow s和c ols的取值方式。1、像素值。 。2、百分数3、比例取值rows和c ol s取值，可以有多个值，值与值之间使用逗号分割，并且不能 有空格格，cols和r o w s属性一般不同时设定，要想实现页面的纵向和横向分割，可以 使用框架的嵌套来实现-f rame b or d er使用在frames e t中,可以控制框架集下的所有框架边框是否显 示。 框架标记<f rame />,单标记。属性:src引入目的资源的途径ooname给框架起名字，需要配合超链接的t a rg e t属性来使用，达成链接目 的框架的目的。f rameb o rder控制框架的边框是否显示，0表达不显示，1显示 默认的3D边框。s c ro 1 I i ng 控制框架是否加入滚动条，取值yes （加入滚动条，需要时加入）I no（不加入滚动条）I a u to（需要时加入滚动条，默认值）。 o nor e s iz e固定框架的边框，该属性不需要取值marginh e igh t在框架中显示内容时，控制内容和框架上下边框之间的空白,取值以像素为单位，以上边框为准，mar g i nw i d t h在框架中显示内容时，控制内容和框架左右边框之间的空白，取值以像素为单位，以左边框为准o®<no f r ames>当浏览器不支持框架时，显示的替换内容，必须包含一对<body>标 记使用七、表单的应用表单1 .表单标记< f o rm>,表单不能嵌套使用，所有表单的内容必须书写在表单的开始标记和结束标记之间表单结构：<form>< i nputty p e=wtext”> 单行文本格式<input t yp e -n p a sswor d "x 密码输入框<inpu t ty pe=" c h e ckbox"> 复选框格式<input t y pe=nrad i o" nam e ="s e x”>单选框格式<in p ut type="s u提交的格式< i n p ut typ e ="re s et">重置格式<input type=,/ b u 自定义格式<select><select>下拉菜单格式<opti o n>汉族< / option>， <o p t i on>满族< / op t ion><o p ti o n>壮族</o p t i on><opt i on>土家族</o p ti o n></s e lect><tex t a r ea >co 1 s=" 5 0" row s ="4”>请多多指教多行文本</textarea></fo r m>表单域< i npu t >。不同功能的表单域type属性的取值不同。属性：type 控制表单域的功能。取值 tex t单行文本。o password密码输入框o checkbox复选框rad i o单选按钮要实现单选，还要在后面加上同样的名字，例：in p ut type="radiow name=.osu b mit 提交o o o r e set 重置-button自定义按钮value属性使用在提交、重置.、自定定义按钮中，可以改变按钮的默认值。ovalue属性使用在单行文本和密码框中，添加默认值o max length属性使用在单行文本和密码框中，限制输入的最大字符数，取值为整 数， ch e cked= "checked”使用在复选框和单选框中，表达该选项默认被选中<sel e ct>.</s e I e ct>,菜单里有多个选项，一般用于选择年. 月.日属性 1： <o p tion>.</o p t i on>，一对o p t i o n代表一个下拉 选项属性 2 ： <sel e c t>. .</ s e lec t >，一对 s e 1 ect 代表一个下拉菜 单多行文本：<te x ta r ea > </t e x tarea >成对出现属性:c o ls=col s取值为整数,限制每行的最多内容ROWS=. rows取值为整数,限制多行文本的行数<hea d网页的头部信息。 o<t i tl e >标题< / t i tle>网页的标题。< / h e a d>。<body>-网页的主体，网页内容重要展示的部分。网页的重要内容。</bo d y>。</ h tml>。二.文本格式的应用。1、标题标记<hn>, n的取值1-6,1级标题最大效果：加粗显示，带有自动换行。 属性：align控制标题的对齐方式，取值left（左对齐，默认值）| center （居中）|ri g ht（右对齐）2、段落标记Vp>。效果：把内容分段展示，自动换行。属性:align,控制段落内容的对齐方式，取值left （左对齐，默认值）I c e n t er （居中）1 right （右对齐）。3、换行符<b r />,单标记，不需要结束标记,换行但不分段。空格符号:& n bsp;表达一个空格。强制换行符：Vbr />。4、水平线标记单标记。效果:水平线，默认是一个粗细为2Px（像素）的线条。属性:size控制水平线的粗细，取值为整数，单位为像素（px）-width控制水平线的长度,取值可以是像素单位，也可以是百分数（相对于浏览器窗LI比例）-no s hade设立水平线不带有阴影，该属性不需要取值。 c olo r设立水平线的颜色，取值可以是英文的颜色值，也可以是十六进制 的颜色代码。align控制水平线的对齐方式，取值left（左对齐）|cen ter （居中，默认值）I right（右对齐）。5、分节标记<d i v>效果:把内容设立为一节，前后带有自动换行。属性：align 控制d i v中内容的对齐方式，取值left（左对齐，默认值）|cen t er （居 中）I ri g ht （右对齐）。6、居中标记符<ce nt e r >效果:把cent e r标记中的内容居中显示7文本控制标记<fo nt>。 效果：控制字体的各种显示样式，。属性：s i ze控制字体的大小，取值为绝对值时，1-7,数字越大字体越大,取相对值时，参考的是默认字体（3号），取值在-2-+4之间。c o 1 or控制字体的颜色oooface控制字体的字体,取值可以是多个值，多个值之间使用逗号分割，取值时从左往右依 次取值，找到合适的值为止,假如都不支持，使用默认格式显示。8、字体的物理样式。加粗：<b>斜体:< i >0下划线：Vu>。删除线：<s>°上标:<SUp>3 下标：<sub>。:1、常用逻辑字符。<ADDR E SS> 网页设计者或维护者的信息，通常显示为斜体，<CIT E >。表达文本属于引用，通常显示为斜体，<CODE>即表达程序代码，通常显示为固定宽度字体®<DFN>®<DFN>团表达定义了的术语，通常显示为黑体或斜体<em><em>，强调某些字词，通常显示为斜体o kbd。表用户的键盘输入，通常显示为固定宽度字体2SAMP 。表达文本样本，通常显示为固定宽度字体，STR 0 NG，特别强调某些字词，通常显示为粗体，VVAR。表达变量，通常显示为斜体2、列表标记。1、有序列表，ol,需要配合 1 i标记使用。一个1 i 标记相应一个选项。1的属性：type 控制列表的符号样式，取值默认是1sta rt控制列表的起始值，取值为任意的整数li的属性：type控制选项自身的符号样式，取值l|A|a|i|lvalue控制选项自身的起始值，取值为任意整数,但是修改自身 起始值之后，会对同一个列表中本选项之后的同级li标记产生影响2、无序列表，Vu 1 ,配合1 i 标记使用。一个li标记相应一个选项。111的属性:type控制所有选项的符号样式,取值disc （实心圆,默认值）|circ 1 e （空 心圆）| s quare （方块）li的属性：type控制选项自身的符号样式。口标记用在o I中，typ e属性的取值跟ol的type属性取值走，用在Ul中,跟着u 1的type属性取值走。3、定义列表，Vdl,完毕对定义列表的声明<dt>,术语标记，可以理解为类似于列表选项的标题使用<d d >，描述标记，可以理解为类似于列表的选项使用。三.在网页中使用图片标记:<img>,单标记，不需要结束标记属性：。src引入图片资源的途径。绝对途径:资源在服务器上的位置，该位置是从盘符出发。相对途径:资源在服务器上的相对位置,从网页自身出发。、返I可上一层文献夹width控制显示图片的宽度，取值为像素或者百分数heig ht控制显示图片的高度，取值为像素或者是百分数0。只设立宽度或高度时，图片保持等比缩放,同时设立时，同时生效s bo rder控制显示图片的边框，取值为像素，默认不显示边框oohspace控制显示图片水平方向上的空白，取值为像素，s vspace控制显示图片垂直方向上的空白，取值为像素al i gn 控制图片和周边文本的对齐方式。垂直方向上:t o p文本和图片顶部对齐。b ottom文本底部和图片底部对齐。middle文本的底部和图片的中部对齐。, absmiddle绝对中间对齐，文本的中部和图片的中部对齐。水平方向上：left 图片在左，文本在右。right文本在左，图片在右。图片的对齐方式：。借助<div>或者vp>0。四.在网页中使用超链接4、超链接°标记：<a>V/a >,通过链接跳转到新的资源属性:h re f 链接的目的资源的途径。链接外部资源时，一定是绝对途径，并且需要在途径前加上【http：/ / 这个网络通信协议。 targ e t 指定超链接的打开方式，_s e If在自身的页面打开超链接（默认 的打开方式），_blank重新打开一个新的浏览器窗口建立锚点（书签）。 内部书签s 1、设立锚点的名称 例如:<a n a me二“锚点名”。2、使用超链接完毕跳转例如：<a h ref="#锚点名”V / a>外部书签1、设立锚点的名称例如:<a name= "锚点名" >.</a>。2、使用超链接完毕跳转例如：<a hr e f= "锚点所在页面的途径#锚 点名”> .V/a>超链接。发送电子邮件，格式V a h r ef="ma i I t。:邮箱地址”发送邮件 < / a >。2、链接多媒体。五.表格的应用表格的结构table >一声明表格3<c a pti o n>.</ c aption>表格的标题< t r >-表格的行Q 。<td>. .</td>表格的列。3.。 V / t r>3 6<tr>一一表格的行< t d>.V/td>一表格的列° 。，</tr></table>®V t able>标记，定义表格，所有表格的内容书写在<ta bie>开始和</tabl e >结束标记之间属性：f r ame控制表格最外层的四个边框
