初入HTML之二

1、图像和链接
1、URL
1、目录 & 目录结构 
目录：WEB站点中文件夹的名称
目录结构：由目录以及子目录形成复杂结构
2、URL
 URL(Uniform Resource Locator)
统一资源定位符
作用：用来标识网络中资源的位置
资源：图片，网页，音视频...
俗称：路径(地址)


URL在WEB页面上有三种表现形式:
1、绝对路径
2、相对路径
3、根相对路径
3、路径详解(重点)
1、绝对路径
1、什么是绝对路径
文件从最高级目录下开始的完整路径


1、访问网络资源
1、由以下四个部分组成
1、协议名称
2、主机名(IP地址，域名)
3、目录路径
4、文件名


ex:
1、协议名
https
2、主机名(域名)
www.baidu.com
3、目录路径
img
4、文件名
bd_logo1.png


https://www.baidu.com/img/bd_logo1.png


//www.baidu.com/img/bd_logo1.png
2、访问本机资源
从盘符位置处一层一层查找，直到找到文件名为止
E:\HTML5BASIC\Images\login.png
2、相对路径
1、什么是相对路径
资源文件为止是相对于当前文件的位置开始进行查找的完整路径表现形式。


相对路径是通过 文件之间的 位置关系 来查找文件
2、具体表现形式
1、资源文件和当前文件在同目录
直接通过资源文件名称 进行引用
2、资源文件 在 当前文件的 相当于是子目录中
想进入到目录中，再查找
3、资源文件 在 当前文件的 父层结构下
通过 ../ 向上返回，再引用文件
3、根相对路径
永远都是从web站点所在的根目录处开始查找
形式：/路径/子路径/...
2、图像
1、格式
2、图像元素
语法：<img>
属性：
1、src
指定要显示图像的URL
2、width
宽度，指定图像的宽度
以px作为单位的数值，px可以省略
3、height
高度，指定图像的高度
以px作为单位的数值，px可以省略
注意：
1、如果 width 和 height 只设置了一个属性的话，那么另外一个属性会跟着"等比缩放"
2、src中的 URL ，要严格区分大小写(服务器端约束)
3、链接
1、链接元素
语法：<a>内容</a>
属性：
1、href 属性
链接的文件的url
2、target
目标，打开新网页的方式
取值：
1、_self
(默认值)
在自身页面中打开新页面
2、_blank
在新标签页中打开新页面
2、链接的表现形式
1、链接目标为资源下载
<a href="***.rar/zip">下载</a>


rar/zip:压缩包
2、电子邮件链接
<a href="mailto:电子邮件地址">联系我们</a>


前提：
1、有电子邮件
2、机器中必须装有邮件客户端(Foxmail,outlook,...)
3、返回页面顶部的空链接
<a href="#">返回顶部</a>
4、链接到Javascript
<a href="javascript:">JS功能</a>
3、锚点
1、作用
在html文档中某个位置处做记号
2、使用方式
1、定义锚点
1、任何一个元素的id属性可以作为锚点
<div id="name1"></div>
2、a 元素 的 name 属性
<a name="name2"></a>
2、链接到锚点
<a href="#锚点名称">链接到锚点</a>
<a href="页面URL#锚点名称">其他页面锚点</a>
练习：
在新标签页中打开http://www.tmooc.cn
2、表格
1、什么是表格
表格是用来以一种结构化的方式来显示数据的元素。
表格是一些被称之为 单元格 的矩形框 按照 从左到右，从上到下的顺序排列而成的一个元素。
2、创建表格
1、表格 : <table></table>
2、行 : <tr></tr>
3、列(单元格) : <td></td>


注意：
1、表格的 display:table,既不是行内元素页不是块级元素
2、特点
1、独自成行
2、宽度，高度，全部都是以内容为主-自适应
3、表格的常用属性
1、表格元素属性-table
1、width
宽度
2、height
高度
3、align
设置 表格 在其父元素中的水平对齐方式 
4、border
边框
取值 以px为单位数值，px可以省略
5、cellpadding
设置单元格内边距-单元格边框与内容之间的距离
6、cellspacing
设置单元格外边距-单元格与单元格，或单元格与表格之间的距离
7、bgcolor
背景颜色
2、表行元素属性-tr
1、align
该行文本的水平对齐方式
left/center/right
2、valign
该行文本的垂直对齐方式
top/middle/bottom
3、bgcolor
3、单元格(列)td元素属性-td
1、align
单元格内容的水平对齐方式
2、valign
3、width
4、height
5、bgcolor
6、colspan
设置单元格跨列
7、rowspan
设置单元格跨行
4、表格中其他标记
1、表格标题
语法：<caption>标题</caption>
默认情况下，标题将在表格上方以水平居中的方式显示。
注意：<caption>必须紧紧跟随在<table>之后
2、行(列)标题
以特殊化的方式 来显示每行中的第一个单元格 或 第一行中的 每列单元格的效果
语法：<th></th>
注意：th 与 td 具备相同作用的，不同显示效果
特殊效果：
1、水平居中显示
2、文本加粗显示
5、表格复杂应用
1、行分组
1、表头 行分组
<thead></thead>
2、表主体 行分组
<tbody></tbody>
3、表尾 行分组
<tfoot></tfoot>


以上三组，每组中都允许包含多对 <tr>


注意：
如果不手动指定行分组的话，那么所有的行都被默认在 <tbody>中
2、不规则表格
1、跨列
设置 td 的 colspan 属性
从当前单元格开始，横向向右 合并几个单元格(包含自己)
2、跨行
设置 td 的 rowspan 属性
从当前单元格开始，纵向向下合并几个单元格(包含自己)
3、表格的嵌套
一个表格中又嵌套了另一个表格
表格中，所有被嵌套的东西，只能放在 <td> 中
<table>
<tr>
<td></td>
<td>
<table>
<tr>
<td>1</td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>

</table>

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

5、scrolling

浮动框架的边框，设置为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>