美文网首页
html+css初识(第三节)

html+css初识(第三节)

作者: freeflys | 来源:发表于2018-05-22 09:39 被阅读0次

    本小节主要介绍列表标签,<div>标签,以及<table>标签的使用。下面还是通过一段代码详细了解各个标签的作用:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标签运用</title>
        <style type="text/css">
            table tr td,th{border:1px solid #000;}  <!-- 给表格的每个单元格加边框 -->
        </style>
    </head>
    <body>
    <div id="mm">
        <h2>热门课程排行榜</h2>
        <ul>
            <li>前端开发面试心法 </li>
            <li>零基础学习html</li>
            <li>javascript全攻略</li>
        </ul>
    </div>
    <div id="nn">
        <h2>最新课程排行</h2>
        <ol>
            <li>版本管理工具介绍—Git篇 </li>
            <li>Canvas绘图详解</li>
            <li>QQ5.0侧滑菜单</li>
        </ol>
    </div>
    <div id="tt">
      <table summary="各班学生成绩信息表">
        <tbody>
        <caption>学生成绩表</caption>
        <tr>
            <th>班级</th>
            <th>学生数</th>
            <th>平均成绩</th>
        </tr>
        <tr>
            <td>一班</td>
            <td>30</td>
            <td>89</td>
        </tr>
        <tr>
            <td>二班</td>
            <td>35</td>
            <td>85</td>
        </tr>
        <tr>
            <td>三班</td>
            <td>32</td>
            <td>80</td>
        </tr>
        </tbody>
      </table>
    </div>
    </body>
    </html>
    
    运用效果: example3.png

    ①信息列表标签,分为两种<ul>-<li>无序列表,<ol>-<li>有序列表,<ul>-<li>无序列表在在显示时前面默认有一个小圆点,如上例一的显示效果,而<ol>-<li>有序列表在显示时前面默认排序,序号默认从1开始,效果见上图。
    ②<div>标签,在网页排版中,<div>标签相当于一个容器,可以化分出一个个独立板块,确定逻辑部分,上文运用了三次<div>标签将文段分为了三个模块
    ③给<div>标签设置id,命名。这样能够使逻辑更加清晰,便于后期对每个模块的操作,每一个id都是唯一的。
    ④<table>表格标签,有时候我们想在网页中显示一些清单数据时,可以使用<table>标签来显示,更加清晰。
    <table>规则:以<table>标记开始,</table>标记结束。
    <tbody>标签是负责优先显示性的,作为了解吧。
    <th>...</th>标签:表格头部的一个单元格,表格表头。
    <tr>...</tr>标签:表格的一行,有几对就表示表格有几行。
    <td>...</td>标签:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
    以上就是表格的基本元素,其中表头中的文本在网页中默认粗体,居中显示。
    ⑤给表格加css样式,这里我们为了简单了解在<style>标签中简单设置了表格的边框,后面再做详细认识,效果见上图。
    ⑥<caption>标签:给表格添加标题和摘要。标题位置显示在表格的正上方。摘要:语法:<table summary="表格简介文本"> 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)。

    本小节到此结束。

    相关文章

      网友评论

          本文标题:html+css初识(第三节)

          本文链接:https://www.haomeiwen.com/subject/fpgcjftx.html