网页制作HTML入门笔记第二章

排列网页内容

列表标签

是HTML中非常重要的标签，通过使用各种列表类标签，能很好地排列网页中的内容

常见的列表标签

无序列表，有序列表，自定义列表

无序列表

无序列表常用于制作菜单 或 新闻列表。

<ui type="项目符合类型">  
  <li>列表项内容li>
  <li>列表项内容li>
  <li>列表项内容li>
ui>

     项目符合类型：circle(圆圈)，square(方块)，disc(圆点)

有序列表

<ol type="项目符合类型"> 
  <li>列表项内容li>
  <li>列表项内容li>
  <li>列表项内容li>
ol>
  项目符合类型：1(数字)，a(字母，如果为大写的就为大写字母)，i(罗马数字,大写就为大写的罗马数字)

自定义列表

<dl>
<dt>标题dt>
<dd>文本dd>  --文本行会自动缩进
dl>

实战：在图文混排中，dt可以装图片，dd装文字

表格标签

使用表格标签可以使排序的内容简洁，整齐，便于用户浏览网页信息。

表格的基本结构：

表格至少由<table>标签,   <tr>标签,   <td>标签这三种标签组成

  <table>表示表格    <tr>表示行   <td>表示一列单元格

表格的语法：

 1.创建表格标签<table>
 2.在表格标签中创建行标签<tr>
 3.在行标签中创建单元格标签<td>

用法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YpiupTNg-1590074317070)(2.assets/H2$8IT35T559R{BG9A4UT.png)]

<table>

<tr>    //第一行
<td>第一行第一个单元格的内容td>
<td>第一行第二个单元格的内容td>

·······
tr>

table>

表格单元格合并

跨行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JeiuiMz1-1590074317080)(2.assets/9TC}UX[WHJBSHBL998FT%1.png)]

单元格内容

<table border="1">
  <tr>
  <td colspan="3">12345678910d>     --跨了三列，下一行的表格三个格，他自身就占了三个格
  tr>
  <tr>
  <td >  123  d> 
  <td>   123  d>
  <td >123 d>
  tr>
table>

跨列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9SdqrUjT-1590074317102)(2.assets/8]%0J3UEBAUDJ24[4U90.png)]

<table border="1">
<tr>
<td rowspan="2"> 123 td> 
  ---跨了两行，123是[0,0]，567是[0,1]，890是[0,2]，abc是[1.0]；123占了两行被排挤出来显示
<td >  567td>
<td >  123td>
tr>
<td>abctd>
table>

表格的高级标签

 1.表格标签，用于描述整个表格的标题。

 2.表格表头,用于定义表格的表头，通常是表格的第一行数据，以粗体，居中的样式显示数据

 3.表格数据的分组标签,，，这三个标签通常配合使用，主要对表格数据进行逻辑分组。对应表格的表头部分，对应表格的数据主体部分，对应表格的地步页脚部分，各分组标签内由多行组成。

布局与美化修饰

表格的美化修饰即从多方面对表格属性进行设置，使表格更漂亮，更美观，更合理。

表格修饰内容如下：

1.表格的高度，宽度和边框。
 2.表格的行与列的背景。
 3.表格内容的对齐方式。
 4.表格单元格的填充，间距的设置。

设置表格相关元素的背景

表格背景

 <table becolor="整个表格背景颜色" backgrund="表格背景图像地址">

·····

table>

行背景色

<tr bgcolor="行的背景颜色">

·····

tr>

单元格背景色

<td dgcolor="单元格的背景颜色">

·····

td>

表格的填充与间距

​

<table cellspacing="单元格间距" cellpadding="单元格内填充">

······

table>

容器元素

容器元素：该元素代表一个块区域，内部用于放置其他元素

div标签和span标签

div元素

没有语义

语义化容器元素

为了符合html5的语义化要求

header: 通常用于表示页头，也可以用于表示文章的头部

footer: 通常用于表示页脚，也可以用于表示文章的尾部

article: 通常用于表示整篇文章

section: 通常用于表示文章的章节

aside: 通常用于表示侧边栏

元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

元素的包含关系由元素的内容类别决定。

例如，查看h1元素中是否可以包含p元素 （不能，在w3c网站可找到答案）

总结：

1. 容器元素中可以包含任何元素
2. a元素中几乎可以包含任何元素
3. 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素

容器标签

 1.在排列网页内容时，我们有时会将某些标签房子一起进行排列，这样就需要使用一个标签将他们组成一个区块

 2.在HTML中，可以通过
和将HTML元素组合起来，div标签和span标签都是容器类标签

DIV标签

（层标签，可以放置网页的内容，比如图片标签）

<div>其他标签或者内容div>

   1.<div>元素没有特定的含义，是用于组合其他HTML元素的容器；

   2.其为块级元素，浏览器汇总块级元素的起始和结束处换行；

区块和区块之间会换行显示，DIV标签是块级元素，不会跟其他的标签同行显示

span标签

（行内标签，一般用于作为文本信息的容器）

以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）
  到了HTML5，已经弃用这种说法。

   <span>内容span>

  1.<span>标签跟<div>标签不一样，<span标签>不会换行，它是行内标签，可以跟行并排显示

pre标签

预格式化文本元素(输出的内容跟着Pre内的内容完全一样)

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格

例外：在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容，会按照源代码格式显示到页面上。

该元素通常用于在网页中显示一些代码。

pre元素功能的本质：它有一个默认的css属性

 显示代码时，通常外面套code元素，code表示代码区域。

  标签使用 ： <pre>              1111111111111           222pre>