5-1、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. 页面编码（告诉浏览器是什么编码）

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

  2. 刷新和跳转

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

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

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!--<meta http-equiv="Refresh" Content="5">  #每5秒刷新一次 -->    <meta http-equiv="Refresh" content="5;Url=http://www.baidu.com">    <!--跳转URL-->    <title></title></head><body><h1>yangmingwei</h1></body></html>
  3. 关键词

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

  4. 描述

    5. 例如：cnblogs

  5. X-UA-Compatible

    6. 微软的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

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

  2. icon

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

Style

在页面中写样式

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

Script

  1. 引进文件

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

  2. 写js代码

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

常用标签

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

  • a、span、select 等
  • div、h1、p 等
  • <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">

<title>测试</title>    <link rel="shortcut icon" href="favicon.ico"></head><body><h1 style="background-color:red">铭威</h1><a style="background-color:green;">襄阳</a></body></html>
  • 块级和行内的区别

各种符号

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

p 和 br

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

br 是换行

a标签

< a href="http://www.autohome.com.cn"> </a>

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

2、锚

跳转到本页面指定

<a href="#a2">书签</a><div id="a1" style="height:700px;">    11111111111111111111111111111</div><div id="a2" style="height:500px;">    22222222222222222222222222222</div>

H 标签

H1

H2

H3

H4

H5
H6

select 标签

上海  北京  广州     上海  北京  广州  广州     上海  北京  广州  广州       石家庄  邯郸      太原  平遥

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

Checkbox

<input type="checkbox" checked="checked">

redio

男 女 保密

男 女 保密

男<input type="radio" name="grender">女<input type="radio" name="grender">保密<input type="radio" name="grender">

password

用户名:<input type="text" value="mingwei">密码：<input type="password">

button

<input type="button" value="提交"><input type="submit" value="提交">

file

提交文件时： enctype=‘multipart/form-data‘ method=‘POST‘

textarea

<textarea>mingwei</textarea><textarea style="height:200px;width:500px;">mingwei</textarea>

label

姓名： 婚否： 
姓名： 婚否：

<label for="name2">    姓名：<input id="name2" type="text"></label>

ul ol dl

ul

  • ul.li
  • ul.li
  • ul.li

ol

  1. ol.li
  2. ol.li
  3. ol.li

dl

河北省
邯郸
石家庄
山西省
太原
平遥

table

1 2 3
1 2 3
1 2 3 
<table border="1">    <tr>        <td>1</td>        <td>2</td>        <td>3</td>    </tr></table>

1
1 2 3
1 2 3
1 2 3
1 2 3
1 3 3
3 3
3 3
3 3 3 
<table border="1">    <tr>        <td colspan="3">1</td>    </tr>    <tr>        <td rowspan="2">1</td>        <td>2</td>        <td>3</td>    </tr>    <tr>        <td>2</td>        <td>3</td>    </tr></table>

fieldset

登录

用户名：

密码：

form 表单

文件:enctype=‘multipart/form-data‘ method=‘POST‘

<form>    <p>用户名:<input type="text"></p>    <p>密码:<input type="password"></p>    <input type="submit" value="提交">    <input type="button" value="按钮"></form>
<form method="GET" action="http://www.baidu.com/s">    <input type="text" name="wd">    <input type="submit" value="submit"></form>

来自为知笔记(Wiz)

时间： 2024-10-30 22:17:26

5-1、HTML的相关文章

Linux命令自己总结

对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要,下面我们就开始了解一下linux目录结构的相关知识. 当 在使用Linux的时候,如果您通过ls –l / 就会发现,在/下包涵很多的目录,比如etc.usr.var.bin ... ... 等目录,而 在这些目录中,我们进去看看,发现也有很多的目录或文件.文件系统在Linux下看上去就象树形结构,所以

使用MyBatis Generator自动生成实体、mapper和dao层

通过MyBatis Generator可以自动生成实体.mapper和dao层,记录一下怎么用的. 主要步骤: 关于mybatis从数据库反向生成实体.DAO.mapper: 参考文章:http://www.cnblogs.com/wangkeai/p/6934683.html第一种方式:main方法运行(推荐) 1.在pom.xml中加入插件依赖: 2.写mbgConfiguration.xml文件,jdbc.properties文件 3.写/SSM/src/main/java/main/Ge

css中的px、em、rem 详解

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px

Python——深入理解urllib、urllib2及requests（requests不建议使用？）

深入理解urllib.urllib2及requests            python Python 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年,Python 源代码同样遵循 GPL(GNU General Public License)协议[1] .Python语法简洁而清晰,具有丰富和强大的类库. urllib and urllib2 区别 urllib和urllib2模块都做与请求URL相关的操作,但

eclipse插件之Findbugs、Checkstyle、PMD安装及使用

一.什么是Findbugs.checkstyle.PMD Findbugs.checkstyle和PMD都可以作为插件插入eclipse,当然也有单独的工具可以实现他们的功能,比如Findbugs Tool就可以不必插入eclipse就可以使用. 三者的功能如下表: 工具 目的 检查项 FindBugs 检查.class 基于Bug Patterns概念,查找javabytecode(.class文件)中的潜在bug 主要检查bytecode中的bug patterns,如NullPoint空指

2、@RequestMapping注解的用法

@RequestMapping有如下属性值: 1.@RequestMapping来映射URL    注解 @RequestMapping 可以用在类定义处和方法定义处.    类定义处:规定初步的请求映射,相对于web应用的根目录:    方法定义处:进一步细分请求映射,相对于类定义处的URL.如果类定义处没有使用该注解,则方法标记的URL相对于根目录而言: package com.springmvc.helloworld_1; import org.springframework.stereo

shiro实现APP、web统一登录认证和权限管理

先说下背景,项目包含一个管理系统(web)和门户网站(web),还有一个手机APP(包括Android和IOS),三个系统共用一个后端,在后端使用shiro进行登录认证和权限控制.好的,那么问题来了web和APP都可以用shiro认证吗?两者有什么区别?如果可以,解决方案是什么?看着大家焦急的小眼神,接下来挨个解决上面的问题. web和APP可以用shiro统一登录认证吗? 可以.假如web和APP都使用密码登录的话,那没的说肯定是可以的,因为对于shiro(在此不会介绍shiro详细知识,只介

爱奇艺、优酷、腾讯视频竞品分析报告2016（一）

1 背景 1.1 行业背景 1.1.1 移动端网民规模过半,使用时长份额超PC端 2016年1月22日,中国互联网络信息中心 (CNNIC)发布第37次<中国互联网络发展状况统计报告>,报告显示,网民的上网设备正在向手机端集中,手机成为拉动网民规模增长的主要因素.截至2015年12月,我国手机网民规模达6.20亿,有90.1%的网民通过手机上网. 图 1  2013Q1~2015Q3在线视频移动端和PC端有效使用时长份额对比 根据艾瑞网民行为监测系统iUserTracker及mUserTrac

Day4 - 迭代器&amp;生成器、装饰器、Json &amp; pickle 数据序列化、软件目录结构规范

---恢复内容开始--- 本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 需求:列表a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],要求把列表里的每个值加1 1 a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 2 b = [] 3 for i in a: 4 b.append(i+1) 5 a = b 6 print(a) 普通青

mongodb的增、删、改、插的一个实例

创建一个学生信息表(至少包含:姓名,性别,成绩,年龄) 1.写入十五条不同的数据 db.students.insertMany([{ name: "bob", age: 16, sex: "male", grade: 95},{ name: "ahn", age: 18, sex: "female", grade: 45},{ name: "xi", age: 15, sex: "male&quo