前端系列之HTML(二)

最新推荐文章于 2022-10-12 15:45:09 发布

Panda程序员

最新推荐文章于 2022-10-12 15:45:09 发布

阅读量90

点赞数 1

分类专栏： web前端学习笔记（HTML+CSS+JavaScript）

本文链接：https://blog.csdn.net/qq_41308254/article/details/105440105

版权

web前端学习笔记（HTML+CSS+JavaScript）专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

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>

浏览器可能会这样显示：
在这里插入图片描述
注：为了避免这种情况，在空单元格中添加一个空格占位符(&nbsp)，就可以将边框显示出来。

常用表格标签
表格描述
<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（三）将会涉及到布局、框架等内容，奥利给～～～

收藏+点赞+转发👍👍

Panda程序员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端系列之HTML(二)

文章目录8. 三种方式插入样式表(CSS初接触)9. HTML表格10. HTML 列表11.HTML 块元素8. 三种方式插入样式表(CSS初接触)外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，可以通过更改一个文件来改变整个站点的外观。<head><link rel="stylesheet" type="text/css...
复制链接

扫一扫