2022年HTML基础知识点总结.docx
HTML 学问点总结第一章 ：学问总结1.<b>HTML文档结构 </b> （括号里面的是注释 ）<.DOCTYPE html ><.DOCTYPE>标签没有终止标签！* 注：<html ><head>（头部部分）<metahttp- equiv= “Content - Type”content= “text/html”; charset=gb2312 > 可写可不写 <title>显示在浏览器标题栏中的标题 </title></head><body>（主体部分）（页面内容）</body></html>标签<body>中的属性有：bgcolor= 颜色 （背景颜色） background= 图片的肯定路径或相对路径 （背景图片）2.标题标签 <Hn></Hn>n取 16（设置文字标题） ：1<H1>一级标题 </H1>2<H2>二级标题 </H2>3<H3>三级标题 </H3>4<H4>四级标题 </H4>5<H5>五级标题 </H5>6<H6>六级标题 </H6>3. <font></font>标签（设置文字属性）<fontsize =" 字体大小 "color =" 字体颜色 "face =" 字体类型 ">要设置的文字 </font>特别符号代码空格 大于号 >>小于号（ <）<引号"版权号（ . ）©4. 特别符号5. 行的掌握相关标签段落标签 <p></p><p align="left" 左对齐 / "right" 右对齐 / "center" 居中> 段落的对其方式 换行标签 <br />6. 图片标签 <img><img src="图片地址 " width="图片宽度 " height="图片高度 " alt="图片的提示文字 "align="top/bottom/middle/left/right" border="图片的边框宽度">align是用于调整图片相对于四周文本的对其方式7. 文字布局1) 水平线 <hr size="厚度" width="宽度" color="颜色">2) 有序列表的语法<oltype=序号类型 >（序号类型有：1、a、A、 I ）<li>填写信息 </li>（必需用 <li></li>将内容包括起来）<li>填写信息 </li><li> 填写信息 </li></ol>3) 无序列表语法<ul type="序号类型 ">（序号类型有： disc 默认值 , 实心圆点 、circle空心圆环 、square 空心正方形 ）<li> 所写内容 <li> （必需用 <li></li>将内容包括起来）</ul>4) 预格式文本语法<pre> 详细的文本格式,这个格式在时是不转变的哦！</pre>8. 页面链接语法1) 链接到其他页面<a href=“链接地址” >连接标志 </a>2) 链接到本页面第一创建一个锚链接的锚记点：<a href=“#锚记点名称” >主题名称</a>然后在详细要链接到的地方设置name:<a name=“锚记点名称” ></a>（锚记点前面要加上 #号）3) 电子邮件链接<ahref= “mailto： 邮件地址”>站 长邮箱 </a> 留意不能忘了mailto9. 滚动标签的语法<marqueescrolldelay=滚 动 延 迟 时 间direction=up/down/left/right 滚动方向 onmouseover=“ ” 当鼠标指在上面时停止滚动 onm ouseout= “ ” 当鼠标离开时连续滚动 >滚动的文字和图像</marquee>其次章学问点总结1. 表格的基本框架语法<table border= 表格的边框的宽度 一般不超过 5 width= 表格的宽度height= 表格的高度 bordercolor= 表格边框线的颜色 bgcolor= 整个表格的背景颜色 background= 表格的背景图片地址 背景图片 align= 表格对齐方式><tr bgcolor= 行的背景颜色 > 行<td colspan= 跨的列数 rowspan= 跨的行数 bgcolor= 本单元格的背景颜色 background= 本单元格的背景图片地址 背景图片 align= 单元格中的内容对齐方式 right/left/center/></td> 单元格</tr></table>2. 填充、间距属性cellpadding: 内容与单元格内边框线的距离 （内填充） cellspacing ： 单元格之间的距离（外间距）第三章学问点总结1. 表单的基本结构<formaction="URL"name=表 单名 字method=提 交 数据 的方式（ post /get ）>详细的内容</form>2. 表单中的元素1). <input>元素<input name= “” type= textsize=文本框的大小 maxlenght=限制输入的最大字符 > 单行文本框 <inputname=“” type= passwordsize=文 本 框 的 大 小maxlenght= 限制输入的最大字符 > 单行文本框设置密码 <input name= “ name” type= radiovalue= “男” checked 默认选定 > 单项按钮男 设置单项按钮的时候名字肯定要一样 <inputname=“ name” type= radiovalue= “ 女”> 单项按 钮女<input name= “” type= submitvalue=提交> 按钮提交 <input name= “” type= resetvalue= 重置> 按钮重置 <inputname=“” type= checkboxvalue=play 必 须 有 checked>玩嬉戏 复选框2). <select></select>下拉列表元素语法： <select name= “”><optionvalue=“” 必需有 >内容</option><optionvalue=“” 必需有 >内容</option><optionvalue=“” 必需有 >内容</option><optionvalue=“” 必需有 >内容</option></select>3). <textarea></textarea>多行文本框元素语法： <textarea name=“” cols= “宽度” rows= “高度” 不要和合并单元格的 rowspan 和 colspan 相混淆 >详细的内容</textarea>3. 框架1). 框架的基本结构 留意：此时不能要 <body></body><framsetcols= “25%,* ”分隔成左右两部分 rows=“25%,* ”分隔成上下两部分 border=框架边框的大小 bordercolor=框架边框的颜色 ><frame name= “窗口的名字” src=“此窗口要显示的文件地址” scrolling=yes/no有无滚动条 noresize禁止转变框架窗口的大小 ></framset>2). 框架页面之间的链接第一步：在设计好的框架页面中给每个部分定义一个名字；Eg:<framename=”窗口的名字”src= “”>其次步：设置导航栏中的超链接的target目标窗口属性；Eg:<a href= “” target=“要显示的窗口的名字” >链接标志 </a>第四章学问点总结1. 样式类型,分为三种1）标签挑选器 语法：标签属性: 属性值;<style type=” text/css” > Pfont-size:20px;color:blue</style>不需要调用,直接创建标签就能使用2） class 挑选器语法：；类名 属性: 属性值;<style type=” text/css” >.myfont-size:20px;color:blue</style>调用：在需要使用的地方做为属性来调用（class= 类名）3） ID 挑选器语法：#名称属性: 属性值;<style type=” text/css” > #myfont-size:20px;color:blue</style>调用：在需要使用的地方做为属性来调用（ID=名称）2. 常用的样式属性1) 文本属性font-size:字体大小font-family:字体类型font-style:字体样式（斜体）color:字体颜色text-algin:文本的对齐方式（ left/right/center）2) 背景属性background-color:背景颜色background-image: url“图片地址” 背景图片background-repeat:（ repeat/no-repeat/repeat-x/repeat-y）背景图片如何被重复显示3) 方框属性(1) 边界属性margin-left:设置对象的左边距margin-right:设置对象的右边距margin-top:设置对象的上边距margin-bottom:设置对象的下边距(2) 填充属性padding-left:设置内容与左边框之间的距离padding-right:设置内容与右边框之间的距离padding-top:设置内容与上边框之间的距离padding-bottom:设置内容与下边框之间的距离(3) 边框属性border-style:soild细边框/dashed/ 虚边框 边框样式border-width:边框宽度border-color:边框颜色4) 超链接样式A:link未被拜访的链接样式A:visited被拜访过的链接样式A:hover鼠标悬浮在链接上时的样式A:active鼠标下在按下时链接文字的样式3. 样式表的 3 类应用方式1) 行内样式表 转变某一行文字的样式 语法： <P style= ”属性 : 属性值; ”>文字 </P>2) 内嵌样式表 在一个页面内使用 语法：<style type=”test/css”>ss;</style>第五章学问点总结1. 网站开发流程1) 需求分析、确认需求2) 网站制作3) 测试网页4) 发布网站2. 网站测试主要包括三个方面1) 页面是否美观 , 布局是否合理2) 链接是否完好 , 有无无效链接3) 在不同浏览器中的兼容情形
