列表

分为有序列表ol、无序列表ul以及自定义列表dl

有序列表ol

有序列表是一列项目,列表项目使用数字进行标记。有序列表始于==

    ==标签,每个列表项始于==
  1. ==

  • 有序列表有==type==和==start==

  • 语法格式

    1
    2
    3
    4
    <ol type=value1 start=value2>
    <li>
    </li>
    </ol>

    注:value1表示有序列表项目符号的类型,value2表示项目开始的数值,其中type属性如下:

    | type类型 | 描述 |
    | :——: | :———————————————: |
    | type=1 | 表示列表项目用数字表示(1,2,3……) |
    | type=a | 表示列表项目用小写字母表示(a,b,c……) |
    | type=A | 表示列表项目用大写字母表示(A,B,C……) |
    | type=i | 表示列表项目用小写字母表示(i,ii,iii……) |
    | type=I | 表示列表项目用大写罗马数字表示(I,II,III…..) |

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<! DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
<h4>
数字列表:
</h4>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

<h4>小写字母列表:</h4>
<ol type='a'>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

<h4>大写字母列表:</h4>
<ol type='A'>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

<h4>大写罗马字母列表:</h4>
<ol type='I'>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

<h4>小写罗马字母:</h4>
<ol type='i'>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>

注:type默认为数字列表,即不给type设置属性值时显示的为数字列表

无序列表ul

无序列表是一个项目的列表,此列项目使用粗体圆点进行标记,无序列表始于==

    ==标签,每个列表项始于==
  • ==。无序列表的各个列表项之间没有顺序级别之分,是并列的。

  • ==ul==的==type==属性:默认值:==disc==,方块:==square==,空心圆:==circle==
  • 语法格式
1
2
3
4
5
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

注:<ul></ul>标记用于定义无序列表,<li></li>标记嵌套在<ul></ul>标记中,用于描述具体的列表项,每对<ul></ul>中至少赢你包含一对<li></li>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>学习ing</title>
</head>



<body>

<h4>Disc 项目符号列表:</h4>
<ul type="disc">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<h4>Circle 项目符号列表:</h4>
<ul type="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<h4>Square 项目符号列表:</h4>
<ul type="square">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</body>

</html>

自定义列表dl

自定义列表不仅仅是一列项目,而是项目及其注释的组合,自定义列表以==

==标签开始。每个自定义列表项以==
==开始,每个自定义列表项的定义以==
==开始,自定义列表的列表项前没有任何项目符合。

语法格式:

1
2
3
4
5
6
<dl>
<dt>名词1</dt>
<dd>名词1解释</dd>
<dt>名词2</dt>
<dd>名词2解释</dd>
</dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<title></title>
</head>

<body>
<h2>一个自定义列表</h2>
<dl>
<dt>春天</dt>
<dd>万物复苏</dd>
<dd>百花争艳</dd>
<dd>适合学习</dd>
<dt>夏天</dt>
<dd>夏日绵绵</dd>
<dd>烈日炎炎</dd>
<dd>适合学习</dd>
<dt>秋天</dt>
<dd>秋高气爽</dd>
<dd>天高地阔</dd>
<dd>适合学习</dd>
</dl>
</body>
</html>

HTML元数据

元数据就是用来描述数据的数据。HTML中也有很多元数据,====标签提供关于HTML文档的元数据:描述(description)、关键词(keywords)、文档的作者(author)等其他元数据。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>

<head>
<meta name='author' content='https://albert-5.cn'/>
<meta name='description' content='A Simple Example' />
</head>
<body>
<a href='https://albert-5.cn'>博客</a>
</body>
</html>

HTML块

大多数HTML元素被定义为块级元素或者内联元素

块级元素

  • 独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示。宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
  • 常见宽级元素:<h1>,<p>,<ul>,<table>

内联元素

  • 内联元素在显示时通常不会以新行开始,宽度width、高度height、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变
  • 常见内联元素:<b>,<td>,<a>,<img>

HTML布局

HTML布局主要有两种:使用div元素的布局和使用table元素的布局

使用div元素布局

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<meta charset='utf-8'>
<title></title>
</head>

<body>
<div id='header'>
<h1>博客</h1>
</div>
</body>
</html>

注:上述是div部分

1
2
3
4
5
6
7
8
<style>
#header{
background-color:black;
color:red;
text-align:center;
padding:25px;
}
</style>

注:以上是css部分

使用table元素布局

1
2
3
4
5
6
7
8
9
<body>
<table class='syl'>

<tr>
<td>博客</td>
</tr>

</table>
</body>

注:以上是HTML部分

1
2
3
4
5
6
7
8
9
10
<style>
table.syl{
width:100%;
border:1px solid #d4d4d4;
}
table.syl td{
padding:10px;
width:20px;
}
</style>

注:以上是css部分

table元素布局

  • 优点
    • 理解比较简单
    • 不同的浏览器看到的效果一般相同
  • 缺点
    • 显示样式和数据绑定在一起
    • 布局的时候灵活度不高
    • 一个页面可能会有大量的table元素,代码冗余度高
    • 增加带宽
    • 搜索引擎不喜欢这样的布局

div元素布局

  • 优点
    • 符合W3C标准
    • 搜索引擎更加友好
    • 样式的调整更加方便,内容和样式分离,使页面和样式的调整变得更加方便
    • 节省带宽,代码冗余度低
    • 表现和结构分离,在团队开发中更容易分工合作而减少相互关联性

注:DIV+CSS并不是要我们抛弃table,因为table在显示数据时更加方便

文本格式

文本格式其实就是文本的样式,比如文章的换行、加粗、斜体等类似的都是文本那个是,都是通过文本格式标签实现的。

常见的文本格式化标签:

标签 描述
b 定义粗体文本
big 定义大号字体
em 定义着重文字
i 定义斜体字
small 定义小号字体
strong 定义加重语气
sub 定义下标字
sup 定义上标字
ins 定义插入字
del 定义删除字

文档和网站架构

标题

通常在顶部有一个大标题或者图标,通常存在于每一个网页

导航

提供跳转到网站不同内容的链接;通常由菜单按钮、链接或者选项卡表示

主要内容

中心的一个大区域,包含给定网页的大部分独特内容

侧栏

一些次要信息、链接、引言和广告等

页脚

横跨页面底部的条纹,通常包含精美的打印、版权通知或者联系信息

为了实现这样的语义标记,HTML提供了可以用来表示这些部分的专用标签

  • 标题: <header>
  • 导航栏:<nav>
  • 主要内容:<main>具有代表性的内容段落主题可以使用<article>,<section>,<div>元素
  • 侧栏:<aside>经常包含在<mian>
  • 页脚:<footer>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<! DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<title>阿尔伯特</title>
</head>

<body>

<header>
<h1>
This is header!
</h1>
</header>

<nav>
<ul>
<li><a href='#'>HOME</a></li>
<li><a href='#'>TEAM</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>

<main>
<article>
<h1>Article heading</h1>
<p>好好学习天天向上</p>
<h2>subsection</h2>
<p>今天天气不错,学个习吧</p>
<h3>Another subsection</h3>
<p>我爱学习,学习使我快乐!</p>
</article>

<aside>
<h2>Related</h2>
<ul>
<li><a href='#'>春天</a></li>
<li><a href='#'>夏天</a></li>
<li><a href='#'>秋天</a></li>
<li><a href='#'>冬天</a></li>
</ul>
</aside>
</main>

<footer>
<p>©Copyright 2018 by albert.</p>
</footer>
</body>
</html>