HTML学习打卡_Day3

学习 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,用来组合文档中的行内元素
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>