HTML5-2

1、图像和链接
1、URL
地址
1、分类
1、绝对路径
1、引用互联网资源
协议名
主机名(IP地址，域名)
目录路径
文件名
2、本机文件
从文件所在的最高目录处(盘符)开始
2、相对路径
通过 文件间的位置关系 找到资源文件
1、同目录，直接用
2、子目录，先进入
3、父目录，先返回(../)
3、根相对路径
永远都是从WEB站点所在的根目录处开始查找
语法：/
2、图像
1、语法
<img>
<img/>
2、属性
1、src
指定要显示的图像的URL
2、width
3、height
注意：等比缩放
3、链接
1、语法
<a>内容</a>
2、属性
1、href
链接文件URL
2、target
目标，打开新网页的方式
取值：
1、_self
默认值
2、_blank
新标签页打开
3、链接4种表现形式
1、目标文档为下载资源
<a href="xxx.rar/zip">xxx</a>
2、电子邮件链接
<a href="mailto:xxx@xxx.com">xxxx</a>
3、返回页面顶部空链接
<a href="#">xxx</a>
4、链接到JS
<a href="javascript:js代码">xxx</a>
4、锚点
1、定义锚点
1、通过任何标记的 id 属性
2、通过a标记的 name 属性
2、链接到锚点
<a href="#锚点名称"></a>
<a href="页面URL#锚点名称"></a>
2、表格
1、作用
将数据 按照 从左到右，从上到下的顺序进行显示
2、语法
1、标记
1、创建表格
<table></table>
2、创建表行
<tr></tr> -- table row
3、创建列(单元格)
<td></td> -- table data
2、属性
1、table
width,height,align,border,cellspacing,cellpadding,bgcolor
2、tr
align,valign,bgcolor
3、td
align,valign,bgcolor,width,height,colspan,rowspan
3、表格其他标记
1、标题
<caption></caption>
2、行标题或列标题
<th></th>
4、表格复杂应用
1、行分组
表头：<thead></thead>
表主体：<tbody></tbody>
表尾:<tfoot></tfoot>
2、不规则表格
通过 td 的 colspan和rowspan 属性来设置
colspan：跨列，从指定单元格位置处开始，水平向右 合并 几列，被合并掉的单元格一定要删除
rowspan：跨行，从指定单元格位置处开始，纵向向下 合并 几个单元格,被合并掉的单元格一定要删除


3、表格嵌套
一个表格中又出现一个表格
表格中的所有内容，只能出现在td中
***********************************
1、列表
1、什么是列表
按照一定的结构化方式显示数据，默认情况，是按照从上到下的方式来显示数据
2、列表的组成
主要由 列表类型 和 列表项 来组成
3、语法
1、有序列表
标记:<ol></ol> -- Order List
列表项：<li></li>


<ol>
<li>内容</li>
<li>内容</li>
... ...
</ol>
属性：
1、type
作用：列表项前的标识
取值：
1、1 数字，默认值
2、a 小写字母
3、A 大写字母
4、i 小写罗马数字
5、I 大写罗马数字
2、start
指定 列表项 从第几个字符开始显示
2、无序列表
标记：<ul></ul> -- Unorder List
列表项：<li></li>
属性：
1、type
1、disc，实心圆（默认值）
2、circle，空心圆
3、square，实心方块
4、none，没有
3、列表的嵌套
通过列表嵌套，可以实现多层列表 
被嵌套的内容，必须放在li中 
4、定义列表
1、作用
定义列表用于给出一类事物的定义情形


掩耳盗铃
xxxxxxxxxxxx
2、语法
<dl></dl>:定义一个定义列表
<dt></dt>:定义列表中要解释的名词或术语
<dd></dd>:定义列表中对名词或术语的解释




3、使用场合
图文混排 时
2、结构标记
1、作用
用于表示页面中的布局，目的是为了提升标记的语义化
2、结构标记
1、<header>元素
1、语法
<header></header>
2、作用
定义文档的页眉
用于取代：<div id="header"></div>
2、<nav>元素
1、语法
<nav></nav>
2、作用
用于表示页面中的导航部分
3、<section>元素
1、语法
<section></section>
2、作用
用于表示 页面中的 主体部分
4、<article>元素
1、语法
<article></article>
2、作用
用于表示独立于文档的其他部分的内容
比如：论坛中的帖子，新闻类网站中的具体一条新闻，博客或微博的条目，音视频等... ...
5、<footer>元素
1、语法
<footer></footer>
2、作用
用于表示 网页 底部信息
6、<aside>元素
1、语法
<aside></aside>
2、作用
表示网页 内容 中的边栏信息
3、表单(重难点)
1、表单作用
用于显示、收集用户信息，并将信息提交给服务器


表单组成：
1、表单元素-负责将用户数据提交给服务器
2、表单控件-负责接收用户的数据(与用户进行数据交互)
2、表单元素
1、标记
<form></form>
2、属性
1、action
定义表单被提交时的动作，主要就是 服务器上处理 数据的应用程序URL
默认 是提交给本页
2、method
指定表单数据提交的方式
取值：
1、get(默认值)
向服务器端要数据时使用
特点：
1、显示提交：用户数据是可以显示在地址栏上的
2、提交数据长度限制：2KB
2、post
向服务器传递数据时使用
特点：
1、隐式提交：所提交的数据是看不见的-安全性较高
2、无数据大小限制
3、enctype(非重点)
表单数据进行编码的方式
取值：
1、application/x-www-form-urlencoded(默认值)
2、multipart/form-data
使用场合：上传文件时使用
3、text/plain
3、表单控件
1、作用
提供多种类型的表单控件，并且具备可视化的外观，可以接收用户的数据
2、表单控件分类
input组元素，textarea，选项框(select和option)，其他元素
1、input 元素
1、语法
<input>或<input/>
属性：
1、type
根据type值，创建各种类型的输入字段,如文本框，密码框，单选按钮复选框等... ...
2、value
值，要提交给服务器的值
3、name
控件的名称，服务器端使用，没有名字，无法提交
4、disabled
禁用控件，该属性无值，只要出现在控件中就表示禁用
<input disabled>
2、分类
1、文本框与密码框
文本框：type="text"
密码框：type="password


属性：
1、maxlength
限制输入的字符数
2、readonly
只读
3、name
以控件的缩写+功能名称组成
文本框和密码框的缩写：txt
ex:
用户名称:txtUsername
用户昵称:txtNickname
4、value
2、单选按钮 和 复选框
单选按钮：type="radio"
复选框：type="checkbox"


属性：
1、name
名称以及分组，一组单选按钮或复选框的话，名称必须一致
单选按钮:rdo
复选框：chk
2、value
值
3、checked
设置默认被选中
3、按钮
提交按钮：type="submit"
负责提交数据到服务器
重置按钮：type="reset"
将表单元素恢复到默认值
普通按钮：type="button"
执行客户端脚本(JS)
属性：
1、name
缩写：btn
2、value
按钮上的显示文本
4、隐藏域和文件选择框
1、隐藏域
不想给用户看，但是要提交给服务器的数据


<input type="hidden">
属性：
1、name 名称,缩写 txt
2、value 值
2、文件选择框
提交(上传)文件时使用
<input type="file">
属性：
1、name
缩写 ：txt
注意：
1、保证 form 的 method 属性 必须为 post
2、保证 form 的 enctype 属性 必须为 multipart/form-data
2、textarea 元素
多行文本框
1、语法
<textarea>文本</textarea>
2、属性
1、name
控件的名称，缩写 txt
2、readonly
只读
3、cols
指定文本域的列数
变相设置宽度
4、rows
指定文本域的行数
变相设置高度
3、选项框
两种：
1、下拉选项框
2、滚动列表
语法
1、<select></select>
功能：创建选项框(滚动列表)
属性：
1、name
缩写：sel
2、size
默认显示的选项数量，如果取值大于1的话，则为滚动列表
3、multiple
设置多选
2、<option></option>
选项框中的选项
属性：
1、value
值
2、selected
预选中
4、其他元素
1、label 元素
1、作用
关联 文本 与表单控件。
2、语法
<label>文本</label>
属性：
for ：表示与该元素相关联的表单控件的ID值
2、fieldset 元素
1、作用
为控件分组
2、语法
1、<fieldset></fieldset>
为控件分组
2、<legend></legend>
为分组指定标题
3、button 元素
语法:
<button>内容</button>
注意：
<button>元素放在<form>中，就是提交按钮,放在<form>之外，就是普通按钮(IE除外)
4、其他标记
1、浮动框架
1、作用
可以在一个浏览器窗口中同时显示多个页面文档
2、语法
<iframe>内容</iframe>
注意：
1、必须是成对标记
2、当浏览器不支持<iframe>元素时，将显示"内容"作为该处的 内容
属性
1、src
浮动框架中的网页URL
2、width
3、height
4、frameborder
浮动框架的边框，设置为0，则取消边框
2、摘要与细节
1、作用
允许将页面某部分内容进行展开或收缩
2、语法
<details>
<summary>标题</summary>
</details>
3、度量元素
1、作用
用于显示静态比例的信息
2、语法
<meter>文本</meter>
属性：
1、min
度量范围的最小值，默认为0
2、max
度量范围的最大值，默认为1
3、value
当前显示的度量值，默认为0
4、时间元素
1、作用
用于关联时间的不同表现形式
2、语法
<time>时间文本</time>
属性：
datetime:关联的日期时间，可以只关联日期，也可以只关联时间。如果同时关联日期与时间的话，日期与时间之间用"T"来分割
5、高亮文本显示
1、作用
将页面中的某部分文本，以特殊的背景颜色显示出来
2、语法
<mark>高亮文本显示</mark>