Web基础知识四之图像、链接、表格和列表

╰半橙微兮° 2022-07-13 09:14 136阅读 0赞

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下划线。