学习 HTML ——打卡!!!Day3
1、HTML CSS
1.1、HTML 样式-CSS
**作用:**CSS 用于渲染 HTML 元素标签的样式
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
1_Lina
</title>
</head>
<body>
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>
<h3>
Look! Styles and colors
</h3>
<div style="letter-spacing:12px;">
Manipulate Text
</div>
<div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">
Boxes
</span>
</div>
<div style="color:#000000;">and more...</div>
</div>
</body>
</html>
1.2、如何使用 CSS
CSS 可以通过以下方式添加到 HTML 中:
- 内联样式 在 HTML 元素中使用 “style” 属性
- 内部样式表 在 HTML 文档头部 <(尖括号) head (尖括号)> 区域使用 <(尖括号) style (尖括号)> 元素来包含 CSS
- 外部引用 使用外部 CSS 文件
其中最好的方式是通过外部引用 CSS 文件。
1.3、内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法就是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
实例:显示如何改变段落的颜色和左外边距
<p style="color:blue;margin-left:20px;">
这是一个段落
</p>
1.3.1、HTML 样式实例 - 背景颜色
背景色属性 (background-color) 定义一个元素的背景颜色:
实例:
<body style="background-color: yellow;">
<h2 style="background-color:red;">
这是一个段落。
</h2>
<p style="background-color: green;">
这是一个段落。
</p>
</body>
1.3.2、HTML 样式实例 - 字体、字体颜色、字体大小
我们可以使用 font-family(字体)、color(颜色) 和 font-size(字体大小)属性定义字体的样式:
实例:
<h1 style="font-family:verdana;">
一个标题
</h1>
<p style="font-family: Arial;color: red;font-size: 20px;">
一个短路。
</p>
现在通常使用 font-family(字体)、color(颜色) 和 font-size(字体大小)属性定义文本样式,而不是使用 < font > 标签。
1.3.3、HTML 样式实例 - 文本对齐方式
使用 text-align(文字对齐)属性指定文本的水平与垂直对齐方式:
实例:
<h1 style="text-align: center; ">
居中对齐的标题
</h1>
<p>
这是一个段落。
</p>
1.4、内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。可以在 <(尖括号) head (尖括号)> 部分通过 <(尖括号) style (尖括号)> 标签定义内部样式表:
实例:
<head>
<style type="text/css">
body {background-color: yellow;}
p {color: blue;}
</style>
</head>
1.5、外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
实例:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
1.6、HTML 样式标签
标签 | 描述 |
---|---|
< style > | 定义文本样式 |
< link > | 定义资源引用地址 |
2、HTML 图像
2.1、图像标签(< img >)和源属性 (Src)
-
在 HTML 中,图像由 < img > 标签定义的。
-
< img > 是空标签,它只包含属性,并且没有闭合标签。
-
要在页面上显示图像,需要使用源属性(scr),scr 指 “source”。
定义图像的语法:
<img src="url" alt="some_text">
URL 指存储图像的位置。如果名为 “1_Lina.jpg” 图像的位于 www.author.com 的 images 目录中,那么其 URL 为 http://www.author.com/images/1_Lina.jpg。
浏览器将图像显示在文档中图像标签出现的地方。如果将图像标签位于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
2.2、Alt 属性
作用:为图像定义一串预备的可替换的文本
替换文本属性的值是用户定义的
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像加上替换文本信息是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本的浏览器的人来说是非常有利的。
2.3、设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。属性默认值单位像素:
<img src="1_Lina.jpg" alt="1_Lina Photo" width="304" height="228">
注意:指定图像的高度和宽度是一个很好的习惯,如果图像指定了高度宽度,页面加载时就会保留指定的尺寸;如果没有指定图片的大小,加载页面时有肯能会破坏 HTML 页面的整体布局。
2.4、注意事项
- 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。
- 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。
3、HTML 表格
3.1、HTML 表格
表格由 < style > 标签来定义。
- 每个表格均有若干行(由 < 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>
3.2、HTML 表格喝边框属性
如果不定义边框属性,表格将不显示边框,有时这很有用,但是大多数时候,我们希望显示边框,使用边框属性来显示一个带有边框的表格:
<table border="1">
<tr>
<td>
row 1, cell 1
</td>
<td>
row 1, cell 2
</td>
</tr>
</table>
3.3、HTML 表格表头
表格的表头使用 < th > 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本:
<table border="1">
<tr>
<th>
Header 1
</th>
<th>
Header 2
</th>
</tr>
<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>
3.4、HTML 无边框表格
3.5、HTML 带有标题的表格单元格
4、HTML 列表
HTML 支持有序、无序和定义列表。
4.1、HTML 无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点进行标记。无序列表使用 < ul > 标签:
<ul>
<li>
Coffee
</li>
</ul>
<ul>
<li>
Milk
</li>
</ul>
4.2、HTML 有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 < ol > 标签。每个列表项始于 < li > 标签。列表项使用数字来标记:
<ol>
<li>
Coffee
</li>
<li>
Milk
</li>
</ol>
4.3、自定义列表
自定义列表不仅仅是一列项目,二十项目极其注释的结合。自定义列表以 < dl > 标签开始,每个自定义列表项以 < dt > 标签开始。每个自定义列表项的定义以 < dd > 开始:
<dl>
<dt>
Coffee
</dt>
<dd>
- back hot drink
</dd>
<dt>
Milk
</dt>
<dd>
- white cold drink
</dd>
</dl>
注意事项:列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
5、HTML 区块
5.1、HTML < div > 和 < span >
HTML 可以通过 << div > 和 < span > 将元素组合起来。大多数 HTML 元素被定义为块级元素或内联元素。
5.2、HTML 区块元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
<h1>、<p>、<ul>、<table>
5.3、HTML 内联元素
内联元素在显示时通常不会以新行开始。
<b>、<td>、<a>、<img>
5.4、HTML < div > 元素
HTML < div > 元素是块级元素,它可用于组合其他 HTML 元素的容器。< div > 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,< div > 元素可用于对大的内容块设置样式属性。
<(尖括号) div (尖括号)> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 < table > 元素进行文档布局不是表格的正确用法。< table > 元素的作用是显示表格化的数据
5.5、HTML < span > 元素
HTML < span > 元素是内联元素,可用作文本的容器,< span > 元素也灭有特殊的含义。当与 CSS 一同使用时,< span > 元素可用于为部分文本设置样式属性。
5.6、分组标签
标签 | 描述 |
---|---|
< div > | 定义文档的区域,块级(block-level) |
< span > | 用来组合文档中的行内元素,内联元素(inline) |
6、HTML 布局
网页布局对改善网站的外观非常重要,慎重设计网页布局。
6.1、网页布局
大多数网站会把内容安排到多个列中,可以使用 < div > 或 < table > 元素来创建多列。 CSS 用于对元素进行定位,或者为页面创建背景以及色彩的丰富外观。
6.1、使用 < div > 元素
div 元素时用于分组 HTML 元素的块级元素,下面的例子使用五个 div 元素来创建多列布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
1_Lina
</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color: #FFA500;">
<h1 style="margin-bottom:0;">
主要的网页资源
</h1>
</div>
<div id="menu" style="background-color: #FFD700;height: 200px;width: 100px;float: left;">
<b>
菜单
</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color: #EEEEEE;height: 200px;width: 400px;float: left;">
内容在这里
</div>
<div id="footer" style="background-color: #FFA500;clear: both;text-align: center;">
版权 @ 1_Lina
</div>
</body>
</html>
6.2、使用表格
使用 HTML table 标签是创建布局的一种简单方式。大多数站点可以使用 < div >或 < table > 元素来创建多列。 CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
1_Lina
</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>
主要的网页标题
</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>
菜单
</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 @ 1_Lina
</td>
</tr>
</table>
</body>
</html>
6.3、有用的提示
- 使用 CSS 最大的好处是:如果把 CSS 代码存放到外部样式表中,那么站点会更容易维护。通过编辑单一的文件,就可以改变所有页面的布局。
- 由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板,可以使用这些预先构建好的网站布局,并优化它们。
6.4、布局标签
标签 | 描述 |
---|---|
< div > | 定义文档区块,块级(block-level) |
< span > | 定义span,用来组合文档中的行内元素 |
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 @ 1_Lina
</td>
```
6.3、有用的提示
- 使用 CSS 最大的好处是:如果把 CSS 代码存放到外部样式表中,那么站点会更容易维护。通过编辑单一的文件,就可以改变所有页面的布局。
- 由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板,可以使用这些预先构建好的网站布局,并优化它们。
6.4、布局标签
标签 | 描述 |
---|---|
< div > | 定义文档区块,块级(block-level) |
< span > | 定义span,用来组合文档中的行内元素 |