页面组件

Posted sui776265233

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面组件相关的知识，希望对你有一定的参考价值。

1 元素的尺寸/边框/背景

1.1 css尺寸相关属性

  • height 高度
  • min-height 最小高度
  • max-height 最大高度
  • width 宽度
  • min-width 最小宽度
  • max-width 最大宽度

1.2 css内边距

  • padding 内边距
  • padding-left 左内边距
  • padding-right 右内边距
  • padding-top 上内边距
  • padding-bottom 下内边距

1.3 边框

  • border border-left|border-right|border-top|border-bottom

    border: 边框宽度  边框样式  边框颜色
  • border-style border-top-style | border-right-style | * border-bottom-style | border-left-style 
    dotted   点线
dashed  虚线
solid      实线
double 双实线
groove 槽状线
ridge     脊线
inset      内嵌效果
outset   外凸效果
  • border-color 边框颜色 border-left-color | border-right-color | border-top-color | border-bottom-color
  • border-width 边框宽度 border-left-width | border-right-width | border-top-width | border-bottom-width
技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志约会</title>
    <style type="text/css">
        .item {                        /*对选择器内的文本内容进行修饰*/
            /*width:300px;*/             /**/
            /*max-width:300px;*/        
            /*设置元素的宽高*/
            /*min-width:300px;*/
            width:600px;
            /*height:400px;*/
            /*background-color: red;*/          /*设置背景颜色*/

            /*border 边框*/           /*是一个符合属性，后可跟 边框的宽度 边框的样式 边框的样式*/           
            /*风格*/
            border-style: solid;       /*设置边框的样式为实线*/
            /*border-style: dashed;      /*设置边框的样式为虚线*/
            /*border-style: double;*/     /*设置边框的样式为双实线*/
            /*颜色*/
            border-color: #f90;    /*设置边框的颜色*/
            /*边框宽度*/
            border-width: 10px;    /*设置边框的宽度*/
            border-width: 1px;     
            /*复合属性*/
            border: 1px solid #369;   /*border是一个符合属性，可以同时设定边框的宽度、边框的样式、边框的颜色*/
        

            /*内边距 padding*/
            padding-left: 20px;     /*设置左内边距的距离*/
            padding-top: 50px;      /*设置内边距距离上边框的距离 */
            padding-right: 100px;   /*设置内边距距离右边框的距离 */
            padding-bottom: 150px;  /*设置内边距距离下边框的距离 */
            padding: 20px;          /*设置内边距距离四条边框的距离相等*/
            padding: 20px 40px;     /*距离上下 左右*/
            padding: 20px 40px 60px;  /*上 左右 下*/
            padding: 10px 20px 30px 40px;  /*上 右 下 左*/
        }
    </style>
</head>
<body>
    <h1>CSS尺寸属性 边框属性 内边距</h1>
    <hr>


    <div id="box" class="item">      <!--设置选择器-->
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <em>同志</em>
</body>
</html>
css尺寸

1.4 背景

  • background

    background:<背景颜色>|<背景图像>|<背景重复>|<背景附件>|<背景位置>

例：background:red url(‘./123.png‘) no-repeat 100px 10px;
  • background-color 设置背景色，或设置为transparent（透明）
  • background-image 背景图片 url 或者 none
  • background-repeat 背景重复 repeat | repeat-x | repeat-y | no-repeat
  • background-attachment 背景附件 scroll | fixed

  • background-position 背景位置

    background-position: 水平方向 垂直方向
background-position:left top;
background-position:100px 100px;

left | center | right (横向) 
top | center | bottom (纵向) 
或者使用百分比或者数值

 

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志约会</title>
    <style type="text/css">
        .item {
            /*边框设置*/
            width: 600px;      /*背景*/
            height: 300px;   /*背景*/
            border: 2px solid #f90;   /*背景*/

            /*设置背景颜色以及背景图片*/
            /*背景颜色*/
            background-color: pink;
            /*背景图片*/
            background-image: url("../../dist/images_two/fenju.jpg");
            /*背景图片平铺设置*/
            background-repeat: repeat;  /*默认平铺*/
            background-repeat: no-repeat; /*背景图片不平铺，图片只会在占用框内一块区域*/
            /*background-repeat: repeat-x; 
            background-repeat: repeat-y;*/    /*背景图片沿着y轴进行平铺*/
            /*背景图片 的位置*/
            background-position: left top;    /*背景*/
            background-position: left center;   /*背景*/
            background-position: center center;      /*将背景图片进行居中*/
            /*background-position: 10px 10px;       /*以边框的左上角为圆心，向左为x轴正，向下为y轴正*/*/

            /*背景图片固定*/
            /*background-attachment: fixed;*/       /*背景*/

            /*复合属性*/
            background: #ccc url(‘../../dist/images_two/bg02.jpg‘) no-repeat 10px 10px;   /*.代表的当前文件所在的文件夹，..代表的是当前文件所在文件夹的上一级文件夹，设置背景为灰色，并插入一张图片，且不平铺，图片距离边框左上的距离均为10*/

        }


        #nav {
            height: 300px;     /*指定插入图片的高度，宽度没有指定会默认以接近屏幕的宽度来将图片*/   

            background-image: url(‘../../dist/images_two/bg02.jpg‘); /*背景*/
            /*background-attachment: fixed;  背景图像相对于视口（viewport）固定。 也就是图片被固定在屏幕上，滑动滚动条可以看到背景图片位置始终没有变*/
            background-attachment: scroll;  /*背景图像相对于元素固定，也就是说当元素内容滚动时背景图像也会跟着滚动*/
        }
    </style>
</head>
<body>
    <h1>背景属性</h1>
    <hr>
    <div id="nav"></div>

     <div class="item"></div> <!--设置选择器 --> 

     <!-- <div style="height:2000px"></div>  -->
</body>
</html>
背景
技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志去钓鱼</title>
    <style type="text/css">
        .reg_btn {
            /*设置背景图片框的大小，即框的宽和高以及框的样式：宽度、虚实线、颜色*/
            width:120px;
            height:30px;
            border: 1px solid #ccc;

            /*设置背景图片：地址、不能重复、位置*/
            background-image: url("../../dist/images_two/loginlist.png");
            background-repeat: no-repeat;
            background-position: -1px -43px;
        }

        .login_btn {

            width: 120px;
            height: 40px;
            border: none;

            /*复合属性，将三个属性的值写到一个复合属性得值中*/
            background: url("../../dist/images_two/loginlist.png") no-repeat -1px -76px;
        }

        /*a 选择器 可以定位到a的超链接*/
        a {
            display: block;
            width: 20px;
            height: 18px;
            /*border: 1px solid #ccc;*/

            /*精灵图*/
            background: url("./loginv4.png") no-repeat -30px -30px;
        }
    </style>
</head>
<body>
    <h1>CSS 精灵图</h1>
    <hr>

    <button class="reg_btn"></button>

    <br>

    <!-- <button class="login_btn"></button> -->


    <br>

    <a href="http://www.qq.com"></a>


</body>
</html>
应用：精灵图

2 超链接和锚点

2.1 超链接

<a href=‘要跳转的地址‘>超链接文字</a>

a标签的属性

  • href -- 代表一个url链接源(就是链接到什么地方)

    url除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。 
url还可以是指向HTML文件中的一个位置。 
url还可以是Email地址。

  • target -- 用来指出哪个窗口或框架应该被此链接打开

    target=_blank： 将链接内容在新的浏览窗口中打开。 
target=_self：  将链接的内容，显示在目前的窗口中。 
target=_parent：将链接的内容，当成文件的上一个画面。 
target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。

  • title -- 代表链接的附加提示信息

  • download HTML5新添加属性 表示下载

超链接范例

网站链接：     <a href="http://www.oldboy.cn">Python专家</a>
电子邮件链接： <a href="mailto:[email protected]">写信给我</a>
电话             <a href="tel:10086">10086</a>
短信          <a href="sms:10086">发短息给我</a>

路径

  • 文档相对路径（例如 adver/contents.html）
  • 绝对路径（例如 http://www.sohu.com/index.html）
  • 站点根目录相对路径（例如 /support/app/customer.html，其中“/”表示根目录）
技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志链接</title>
</head>
<body>
    <h1>超链接</h1>
    <hr>


    <a href="http://www.taobao.com" title="超链接的附加信息" target="_blank">淘宝</a> <br>  <!--title是添加超链接的附加信息-->
    <a href="http://www.jd.com" target="_blank">京东</a> <br>  <!--target="_blank"是点击该超链接会在新的窗口进行打开-->
    <a href="https://www.baidu.com/img/dong_76e40b922934aed1b944458c58a8c0ef.gif">图片</a> <br>
    <a href="https://www.baidu.com/img/dong_76e40b922934aed1b944458c58a8c0ef.gif" download>下载图片</a> <br> 

    <a href="./loginv4.zip">下载</a>

    <hr>

    <!--打开网页-->
    <a href="http://www.jiaoliu.com">交流网</a> <br>
    <!--发邮件-->
    <a href="mailto:[email protected]">发邮件</a> <br>
    <!--打电话-->
    <a href="tel:18618176338">打电话</a> <br>
    <!--发短信-->
    <a href="sms:18618176338">发短信</a>


    <hr>

    <!--相对路径-->
    <a href="./03-精灵图.html">精灵图</a>

</body>
</html>
超链接

鼠标光标设置 （CSS属性）

  • cursort

    text  文字选择器
crosshair   十字架
wait  等待
help  帮助
pointer 小手

 

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠标属性</title>
    <style type="text/css">
        html {
            height: 100%;
            cursor: wait;    /*s鼠标移动到html页面的其他地方出现转圈等待*/
        }
        h1 {
            cursor: pointer;    /*当鼠标移动到标题一时，鼠标箭头变为小手*/
            cursor: move;     /*当鼠标移动到标题一时，鼠标箭头变为十字形*/
        }
    </style>
</head>
<body>
    <h1>鼠标属性</h1>
    <hr>

    <a href="./06-锚点.html#xihao" target="_blank">06</a>


</body>
</html>
鼠标属性

2.2 锚点

用<a name=“”>定义，例如：<a name=“here1”>第一部分</a>，
使用<a href=“#here1”>跳转到第一部分</a>超链接就可以定位到网页中的“第一部分”这个位置。

锚点的跳转
使用#  <a href="#锚点名">跳转</a>
跳转到指定页面指定锚点  http://www.lampuser.com/index.html#section2
技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志锚点</title>
</head>
<body>
    <h1>锚点</h1>
    <!--通过<a href="#锚点名">跳转</a>跳到指定的锚点名-->
    <a href="#jieshao">同志介绍</a> <br>
    <a href="#lvli">同志履历</a> <br>
    <a href="#xihao">同志喜好</a> <br>
    <a href="#zhixiang">同志志向</a> <br>
    <a href="#nihao">同志你好</a> <br>
    <hr>

    <div style="height:600px"> 
        <!--添加锚点-->
        <!--通过<a name=“”>定义锚点-->
        <a name="jieshao"></a>
        <h2>同志介绍</h2>
    </div>

    <div style="height:600px"> 
        <a name="lvli"></a>
        <h2>同志履历</h2>
    </div>

    <div style="height:600px"> 
        <a name="xihao"></a>
        <h2>同志喜好</h2>
    </div>

    <div style="height:600px" id="zhixiang"> 
        <h2>同志志向</h2>
    </div>

    <div style="height:600px" id="nihao"> 
        <h2>同志你好</h2>
    </div>

    <hr>

    <a href="#">返回顶部</a>
</body>
</html>
锚点

2.3 URL

URL(Uniform Resoure Locator)，统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的组成

http://www.fuming.com/product/news/add?name=xiaolili&age=10#section1
  • protocol 协议，常用的协议是http
  • hostname 主机地址，可以是域名，也可以是IP地址
  • port 端口 http协议默认端口是：80端口，如果不写默认就是:80端口
  • path 路径 网络资源在服务器中的指定路径
  • query 查询字符串 如果需要从服务器那里查询内容，在这里编辑
  • hash 锚点部分，指向页面中的某个位置

3 图片

3.1 img 标签

<img src="图片地址" title="" alt="">

属性

  • alt -- 代表图像的替代文字
  • src -- 代表一个图像源(就是图像的位置)
  • title 提示信息
  • border – 代表图片边框的宽度
  • height -- 代表一个图像的高度
  • width -- 代表一个图像的宽度
  • usemap 将图像定义为客户器端图像映射。

常见图片格式

  • GIF -- 最多支持256色,支持透明,支持多帧动画显示效果.
  • JPEG -- 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.
  • PNG -- 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.
技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志图片</title>
    <style type="text/css">
        .my-img {
            width: 200px;
        }

        .item {
            width: 200px;
            height: 300px;
            background: url("../../dist/images_one/3.jpg");      
            background-size:100% 100%;
        }
    </style>
</head>
<body>
    <h1>img元素</h1>
    <hr>

    <img class="my-img" src="../../dist/images_one/3.jpg" alt="苍老师的写真" title="老师的写真">     <!--title属性的值会在鼠标放到图片上时可以看到，alt作用：如果无法显示图像，浏览器将显示替代文本即苍老师的写真-->

    <br>

    <div class="item">      <!--我们可以在背景图片上添加文字-->
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        
    </div>

</body>
</html>
图片

3.2 图像映射

<img src="planets.gif" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
  <area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
  <area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>

map标签

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

area标签

  • alt 规定区域的替代文本。如果使用 href 属性，则该属性是必需的。
  • href URL 规定区域的目标 URL。
  • coords 规定区域的坐标。

  • shape 规定区域的形状

    rect  矩形
circle 圆形
poly  多边形
  • target -- 用来指出哪个窗口或框架应该被此链接打开
技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片映射</title>
    <style type="text/css">
        .my-img {
            width: 550px;
        }

        area {
            /*outline: none;*/
        }
    </style>
</head>
<body>
    <img src="../../dist/images_one/10.jpg" class="my-img" usemap="#mymap">
       
    <map name="mymap" id="mymap">            <!--map可以实现将图片中指定的一块区域映射到一个网址，通过点击图片中的不同位置跳转到不同的位置-->
        <area shape="rect" coords="245,168,311,220" title="鼻子" target="_blank" href="https://baike.baidu.com/item/%E9%BC%BB/13024143?fromtitle=%E9%BC%BB%E5%AD%90&fromid=3122">
        <area shape="circle" coords="214,164,30" title="眼睛" href="https://baike.baidu.com/item/%E7%9C%BC%E7%9D%9B/362" target="_blank">
        <area shape="poly" coords="242,280,362,253,317,301" title="下巴" target="_blank" href="https://baike.baidu.com/item/%E4%B8%8B%E5%B7%B4">
    </map>
</body>
</html>
图片映射

4 列表

4.1 HTML列表标签

  • <ul></ul> 代表HTML无序列表 ，里面每一列表项使用<li>标签定义

  • <ol></ol> 代表HTML有序列表 ，里面每一列表项使用<li>标签定义

    属性
start 规定有序列表的起始值。
type   规定在列表中使用的标记类型。(1 a A  i  I)
reversed  H5新添加 降序

  • <li></li> 代表HTML列表项目，每个列表项使用一对<li></li>标记

  • <dl></dl> 定义了定义列表（definition list）

  • <dt></dt> 标签定义了定义列表中的项目（即术语部分）

  • <dd></dd> 在定义列表中定义条目的定义部分。

技术分享图片 
<ul>
    <li>是打发斯蒂芬</li>
    <li>是打发斯蒂芬</li>
    <li>是打发斯蒂芬</li>
    <li>是打发斯蒂芬</li>
    <li>是打发斯蒂芬</li>
    <li>是打发斯蒂芬</li>
</ul>
列表标签

4.2 CSS列表属性

  • list-style-type

    disc         实心点
circle       圆圈
square       小方框
decimal      数字
lower-roman  小写罗马字
upper-roman  大写罗马字
lower-alpha  小写字母
upper-alpha  大写字母

  • list-style-position 位置

    inside   标示在li里面
outside  标示在li外面

  • list-style-image 使用图片 url(./123.gif)

  • list-style 复合属性 
    list-style: type position image
list-style: none

 

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style>
        ul {
            /*列表项 符号(下面俩表中添加的符号分别是小圆圈、小黑方块、小写罗马数字、大写罗马数字、小写字母、不指定符号)*/
            /*list-style-type: circle;   
            list-style-type: square;
            list-style-type: lower-roman;
            list-style-type: lower-roman;
            list-style-type: none;*/
        
            /*符号的位置*/
            /*list-style-position: outside;*/   /*不设置默认就是outside*/
            list-style-position: inside;     /*给列表添加上符号后会有个整体往后移的效果*/

            /*把符号变为图片*/
            list-style-image: url(‘../../dist/images_two/bullet.gif‘);


            /*复合属性-----一般设置为none就可以了*/
            list-style: circle inside;
            list-style: none;
        }

        ul li {
            /*border: 1px solid #ccc;*/
        }

        ul li:first-child{
            list-style:circle inside;   /*将列表中的第一行添加上符号*/
        }

        ol {
            list-style: none;/*将有序列表变为无序的列表*/
        }
    </style>
</head>
<body>
    <h1>同志加油</h1>
    <hr>
    
    <h2>无序列表 -- 同志列表</h2>
    <ul>
        <li>曹操</li>
        <li>诸葛亮</li>
        <li>刘备</li>
        <li>贾宝玉</li>
        <li>西门庆</li>
    </ul>

    
    <hr>
    <h2>有序列表 -- 同志人气排名</h2>
    <!--我们也可以直接在有序标签ol内直接指定符号的类型，以及按照正序或者反序-->
    <ol type="I" reversed>
        <li>金三胖</li>
        <li>金四胖</li>
        <li>金五胖</li>
        <li>金七胖</li>
        <li>金正日</li>
    </ol>

    <hr>

    <h2>定义列表 -- 前端需要学习的指示</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>javascript</dt>
        <dd>浏览器端脚本语言</dd>
    </dl>
</body>
</html>
列表属性

5 表格

5.1 HTML表格标签

  • <table></table>
  • <caption></caption> 定义表格标题
  • <thead></thead>
  • <tfoot></tfoot>
  • <tbody></tbody>
  • <tr></tr> 行
  • <th></th> 表头单元格
  • <td></td> 单元格

5.2 CSS表格属性

  • table-layout 表格布局方式

    auto(默认)  布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢 
fixed       平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切

  • border-collapse 表格的行和单元格的边是合并还是独立

    separate (默认)  独立
collapse  合并

  • border-spacing 当表格边框独立时，行和单元格的边框在横向和纵向上的间距

  • caption-side caption 在table上面还是下面

    top    
bottom

  • empty-cells 没有内容的单元格隐藏还是显示

    show (默认)
hide

 

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        table {
            width: 600px;
            /*height: 600px;*/
            border: 1px solid #999;
            
            /*表格专用css属性*/
            table-layout: fixed; /*固定每一列的宽度  等宽*/
            /*border-collapse: collapse; 合并单元格边框*/
            
            /*默认是不合并单元格*/
            border-collapse: separate;   
            border-spacing:5px; /*单元格和单元格的空隙 前提是单元格边框不能合并*/
            
            caption-side: top;     /*表示标题在上面.---默认就是在上方的*/        
            /*    caption-side: bottom;    */
            

            empty-cells: show;  /*显示空的单元格*/
            empty-cells: hide;  /*隐藏空的单元格 生效的前提，不能合并单元格边框*/

        }
        td,th {
            padding: 5px;
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <h1>同志交友</h1>
    <hr>

    <!--table-->
    <table class="first-table">
        <caption>同志信息统计</caption>
        <!--表格 头部，-------出现在表头的上方-->
        <thead>
            <!--行 tablerow  包含表头单元格-->
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>身高</th>
                <th>体重</th>
                <th style="width:200px">饭量</th>
            </tr>
        </thead>


        <!--向表格中添加记录-->
        <tbody>
            <!--行 tablerow 包含普通单元格-->
            <tr>
                <td>1</td>
                <td>曹操</td>
                <td>16</td>
                <td>165</td>
                <td>80</td>
                <td>一头牛</td>
            </tr>

            <tr>
                <td>2</td>
                <td></td>
                <td>15</td>
                <td>165</td>
                <td>80</td>
                <td>一头羊</td>
            </tr>

            <tr>
                <td>3</td>
                <td>曹汝霖</td>
                <td>16</td>
                <td>165</td>
                <td>80</td>
                <td>一头猪</td>
            </tr>

            <tr>
                <td>4</td>
                <td>曹冲</td>
                <td>12</td>
                <td>165</td>
                <td>80</td>
                <td>一头大象和一头犀牛以及一头河马</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <!--合并列单元格，合并几个值就设置为几个-->
                <td colspan="7">统计：共计4人</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
表格1

5.3 合并单元格

给<td> 或者 <th> 设置属性 rowspan 和 colspan

rowspan  合并行
colspan  合并列
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        table {
            width: 600px;
            /*table-layout: fixed;*/
            border-collapse: collapse;
        }
        td,th {
            border: 1px solid #999;
            padding: 5px;
            text-align: center;  /*将单元格内的文本进行居中*/
        }
        table tr {
            height: 40px;
        }
    </style>
</head>
<body>
    <h1>同志交友</h1>
    <hr>

    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>饭量</th>
        </tr>

        <tr>
            <td>1</td>
            <td rowspan="2">李白</td>
            <td>19</td>
            <td>一只鸡</td>
        </tr>


        <tr>
            <td>1</td>
            
            <td>19</td>
            <td>一只鸡</td>
        </tr>


        <tr>
            <td>1</td>
            <td>李白</td>
            <td>19</td>
            <td>一只鸡</td>
        </tr>


        <tr>
            <td>1</td>
            <td colspan="3">李白</td>
            
        </tr>
    </table>


    <hr>

    <table>
        <caption><h2>同志信息</h2></caption>
        <tr>
            <th>姓名</th>
            <td></td>
            <th>年龄</th>
            <td></td>
        </tr>

        <tr>
            <th>性别</th>
            <td></td>
            <th>饭量</th>
            <td></td>
        </tr>

        <tr>
            <th>自我介绍</th>
            <td colspan="3"></td>
        </tr>

        <tr>
            <th rowspan="6" colspan="2">工作经历</th>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"> </td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        <!-- </tr> -->
    </table>
</body>
</html>
合并单元格

6 表单

6.1 表单相关标签

  • <form></from> 定义一个 HTML 表单，用于用户输入。

    属性
action
method  
    get   
    post
enctype
    multipart/form-data(有文件表单时候，必须使用这个)
    application/x-www-form-urlencoded
target

  • <input> 定义一个输入控件

    属性
name  必须有，否则数据无法传递
type  text、password、radio、hidden、checkbox、submit、image、file、reset、button、submit、email、number、color等

  • <button></button> 定义按钮

    属性
type  submit、reset、submit
name

  • <select></select> 定义选择列表（下拉列表）

    属性
disabled  禁用
name      必须有
multiple  多选,默认会显示所有,名字要使用数组like[]
size      显示几个下拉

  • <option></option> 定义选择列表中的选项。

    属性
value   提交的值，若没有，则提交内容
selected  定义选中项
disabled  选项禁用

  • <optgroup></optgroup> 把相关的选项组合在一起

    属性
disabled  规定禁用该选项组。
label    为选项组规定描述。

  • <textarea></textarea>

    属性
cols  可见宽度
rows  可见行数
readonly  文本区只读
name  必须有
disabled  禁用

  • <label> 定义 fieldset 元素的标题。

  • <fieldset></fidldset> 定义围绕表单中元素的边框

  • <legend></legend> 定义 fieldset 元素的标题。

6.2 表单组成控件

文本输入框

<input type="text" name="username">
<input type="text" name="username" placeholder="请输入用户名">
<input type="text" name="username" value="李大钊">
<input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15">

密码框

<input type="password" name="pwd">
<input type="password" name="pwd" placeholder="请输入密码">
<input type="password" name="pwd" placeholder="请输入密码" maxlength="12">

单选按钮

<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">男

复选框

<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 
<input type="checkbox" name="hobby" value="baseball"> 棒球

文件选择框

<input type="file" name="pic">
<input type="file" name="pics" multiple>  <!--选择多个文件-->

规定类型的文本输入框（HTML5新增）

<!--邮箱-->
<input type="email" name="email" placeholder="请输入邮箱">

<!--url-->
<input type="url" name="url" placeholder="请输入网址">

<!--数字-->
<input type="number" name="num">
<input type="number" name="num" min=‘10‘ max=‘100‘ step=‘10‘>

<!--搜索框-->
<input type="search" name="kw" placeholder="搜索">

<!--电话号码 同于text  但是用移动设备，会直接弹出数字键盘-->
<input type="tel" name="tel_num" placeholder="请输入电话号码">

范围选择框(HTML5新增)

<input type="range" name="range">
<input type="range" name="range" value="80">
<input type="range" name="range" value="80" max="100" min="0">

颜色选择框(HTML5新增)

<input type="color" name="color">

时间日期选择框(HTML5新增)

<input type="date" name="date">
<input type="month" name="month">
<input type="week" name="week">
<input type="time" name="time">
<input type="datetime" name="datetime">
<input type="datetime-local" name="datetime">

下拉选项

<select name="major">
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine" selected>医学</option>
    <option value="Architecture">建筑学</option>
    <option value="Biology">生物学</option>
</select>

<!--多选-->
<select name="major" multiple>
    <option value="computer">计算机</option>
    <option value="archaeology">考古学</option>
    <option value="medicine">医学</option>
    <option value="Architecture">建筑学</option>
    <option value="Biology">生物学</option>
</select>

多行文本输入

<textarea name="content"></textarea>
<textarea name="content" cols="30" rows="10"></textarea>

按钮

<!--提交按钮-->
<input type="submit" value="提交">
<button>提交</button>
<button type="submit">提交</button>

<!--重置按钮-->
<input type="reset" value="重置">
<button type="reset">重置</button>

<!--普通按钮-->
<input type="button" value="按钮">
<button type="button">按钮</button>
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <h1>同志的表单</h1>
    <hr>
    

    <!--表示表单 设置一些属性-->
    <form action="1.php" method="get" enctype="type/form-data">
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <!--文本输入框-->
                    <!--title输入的不符合规范时就会报title值得提示信息，pattern是指定正则表达式的值，对用户输入的内容进行约束，maxlength是设置用户最多能输入多少个字，超过上限就不让用户再输入内容，requied要求用户提交之前必须输入内容，否则提交不了-->
                    <input type="text" name="username" placeholder="请输入用户名" maxlength="10" required  pattern="w{3,5}" title="请输入3到5位">
                </td>
            </tr>

            <tr>
                <td>密码：</td>
                <td>
                    <!--密码框-->
                     <input type="password" name="pwd" placeholder="请输入密码">
                </td>
            </tr>

            <tr>
                <td>性别</td>
                <td>
                    <!--单选按钮-->
                    <!--radio的值代表的是单选按钮，type的值必须相同，name的值也必须相同，保证我们只能选择其中的一个，checked是默认选项即设置为默认被选中，我们也可以给每个input设置required这样就保证用户必须选中一个才能进行提交-->
                    <input type="radio" name="sex" value="male">男
                    <input type="radio" name="sex" value="female">女
                    <input type="radio" name="sex" value="else" checked>其他
                </td>
            </tr>

            <tr>
                <td>爱好</td>
                <td>
                    <!--复选框-->
                    <!--type 的值必须相同，-->
                    <input type="checkbox" name="hobby" value="eat"> 吃
                    <input type="checkbox" name="hobby" value="drink" checked> 喝
                    <input type="checkbox" name="hobby" value="sleep" checked> 睡
                    <input type="checkbox" name="hobby" value="play"> 玩
                </td>
            </tr>

            <tr>
                <td>请选择文件</td>
                <!--multiple设置可以通过ctrl加鼠标选中多个文件-->
                <td>
                    <input type="file" name="avator" multiple>
                </td>
            </tr>

            <tr>
                <td>邮箱</td>
                <!--必须输入正确的邮箱格式，否则会提示必须输入带有什么样的字样的邮箱，required设置邮箱为必填-->
                <td>
                    <!--指定输入 的是邮箱   h5-->
                    <input type="email" name="email" placeholder="请输入邮箱" required>
                </td>
            </tr>

            <tr>
                <td>URL</td>
                <!--输入的网址必须合法否则也提交不了，即要以http开头-->
                <td>
                    <!--指定输入的URL  H5-->
                    <input type="url" name="url" placeholder="请输入网址">
                </td>
            </tr>

            <tr>
                <td>分数</td>
                <!---->
                <!--输入的不是数字连输都不让输，max、min、step指定输入的数字必须是在某个范围内，以及步长-->
                <td>
                    <!--指定输入的是数字  H5 指定数字的范围-->
                    <input type="number" name="score" max="1000" min="0" step="0.1" placeholder="请输入数字">
                </td>
            </tr>

            <tr>
                <td>搜索</td>
                <td>
                    <!--搜索框-->
                    <input type="search" name="wd">
                </td>
            </tr>

            <tr>
                <td>电话</td>
                <!--没有数字的限制-->
                <td>
                    <!--电话号码 PC同text  手机 弹出数字输入框-->
                    <input type="tel" name="phonenum" placeholder="请输入电话">
                </td>
            </tr>

            <tr>
                <td>范围选择</td>
                <!--就是一个可以通过鼠标移动的滑动条，value的值是设置滑动条起始的位置，step是设置滑动条移动的步长，-->
                <td>
                    <!--范围选择框-->
                    <input type="range" name="range" max="100" min="0" value="20" step="1" oninput="output.value=range_input.value" id="range_input">
                    <output id="output"></output>
                </td>
            </tr>

            <tr>
                <td>颜色</td>
                <!--默认的是黑色我们可以点击黑色小方框选择不同的颜色-->
                <td>
                    <!--颜色选择-->
                    <input type="color" name="color">
                </td>
            </tr>

            <tr>
                <td>时间日期</td>
                <td>
                    <!--日期------显示年、月、日-->
                    <input type="date" name="date">

                    <!--月份-----只能显示年、月-->
                    <input type="month" name="month">

                    <!--星期----显示年和第多少周-->
                    <input type="week" name="week">

                    <!--时间----显示时、分不会显示秒-->
                    <input type="time" name="time">

                    <!--时间日期----显示年、月、日、时、分-->
                    <input type="datetime-local" name="dt">
                </td>
            </tr>

            <tr>
                <td>
                    专业
                </td>
                <!--就是一个很常用的下拉选项，点击下拉选框可以展示所有可选的内容，选择我们需要的即可-->
                <td>
                    <!--下拉选项-->
                    <select name="zhuanye">
                        <option value="computer">计算机</option>
                        <option value="kaogu">考古</option>
                        <option value="makefood">厨师</option>
                        <option value="wajueji" selected>挖掘机</option>
                        <option value="meirongmeifa">美容美发</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>自我介绍</td>
                <!--rows当输入的行数大于4行时，文本框右侧就会出现滑动条，cons控制的每行最多输入的字符数，maxlength控制的是输入的总字符数的长度-->
                <td>
                    <!--多行文本输入-->
                    <textarea name="content" rows="4" cols="60" placeholder="请输入自我介绍" maxlength="10"></textarea>
                </td>
            </tr>

            
            <tr>
                <td>提交按钮</td>
                <td>
                    <input type="submit" value="提 交">
                    <button>提 交</button>
                    <button type="submit">提 交</button>
                </td>
            </tr>
     
            <tr>
                <td>重置按钮</td>
                <!--将输入的内容进行重置至初始状态，重置有两种方法：一种是通过input，另外一种是通过button来设置-->
                <td>
                    <input type="reset" value="重 置">
                    <button type="reset">重 置</button>
                </td>
            </tr>
            <tr>
                <td>普通按钮</td>
                <!--就是一个普通的按钮没有提交和重置的效果,也有两种设置方法-->
                <td>
                    <input type="button" value="普通按钮">
                    <button type="button">普通按钮</button>
                </td>
            </tr>


        </table>
        

    </form>
</body>
</html>
表单
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <h1>同</h1>
    <hr>
    

    <!--设置表单的宽度400，会有一默认的宽度，设置的宽度过小会以默认的宽度计算，fieldlist对表单中的相关元素进行分组，legend设置表单框上显示的字符，即<legend> 标签为 <fieldset> 元素定义标题。
    autocomplete：
    有两个值on/off，默认是on，当我们向表单中输入内容是会被记录下来，下次再输入是点表单框会出现之前输入过的内容，设置为off后就不会再点表单框就不会有显示
    

    autocomplete 属性规定输入字段是否应该启用自动完成功能。
    自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
    注意：autocomplete 属性适用于下面的 -----------------<input> 类型：text、search、url、tel、email、password、datepickers、range 和 color。-->
    <form action="1.php" style="width:400px">
        <fieldset>
            <legend>注册</legend>

            username: <input type="text" name="username" autocomplete="off"> <br>
            password: <input type="password" name="pwd"> <br>
            <button>提交</button>
        </fieldset>
    </form>
    
    <hr>    
    <br>    
    <br>    
    <br>    
    <br>    


    <!--
    autofocus 属性是一个布尔属性。
    autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。

    <datalist> 标签规定了 <input> 元素可能的选项列表。
    <datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
    请使用 <input> 元素的 list 属性来绑定 <datalist> 元素中的id。-->
    <form action="http://www.baidu.com/s">
        <input type="text" name="wd" list="mylist" autofocus>
        <datalist id="mylist">
            <option value="abc"></option>
            <option value="ab"></option>
            <option value="abcd"></option>
            <option value="bc"></option>
            <option value="bcd"></option>
        </datalist>

        <button>搜索</button>


    </form>
</body>
</html>
表单应用

6.3 表单中其他标签

field/legend

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

datalist(新增)

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

6.4 表单输入内容的智能验证(H5新增)

required 必填

给所有可输入的控件 添加 required属性，表示必填

指定类型验证

Input:email 、input:url、input:number 会自动验证类型

pattern 正则

<input type="text" pattern="w{4,6}">
<input type="text" pattern="d{4,6}" title="必须是4~6位数字">

6.5 表单控件相关属性

  • disabled 表示不可用 用于所有的表单控件

  • enabled 表示可用 用于所有的表单控件

  • readable 表示只读 用于可输入的表单控件

  • autofocus 自动获取焦点 所有表单控件

  • autocomplete 值on/off 用于可输入的控件 是否自动填充内容

  • pattern 正则验证 可输入的控件

  • required 必填

                              |

7 音频/视频 (HTML5新增)

7.1 HTML标签

  • <video></video> 定义视频

    | 属性     | 值                  | 描述                                                   
| -------- | ------------------ | ------------------------------------------------------
| autoplay | autoplay           | 如果出现该属性，则视频在就绪后马上播放。                     
| controls | controls           | 如果出现该属性，则向用户显示控件，比如播放按钮。              
| height   | pixels             | 设置视频播放器的高度。                                   
| loop     | loop               | 如果出现该属性，则当媒介文件完成播放后再次开始播放。           
| muted    | muted              | 如果出现该属性，视频的音频输出为静音。                     
| poster   | URL                | 规定视频正在下载时显示的图像，直到用户点击播放按钮。         
| preload  | auto metadata none | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 
| src      | URL                | 要播放的视频的 URL。                                    
| width    | pixels             | 设置视频播放器的宽度。

  • <audio></audio> 定义音频

    | 属性      | 值                 | 描述                                                       
| -------- | ------------------ | ----------------------------------------------------------
| autoplay | autoplay           | 如果出现该属性，则音频在就绪后马上播放。                    
| controls | controls           | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 
| loop     | loop               | 如果出现该属性，则每当音频结束时重新开始播放。              
| muted    | muted              | 如果出现该属性，则音频输出为静音。                          
| preload  | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。        
| src      | URL*               | 规定音频文件的 URL。
  • <source></source>为媒体元素（比如 <video> 和 <audio>）定义媒体资源 
    | 属性   | 值            | 描述                                       
| ----- | ------------- | ------------------------------------------ 
| media | media_query   | 规定媒体资源的类型，供浏览器决定是否下载。 
| src   | URL           | 规定媒体文件的 URL。                       
| type  | MIME_type     | 规定媒体资源的 MIME 类型。

7.2 视频

支持的视频类型

浏览器MP4WebMOgg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始 YES YES
Safari YES NO NO
Opera YES 从 Opera 25 版本开始 YES YES
  • MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

视频格式的MIME类型

格式MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开

7.3 音频

支持的音频格式

浏览器MP3WavOgg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

音频格式MIME类型

格式MIME-type
MP3 audio/mp3
Wav audio/wav
Ogg audio/ogg
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频 视频</title>
    <style>
        video {
            width: 500px;
        }
    </style>
</head>
<body>
    <h1>同志 视频</h1>
    <hr>
    <!--将视频播放设置为自动循环播放。poster设置视频播放前的初始界面图片-->
    <video src="../../dist/media/mv01.mp4" controls autoplay loop poster="../../dist/images_one/10.jpg"></video>

    <!--将音频设置为自动播放-->
    <audio src="../../dist/media/music.mp3" controls autoplay></audio>
    <hr>

    <video>
        <!--选择其中可以播放的格式类型进行播放-->
        <source src="../../dist/media/mv01.mp4" type="video/mp4">
        <source src="../../dist/media/mv01.ogg" type="video/ogg">
        <source src="../../dist/media/mv01.webm" type="video/webm">
    </video>
</body>
</html>
视频、音频

 

?

以上是关于页面组件的主要内容，如果未能解决你的问题，请参考以下文章

React 函数组件与class组件的区别

React 函数组件与class组件的区别

VsCode 代码片段-提升研发效率

asp.net页面实用代码片段

使用 Apollo 客户端的片段组合：约定和样板

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面