Python学习笔记十二

HTML全称：Hyper Text Markup Language超文本标记语言

　　　　　　　　　不是编程语言

　　　　　　　　　HTML使用标记标签来描述网页

2. HTML标签

　　　　　　　　开始标签，结束标签。

　　　　　　　　例如：<html> </html>

3. HTML页面的例子：

<!DOCTYPE html>

<html>

          <head>

          <meta charset=’utf-8’>

          <title>aaaa<title>

          </head>

          <body>

                    <h1>My First Heading</h1>

                    <p>My first paragraph.</p>

          </body>

</html>

例子解释

- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
- <p> 与 </p> 之间的文本被显示为段落

1. 自闭合标签和闭合标签 meta就是自闭合标签大多数都是闭合标签
2. 常用标签

4. head标签

里面重要的标签meta和title

meta标签：

<meta charset="UTF-8">   标识字符集

<meta name="Keywords" content="汽车之家">    网站的关键字

<meta name="descrtion" content="哈哈好">     网站的描述信息
<meta http-equiv="Refresh" content="10,http://www.baidu.com">  10秒后跳转到百度

<link rel="icon" href="//www.jd.com/favicon.ico">   获得京东的小图标

　　 title标签：

　　　　<title>JD</title>

5. body标签

标签分类：块级标签和内联标签

区别：块级标签可以独占一行，可以设置长宽高。

内联标签不能独占一行，不可以设置长宽高。

注意：块级标签只能嵌套块级标签和内联标签 p标签只能嵌套内联标签(特殊)

内联标签只能嵌套内联标签

块级标签:h1 h2 h3 h4 h5 h6 p div

内联标签b span a img

6. 具体标签

标题  总共就6个
<h1> </h1>  <h2> </h2>  <h3> </h3>   <h4> </h4>  <h5> </h5>  <h6> </h6>

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>


段落

<p>  </p>

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

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

链接
<a href="http://www.w3school.com.cn">This is a link</a>
<a href="http://www.sohu.com" target="_blank">点击</a> 打开一个新的窗口

图像
<img src="w3school.jpg" width="104" height="142" />

空元素(换行)

<br> 旧版本使用这个。

<br /> 以后都是使用这个。

水平线

<hr />在HTML页面中创建水平线。

b标签加粗

注释

<!—- 与 -->

div标签常用的标签

span标签

7. HTML属性

属性总是出现在HTML元素的开始标签中。

链接的地址在href属性中指定。

标题的属性。

<h1 align="center"> 拥有关于对齐方式的附加信息。

主体的属性

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

注：属性值永远都在引号内。双引号是最常用的。有时候也用单引号。name='Bill "HelloWorld" Gates'

8. HTML的style属性

应该避免使用下面这些标签和属性：

标签	描述
<center>	定义居中的内容。
<font> 和 <basefont>	定义 HTML 字体。
<s> 和 <strike>	定义删除线文本
<u>	定义下划线文本
属性	描述
align	定义文本的对齐方式
bgcolor	定义背景颜色
color	定义文本颜色

以上标签和属性都不会再使用。现在都使用style属性了。

　　　　　　例子一，如下：

<html>

<body style="background-color:yellow">

<h2 style="background-color:red">This is a heading</h2>

<p style="background-color:green">This is a paragraph.</p>

</body>

</html>

定义主体的背景色为黄色

定义标题2的背景为红色

定义段落的背景为绿色

这个替换bgcolor属性。

　　　　　　例子二，如下：

<html>

<body>

<h1 style="font-family:verdana">A heading</h1>

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

</body>

</html>

　　　　　　例子三，如下：

<html>

<body>

<h1 style="text-align:center">This is a heading</h1>

<p>The heading above is aligned to the center of this page.</p>

</body>

</html>

HTML文本格式化

文本格式化标签

标签	描述
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。
<s>	不赞成使用。使用 <del> 代替。
<strike>	不赞成使用。使用 <del> 代替。
<u>	不赞成使用。使用样式（style）代替。

“计算机输出”标签

标签	描述
<code>	定义计算机代码。
<kbd>	定义键盘码。
<samp>	定义计算机代码样本。
<tt>	定义打字机代码。
<var>	定义变量。
<pre>	定义预格式文本。
<listing>	不赞成使用。使用 <pre> 代替。
<plaintext>	不赞成使用。使用 <pre> 代替。
<xmp>	不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

标签	描述
<abbr>	定义缩写。
<acronym>	定义首字母缩写。
<address>	定义地址。
<bdo>	定义文字方向。
<blockquote>	定义长的引用。
<q>	定义短的引用语。
<cite>	定义引用、引证。
<dfn>	定义一个定义项目。

HTML的CSS

l 外部样式:需要引入外部的css文件,使用link标签

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<head>

<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >

</head>

l 内部样式在头部定义css，使用style标签。

<head>

<style type="text/css">

h1 {color: red}

p {color: blue}

</style>

</head>

<body>

<h1>header 1</h1>

<p>A paragraph.</p>

</body>

l 内联样式直接在标签的开始处定义

使用style属性，如下：

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

HTML的链接

超链接可以是一个字，一个词，或者一组词，也可以是一副图像，您可以点击这些内容跳转到新的文档或者当前文档中的某个部门。

l <a>标签用来创建链接。

使用href：指向另一个文档的链接。

使用name：指向文档内的链接。

url可以为新的文档，也可以是本机文档。

例子：

<a href="http://www.w3school.com.cn/">Visit W3School</a>

l target属性

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

设定打开一个新的窗口。

l name属性

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

l 发送邮件链接

<html>

<body>

<p>

这是邮件链接：

</p>

<p>

<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

</p>

</body>

</html>

HTML的图像

l 使用<img>标签定义。

语法: <img src=”url” />

url可以是本机，也可以是其他文档的图片。

例子：

l 替换文本属性

例子：

HTML的表格

<tr>

</tr>

<tr>

</tr>

</table>

<table>标签定义表格，border定义边框

<tr>定义行

<td>定义在这一行的单元格

HTML的头部元素

l <title>

例子：

<title>Title of the document</title>

l <base>

指定页面上的所有链接都指向指定地址。

例子：

<head>

</head>

l <link>

连接外部样式

l <style>

与上面的内部样式一样。

l <meta>

此标签必须在<head>内部。

必须的属性content.

可选的属性http-equiv,name,scheme.

HTML的脚本
HTML的列表

无序列表

<ul>

<li>Coffee</li>

</ul>

有序列表

<ol>

<li>Coffee</li>

</ol>