百度前端技术学院第二天学习笔记（HTML）（2）

九月 22, 2019 HTML学习, 百度前端技术学院本文总阅读量次

单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing)

本例演示如何使用 Cell spacing 增加单元格之间的距离。

有序列表（ol）与无序列表（ul）

ul: unordered lists 无序列表
ol: ordered lists 有序列表
两种列表中的每个列表项始于<li>

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

无序列表中的不同类型

<ul>的属性

type=”disc”实心圆（默认）
type=”circle”空心圆
type=”square”实心方块

有序列表中的不同类型

<ol>的属性

默认：数字列表
type=”A”：大写字母列表
type=”a”:小写字母列表
type=”I”：罗马字母列表
type=”i”：小写罗马字母列表

定义列表dl

dl：definition list
自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以 <dd> 开始。
1
2
3
4
5
6
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
实现效果：

Coffee

Black hot drink

Milk

White cold drink

分类块级元素:`<div>`元素

<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

设置 <div> 元素的类(style)，使我们能够为相同的

元素设置相同的类

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 

</body>
</html>

分类行内元素:`<span>` 元素

<span>元素是内联元素，可用作文本的容器。
元素也没有特定的含义。
内联元素在显示时通常不会以新行开始。

设置 <span> 元素的类(style)，能够为相同的元素设置相同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

HTML布局

参考
行间距line-height

HTML 框架

重要提示： 不能将标签与标签同时使用！不过，假如你添加包含一段文本的