python【第十四篇】HTML基础

什么是HTML？

HTML(HyperText MarkUp Language)超文本标记语言,通过使用标记来描述文档结构和表现形式的一种语言,由浏览器进行解析,然后把结果显示在网页上，通俗的讲它就是服务器发送的字符串到浏览器，通过浏览器能解析的规则用HTML来描述，它是网页构成的基础,你见到的所有网页都离不开HTML,所以学习HTML是基础中的基础

HTML语言是一种标记语言,不需要编译,直接由浏览器执行
HTML文件是一个文本文件,包含了一些HTML元素, HTML文件是一个文本文件,包含了一些HTML元素,标签等.
HTML文件必须使用html或htm为文件名后缀
HTML是大小写不敏感的,HTML与html是一样的

Html和CSS、js的关系

如果把Html比作一个赤裸裸的人，那么css就是给这个人穿上华丽的服装，js就是可以把这个人动起来。

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现(外观控制)。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

知道了概念性的知识，下面来看看Html的组成部分；

第一个html：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1title>
head>
    <body>
        <p>第一个htmlp>
    body>
html>

首先我们要先了解HTML有一个文档树的概念，也就是html的组成部分：

如上图，以及实例：

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，也就是用哪一种规则来解析html。

有和无的区别

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

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了，总之而言就是要告诉浏览器，你要用标准的规则来来解析html,而不是用自己浏览器的规则来解析html。

如下就是列举出来的部分解析html的规则。

head部分

1，Mate（Meta(metadata information）

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1、页面编码

  #指定编码类型为UTF-8

2、刷新和跳转

  #指定每5秒刷新一次
 #指定1秒之后跳转页面至另一个网页

3、关键字

关键字的作用：一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站。

4、描述

例如cnblog里的就是一个描述：

5、X-UA-Compatible

X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。

2、Title

网页头部信息

如：加上test1

效果：

3、Link

网页头部图标

如加上：

#href是图片的路径+名字

效果：

4、Style

1、在当前文件中写Css样式

2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

5、Script

1、在当前文件中写JS

2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

body部分

概述

1、body里面分为两类标签：块级标签 和 内联标签，块级标签占用的是一整行，内联标签占用的是它所使用的实际块大小如下：

2、特殊符号处理

如

这是个标签，如果我只想在页面上这个

字符串，就是不想让浏览器解释这个字符的样式，这里就需要做特殊处理了，特殊符号有自己定的规则如以下：

′ ´ ? © > > μ µ ? ®

& & ° ° ? ¡ ? »

| ¦ ÷ ÷ ? ¿ ? ¬ § §

? • ? ½ ? « ? ¶ ¨ ¨

? ¸ ? ¼ < < ± ± × ×

￠ ¢ ? ¾ ˉ ¯ “ " ? ™

€ € ￡ £ ￥ ¥

? „ … … · · ? › a ª

? ˆ “ “ — — ’ ’ o º

? † ? ‹ – – ? ‚ ” ”

? ‡ ‘ ‘ ‰ ‰ ? ˜

≈ ≈ ? ⁄ ← ← ? ∂ ? ♠

∩ ∩ ≥ ≥ ≤ ≤ ″ ″ ∑ ∑

? ♣ ? ↔ ? ◊ ′ ′ ↑ ↑

↓ ↓ ? ♥ ? − ∏ ∏ ? ‍

? ♦ ∞ ∞ ≠ ≠ √ √ ? ‌

≡ ≡ ∫ ∫ ￣ ‾ → →

α α η η μ μ π π θ θ

β β γ γ ν ν ψ ψ υ υ

χ χ ι ι ω ω ρ ρ ξ ξ

δ δ κ κ ο ο σ σ ζ ζ

ε ε λ λ φ φ τ τ

Α Α Η Η Μ Μ Π Π Θ Θ

Β Β Γ Γ Ν Ν Ψ Ψ Υ Υ

Χ Χ Ι Ι Ω Ω Ρ Ρ Ξ Ξ

Δ Δ Κ Κ Ο Ο Σ Σ Ζ Ζ

Ε Ε Λ Λ Φ Φ Τ Τ ? ς

HTML 原代码显示结果描述

< < 小于号或显示标记

> > 大于号或显示标记

& & 可用于显示其它特殊字符

" “ 引号

® ? 已注册

© ? 版权

™ ? 商标

? 半个空白位

? 一个空白位

不断行的空白

常用标签：

1、段落和换行标签

段落，
换行

如下代码：

 <h1>p段落 hr换行h1>
        
        
        <p>段落1p>
        <p>段落2p>
        <p>段落3短啊搜到你哦按动脑 的配件按平时大家爱就是的解决电脑哦按搜反复p>
        <p>段落3短啊搜到你哦按动脑 的配件按平<br />时大家爱就是的解决电脑哦按搜反复p>

显示效果：

p段落 hr换行

段落1

段落2

段落3  #从这里有换行的
短啊搜到你哦按动脑 的配件按平时大家爱就是的解决电脑哦按搜反复

段落3短啊搜到你哦按动脑 的配件按平       #这里
时大家爱就是的解决电脑哦按搜反复

2、标签

标签用来跳转和锚定

默认如果在标签中不设置那么他仅仅在浏览器中显示文本，如下面代码，没有任何功能

指定跳转，代码如下：

<a href="http://www.baidu.com">百度1a>   
<a href="http://www.baidu.com" target="_blank">百度2a>

#以上两个代码都是跳转到百度页面，唯一在于，加target又重新打开一个标签页面，第一句是在自身页面打开的

锚定:

类似于看书的目录，当你点击这个“目录“时就自动跳到，目录所在位置，如下代码：

     
        <a href="#i1">第一章a>
        <a href="#i2">第二章a>
        <a href="#i3">第三章a>

        
        <div id="i1" style="height: 500px";>第一章内容div>
        <div id="i2" style="height: 500px";>第二章内容div>
        <div id="i3" style="height: 500px";>第三章内容div>

以上代码点击“第一章” ，就会跳到id=i1 书签位置

3、H标签

就是标题标签，如下代码：

        <h1>h1标签h1>
        <h2>h2标签h2>
        <h3>h3标签h3>
        <h4>h4标签h4>
        <h5>h5标签h5>
        <h6>h6标签h6>    

#H标签，只有从h1-h6

显示效果：

h1标签

h2标签

3标签

h4标签

h5标签

h6标签

4、input系列标签

1.input:text & password 输入框


用户：<input type="text"/>

密码：<input type="password"/>

效果如下：

2.input:radio标签-单选框


<br />男：<input type="radio"/>
<br />女：<input type="radio"/>

 <br />男：<input type="radio" name="gender"/>
 <br />女：<input type="radio" name="gender"/>

显示效果如下：

3.input:checkbox标签-复选框

   <p>爱好：
            <br />篮球<input type="checkbox"  />
                排球<input  type="checkbox" />
                蛋球<input  type="checkbox"  />
                铅球 <input type="checkbox" checked="checked"/>
                

    p>

显示效果：

4.input:button & submit &reset 提交按钮

 
                
                <input type="submit" value="提交">
                <input type="button" value="提交字段空">
                <input type="reset" value="重置">

效果图：

5.file标签-用来提交文件时使用

   
            <input type="file" />

效果图：

5、Select标签

1、默认显示一个标签

           <select>
                <option value="1">上海option>
                <option value="2">北京option>
                <option value="3" selected="selected">广州option>
                
            select>

效果图：

2、不点下拉默认显示两项内容

    <select size="2">
            <option value="1">上海option>
            <option value="2">北京option>
            <option value="3">广州option>
            <option value="4">东京option>

    select>

显示效果：

3、select标签,按上“shift”键可以多选-

 <select multiple="multiple" size="2">
            
            <option>上海option>
            <option>东莞option>
            <option>东京option>
            <option>苍苍option>
 select>

显示效果：

4、select标签，分组形式

  
        <select>
            <optgroup label="河南省">
                <option>郑州市option>
                <option>洛阳市option>
            optgroup>
            <optgroup label="山西省">
                <option>运城市option>
                <option>太原市option>
            optgroup>
        select>

显示效果：

6、多行文本编辑框

  <body>
        <textarea style="height: 100px ;width: 100px">textarea>

    body>

显示效果：

7、form表单

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formtitle>
head>
    <body>
        
        <form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
            
            
            <p>用户名：<input type="text" name="user"/>p>
            <p>密码：<input type="password" name="pwd"/>p>
            <p>性别：
                <br />男<input type="radio" name="uu" />
                    女<input type="radio" name="uu" />
            p>
            <p>爱好：
                <br />排球<input type="checkbox" name="1"/>
                      篮球<input type="checkbox" name="2"/>
                      蛋球<input type="checkbox" name="3"/>
                      铅球<input type="checkbox" name="4"/>
            p>
            <p>
                
                <select name="city">
                    <option value="1">东京option>
                    <option value="2">南京option>
                    <option value="3" selected="selected">北京option>
                select>
                <select size="2" name="city2">
                    <option value="1">东京option>
                    <option value="2">南京option>
                    <option value="3" >北京option>
                    <option value="4" >西京option>
                select>
                 <select name="city3">
                     <optgroup label="大东亚">
                        <option value="1">东京option>
                        <option value="2">南京option>
                        <option value="3" selected="selected">北京option>
                     optgroup>
                select>
            p>
              
            <p>上传文件：
                <br /><input type="file" name="hahaha"/>
            p>
            <p>备注：
                <textarea style="width: 100px;height: 100px" name="test">textarea>
            p>
            <p>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
                
                
            p>
        form>

    body>
html>

显示效果：

8、列表ul/ol/dl

ul列表在前面自动加“点”，ol列表在前面自动加数字，代码如下：

        <ul>
            <li>line1li>
            <li>line2li>
            <li>line3li>
        ul>
        <ol>
            <li>line1li>
            <li>line2li>
            <li>line3li>
        ol>

显示效果：

dl列表自动分组，代码如下：

显示效果：

9、表格

标题一	标题二	标题三	标题四
内容一	内容一	内容一	内容一
内容二	内容二	内容二	内容二
内容三	内容三	内容三	内容三
内容四	内容四	内容四	内容四

　显示效果：

单元格合并：

标题一	标题三	标题四
内容一	内容一	内容一	内容一
内容二	内容二	内容二
内容三	内容三	内容三
内容四	内容四	内容四	内容四

　　显示效果：

10、fieldset标签

        <fieldset>
            <legend>协议legend>
            请仔细阅读协议内容：
        fieldset>

显示效果：

Python

python【第十四篇】HTML基础

什么是HTML？

Html和CSS、js的关系

Doctype

有和无的区别

head部分

body部分

这是个标签，如果我只想在页面上这个

常用标签：

h1标签

h2标签

3标签

h4标签

h5标签

h6标签

5、Select标签

相关

学习《Python编程从入门到实践》PDF+代码训练

python-----面向对象简单理解

python多线程控制

Sublime 的安装、汉化、配置、Python环境和插件

python——time strftime() 函数表示当地时间

python 初识函数

python 函数对象嵌套闭包

Python栈溢出——设置python栈大小

python-面向对象-01课堂笔记

python爬虫

Python 之父的解析器系列之五：左递归 PEG 语法

Python 为了提升性能，竟运用了共享经济

标签



′	´	?	©	>	>	μ	µ	?	®
&	&	°	°	?	¡			?	»
\|	¦	÷	÷	?	¿	?	¬	§	§
?	•	?	½	?	«	?	¶	¨	¨
?	¸	?	¼	<	<	±	±	×	×
￠	¢	?	¾	ˉ	¯	“	"	?	™

€	€	￡	£	￥	¥

?	„	…	…	·	·	?	›	a	ª
?	ˆ	“	“	—	—	’	’	o	º
?	†	?	‹	–	–	?	‚	”	”
?	‡	‘	‘	‰	‰			?	˜

≈	≈	?	⁄	←	←	?	∂	?	♠
∩	∩	≥	≥	≤	≤	″	″	∑	∑
?	♣	?	↔	?	◊	′	′	↑	↑
↓	↓	?	♥	?	−	∏	∏	?	‍
?	♦	∞	∞	≠	≠	√	√	?	‌
≡	≡	∫	∫	￣	‾	→	→

α	α	η	η	μ	μ	π	π	θ	θ
β	β	γ	γ	ν	ν	ψ	ψ	υ	υ
χ	χ	ι	ι	ω	ω	ρ	ρ	ξ	ξ
δ	δ	κ	κ	ο	ο	σ	σ	ζ	ζ
ε	ε	λ	λ	φ	φ	τ	τ

Α	Α	Η	Η	Μ	Μ	Π	Π	Θ	Θ
Β	Β	Γ	Γ	Ν	Ν	Ψ	Ψ	Υ	Υ
Χ	Χ	Ι	Ι	Ω	Ω	Ρ	Ρ	Ξ	Ξ
Δ	Δ	Κ	Κ	Ο	Ο	Σ	Σ	Ζ	Ζ
Ε	Ε	Λ	Λ	Φ	Φ	Τ	Τ	?	ς

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	?	已注册
©	?	版权
™	?	商标
	?	半个空白位
	?	一个空白位
		不断行的空白



′	´	?	©	>	>	μ	µ	?	®
&	&	°	°	?	¡			?	»
\|	¦	÷	÷	?	¿	?	¬	§	§
?	•	?	½	?	«	?	¶	¨	¨
?	¸	?	¼	<	<	±	±	×	×
￠	¢	?	¾	ˉ	¯	“	"	?	™

€	€	￡	£	￥	¥

?	„	…	…	·	·	?	›	a	ª
?	ˆ	“	“	—	—	’	’	o	º
?	†	?	‹	–	–	?	‚	”	”
?	‡	‘	‘	‰	‰			?	˜

≈	≈	?	⁄	←	←	?	∂	?	♠
∩	∩	≥	≥	≤	≤	″	″	∑	∑
?	♣	?	↔	?	◊	′	′	↑	↑
↓	↓	?	♥	?	−	∏	∏	?	‍
?	♦	∞	∞	≠	≠	√	√	?	‌
≡	≡	∫	∫	￣	‾	→	→

α	α	η	η	μ	μ	π	π	θ	θ
β	β	γ	γ	ν	ν	ψ	ψ	υ	υ
χ	χ	ι	ι	ω	ω	ρ	ρ	ξ	ξ
δ	δ	κ	κ	ο	ο	σ	σ	ζ	ζ
ε	ε	λ	λ	φ	φ	τ	τ

Α	Α	Η	Η	Μ	Μ	Π	Π	Θ	Θ
Β	Β	Γ	Γ	Ν	Ν	Ψ	Ψ	Υ	Υ
Χ	Χ	Ι	Ι	Ω	Ω	Ρ	Ρ	Ξ	Ξ
Δ	Δ	Κ	Κ	Ο	Ο	Σ	Σ	Ζ	Ζ
Ε	Ε	Λ	Λ	Φ	Φ	Τ	Τ	?	ς



′	´	?	©	>	>	μ	µ	?	®
&	&	°	°	?	¡			?	»
\|	¦	÷	÷	?	¿	?	¬	§	§
?	•	?	½	?	«	?	¶	¨	¨
?	¸	?	¼	<	<	±	±	×	×
￠	¢	?	¾	ˉ	¯	“	"	?	™

€	€	￡	£	￥	¥

?	„	…	…	·	·	?	›	a	ª
?	ˆ	“	“	—	—	’	’	o	º
?	†	?	‹	–	–	?	‚	”	”
?	‡	‘	‘	‰	‰			?	˜

≈	≈	?	⁄	←	←	?	∂	?	♠
∩	∩	≥	≥	≤	≤	″	″	∑	∑
?	♣	?	↔	?	◊	′	′	↑	↑
↓	↓	?	♥	?	−	∏	∏	?	‍
?	♦	∞	∞	≠	≠	√	√	?	‌
≡	≡	∫	∫	￣	‾	→	→

α	α	η	η	μ	μ	π	π	θ	θ
β	β	γ	γ	ν	ν	ψ	ψ	υ	υ
χ	χ	ι	ι	ω	ω	ρ	ρ	ξ	ξ
δ	δ	κ	κ	ο	ο	σ	σ	ζ	ζ
ε	ε	λ	λ	φ	φ	τ	τ

Α	Α	Η	Η	Μ	Μ	Π	Π	Θ	Θ
Β	Β	Γ	Γ	Ν	Ν	Ψ	Ψ	Υ	Υ
Χ	Χ	Ι	Ι	Ω	Ω	Ρ	Ρ	Ξ	Ξ
Δ	Δ	Κ	Κ	Ο	Ο	Σ	Σ	Ζ	Ζ
Ε	Ε	Λ	Λ	Φ	Φ	Τ	Τ	?	ς