---恢复内容开始---
python/HTML基础
HTML：
超文本标记（标签）语言 （以<>扩起来的都是标签语言，放入标签里的不仅仅是文本）一套语言规则
浏览器的渲染顺序是从上到下，从左到右
不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）至今已经解决的差不多了
.html或htm 静态网页文件扩展名后缀
标签可以进行嵌套，但是不能进行交叉嵌套
HTML 不是一种编程语言，而是一种标记语言，HTML使用标记标签来描述网页
HTML结构：
<html></html>:是文件的开始标记和结束标记（包含 了<head><body>）
<head><head>:是不能会渲染出的
<body><body>:之间的文本是可见的网页主题内容
html的标签通常都是成对出现的（单独的是自闭合标签）
html的标签不区分大小写
HTML标签格式：
标签的语法：
<标签名 属性名=‘ 属性值’>内容部分<标签名>
常用标签
<！DOCTYPE> 标签声明文档的最前面的位置，处于<html>标签之前，此标签告知浏览器文档使用哪种解析类型（html或xhtml）
<！DOCTYPE> 标签作用：避免浏览器的怪异模式。
document.compatMode:
1、BackCopat:怪异模式，浏览器使用自己的怪异模式解析渲染页面。
2、CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面
这个属性会被刘拉你识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat
<head>内常用标签：
<meta>标签
meta介绍
<meta>元素可提供有关页面的元信息，针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
<meta>提供的信息是用户不可见的
meta标签的组成：meta标签共有俩个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
（1）name属性：主要用于描述网页，与只对应的属性值为content，content中的内容主要是便于搜索引起机器人查找信息和分类信息用的。
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> name属性 6 <meta name="description" content="老男孩开的"> name属性 7 <title>Meet</title> 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 9 <meta http-equiv="refresh" content=""> 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="hello.jpg" width="640" height="413" title="机车"></a> 13 </body>
（2）http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> 6 <meta name="description" content="老男孩开的"> 7 <title>Meet</title> 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 9 <meta http-equiv="refresh" content="3;http：//www.baidu.com"> 这是一个（跳转，3是几秒后，http：//www.baidu.com 是要跳转到的网址） 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="hello.jpg" width="640" height="413" title="机车"></a> 13 </body> 14
1 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 是声明浏览的兼容性
非meta标签：
1 <title>oldboy</title> 2 <link rel="icon" href="http://www.jd.com/favicon.ico"> 3 <link rel="stylesheet" href="css.css"> 4 <script src="hello.js"></script>
<body>内常用标签
基本标签（块级标签和内联标签）
<hn> n的取值范围是1~6，从小到大，用来比表示标题
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <h1>Meet</h1> 10 <h2>Meet</h2> 11 <h3>Meet</h3> 12 <h4>Meet</h4> 13 <h5>Meet</h5> 14 <h6>Meet</h6> 15 16 </body> 17 </html>
<p> 段落标签，包裹的内容被换行，并且也上下内容之间有一行空白
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <p>千山鸟飞绝</p> 10 <p>万经人终灭</p> 11 <p>孤舟梭立翁</p> 12 <p>独钓寒江雪</p> 13 14 </body> 15 </html>
<b> <strong>: 加粗标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <b>Meet</b>Meet 10 11 </body> 12 </html>
<strike>: 为文字加上一条中线
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <strike>100</strike> 10 11 </body> 12 </html>
<em>: 文字变成斜体
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <em>yuan</em> 10 </body> 11 </html>
<sup>和<sub>: 上角标 和 下角表 以及 换行
1 <!--2<sub>3</sub>--> 2 <!--<br>--> 3 <!--2<sup>3</sup>-->
<hr>:水平线
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 8 <body> 9 <b>GBY</b> 10 <hr> 11 </body> 12 </html>
<dir>和<span>
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。
常用标签：
hn(标题） p（分段，段落） br（强制换行） a标签
标签分类：
1、块级标签 -----block
块级便签独占一行
h1、p、div、
2、内联标签 -----inline
根据内容而定
sub 、 sup、span
图形标签<img>
src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> 6 <meta name="description" content="老男孩开的"> 7 <title>Meet</title> 网页的标题名称 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 网页的图片 9 <meta http-equiv="refresh" content=""> 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="helloo.jpg" alt="出错啦" width="640" height="413" title="机车"></a> 13 </body>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="IT"> 6 <meta name="description" content="老男孩开的"> 7 <title>Meet</title> 网页的标题名称 8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 网页的图片 9 <meta http-equiv="refresh" content=""> 10 </head> 11 <body> 12 <a href="http://www.baidu.com"><img src="hello.jpg" alt="出错啦" width="640" 宽 height="413" 高 title="机车" 悬浮提示 ></a> 13 </body>
超链接标签（锚标签）<a></a>
什么是超级链接？ 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上 的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
1 什么是URL？ 2 URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。 3 URL举例 4 http://www.sohu.com/stu/intro.html 5 http://222.172.123.33/stu/intro.html 6 7 URL地址由4部分组成 8 第1部分：为协议：http://、ftp://等 9 第2部分：为站点地址：可以是域名或IP地址 10 第3部分：为页面在站点中的目录：stu 11 第4部分：为页面名称，例如 index.html 12 各部分之间用“/”符号隔开。
href属性指定目标网页地址。该地址可以有几种类型：
1 <a href="http://www.baidu.com"></a> 2 指向另一个地址 3 <a href="hello.jpg"></a> 4 指向本地文件 5 <a href="#part1"></a> 6 指向本内容中的‘锚’
列表标签：
2 无序列表、有序列表、定义列表 3 无序列表： unorder list----ul 4 <ul> 5 <li>111<li> 6 <li>222<li> 7 <li>333<li> 8 </ul> 9 有序列表 : order list----ol 10 <ol> 11 <li>111<li> 12 <li>222<li> 13 <li>333<li> 14 </ol> 15 定义列表:define list ----dl 16 17 <dl> 18 <dt>标题</dt> define title 19 <dd>222<dd> define data 20 <dd>333<dd> 21 </dl>
表格标签：<table>
表格概念，表格是一个二维 数据空间，一个表格由若干行租成，一行又有由若干单元格组成，单元格可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容
表格最重要的目的是显示表格类数据，表格类数据是指最适合组织为表格格式（即按行和列组织）的数据
表格的基本结构：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>菜单</title> 6 </head> 7 <body> 8 9 <table border="2px" cellpadding="10px" cellspacing="1px"> 10 <tr> 11 <th colspan="3" align="center">星期一菜谱</th> 12 </tr> 13 <tr> 14 <td rowspan="2">素菜</td> 15 <td>青草茄子</td> 16 <td>花椒扁豆</td> 17 </tr> 18 <tr> 19 <td>小葱豆腐</td> 20 <td>炒包菜</td> 21 </tr> 22 <tr> 23 <td rowspan="2">荤菜</td> 24 <td>油焖大虾</td> 25 <td>海参鱼翅</td> 26 </tr> 27 <tr> 28 <td><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1494917021&di=8e8587c2bbe1f2ea7f6b0b923e411c73&src=http://pic30.photophoto.cn/20140219/0042040275809384_b.jpg" height="300px" width="300px">红烧肉</td> 29 <td>烤全羊</td> 30 </tr> 31 </table> 32 33 </body> 34 </html>
时间： 2024-10-11 23:04:13