web前端基础知识-20170502

1、注意
p标记不能嵌套块级元素
块级：div,p,h1~h6...
2、扩充
<meta chasrset="utf-8">元数据


<meta name="keywords" content="关键字1，关键字2，...">（关键字一般8~10个）
<meta name="description" content="">
以上两个meta标记，主要面向搜素引擎·
3、图像和链接
1、URL
1、目录和目录结构
目录：web站点中，文件夹的名称
2、URL ：Uniform Resource Locator
统一资源定位器，俗称：路径
用来标识网络中任何资源的位置
即：资源文件所在目录结构的表现方式
3、URL分类
1、绝对路径
1、什么是绝对路径
从文件所在的最高级目录下开始查找文件所经过的路径
2、分类
1、查找网络资源
1、完整的url主要由
1、协议名称
https
2、域名（IP）
www.baidu.com
3、目录路径
img
4、文件名
bd_logo.png
https://www.baidu.com/img/bd_logo.png
2、查找本机资源（不推荐）
从盘符位置处开始查找
2、相对路径
从当前文件所在的位置处开始查找资源文件所经过的路径
ex:在a.html中想使用b.jpg
   a.html:当前文件
b.jpg：资源文件
1、同目录下：直接用 b.jpg
2、子目录下：先进入再引用 img/b.jpg
3、父目录下：先返回再引用../../b.jpg
ex:1、../../imges/index/logo.jpg
3、根相对路径
永远都是从web站点所在的根目录处开始查找资源文件的位置
表现：/ 作为开始
ex:/images/index/logo.jpg （根相对路径）
imges/index/logo.jpg   （相对路径）
以上两种路径的区别
2、图像
1语法：<img>或<img/>
2、web中所支持的图像格式
1、jpg ***.jpg 采用的是有损压缩的技术
2、gif ***.gif 动图
3、png ***.png 支持透明色
属性：
1、src
图像的URl
2、title
鼠标移入到图像上所提示的文本
3、alt
鼠标移入到图像上所提示的文本
4、width
宽度，以px或%作为单位的数字
如果不写单位，默认是px
5、height
高度，以px或%作为单位的数字
如果不写单位，默认是px
注意：
1、在img中，如果只设置宽度或高度中的一个属性，
  那么另一个属性会跟着等比缩放
2、URL严格区分大小写（针对服务器）
3、链接
1、什么是链接？
点击后能够完成页面跳转的行为
2、语法
标记：
<a>内容</a>
属性：
1、href
链接URL
注意：如果不设置href，a标记则表现的与普通元素一样
2、target
指定打开新网页的方式
1、_self:在自身页面中打开新页面，默认值
2、_blank:在新页面中打开网页
3、链接的表现形式
1、实现资源下载
设置href的取值为.rar/.zip/.exe,一律为资源下载
2、实现电子邮件的发送
<a href="mailto:email地址">联系我们<a>
前提：
1、客户端端必须安装邮件客户端
2、在邮件客户端上配置好账户
3、返回页面顶部的空链接
<a href="#">返回顶部</a>
4、链接到Javascript
<a href="javascript:"></a>
4、锚点
1、作用
用于在页面中某个位置处做一个记号，方便网页
允许在任何位置跳转到记号位置处
2、使用方式
1、定义锚点
1、使用a标记的name属性
<a name="name1">内容<a/a>
2、使用任意标记的id属性
<ANY id="name2"></ANY>（ANY为任意标记）
2、链接到锚点
1、跳转到本页的锚点处
<a href="#锚点名称"></a>
2、跳转到其他页面的锚点处
<a href="页面url#a锚点"></a>
4、表格
1、什么是表格
表格是由一些“单元格”按照从左到右，从上到下的排列顺序而形成的一个结构，
主要用于按照一定的方式来显示网页的数据
2、表格的语法
1、创建表格：<table></table>
2、创建表行：<tr></tr>
3、创建单元格：<td></td>
3、表格的属性
1、table属性
1、width：宽度
2、height：高度
3、align
表格在其父元素中的水平对齐方式
left/center/right
4、border
边框，取值为边框的宽度
5、cellpadding
设置单元格内边距
单元格边框与内容之间的距离
6、cellspacing
设置单元格外边距
单元格与单元格之间的距离
7、bgcolor
设置表格背景颜色
2、tr属性
1、align
控制该行内容的水平对齐方式
left/center/right
2、valign
控制该行内容的垂直对齐方式
top/middle/bottom
3、bgcolor
背景颜色
3、td属性
1、align
控制当前单元格内容的水平对齐方式
2、valign
3、width
4、height
5、colspan
设置单元格跨列(合并列)
6、rowspan
   设置单元格跨行（合并行）
4、表格的标题
标记：<caption>标题内容</caption>
表现：
1、默认下，显示所有行的最上方
2、水平居中对齐
注意：
<caption>必须位于<table>之下的第一行语句，并且表格*****
5、表格的复杂应用
1、行分组
将行分成若干组，分别去管理
1、表头行分组
将表格中第一行单独分组时，放在表头行分组中
标记：<thead></thead>
2、表主体行分组
将表格中除第一行以及最后一行以外的其他行，放在表主体中。
标记：<tbody></tbody>
3、表尾行分组
将表格中最后一行放在表尾行分组中
标记：<tfoot></tfoot>
注意：
如果“不显示的指定行的行分组的话”，那么默认所有的行都会被分在tbody中
2、不规则表格
通过单元格的跨行或跨列的属性来创建不规则的表格
1、跨列
从指定单元格开始，横向向右合并几个单元格（包括自己），
被合并的单元格，要从代码中删除出去
属性：colspan
取值：数字，要合并的列数
2、跨行
从指定单元格开始，纵向向下合并几个单元格（包括自己），
被合并的单元格，要从代码中删除出去
属性：rowspan
取值：数字，要合并的列数
3、表格的嵌套
在一个表格中，再放入另一个表格，从而实现复杂的布局
必须将嵌套的表格放在td中才能实现嵌套结构
任何东西在表格中显示的话，必须都放在td中
6、display：table的特点
1、自己独占一行
2、宽度由内容来决定
5、列表
1、什么是列表？
列表是将一系列具有相似特征的内容按照从上到下的方式来进行排列的一种结构
2、列表的语法
1、列表的组成
1、列表类型
1、有序列表<ol></ol>
2、无序列表<ul></ul>
2、列表项
显示在列表中的内容
<li></li>
2、有序列表
语法：
<ol>
<li></li>
<li></li>
</ol>
属性：
1、type
类型，指定列表项表示的类型
取值：
1、1：默认值，按数字排列
2、a: 按小写英文字符排列
3、A: 按大写英文字符排列
4、i: 按小写罗马数字排列
5、I: 按大写罗马数字排列
2、start
列表项标识，从几开始显示
取值：数字
3、无序列表
标记：
<ul>
<li></li>
<li></li>
</ul>
属性：
1、type
1、circle：空心圆
2、square:实心方块
3、disc: 实心圆
4、none：不显示标识
3、定义列表
1、作用
主要用于定义一类事物的定义情形
如：对专有名词，专业术语进行解释时
2、语法：
<dl>
<dt>专业名词/术语</dt>
<dd>对上述的名词或术语进行的解释</dd>
</dl>
3、使用场合
“图文混排时”，优先使用定义列表