Python学习笔记十二

时间：2021-02-27 01:40:51
  1. 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元素的开始标签中。

<a href="http://www.w3school.com.cn">This is a link</a>

链接的地址在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>
  1. 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>

定义一个定义项目。
  1. 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>

　　

  1. HTML的链接

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

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

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

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

<a href=”url”>Link text</a>

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>

这是邮件链接：

<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

</p>

<p>

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

</p>

</body>

</html>

  1. HTML的图像

l  使用<img>标签定义。

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

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

例子：

<img src="/i/eg_mouse.jpg" width="128" height="128" />

<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />

l  替换文本属性

<img src="boat.gif" alt="Big Boat">

例子：

<img src="boat.gif" alt=”wang”>

  1. HTML的表格

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

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

<tr>定义行

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

  1. HTML的头部元素

l  <title>

例子：

<title>Title of the document</title>

l  <base>

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

例子：

<head>

<base href="http://www.w3school.com.cn/images/" />

<base target="_blank" />

</head>

l  <link>

连接外部样式

l  <style>

与上面的内部样式一样。

l  <meta>

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

必须的属性content.

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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="Content-Language" content="zh-cn" />

  1. HTML的脚本
  2. HTML的列表

无序列表

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

有序列表

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

相关文章