五.文本标签
8.分区元素
①块分区
<div> 用于页面中的布局效果，默认看不到 单独成行 |
②行分区
对同一行文字，使用不同的样式，使用行分区span 与其他行内元素共用一行 |
9.行内元素与块级元素(元素的显示方式)
①块级元素
在网页中，单独成行的元素，都是块级元素 从上往下排列的 ex:h1~h6,p,div,pre |
②行内元素
在网页中多个行内元素可以共用一行 从左往右排列 特点：设置宽高无效，上下外边距无效 ex:b strong i em u s del a sup sub span |
③行内块元素
具有块级元素的特性，但是在一行内显示 |
④table元素
表格的宽高根据内容来决定 内容多，宽高就大， 是一种单独的表现形式 |
六.图片与链接
1.图片的使用
属性 src="url/图片资源的路径" ex： |
2.URL
Uniform Resource Locator 统一资源定位符，俗称路径 |
3.路径(url)的表现形式
①绝对路径
完整的路径 1.本地资源 C:\Users\web\Desktop\web1904\day02\08.png 此种方式，项目中绝对不能用 2.使用网络资源---图床 通信协议+主机名称+文件目录+资源名称 优点：不占用本服务器的存储空间 缺点：不稳定 |
②相对路径
使用本服务器资源 资源相对调用它的html文件 1.同级目录(兄弟关系)，直接写资源名称 src="06.png" 2.子集目录，(兄弟的孩子)。直接调用兄弟，使用/进入兄弟 src="img/06.png" 3.父级目录，(父亲的兄弟)。../找到父亲,直接写兄弟的资源名 src="../06.png" |
4.图片的属性
src:source 源，设置图片资源的路径 alt:图片出错时，显示的文本 width：px为单位的数字 height: px为单位的数字 图片的失真，设置宽高和图片默认宽高比不一致 解决图片的失真，宽高只设置一个，另外一个按照默认宽高比自动匹配 |
练习
01_ex 在网页内显示三张图片 要求分别以相对路径中三种方式引入图片 然后设置图片的宽高以及提示文字 兄弟，子级，父级 |
5.链接
①语法
属性 href:链接的路径，必须写href,不然不会有链接的功能 target:指定打开链接的方式 取值：_self 默认值，在当前标签页中打开新网页 _blank 在新的标签页中打开网页 |
②a标签的其它表现形式
执行js |
③锚点
1.什么是锚点 锚点，就是网页中的一个记号 可以通过超链接的方式跳转到记号的位置处 2.使用锚点 1.定义锚点 1.1使用a标签的name属性，定义锚点 ex:锚点名称"> 1.2使用任意标签的id，定义锚点 (任意标签 Any) ex:<Any id="锚点名称"> 2.链接到锚点 href="#锚点名称">链接锚点 |
练习
03_ex 在页面中分别用div和h2定义两个锚点 div和h2的内容都是lorem假文 然后通过两个a标签，链接到这两个锚点 在03_a.html创建p并定义锚点 p标签内容一拳超人 在03_ex链接锚点到03_a.html中的一拳超人 |
七.表格
1.表格语法
①标记
表格 ></table>行 |
列
table dataex：两行两列的表格
12
34
练习
04_table.html 创建4*4的表格，内容1~16 |
②属性
1.table标签的属性 border="2px" 设置表格的边框，包括单元格的边框 width="200px" 设置表格宽度 height="200px" 设置表格高度 align="center" 设置整个表格的水平对齐方式 left/center/right bgcolor="pink" 设置表格的背景颜色 bordercolor="red" 设置表格边框颜色 cellpadding:单元格的内边距(边框与内容之间的距离) cellspacing:单元格的外边距(边框与边框之前的距离) |
练习
04_ex 表格4*4 400px*400px 背景pink,边框1px,水平居中，内边距5px,外边距10px 边框颜色red |
2.tr的属性 bgcolor="yellow" 设置当前行的背景颜色 align="right" 设置当前行内容的水平对齐方式 left/center/right valign="bottom" 设置当前行内容的垂直对齐方式 top/middle/bottom |
3.td的属性 width="200px" 设置当前单元格的宽度 height="200px" 设置当前单元格的高度 bgcolor="blue" 设置当前单元格的背景颜色 align="right" 设置当前单元格内容的水平对齐 valign="top" 设置当前单元格内容的垂直对齐 colspan 跨列合并 column rowspan 跨行合并 |
2.不规则的表格
①跨列
colspan 从指定的单元格位置处开始 横向向右合并N个单元格(n是包含自己) 被合并的单元格要删除 |
②跨行
rowspan 从指定单元格位置处开始 纵向向下合并n个单元格(n包含自己) 被合并的单元格要删除 |
3.表格的可选标记
①表格的标题
如果使用caption,必须放在紧跟 ②行/列的标题 可以完全代替td使用 内容文字加粗，默认水平居中 |
4.表格复杂应用
①行分组
ad> 表头行，一般写列标题 |
表脚，总结，计算公式
②表格的嵌套
表格中所有的嵌套只能放在td中 |
八.列表(重点***)
1.列表的作用
按照从上到下(或者从左到右)来显示所有的数据 并且在数据前有标识 使用无序列表做布局 |
2.列表的组成
列表类型和列表项组成 |
①列表类型
| 有序列表 order list 无序列表 unorder list 无序多用于页面布局 多个模块样式类似，就是使用ul>li布局 |
②列表项
list item |
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
