1.文本(重点) 1.特殊符号 空格 (默认空格会折叠，文档只解析一个) > >大于号 < <小于号 © @ 版权符号 @yen; ￥ 2.文本标记 1.文本样式 <i>内容</i> 斜体 <u>内容</u> 下划线 <s>内容</s> 删除线 <b>内容</b> 加粗 <sup>内容</sup> 上标 <sub>内容</sub> 下标 特点：所有的内容会在一行内显示 2.标题元素 以标题的形式显示文本内容(想突出显示标题的时候) 语法：<hn></hn> n:1-6数字 <h1></h1> 一级标题 .... ... <h6></h6> 6级标题 特点： 自动换行 默认加粗 数字越大，字号越小 属性： 1.水平对齐方式 语法：align 取值：left/center/right 3.段落标记：你以为段落的形式显示文本 语法：<p>内容</p> 特点：独占整行 文字大小采用默认大小 默认的垂直空白间距 4.换行元素 语法：<br>或<br/> **:针对行内元素 5.分割线元素 语法：<hr>或<hr/> 属性： color:颜色 size:取值以px为单位的数值 width:宽度以px为单位的数值 height:高 align:线条的水平对齐方式 6.预格式化：保留源文件中的格式，也会保留换行和空格效果 语法：<pre></pre> 2.分区元素 1.块分区 语法：<div>内容</div> 特点：独占一行 无任何文本显示效果 作用：布局 2.行分区 语法：<span></span> 特点： 多个span元素会在一行中显示 无任何特殊效果 作用：处理一行文字的不同效果 3.图像和链接 1.url 统一资源定位符（定位器），俗称：路径 uniform resource locator 2.url表现形式 1.绝对路径 一旦知道绝对路径，肯定可以找到你想找的资源，是完整路径的表现形式 http://z1.dfcfw.com/2017/8/25/201708251445591754443630.jpg http://baidu.com 通信协议+域名(IP)+路径+文件名 1.网络资源 通信协议：http: 主机：域名/IP地址 路径、文件名 2.相对路径 从当前文件位置处开始，一直查到资源文件所在的位置， 它所经过的路径就是相对路径. 1.本机资源访问 D:\jd\images\index\1.jpg a.同目录 （当前资源和文件在同一目录，直接能资源文件名 称进行引用） aa.html b.子目录 先进入子目录，再引用images/1.jpg c.父目录 先返回到父级目录，再引用../2.jpg 3.图像 1.格式 jpg(jpeg): 有损压缩，压缩比率大 gif:动画 png: 背景透明 2.图像元素 语法：<img>或<img/>将图片添加到网页中 属性： src 图片的地址来源 width height title 鼠标移入到元素上时提示的文字 alt 鼠标移入到元素上，图片出错时，显示的文字 **:若width和height只设置其中一个属性的话，另外一个将等比缩放 若用的图片和你需求的不一致，尽量写出宽和高 练习：显示三线不同路径下的图片（同级目录，子级目录，父级目录） 3.链接 又称为超链接，在页面中允许被点击的内容，以完成页面间的跳转 语法：<a>内容</a> 默认不能点击，需配置href属性跳转链接地址 属性： href 链接路径 (url) title 鼠标放在链接上时的提示内容 target 目标，指定打开网页的方式 取值：_self 在自身的标签页中打开（默认值） _blank 在新的标签页中打开 _parent.....???? 4.链接的表现形式 1.目标为下载资源 <a href="*.zip/*.rar">下载</a> 2.电子邮件 <a href="mailto:m18697040240@163.com">电子邮件</a> mailto:加上 3.返回页面顶部时 <a href="#">返回页面顶部</a> 4.链接到js... <a href="javascript:;"></a> 5.锚点(Anchor) 1.什么作用？ 在HTML页面中的某行位置处做一个标记，方便页面能够随时跳转到标记位置处 2.使用方式？ 1.定义锚点 1.通过a标记的name属性定义锚点 <a name="锚点名称"></a> *：不要中文 2.通过任意标记的id属性定义锚点 <any id="锚点名称"></any> 2.链接到锚点 1.跳转到本页锚点处 <a href="#锚点名称"></a> 2.跳转到其它页面锚点处 <a href="其它页面URL#锚点名称"></a> 6.表格(Table) 1.表格的作用？ 按照一定的格式来显示数据 表格是由单元格组成，按照从左到右，从上到下的顺序排列的 表格中的数据最终要保存在单元格中 2.使用表格 1.创建表格 1.定义表格 <table></table> 2.创建表行 <tr></tr> 3.创建单元格 <td></td> 2.表格的属性？ 1.table的属性 1.border 边框，指定表格的边框 2.width 设置表格的宽度 3.height 设置表格的高度 4.align 设置表格的水平对齐方式 取值：left/center/right 5.bgcolor 设置表格的背景颜色 6.cellspacing 设置单元格的外边距（单元格和单元格之间的间距） 7.cellpadding 设置单元格的内边距（单元格和内容之间的间距） 2.tr的属性 1.align 设置该行内容的水平对齐方式 2.valign 设置该行内容的垂直对齐方式 取值：top/middle/bottom 3.bgcolor 该行的背景颜色 3.td的属性 1.align 2.valign 3.width 4.height 6.colspan 设置单元格跨列 7.rowspan 设置单元格跨行 **:1.每行中的指定列的宽度，都是一致，默认情况下以最宽的为主 2.一行中所有列的高度都是一致的，默认以最高的为主 3.表格的标题 语法：<caption>标题</caption> **：1.caption必须紧跟在table标记之后 2.一个表格最多只能有一个标题 4.th 行标题或列标题 特点：字体有加粗效果，放在tr里。 3.复杂表格的使用 1.行分组 可以将表格分成3个部分 1.表头 <thead></thead> 2.表主体 <tbody></tbody> 3.表尾 <tfoot></tfoot> 一般不写 2.不规则表格 通过td的colspan（跨列）和rowspan（跨行)属性设置 1.跨列 从指定的单元格位置开始，横向向右合并几个单元（包括自己） ***：被合并单元格，要删除 语法：colspan 取值：数字（合并单元格的个数） 2.跨行 从指定的单元格位置开始，纵向向下合并几个单元（包括自己） ***：被合并单元格，要删除 语法：rowspan 取值：数字（合并单元格的个数） 3.表格的嵌套 ***：必须在单元格(td)里嵌套另一个表格 <table> <tr> <td></td> <td> <table> <tr> <td></td> <td></td> .... </tr> </table> </td> <td></td> ..... </tr> </table>
转载请注明原文地址: https://www.6miu.com/read-10735.html
