概述

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

HTML文档

文档树

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

    1. 刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

    1. 关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >

    1. 描述

例如：cnblogs

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

网页头部信息

Link

    1. css

< link rel="stylesheet" type="text/css" href="css/common.css" >

    1. icon

< link rel="shortcut icon" href="image/favicon.ico">

Style

在页面中写样式

例如：
< style type="text/css" > 
.bb{ 
       background-color: red;
   } 
< /style> 

Script

    1. 引进文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

    1. 写js代码

< script type="text/javascript" > ... </script >

body标签

标签一般分为两种：行内标签和块级标签；

块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）

  • 标签之间可以嵌套
  • 标签存在的意义，css操作，js操作

P和br标签

　　<p>段落</p>        <!--p表示段落，默认段落之间是有间隔的！-->
　　<br/>                <!--br是换行-->
 
a标签
　　跳转：
　　　　<a href="http://www.baidu.com" target="_blank">点我</a>
　　　　<!--href表示跳转的地址，target="_blank"表示新窗口打开，默认为当前页-->
　　锚：
　　　　<body>

    　　　　<a href="#1">第一章</a><br/>
    　　　　<a href="#2">第二章</a><br/>
    　　　　<a href="#3">第三章</a><br/>
 　　  　　 <a href="#4">第四章</a><br/>
  
 　　 　　  <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>
 
h标签
　　标题h1、h2、h3、h4、h5、h6、h7表示不同的大小；
 

div标签

　　块级标签-白板，可以设置属性；

span标签

　　行内标签-白板

input系列

　　

  • text

    1
    <input type="text" name="user"/>
  • password
    1
    <input type="password" name="passwd"/>
  • submit
    1
    <input type="submit" value="登录"/>
  • button
    1
    <input type="button" value="登录"/>
  • radio 单选框
    1
    2
    3
    <p>请选择性别:</p>
    男:<input type="radio" name="sex" value="1" checked="checked"/>
    女:<input type="radio" name="sex" value="2"/>

页面效果如下：

  • checkbox 多选框

    1
    2
    3
    4
    5
    <p>爱好</p>
    篮球:<input type="checkbox" name="favor" value="1" checked="checked"/>
    足球:<input type="checkbox" name="favor" value="2"/>
    台球:<input type="checkbox" name="favor" value="3"/>
    <!--checked="checked"表示默认选择-->

页面效果如下：

  • file 上传文件

    1
    <input type="file" name="fname"/>

页面效果如下：

  • reset 重置
1
<input type="reset" value="重置"/>

页面效果如下：

python web前端的更多相关文章

  1. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  2. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  3. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  4. Python web前端 04 盒子模型

    Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...

  5. Python web前端 05 JavaScript

    Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...

  6. Python web前端 06 运算符 循环

    Python web前端 06 运算符 循环 一.运算符 #JS六大数据类型 #number 数字 #string 字符串 #boolean 布尔型 #function 函数 #undefined 未 ...

  7. Python web前端 07 函数及作用域

    Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...

  8. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  9. Python web前端 11 form 和 ajax

    Python web前端 11 form 和 ajax 一.打开服务器 将handlers.py.httpd.py和libs.py三个文件放入新文件夹中,双击打开httpd.py文件即可 二.ajax ...

  10. Python web前端 10 bootstrp

    Python web前端 10 bootstrp 1.媒体查询 <style> *{ margin: 0; padding: 0; } div{ width: 110px; height: ...

随机推荐

  1. WSDL项目----操作和请求

    至于现在你只看服务相关的特性,让我们尝试更多的操作和相应的请求. 操作 每个基于WSDL服务公开的操作包括一个请求和响应消息格式(可选). soapUI服务中的动作显示为节点在项目导航器的服务下 在s ...

  2. solr5.5 基于内置jetty配置 Ubuntu

    下载地址:http://archive.apache.org/dist/lucene/solr/ 在你的目录下直接解压 tar -zxvf xxxxxx.tgz 现在就可以直接开启solr了bin/s ...

  3. BlockCanary 一个轻量的，非侵入式的性能监控组件（阿里）

    开发者博客: BlockCanary — 轻松找出Android App界面卡顿元凶 开源代码:moduth/blockcanary BlockCanary对主线程操作进行了完全透明的监控,并能输出有 ...

  4. ACM: NBUT 1107 盒子游戏 - 简单博弈

     NBUT 1107  盒子游戏 Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:  Practice  Appoint ...

  5. React Native开发之npm start加速

    在Windows下好不容易安装好React Native环境之后,运行npm start,结果就是无限被等待,快的话160秒(将近3分钟啊....) 而Mac下因为有watchman所以是飞一样的速度 ...

  6. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  7. Django 基本命令

    1. 新建一个 django project django-admin.py startproject project-name 一个 project 为一个项目,project-name 项目名称, ...

  8. webservice总结

    webservice xml(DTD,Schema,Stax) SOAP jax-ws (java api xml webservice) 契约优先的开发模式 CXF Rest 异构平台之间的交互(. ...

  9. linux系统安装(上)

    1.VMware虚拟机的软件应用 www.vmware.com 2.linux系统安装设置(分区为重点) 3.远程登录管理工具介绍centOS5.5 使用虚拟机的优点 1.不用分区 2.可以完成本机与 ...

  10. .net core 1.0 中的asp.net identity 基本使用（一）

    1.修改密码强度:打开Startup.cs,在public class Startup{}内找public void ConfigureServices(IServiceCollection serv ...