1、图像与链接
1、链接-锚点
1、什么是锚点
用于在页面中做一个记号，允许页面随时随地的跳转到这个记号的位置处
2、使用方式
1、定义锚点(做记号)
1、使用 a 标记的 name 属性
<a name="NO1">衣装鞋帽</a>
2、使用任何一个标记的 id 属性
<ANY id="锚点名称"></ANY>
2、链接到锚点上(跳到记号位置处)
<a href="#锚点名称">内容</a>
ex:
<a href="#NO1">...</a>
以上方式，链接到本页的锚点处
链接到其他页面的锚点处:
<a href="页面url#锚点名称"></a>
2、表格
1、什么是表格&表格作用
由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的
表格的作用 以一定的结构来显示信息的。
2、使用表格
1、创建表格(语法)
表格：表格，行，列(单元格)组成
定义表格：<table></table>
创建表行：<tr></tr>
创建列(单元格):<td></td>
注意：默认情况下，每行中的列数是统一的。
table : display:table;
特点：
1、独占一行
2、宽度自适应(由内容来决定)
练习：创建一个三行四列的表格
2、表格属性
1、<table> 属性
1、width
设置表格宽度
2、height
设置表格高度
3、align
设置 表格 在其 父元素中的水平对齐方式，取值：left,center,right
4、border
边框,边框宽度，以px为单位的数值，px可以省略
5、cellpadding
单元格内边距
单元格边框与内容之间的距离
6、cellspacing
单元格外边距
单元格与单元格之间或者单元格与表格之间的 距离
7、bgcolor
背景颜色
2、<tr> 属性
1、align
该行的内容 水平对齐方式
2、valign
该行的内容 垂直对齐方式
取值：top，middle，bottom
3、bgcolor
3、<td> 属性
1、width
2、height
3、align
4、valign
5、bgcolor
6、colspan
设置单元格跨列
7、rowspan
设置单元格跨行
3、表格中的其他标记
1、<caption></caption>
作用：为表格定义标题
位置：表格正上方居中显示
<table>
<caption>标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
2、行标题或列标题
列标题：第一行中的每一列，加粗，水平居中的效果显示
行标题：每行里面的第一列, 加粗，水平居中的效果显示
行(列)标题:<th></th>
<th></th>作用 与 <td></td>一模一样
3、表格的复杂应用
1、行分组
表格可以被划分成3个部分
1、表头 <thead></thead>
2、表主体 <tbody></tbody>
3、表尾 <tfoot></tfoot>
<table>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>
注意：如果不对表格行进行分组的话，那么默认都属于 tbody 中
2、不规则表格
每行中的列数，不是统一化的。
1、跨列
合并列，让指定的单元格，横向向右，合并几个单元格(包含自己)
语法：
td 的 colspan 属性
2、跨行
合并行，让指定的单元格，纵向向下，合并几个单元格(包含自己)
语法：
td 的 rowspan 属性
注意：无论是跨行还是跨列，被合并的单元格一定从代码中删除出去
3、表格的嵌套
在一个表格中，又嵌入了另外一个表格
被嵌套的表格必须出现在<td>中
<table>
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
3、列表
1、什么是列表&作用
将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来
2、列表的组成
列表是由 列表类型 和 列表项 组成的
列表类型：
有序列表
无序列表
列表项：
表示具体的列表中的内容
3、使用列表
1、有序列表
1、语法:
<ol></ol> --> Order List
列表项：<li>内容</li> --> List Item
练习：创建一个有序列表，存放四个人的姓名
2、ol 的属性
1、type
列表标识的类型
取值：
1、1 ：数字(默认值)
2、a ：小写字母
3、A ：大写字母
4、i ：小写罗马字符
5、I ：大写罗马字符
2、start
列表标识的起始编号
默认为1
2、无序列表
1、语法
<ul></ul>->Unorder List
列表项：<li></li>
2、属性
1、type
取值：
1、disc,实心圆(默认值)
2、circle,空心圆
3、square,实心矩形
4、none,不显示标识
4、列表嵌套
注意：显示的内容只能放在 li 中
<ul>
<li>孙悟空</li>
</ul>
5、定义列表
1、作用
用于要给出一类事物的定义的情形。
2、语法
1、<dl></dl> 定义一个定义列表
2、<dt></dt> 定义 列表中的一个术语
3、<dd></dd> 对 术语 进行解释和说明
3、使用场合
图文混排
4、结构标记
1、什么是结构标记
H5中新标记，用来表示页面布局的，从而提升标签的语义性
2、结构标记分类
1、<header></header>
作用：用于定义文档的头部
注意：允许在页面中出现多次，作为任何部分的头部信息定义
替代:<div id="header"></div>
2、<nav></nav>
作用：用于定义页面的导航链接部分
替代：<div id="nav"></div>
3、<section></section>
作用：用于定义文档中的具体组成部分，表示主体内容分
替代：<div id="main"></div>
4、<article></article>
作用：用于定义独立于文档主体内容的一些其他内容
比如：论坛中的帖子、新闻信息、博客或微博中的条目
5、<footer></footer>
作用：用于定义网页中的页脚信息，网页中的靠下部分的内容
6、<aside></aside>
作用：用于定义页面中的 边栏信息
注意：能使用 结构标记的 地方，尽量使用结构标记，无法被结构标记所取代的，就使用 <div id=""> 一起来实现布局
5、表单(重难点)
1、表单的作用
表单用于显示、收集信息，并将信息提交给服务器
2、完整的表单组成
1、表单 - form
2、表单控件
3、表单元素(重点)
1、语法
<form>
允许出现表单控件
</form>
2、属性
1、action
定义表单被提交时发生的动作
提交给服务器处理程序的地址
注意：通过 与服务器端人员交流 得到 action 的地址
默认，提交给本页
2、method
作用：定义表单提交数据时的方式
取值：
1、get (默认值)
意义为：得到，获取
场合：向服务器要数据时使用
特点：
1、明文提交,所提交的数据时可以显示在地址栏上的-安全性较低
2、提交数据有大小限制-最大为2KB
2、post
意义：邮寄，邮递
场合：将数据提交给服务器处理时使用(有保密类型数据时)
特点：
1、隐式提交-所提交的内容是不会显示在地址栏上的，安全性较高
2、无大小限制
3、put
4、delete
5、...
3、enctype
作用：编码类型，即表单数据进行编码的方式
允许表单将什么样的数据提交给服务器
取值：
1、application/x-www-form-urlencoded
默认值
允许将 普通字符，特殊字符，都提交给服务器，不允许提交 文件
2、multipart/form-data
允许 将文件 提交给服务器
3、text/plain
只允许提交普通字符。特殊字符，文件等都无法提交
4、name
定义 表单的名称
扫一扫
1389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
