Python【11】【前端编程】- HTML基础

知识参鉴：WS3 、百度百科、Mr.7

HTML

1、HTML认知

HTML（HyperText Markup Language）超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

　　超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

# 什么是 HTML？

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

#HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

#HTML 文档
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

总体来讲

2、HTML文档类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

    BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
    CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，页面在所有的浏览器里显示的就都是一个样子了。

如果不写?

3、HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

总体来讲

（1）嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。HTML 文档由嵌套的 HTML 元素构成。

<html>

<body>
<p>A paragraph.</p>
</body>

</html>

（2）<p> 元素

<p> 元素定义了 HTML 文档中的一个段落。一个开始标签 <p>，以及一个结束标签 </p>，内容为 "A paragraph"。

<p>A paragraph.</p>

（3）<body> 元素

<body> 元素定义了 HTML 文档的主体。一个开始标签 <body>，以及一个结束标签 </body>，内容为一个p元素。

<body>
<p>A paragraph.</p>
</body>

（4）<html> 元素

<html> 元素定义了整个 HTML 文档。一个开始标签 <html>，以及一个结束标签 </html>，内容为一个body元素。

<html>

<body>
<p>A paragraph.</p>
</body>

</html>

（5）空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素，<br>标签定义换行。

<p> a paragraph, a paragraph, <br> a paragraph, </p>

4、HTML属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）
HTML	标准属性参考手册	手册

（1）例

HTML 链接由 <a> 标签定义。

<a href="http://www.baidu.com">baidu</a>   链接的地址在 href 属性中指定

（2）例

<h1> 定义标题的开始。

<h1 align="center">my name is tom.</h1>   拥有关于对齐方式的附加信息。

（3）例

<body> 定义 HTML 文档的主体。

<body background="green"> </body>  拥有关于表格边框的附加信息。

（4）例

<table> 定义 HTML 表格。

<table border="2">123</table>

（5）注意

属性和属性值对大小写不敏感，不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。

属性值应该始终被包括在引号内
双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号

完整的 HTML 参考手册

5、HTML 标题

标题很重要

确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

（1）HTML 标题（Heading）

通过 <h1> - <h6> 等标签进行定义的。

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>

（2）HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容。

<p>my name is tom.</p>
<hr/>
<p>my name is king</p>

（3）HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性。

<!--注释内容不显示-->
<p>my name is king</p>

6、HTML 段落

（1）HTML 段落是通过 <p> 标签进行定义的。

<p>This is a paragraph</p>
<p>This is another paragraph</p>

（2）HTML 折行

在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。

<p>my name is<br /> king，what's your name?</p>

（3）内容输出

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

7、HTML样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化

标签	描述
<style>	定义样式定义。
<link>	定义资源引用。
<div>	定义文档中的节或区域（块级）。
<span>	定义文档中的行内的小块或区域。
<font>	规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>	定义基准字体。不赞成使用。请使用样式。
<center>	对文本进行水平居中。不赞成使用。请使用样式。

优先级别：内联样式 > 内部样式 > 外部样式

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。

<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>

8、HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
</table>

浏览器显示：是的就是这样的丑，这样的原始

表格边框属性

使用边框属性来显示一个带有边框的表格

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
</table>

表格的表头

表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本

<table border="1">
    <th>heading</th>
    <th>heading two</th>
    <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>

这样最起码能看了：

表格中的空单元格

在一些个别的浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">
    <th>heading</th>
    <th>heading two</th>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>&nbsp;</td>       <!--加个点位符&nbsp就好了,现在的主流浏览器默认都正常-->
        <td>row 2, cell 2</td>
    </tr>
</table>

如下显示

9、HTML表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。

<from>
    姓：
    <input type="text" name="Firtname" id="1">
    <br/>
    名：
    <input type="text" name="Lastname" id="2">
</from>

输入（Input）：多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。

输入（Input）类型：文件域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<from>
    姓：
    <input type="text" name="Firtname" id="1" />
    <br/>
    名：
    <input type="text" name="Lastname" id="2" />
</from>
<!--表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。-->

显示如下：

输入（Input）类型：单选按钮（Radio Buttons）

从若干给定的的选择中选取其一

<from>
    <input type="radio" name="sex" value="male" /> Male
    <br/>
    <input type="radio" name="sex" value="female" /> Female
</from>

输入（Input）类型：复选框（Checkboxes）

从若干给定的选择中选取一个或若干选项

<p>What do you want?</p>
<hr/>
<from>
    <input type="checkbox" name="car" /> I want a car.
    <br/>
    <input type="checkbox" name="pen" /> I want a pen.
</from>

显示如下：

表单的动作属性（Action）和输入（Input）类型：确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<from>
    用户:
    <input type="text" name="user" />
    <input type="submit" value="Submit" />
    <br />
    密码:
    <input type="text" name="passwrod" />
    <input type="submit" value="Submit" />
</from>

显示如下：

下拉列表

用户选择时，还有下拉列表的方式展示选项

<from>
    <select name="computer">
        <option value="apple">Apple</option>
        <option value="thinkpad">Thinkpad</option>
        <option value="dell">Dell</option>
    </select>
</from>

显示如下：

想一想，上面的第一个选项是默认显示在表单里的，那么如何让其它的默认显示呢

<from>
    <select name="computer">
        <option value="apple">Apple</option>
        <!--其实就是这样的简单,selected-->
        <option value="thinkpad" selected="selected">Thinkpad</option>
        <option value="dell">Dell</option>
    </select>
</from>

显示如下：

Fieldset around data

<from>
    <fieldset>
        <legend>小鸡吃米</legend>
        大米: <input type="text" />
        小米: <input type="text" />
    </fieldset>
</from>

显示如下：

表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义一个控制的标签
<fieldset>	定义域
<legend>	定义域的标题
<select>	定义一个选择列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个按钮

10、HTML列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
    <li>list1</li>
    <li>list2</li>
</ul>
<!--列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。-->

显示如下：

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
    <li>小米</li>
    <li>步枪</li>
</ol>

显示如下：

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
    <dt>小米</dt>
    <dd>步枪打鬼子</dd>
    <dt>大米</dt>
    <dd>也打鬼子</dd>
</dl>

显示如下：

<h4>Disc ：</h4>
<ul type="disc">
 <li>aa</li>
 <li>bb</li>
</ul>

<h4>Circle ：</h4>
<ul type="circle">

 <li>aa</li>
 <li>bb</li>
</ul>

<h4>Square：</h4>
<ul type="square">
 <li>aa</li>
 <li>bb</li>
</ul>

其它列表

11、HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.google.com">This is a link</a>
<!-- 在 href 属性中指定链接的地址。 -->

target属性

使用 Target 属性，可以定义被链接的文档在何处显示。

<!--"_blank"属性会指定链接在新的标签页显示-->
<a href="/index.html" target="_blank">hopes</a>

<!--"_top"属性会指定链接在当前标签页内显示-->
<a href="/index.html" target="_top">hopes</a>

name属性

name 属性规定锚（anchor）的名称。使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚

<!--如果点tips标签会跳转到id="tip2"的位置-->
<a href="#tip2">tips</a>
<br />
<div id="tip1">contents one</div>
<div name="tip2">contents two</div>

<!--注：
请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.kim.org"，就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求.
-->
<a href="http://www.kim.org/#tips"></a>

12、HTML 图像

在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

<img src="images/google.png" width="100" height="20" />
<!-- 图像的名称和尺寸是以属性的形式提供的 -->

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<!--
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
-->
<img src="images/121.jpg" width="100" height="30" alt="图片加载失败啦">

显示如下：

13、HTML块

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。
“块级元素”译为 block level element，“内联元素”译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
如：<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> 元素可用于为部分文本设置样式属性。

14、HTML头部

HTML <head> 元素

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

HTML <title> 元素

<title> 标签定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）

<head>
    <base href="http://www.kim.org" />
    <base target="_blank" />
</head>

HTML <link> 元素

<head>
    <link rel="icon" href="images/china.ico">
    <!--<link rel="stylesheet" href="mystyle.css" type="text/css">-->
    <title>China</title>
</head>

显示如下：

HTML <style> 元素

<head>
    <style type="text/css">
        body {background-color: aqua}
        p {color: azure}
    </style>
</head>

HTML <meta> 元素

元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引页面。

name 和 content 属性的作用是描述页面的内容。
定义页面的描述：

<meta name="描述" content="你好，我好，大家好" />

定义页面的编码：

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

定义页面的刷新跳转：

<meta http-equiv="REFRESH" content="5" />
<meta http-equiv="REFRESH" content="5; url=http://www.baidu.com" />

定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />

<meta name="描述" content="你好，我好，大家好" />

HTML <script> 元素

posted @ 2016-01-25 15:57 YaYaTang 阅读(267) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

牙牙糖

妈妈说，吃太多糖会长蛀牙

Python【11】【前端编程】- HTML基础

HTML

1、HTML认知

2、HTML文档类型

3、HTML元素

（1）嵌套的 HTML 元素

（2）<p> 元素

（3）<body> 元素

（4）<html> 元素

（5）空元素

4、HTML属性

（1）例

（2）例

（3）例

（4）例

（5）注意

5、HTML 标题

（1）HTML 标题（Heading）

（2）HTML 水平线

（3）HTML 注释

6、HTML 段落

（1）HTML 段落是通过 <p> 标签进行定义的。

（2）HTML 折行

（3）内容输出

7、HTML样式

外部样式表

内部样式表

内联样式

8、HTML表格

表格边框属性

表格的表头

表格中的空单元格

9、HTML表单

输入（Input）类型：文件域（Text Fields）

输入（Input）类型：单选按钮（Radio Buttons）

输入（Input）类型：复选框（Checkboxes）

表单的动作属性（Action）和输入（Input）类型：确认按钮

下拉列表

Fieldset around data

表单标签

10、HTML列表

无序列表

有序列表

自定义列表

11、HTML 链接

target属性

name属性

12、HTML 图像

替换文本属性（Alt）

13、HTML块

HTML 块元素

HTML 内联元素

HTML <div> 元素

HTML <span> 元素

14、HTML头部

HTML <head> 元素

HTML <title> 元素

HTML <base> 元素

HTML <link> 元素

HTML <style> 元素

HTML <meta> 元素

HTML <script> 元素

公告