web的基础知识2

最新推荐文章于 2022-10-16 22:39:07 发布

做一只向上爬的蜗牛

最新推荐文章于 2022-10-16 22:39:07 发布

阅读量350

点赞数 1

分类专栏：页面简单元素 html 文章标签： web html

本文链接：https://blog.csdn.net/lwq_123456/article/details/78548290

版权

html 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

页面简单元素

4 篇文章 0 订阅

订阅专栏

图像/链接/表格/列表

讲图像之前得聊聊路径（url）,说url就得提到目录了！！！ 1、目录（文件夹） 2、url

路径分为‘绝对路劲’和‘相对路径’；
：绝对路径—-完整路径
：：如果是本机上–》例： C:\Program Files\Intel\Drivers.html
：：互联网资源例： http://avatar.csdn.net/F/9/9/2_lwq_123456.jpg
：相对路径（我用的较多）
资源文件的位置是相对于【当前文件】的位置而查找出来的路径
：：1.资源文件在同级目录直接用
：：2.资源文件在子级目录，先进入再引用
：：3.资源文件在父级，先返回( ../)再引用
../ 表示返回上一级
：：3.根相对路径
：：表示当前web站点在服务器上的根路径
/images/jd_logo.png

2、图像

语法：

      <img src="" title=""/>

属性:
src : 引用的图像的路径(URL),可以是绝对的，相对的，根相对的
可选属性：
width ：宽度
height：高度
title :
1、鼠标移入的时候显示的文本
2、图片不显示的时候，所显示的替代文本
注意：
1、width、height 如果只设置一个属性的话，那么图片会变成等比缩放
2、尽量不去修改宽度和高度
3、链接
用户通过【鼠标点击】的操作能够完成【页面的跳转】就是链接
语法：

     <a href="" target="" name="">链接文本或图像</a>

属性：
href:链接URL（必须）
可选：
target : 目标，即打开新网页的方式.取值：_self:默认值，当前页面打开，_blank:新标签页打开
name : 定义【锚点名称】
链接的表现形式：
1、链接到普通页面

     <a href="http://www.baidu.com">百度</a>

 2、下载文档资源
    在页面中，除 图片、和txt以外的其他内容，都允许被下载

 <a href="资源的路径">内容</a>

 3、电子邮件链接

    <a href="mailto:邮件地址">内容</a>

 4、链接到 Javascript (后期讲解)

    <a href="javascript:js代码">内容</a>

 5、返回页面顶部的空链接

     <a href="#">内容</a>

锚点：
    在网页上任意一个位置去定义一个【标识】，随时随地都可以通过链接【跳转到这个位置】上来
使用方式：
1、定义锚点

<a name="锚点名称"></a>

2、链接到锚点

 <a href="#锚点名称"></a>
      <a href="页面URL#锚点名称"></a>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <p>
            <a href="#NO1">第一章</a>
            <a href="#NO2">第二章</a>
            <a href="#NO3">第三章</a>
            <a href="#NO4">第四章</a>
        </p>
        <p>
            <a name="NO1">第一章 倚天屠龙记</a>
             <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </p>
        <p>
            <a name="NO2"></a>第二章 倚天杀猪记
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </p>
        <p>
            <a name="NO3"></a>第三章 倚天宰羊记
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </p>
        <p>
            <a name="NO4"></a>第四章 倚天途牛记
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </p>
    </body>
</html>

表格

1、表格的作用
表格通常是用来组织结构化信息
表格是有一些被称为【单元格】的矩形框从左到右，从上到下排列到一起组成的。
数据可以保存在单元格中

2、创建表格
语法：
1、表格<table></table>
2、行 <tr></tr> –> Table Row
3、单元格(列) <td></td> –> Table Data
注意：html中的表格，默认情况下，每行的列数都是统一化的。

3、表格的属性

 1、表格属性
    width:宽度
height:高度，以 像素(px)为单位
align:设置表格的对齐方式(left,center,right)
border:边框,设置边框的宽度 px为单位
cellpadding:设置内边距(单元格边框与内容之间的距离)
cellspacing:设置外边距(单元格之间的距离) 以px为单位

 2、行属性
   align:设置 当前行中【内容】的水平对齐方式，取值：left,center,right
valign:设置 当前行中【内容】的【垂直】对齐方式，取值：top,middle,bottom

 3、列(单元格)属性
    width:同行属性值
height:同行属性值
align:同行属性值
valign:同行属性值
colspan:跨列（类型数字，例：2，跨两列）
rowspan:跨行

4、表格的标题
语法：<caption>标题内容</caption>

5、列标题
语法：<th></th> –> table head
注意：级别与 td相同

  1、行分组
     表格可以整体划分成3个部分：表头、表主体、表尾
 表头:`<thead></thead>`
 表主体:`<tbody></tbody>`
 表尾：`<tfoot></tfoot>`
 注意： 每组中，可以包含任意多对 tr

  2、不规则表格
     属性：
    colspan :  跨列,横向向右的合并几个单元格，包含自己（类型数字，例：2，跨两列）
    rowspan :  跨行,纵向向下的合并几个单元格，包含自己

  3、表格的嵌套
     允许在 td 中嵌套另一个表格

2、列表
能够从上到下按照一定的顺序排列内容
列表的组成：
1、列表类型 – 列表长什么样子
2、列表项 – 列表中的内容
语法：
1、列表类型
1、有序列表

       <ol></ol>

2、无序列表

  <ul></ul>

 2、列表项
    要出现在 ol 或 ul 内部

    <li>内容</li>

属性：
   1、有序列表
      type : 列表项类型
     取值:
     1,默认，数字
     a,小写字母
     A,大写字母
     i,小写罗马数字
     I,大写罗马数字
  start : 起始编号
        设置 type 的值从第几位数开始
   2、无序列表
      type : 
    取值：
    disc : 默认，实心圆
    circle : 空心圆
    square : 实现矩形
    none : 无
 使用场合：所有的 从左到右显示的一组数据，或从上到下显示的一组数据，都可以使用列表来做。

 列表的嵌套：
 <ul>
<li>
    <ol>
        <li></li>
    </ol>
</li>
 </ul>

3、自定义列表
根据需求创建一个类似于列表的结构体。
语法：
dl : 声明自定义列表
dt : 定义列表中的一个标题(专业术语)
dd : 定义列表中的对标题的解释或对专业术语的解释。
使用场合：在图文混排的结构中，多数使用 dl,dt,dd 来表示。

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
 </head>

 <body>
    <table width="80%" align="center" border="1px">
        <caption>表-1</caption>
        <tr>
            <td>全月应纳税所得额</td>
            <td>税率</td>
            <td>速算扣除数</td>
        </tr>
        <tr>
            <td>全月应纳税所得额&LT;1500</td>
            <td>3%</td>
            <td>0</td>
        </tr>
        <tr>
            <td>1500=&lt;全月应纳税所得额&lt;4500</td>
            <td>10%</td>
            <td>105</td>
        </tr>
        <tr>
            <td colspan="3">...</td>
        </tr>
        <tr>
            <td colspan="3">计算公式为：  应纳税额＝全月应纳税所得额*适用税率-速算扣除数
</td>
        </tr>
    </table>
    <p></p>
    <table width="40%" align="center">
            <tr>
                <td>
                    <a href="#">关于我们</a>
                </td>
                <td>
                    <a href="#">联系我们</a>
                </td>
                <td>
                    <a href="#">广告服务</a>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    版权
                </td>
            </tr>
        </table>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title> 列表 </title>
  <meta charset="utf-8" />
 </head>

 <body>
   <!-- 自定义列表 图文混排  -->
   <dl>
    <dt>
        <img src="images/jd_logo.png" />
    </dt>
    <dd>
        京东商城 .......
    </dd>
   </dl>
   <!-- 有序列表 -->
   <ol type="I" start="28">
    <li>刘德华</li>
    <li>托塔李天王</li>
    <li>金毛狮王</li>
    <li>隔壁老王</li>
   </ol>
   <!-- 无序列表 -->
   <ul type="none">
    <li>火药</li>
    <li>指南针</li>
    <li>造纸</li>
    <li>印刷术</li>
   </ul>
   <hr>
   <ol>
    <li>
        水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>菠萝</li>
            <li>梨</li>
        </ul>
    </li>
    <li>
        通讯设备
        <ol>
            <li>手机</li>
            <li>BP机</li>
            <li>大哥大</li>
        </ol>
    </li>
    <li>体育活动</li>
   </ol>
   <hr>
   <!-- 创建自定义列表 -->
   <dl>
    <dt>我帅吗?</dt>
    <dd>帅，太帅了， .......</dd>
    <dt>我帅吗?</dt>
    <dd>帅，太帅了， .......</dd>
    <dt>我帅吗?</dt>
    <dd>帅，太帅了， .......</dd>
    <dt>我帅吗?</dt>
    <dd>帅，太帅了， .......</dd>
   </dl>
 </body>
</html>