8. 三种方式插入样式表(CSS初接触)
- 外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过<style>
标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
9. HTML表格
表格由<table>
标签来定义。每个表格均有若干行( <tr>
标签),每行被分割为若干单元格(<td>
标签)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
表格和边框属性
如果不定义边框属性,表格将不显示边框。使用边框属性来显示一个带有边框的表格:
<table border="1">
<tr>
<td>Row 1, col 1</td>
<td>Row 1, col 2</td>
</tr>
</table>
表格的表头
表格的表头使用<th>
标签进行定义。
大多数浏览器会把表头显示为粗体居中
的文本:
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
</tr>
</table>
表格中的空单元格
在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。
<table border="1">
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
<tr>
<td></td>
<td>row 2, col 2</td>
</tr>
</table>
浏览器可能会这样显示:
注:为了避免这种情况,在空单元格中添加一个空格占位符( ),就可以将边框显示出来。
常用表格标签
表格 描述
<table>
定义表格
<caption>
定义表格标题。
<th>
定义表格的表头。
<tr>
定义表格的行。
<td>
定义表格单元。
<thead>
定义表格的页眉。
<tbody>
定义表格的主体。
<tfoot>
定义表格的页脚。
<col>
定义用于表格列的属性。
<colgroup>
定义表格列的组。
10. HTML 列表
- 无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于<ul>
标签。每个列表项始于<li>
。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下:
- Coffee
- Milk
- 有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于<ol>
标签。每个列表项始于<li>
标签。
- Coffee
- Milk
- Coffee
- Milk
- 自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以<dl>
标签开始。每个自定义列表项以<dt>
开始。每个自定义列表项的定义以<dd>
开始。
<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
11.HTML 块元素
- HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>
,<p>
,<ul>
,<table>
- HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子:<b>
,<td>
,<a>
,<img>
- HTML
<div>
元素
HTML<div>
元素是块级元素,它是可用于组合其他 HTML 元素的容器。<div>
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,<div>
元素可用于对大的内容块设置样式属性。<div>
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>
元素进行文档布局不是表格的正确用法。<table>
元素的作用是显示表格化的数据。 - HTML
<span>
元素
HTML<span>
元素是内联元素,可用作文本的容器。<span>
元素也没有特定的含义。
当与 CSS 一同使用时,<span>
元素可用于为部分文本设置样式属性。
写在最后:HTML(三)将会涉及到布局、框架等内容,奥利给~~~
收藏+点赞+转发👍👍