美文网首页设计师学前端
设计师学习HTML/CSS之路-03

设计师学习HTML/CSS之路-03

作者: HU_Wei | 来源:发表于2018-08-19 14:43 被阅读1次

不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start!

第3章 认识标签(第二部分)

3-1 ul无序列表标签

语法:

<ul>

<li>列表</li>

<li>列表</li>

</ul>

解释:

unordered list 无序列表

<ul>
<li>列表</li>
<li>列表</li>
</ul>

3-2 ol有序列表标签

语法:

<ol>

<li>列表</li>

<li>列表</li>

</ol>

解释:

ordered list有序列表

<ol>
<li>列表</li>
<li>列表</li>
</ol>

3-3 div在排版中的作用

语法:

<div>标签内容</div>

解释:

division <div>相当于一个容器,划分网页中的各个逻辑部分

3-4 给div命名

image

语法:

<div id="cats">..</div>

3-5 table标签

创建表格的四个要素

<table>...</table> 开始与结束标签

<tbody>...</tbody> 优先显示表格结构,也可以将表格一部分一部分分开

<tr>...</tr> 表格的一行

<td>...</td> 表格的一个单元格(单元格的数量决定了表格有多少列)


<th></th>表格的头部单元格,表格表头

<table>
 <tbody>
   <tr>
     <th>标题一</th>
     <th>标题二</th>
     <th>标题三</th>
   </tr>
   <tr>
     <td>单元格1</td>
     <td>单元格2</td>
     <td>单元格3</td>
   </tr>
   <tr>
     <td>单元格1</td>
     <td>单元格2</td>
     <td>单元格3</td>
   </tr>
 </tbody>
</table>

<table>
<tbody>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</tbody>
</table>

3-6 用css样式,加入边框

Table 表格在没有添加 css 样式之前,是没有边框的.

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

3-7 caption标签,为表格添加标题和摘要

表格还是需要添加一些标签进行优化,可以添加标题摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法:

<table summary="表格简介">

标题用以描述表格内容,标题的显示位置:表格上方。

语法:
<caption>标题文本</caption>
<table>
    <caption>标题文本</caption>
    <tr>
        <th>…</th>
        <th>…</th>
        …
    </tr>
…
</table>

<table>
<caption>这是表格的标题</caption>
<tr>
<th>标题一</th>
<th>标题二</th>
</tr>
… <tr>
<td>内容一</td>
<td>内容二</td>
</table>

相关文章

  • 设计师学习HTML/CSS之路-03

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第3章 认识标签(...

  • 设计师学习HTML/CSS之路-02

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第2章 认识标签(...

  • 设计师学习HTML/CSS之路-04

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第4章 认识标签(...

  • 设计师学习HTML/CSS之路-05

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第5章 与浏览者交...

  • 设计师学习HTML/CSS之路-09

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第9章 CSS的继...

  • 设计师学习HTML/CSS之路-15

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第15章 css样...

  • 设计师学习HTML/CSS之路-06

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第6章 开始学习C...

  • 设计师学习HTML/CSS之路-07

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第7章 CSS样式...

  • 设计师学习HTML/CSS之路-08

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第8章 CSS选择...

  • 设计师学习HTML/CSS之路-10

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第10章 CSS格...

网友评论

    本文标题:设计师学习HTML/CSS之路-03

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