HTML_day02

一.URL
1.统一资源定位器
用于表示网络中任意资源的位置。
2.路径的表现形式
1.绝对路径（完整路径）
1.网络资源
协议+主机+目录结构+文件名称
2.本地路径
从最高盘符处开始去查找
2.相对路径
从当前文件所在的位置开始查找资源所经过的路径，就是相对路径。
同级目录：直接引用 ex:jd_logo.png
子级目录：先进入，再引用 ex:img/page.jpg
父级目录：先返回，再引用 ex:…/jd_logo1.png
3.根相对路径
永远是从web站点的根目录处开始查找
ex:/codeboy/img/a.jpg
二.图像和链接
1.图像格式
.jpg 压缩比率大
.png 背景透明
.gif 动画
2.图像元素
语法：
属性：
src:指定要显示图像的url
width:指定图片的宽度 取值以px或%为单位的数字
height:指定图片的高度 取值以px或%为单位的数字
alt:图片无法正常显示时给的提示文字
注意：如果要修改图片的尺寸，一般只需修改其中一个属性值即可。
练习：Day02文件夹中的01-url.html网页需要去引用与Day02平级的other文件夹中的login.png图片
3.链接
1.语法：内容
属性：
1.href 指定链接的url
2.target 指定打开新网页的方式
取值：
1._self 默认值，在当前网页中打开新的网页
2._blank 在新的标签页中打开新网页
2.链接其它表现形式：
1.资源下载
让链接的url，链接到rar/zip的文件即可。
下载
2.电子邮件链接
打开邮件
3.返回页面的顶部
返回页面顶部
4.链接到js
执行js代码

			练习：定义一个js函数,函数体内弹出"hello world!",在a标记中调用该函数，运行页面查看效果。（3分钟）
	3.锚点
	  1.什么是锚点
		  锚点，就是网页中的一个记号，可以通过超链接跳转到记号位置处。
  2.锚点的使用方式
		  1.定义锚点
				1.使用a标记的name属性定义锚点
				  <a name="锚点名称"></a>
      2.使用任意元素的id属性定义锚点
				  <any id="锚点名称"></any>

			2.链接到锚点
			  1.链接到当前页面锚点
				  <a href="#锚点名称"></a>
      2.链接到其它页面锚点位置处
				  <a href="网页url#锚点名称"></a>
      
				练习：
				 在不同的网页中分别定义三个锚点，锚点中内容随意，然后通过a标记分别链接到三个锚点位置处。

三.表格
1.表格作用
按照一定结构显示数据，由单元格按照从左往右，从上到下的方式排列到一起。数据都保存在单元格中，表格可以显示数据，也可以设置页面的布局。
2.表格语法
1.基本标记
表格：

行： table row
单元格/列： table data

		练习：创建一个4行4列的表格
		  1.在网页中创建一对<table></table>标记
			2.在<table>标记中嵌套<tr></tr>
			3.在<tr>标记中嵌套<td></td>   
2.属性
	  1.table的属性
		  border:设置表格的边框 取值以px为单位的数字
    width:设置表格的宽度
			height:设置表格的高度
			align:设置表格的水平对齐方式 
			      取值：left/center/right
    bgcolor:设置背景颜色 取值：合法的颜色值
			cellpadding:设置单元格的内边距（内容与td之间的间距）
			cellspacing:设置单元格的外边距（td边框与边框之间的间距）
			练习：
			  在以上表格练习的基础上设置表格的尺寸400*400px,表格的背景颜色为橙色，表格边框为1px,并设置表格内边距为15px,外边距为10px（2分钟）。
  2.tr的属性
		  align:设置当前行内容水平对齐方式
			valign:设置当前行内容垂直对齐方式
			       取值：top/middle/bottom
    bgcolor:设置当前行的背景颜色
  3.td的属性
		  width:宽度
			height:高度
			align:水平对齐
			valign:垂直对齐
			bgcolor:单元格的背景颜色
			colspan:跨列
			rowspan:跨行 
3.不规则表格的使用
	  1.跨列 colspan
		  从指定单元格位置处开始，横向向右合并几个单元格（包含自己），被合并掉的单元格要删除。
  2.跨行 rowspan
		  从指定单元格位置处开始，纵向向下合并几个单元格（包含自己），被合并掉的单元格要删除。
4.可选标记
	  1.表格标题
		  <caption></caption>
			如果设置标题的话，则必须位于<table>下的第一个子元素
  2.行/列标题
		  <th></th>
			所有td都可以用th替换
5.表格的复杂应用
	  1.表格嵌套
		  表格中所有被嵌套的内容只能放在td中。
			ex:
			<table>
			  <tr>
				  <td>
					  <table>
						  <tr>
							  <td></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
  2.行分组
		  可以将连续的几个行，划分到一个组中，并进行统一管理。
			1.表头行
			  <thead></thead>
				表格中最上面一行进行分组的话，可以放在表头行中。
    2.表主体行
			  <tbody></tbody>
				允许将若干行放在tbody中，进行统一管理。
    3.表尾行
			  <tfoot></tfoot>
				表格中最后一行进行分组的话，可以放在表尾行中。

四.列表
1.列表的作用
按照从上到下的方式来显示所有数据（或从左往右显示），并且可以在数据前增加显示的标识。
2.列表的组成
1.列表的类型
有序列表：

order list
无序列表：

unorder list
2.列表项
用于表示列表中的数据（嵌套在列表中）

• list item
  3.列表的属性
  1.有序列的属性
  1.type 指定列表标识类型
  取值：
  1 默认值，以数字排序
  a 小写英文字母排序
  A 大写英文字母排序
  I 大写罗马数字排序
  i 小写罗马数字排序
  2.start 指定起始编号是从第 几 开始
  取值：为无单位的数字
  2.无序列表的属性
  1.type 指定无序列表的标识
  取值：
  disc 实心圆
  circle 空心圆
  square 实心方块
  none 不显示标识
  4.列表的嵌套
  在一个列表中又出现另外一个列表。
  被嵌套的列表只能在li中出现
  ex：
  
  1. 
     
  2. 
     
     • 
       
     • 
       
     
     
  3. 
     
  
  5.自定义列表
  1.什么是自定义列表
  定义列表常用于给一类事物或对名词进行解释说明。
  2.语法
  
  表示定义列表
  表示列表中要解释说明的名词
  
  表示列表中对名词解释的具体内容
  ex：
  

  
  名词
  

  解释的内容

  
  

  		常用场合：图文混排。
  

  五.结构标记
  1.结构标记的作用
  用于描述网页的基本结构（取代div做布局）
  提升代码的语义性，方便阅读和维护。
  2.常用的结构标记
  1.header
  定义网页的头部
  2.nav
  定义导航链接内部
  3.section
  定义网页主体
  4.aside
  定义网页的侧边栏内容
  5.footer
  定义网页偏底部内容
  6.article
  定义与文字描述相关的内容，如果，论坛中帖子，微博条目，用户评论等等。

  课后作业：
  1.页面中添加5个div元素，分别在div中添加文字或图片，在浏览器中先查看页面效果，然后再将所有div替换成上面的结构标记，再查看页面效果。
  2.完成Day02文件夹中"课后作业1.png-表格练习"和"课后作业2.png-列表练习"中图片效果。
  3.整理今天所学内容的思维导图