人生苦短，我用python-- Day14之html

目录介绍　　　　　　　　　　　　　　　　　　　　　　

  • html交互过程
  • Doctype标签  ------->告诉浏览器使用什么样的html或xhtml规范来解析html文档
  • meta标签      ------->提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
    • 页面编码（告诉浏览器是什么编码）
    • 刷新和跳转
    • 关键词
    • 描述
    • IE兼容性
  • title标签　　   -------->网页头部信息 　　
  • link标签　　　 -------->连接文件，这里只说ioc图标是怎么使用link标签实现
  • 各种符号　　   
  • p标签　　        -------->段落标签
  • br标签             -------->换行符标签
  • a标签              -------->连接标签
    • 　  超链接
    •      锚点
  • H标签              -------->标题标签
  • span标签         -------->行内标签，不带任何装饰，也是一个白板
  • div标签            -------->白板标签
  • 标签分类：块标签、行内标签
  • 标签存在的意义
  • 主动闭合标签和自闭和标签区别和用法
  • GET和POST两种请求区别
  • input标签         -------->输入框标签
    • text标签  -------->普通输入框属性
    • password标签 -------->密码输入框属性
    • submit标签 -------->提交按钮输入框属性
    • butto标签 -------->普通按钮输入框属性
    • radio标签 -------->单选输入框属性属性
    • checkbox标签 -------->复选框输入框属性
    • file标签 -------->输入框标签上传文件输入框属性
    • rest标签　-------->重置输入框属性
  • textarea标签
  • select标签
  • a标签中锚点
  • img标签
  • table标签
    • thead标签
    • tbody标签
    • tr标签
    • td标签
    • colspan标签
    • rowspan标签
  • css讲解
  • 标签选择器
  • class选择器
  • id选择器
  • 关联选择器
  • 组合选择器
  • 属性选择器

html交互过程　　　　　　　　　　　　　　　　　　

所有和web服务器交互的过程，其实都是一个客户端和服务器之间使用socket通讯的过程，服务器端发送的所有数据都是字符串，只有当浏览器把接收到的数据经过翻译以后，才会呈现出我们想要的效果。

 Doctype标签 　　　　　　　　　　　　　　　　　　

 Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

有和无的区别
  1. BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
  2. CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）

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

有，用什么？

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。

 

Meta(metadata information)　　　　　　　　　　　　　　

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

1.页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

2.刷新和跳转

<!--30秒刷新一次浏览器-->
< meta http-equiv=“Refresh” Content=“30″>
<!--5秒刷新界面，刷新后跳转到autohome.com.cn网站-->
< meta http-equiv=“Refresh” Content=”5; Url=http://www.autohome.com.cn“ />

3.关键词

<!--关键词是用来做网站收录，爬虫等用的-->
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

4.描述

<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。">

5.X-UA-Compatible

微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。更多

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

title标签　　　　　　　　　　　　　　　　　　　　　　　　 

网页头部的信息

<title>第一个html</title>

link标签　　　　　　　　　　　　　　　　　　　　　　　　 

<!--这个ico就是网站标签上面的那个小图标-->
< link rel="shortcut icon" href="image/favicon.ico">

各种符号　　　　　　　　　　　　　　　　　　　　　　　　

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html 

空格符号为：&nbsp

大于号符号：&gt;

小于号符号：&lt；

p标签　　　　　　　　　　　　　　　　　　　　　　　　　  

p表示段落，默认段落之间是有间隔的！ 

<p>你猜猜这里是p标签</p>

br标签　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 br 是换行标签，作用

<p>你猜猜这里是p标签</p>
<br>
<p>你猜猜这里是p标签</p>

a标签　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 1.超链接标签

<a href="http://www.baidu.com" target="_parent"> 老男孩官网 </a>

target属性，_black表示在新的页面打开

2.锚点

　　也是超链接，但是超链接的地址是页面本身页面的某个id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#1"> 第一章 </a> &nbsp;
    <a href="#2"> 第二章 </a> &nbsp;
    <a href="#3"> 第三章 </a> &nbsp;
    <a href="#4"> 第三章 </a> &nbsp;
    <div id="1" style="height: 600px;">
            第一张
    </div>

    <div id="2" style="height: 600px;">
            第二张
    </div>
    <div id="3" style="height: 600px;">
            第三张
    </div>
    <div id="4" style="height: 600px;">
            第四张
    </div>
</body>
</html>

H标签 　　　　　　　　　　　　　　　　　　　　　　　　　　

 h标签总共有6个等级，分别为h1、h2、h3、h4、h5、h6

 加大加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
</body>
</html>

span标签　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

span 是一个白板标签，里面有多少个字符，就占多大的像素。不会跨行，后面的东西在span标签后面继续追加

<span>span1</span>
<span>span2</span>

div标签　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 

div标签也是一个白板标签， 

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

标签的分类　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

标签分为行内标签（也叫内联标签）、块标签

　　快标签：div，a，h，p等

　　行内标签：span标签，特殊符号等

标签存在的意义　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

后面我们学了css和js等，与div使用会使div变换成各种各样的效果

注意：标签之间是可以互相嵌套的

1

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xinzhiyu/p/6033009.html