在慕课上学习的，HTML和CSS基础学习笔记2

来源：互联网发布：上海万国数据编辑：程序博客网时间：2024/04/29 20:09

3、标签2

3-1 ul 列表

ul-li是没有前后顺序的信息列表。

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点

<ul>  <li>精彩少年</li>  <li>美丽突然出现</li>  <li>触动心灵的旋律</li></ul>

3-2 ol 有序列表

在网页中展示有前后顺序的信息列表

<ol> 在网页中显示的默认样式一般为：每项 <li> 前都自带一个序号，序号默认从1开始

<ol>   <li>前端开发面试心法 </li>   <li>零基础学习html</li>   <li>JavaScript全攻略</li></ol>

3-3 认识div在排版中的作用

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个 <div> 标签的作用就相当于一个容器。或者是盒子。

逻辑部分：它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>div标签</title></head><body><div>    <h2>热门课程排行榜</h2>    <ol>        <li>前端开发面试心法 </li>        <li>零基础学习html</li>        <li>javascript全攻略</li>    </ol>    </div>    <h2>最新课程排行</h2>    <ol>        <li>版本管理工具介绍—Git篇 </li>        <li>Canvas绘图详解</li>        <li>QQ5.0侧滑菜单</li>    </ol></body></html>

3-4 给div命名，使逻辑更加清晰

为了使逻辑更加清晰，为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这是唯一标识的。

这里深有体会，div的命名非常重要，尽量用相关与内容相关的英文命名。页面的设计是模块化的，因此对每一个模块的命名能为之后的工作提供方便，能够一一对应。

<body><div id="hotList">   <h2>热门课程排行榜</h2>    <ol>       <li>前端开发面试心法 </li>      <li>零基础学习html</li>       <li>javascript全攻略</li>    </ol></div><div id="learninglnstructed">    <h2>web前端开发导学课程</h2>    <ul>       <li>网页专业名词大扫盲 </li>       <li>网站职位定位指南</li>       <li>为您解密Yahoo网站制作流程</li>    </ul></div></body>

3-5 table标签---表格

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束；也就是说整个表格内容写在这之间。

2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

ps:1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的 2、表头，也就是th标签中的文本默认为粗体并且居中显示

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>认识table表标签</title></head><body><table>  <tbody>    <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></body></html>

3-6 用css，为表格加边框

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

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>为表格添加边框</title><style type="text/css">table tr td,th{border:1px solid #000;}</style></head><body><table summary="">  <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></table></body></html>

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

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

<table summary="表格简介文本">

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

<table>    <caption>标题文本</caption>    <tr>        <td>…</td>        <td>…</td>        …    </tr>…</table>

0 0