Web基础知识之Html Day02

Chrome浏览器审查元素F12；


区分块级元素：
display：block 块级元素
display：inline 行内元素


扩展：


1、嵌套问题
1、p 标记 不能嵌套块级元素
<p>
<div>
</div>
</p>
!错误！






浏览器会自动修改为


<p>
<span>嵌套结构正确</span>
</p>
<p></p>
<div>P中嵌套块级元素</div>
<p></p>






2、尽量不要让行内元素嵌套块级元素
<span>
<div></div>
</span> 尽量不要出现
2、meta 
1、定义关键字
<meta name="keywords" content="关键字1，关键字2，....">
2、定义网页描述信息
面向搜索引擎
<meta name="description" content="描述信息">
3、定义编码方式
<meta charset="gbk2312">
==========================================================================================
1、图像和链接
2、表格
3、列表
==========================================================================================
1、图像和链接
1、URL


1、目录&目录结构
        目录：文件夹
        资源文件：网页中要用到的资源可以称之为资源文件
    2、URL
      URL（Uniform Resource Locator）,统一资源定位器，主要用来表示网页中任何资源的“位置”。
      URL，即路径，在页面中主要有以下3种表现：
      1、绝对路径
      从文件所在的最高目录查找资源文件所经过的路径
        1、网络资源
          四部分组成：
          1、协议名：http/https
          2、主机名（IP地址/域名）：
          www.baidu.com
          3、目录路径：
          4、文件名：
        2、本机资源
          1、绝对路径：从盘符位置处开始：如E:\test\jd_logo.png
          2、相对路径：从当前文件位置处开始查找资源文件所经过的路径
            1、同目录，直接用
            在同一目录下，可以直接通过文件名称来引用资源文件
            2、子目录，先进入，再引用
            images/a.jpg
            images/top/left/logo.png
            3、父目录（上级目录），先返回，再引用
            ../a.jpg
           “ ../”:返回上级目录
           ../images/logo.png
          3、根相对路径:从网站所在的根目录处开始查找资源文件的位置
          /:表示网站所在的根目录
          ex：
          /images/front/logo.jpg
        
  2、图像


    1、图像格式
      1、jpeg
        图形图像联合专家组
        表现：*.jpg
      2、gif
        图形接口格式
        表现：*.gif
        特点：动态效果
      3、png
        可移植网络图形
        表现：*.png
        特点：支持透明
    2、图像元素
        语法：<img>或者<img/>
        属性：
          1、src
            源，即要显示的图像路径
          
          2、width
            宽度，以px 或 % 为单位
          
          3、height
            高度，以px 或 % 为单位


            注意：如果 width 和 height 未进行设置，显示原图


  3、链接
    1、链接元素
      语法：<a>内容</a>
      语法：
          1、href
            链接URL
          2、target
            目录，指定新网页的打开形式
            取值：
            1、_self
              在自身标签页中打开新网页，默认值
            2、_blank
              
    2、链接的表现形式


      1、目标为文档下载
        <a href="xxx.rar/zip">内容</a>
     
      2、电子邮件链接
      <a href = "mailto:Andone_hsx@outlook.com">联系我们</a>


      3、返回页面顶部的空链接
      <a href="#">返回顶部</a>


      4、链接到Javascript
      <a href="javascript:...">执行JS</a>


    3、锚点
      锚点：在文档的某行位置处做记号
      使用方式：
        1、定义锚点
          1、通过 a 标记的 name 属性
          <a name="NAME1">内容</a>
          2、任意标记的 id 属性
          <ANY id = "NAME2"></ANY>
        2、链接到锚点
          1、链接到本页锚点处
          <a href="#锚点名称"></a>
          2、链接到其它页锚点处
          <a href="页面URL#锚点名称"></a>


2、表格
  1、表格的作用
    表格会按照一种特殊的结构来摆放页面数据
    表格是由一些“单元格”，按照从左到右，从上到下的顺序排列到一起组合而成的。


    主要作用：实现页面元素的布局


  2、使用表格
    1、创建表格
      1、定义表格：<table></table>
      2、创建表行：<tr></tr>
      3、创建列(单元格)：<td></td>


      注：列一定属于行，一个 td 就是一个列也就是一个单元格


      练习：创建一4行4列的表格


    2、表格的属性
      1、table的属性
        1、width：设置表格的宽度
        2、height：设置表格的高度
        3、align：表格的水平对齐方式
        4、border：边框尺寸，以px为单位
        5、bgcolor：背景颜色
        6、cellpadding：设置单元格内边距（单元格边框与内容的距离）
        7、cellspacing：设置单元格外边距（单元格与单元格之间的距离）


      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
          设置单元格跨行


      4、表格的标题
        语法：<caption>标题内容</caption>
        注意：
        1、<caption>最多只能有一个
        2、必须是<table>下的第一行代码


    3、表格的复杂应用
      1、行分组
        为表行（tr）进行分组
        1、表头行分组
          表格中第一行分组的话，可以放在表头行分组
          <thead></thead>
        2、表尾行分组
          表格中最后一行要分组的话，可以放在表尾行分组中
          <tfoot></tfoot>
        3、表主体行分组
          表格中，除第一行和最后一行外其他的行，可以放在表主体行分组中
          <tbody></tbody>


      2、不规则表格
        通过 td 的跨行或跨列属性，实现不规则表格的创建
        1、跨列
          又称为：合并列
          从指定单元格位置处开始，横向向右合并几个单元格（包括自己），被合并掉的单元格要删除出去。
          属性：colspan="列数"
        2、跨行
          又称为：合并行
          属性：rowspan="行数"
      
      3、表格嵌套
        被嵌套的表格，必须放在td中
        <table>
          <tr>
            <td>
              <table>
                <tr>
                  <td>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>




练习心得：
在使用 a 标签时，若点击图片，链接网页时，<a><img src="xxx.jpg"></a>后面的</a>要紧跟img元素，不可空格和换行，不然会出现突出的8px下划线。