首页 > 代码库 > python/HTML基础

python/HTML基础

2024-09-22 18:18:55   220人阅读

---恢复内容开始---

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=http://www.mamicode.com/"https://www.jd.com/favicon.ico">
 9     <meta http-equiv="refresh" content="">
10 </head>
11 <body>
12 <a href=http://www.mamicode.com/"http://www.baidu.com"><img src=http://www.mamicode.com/"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=http://www.mamicode.com/"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.mamicode.com/"http://www.baidu.com"><img src=http://www.mamicode.com/"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.mamicode.com/"http://www.jd.com/favicon.ico">
3     <link rel="stylesheet" href=http://www.mamicode.com/"css.css">
4     <script src=http://www.mamicode.com/"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=http://www.mamicode.com/"https://www.jd.com/favicon.ico">    网页的图片
 9     <meta http-equiv="refresh" content="">
10 </head>
11 <body>
12 <a href=http://www.mamicode.com/"http://www.baidu.com"><img src=http://www.mamicode.com/"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=http://www.mamicode.com/"https://www.jd.com/favicon.ico">    网页的图片
 9     <meta http-equiv="refresh" content="">
10 </head>
11 <body>
12 <a href=http://www.mamicode.com/"http://www.baidu.com"><img src=http://www.mamicode.com/"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.mamicode.com/"http://www.baidu.com"></a>
2 指向另一个地址
3 <a href=http://www.mamicode.com/"hello.jpg"></a>
4 指向本地文件
5 <a href=http://www.mamicode.com/"#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=http://www.mamicode.com/"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>

 

python/HTML基础


联系
我们