HTML

概述:

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!(例:djangomoan模版引擎)

HTML文档

基本代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> </body>
</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、约束规则。

问题产生:

当Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs),但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。

为了保证自己的网站在不同的浏览器中都能正确展现,网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。

然而随着标准一致性变得越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。

因此立即遵循标准会产生问题,然而忽略标准则又会维持浏览器大战时(译注:微软和网景之间的一段竞争)所产生的混乱

解决方案:

  1. 允许网站开发者能够选择他们所熟知的模式。
  2. 依然使用旧式规则显示陈旧的网站。

换句话说,所有的浏览器需要提供两种模式:怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。

选择使用哪种模式需要一个触发器,而 “DOCTYP切换” 则用于此目的。依照标准:任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示 (X)HTML文档中允许有什么,不允许有什么,DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人 这个文档的类型风格

  1. 产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式:既依据旧式的CSS规则渲染网页。
  2. 相反,如果开发者明确知道包含DOCTYPE,他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式:即依据标准的CSS规则渲染网页。
  3. 任何新的或未知的DOCTYPE将触发严格模式。
  4. 一些页面依据怪异模式而写,但是却包含DOCTYPE。这种情况下各个浏览器依据自己的DOCTYPE规则列表来触发怪异模式,参照下面的浏览器比较图表

Head Part

1、Meta(metadata information)

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

1、页面编码

<meta charset="UTF-8">  #指定编码类型为UTF-8

2、刷新和跳转

<meta http-equiv="refresh" content="5">  #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳转页面至另一个网页

3、关键字

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

<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">

4、描述

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

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

5、X-UA-Compatible

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

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

2、title

网页头部信息,如下图所示:

3、Link

网页头部的图标

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

效果图如下:

导入CSS类似python中导入模块类似

<link rel="stylesheet" href="css/css_model.css">

4、Style

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

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

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

5、Script

1、在当前文件中写JS

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

引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script > 写js代码
< script type="text/javascript" > ... </script >

Body part

1、body里面分为两类标签:块级标签和内联标签,块级标签占用的是整行,内联标签占用的他所使用的实际大小如下图:

块级别标签&内联标签:

<!--内联和块级-->
<div style="background-color: red;">12</div>
<span style="background-color: green;">12</span>

2、特殊符号特殊处理

举例来说<p>是段落标签,如果我想输出<p>这个字符串,而不是想获取<p>的样式怎么办呢?

<div>
&lt;p&nbsp;&gt;
</div>

所以特殊符号有自己的定义更多请看连接:更多

常用标签

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

  • a、span、select 等
  • div、h1、p 等

 1、<p></p>标签和<br/>标签

<p></p>标签:段落标签,每一对p标签为一段,代码如下

<p>dsfadfds<br />dasfasdfasf</p>
<p>dsfasfasdsfafafdasdfa</p>
<p>dafdsfdsf<br /></p>

# <br />为换行标签

显示效果如下:

2、<a></a>标签

<a></a>标签用来跳转和锚

<a>标签之:跳转

默认如果在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本,如下面代码

 <a>a标签</a>

指定跳转后,代码如下

 <a href="http://www.baidu.com">跳转1</a>

如果让他用一个新的tab中打开连接地址代码如下:

<a href="http://www.baidu.com" target="_blank">跳转2</a>

显示效果如下

<a>标签之:锚

锚的作用是类似于读书时候的书签,当你你点击这个“锚”=“书签”,的时候就跳转到指定的位置

 <a href="#a2">
书签
</a>
<!--在标签里,ID是这个标签的唯一的值,我们在做锚的时候指定他的ID即可-->
<!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
<div id="a1" style="height:700px;">
mark_1
</div> <div id="a2" style="height:700px;">
mark_2
</div>

上面的代码中,如果点击了书签之后,那么就会跳转到id=a2的书签的位置!

3、H标签

即标题标签,代码如下

<h1>a</h1>
<h2>a</h2>
<h3>a</h3>
<h4>a</h4>
<h5>a</h5>

h标签可以自定义显示效果,如下代码

<h6 style="font-size: 65px;">a</h6>

显示效果如下:

4、Select标签

第一种select标签

<!--第一种select标签-->
<select>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3" selected="selected">广州</option>
<!--这里默认是广州因为selected="selected" 这里设置了默认的!-->
</select>
<!--第二种select标签-->
<select size="2">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>山东</option>
</select>
<!--第三种select标签,可以进行多选-->
<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>

显示效果如下:

5、input系列标签

input:checkbox标签-复选框

 <p>爱好(复选框):
<br /> 男1<input type="checkbox" value="1">
<br /> 男2<input type="checkbox" value="2">
<br /> 男3<input type="checkbox" value="3">
<br /> 男4<input type="checkbox" value="4">
<br /> 男5<input type="checkbox" value="5">
</p>

input:radio标签-单选框

<p>性别(单选框):
<br /> 男<input type="radio" name="gender" value="1">
<br /> 女<input type="radio" name="gender" value="0">
</p>

input:text & password 输入框

<p>用户名: <input type="text" value="user"/> </p>
<p>密码: <input type="password" value="pwd"/> </p>

input:button & submit 提交按钮, reset重置按钮

<input type="submit" value="submit"/>
<input type="button" value="button"/>
<input type="reset" value="reset"/>

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

<p>文件: <input type="file"/></p>

多行文本框

<p>备注 :<textarea></textarea></p>

form表单

<form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
<!--这里action是告诉html提交到那里-->
<!--method是通过什么方法去action指定的地址-->
<div style="border: 1px solid red">
<p>用户名: <input type="text" name="user"/> </p>
<!--这里的name="user" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
<p>密码: <input type="password" name="pwd"/> </p>
<!--这里的name="pwd" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
  
  <br /> 男<input type="radio" name="gender" value="1">
  <br /> 女<input type="radio" name="gender" value="0">
  
  <select name="city">
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广州</option>
  </select>
  <!--这里在选择之后,会把选择的value值赋予给name,当用户点击提交后就会提交到后台-->
</form>

8、label标签

有一种情况,看下图,在不使用label标签的时候,我们只能点进框体里去,否则就不能输入或选择,这样用户体验不是很好:

代码如下:

 <!--使用label标签,代码如下-->
<div>
<label for="name_1">
姓名:
<input id="name_1" type="text"/>
</label> <label for="name_2">
婚否:<input id="name_2" type="checkbox"/>
</label>
</div>

显示效果,这里我选择文字的时候也会进入到相应的框体,他类似一个跳转:

以上效果如下:

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<form action="http://192.168.11.88:8000/index/" method="post" enctype="multipart/form-data">
<!--这里action是告诉html提交到那里-->
<!--method是通过什么方法去action指定的地址-->
<div style="border: 1px solid red">
<p>用户名: <input type="text" name="user"/> </p>
<!--这里的name="user" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
<p>密码: <input type="password" name="pwd"/> </p>
<!--这里的name="pwd" 这里当咱们指定的action接收到的数据之后县会找到是否有这个name标签-->
<!--然后把这里的用户的输入复制给name为一个字典key:value模式-->
<p>邮箱: <input type="email"/> </p>
<p>性别(单选框):
<br /> 男<input type="radio" value="1">
<br /> 女<input type="radio" value="0">
<hr>
<br /> 男<input type="radio" name="gender" value="1">
<br /> 女<input type="radio" name="gender" value="0">
</p>
<p>爱好(复选框):
<br /> 男1<input type="checkbox" value="1">
<br /> 男2<input type="checkbox" value="2">
<br /> 男3<input type="checkbox" value="3">
<br /> 男4<input type="checkbox" value="4">
<br /> 男5<input type="checkbox" value="5">
</p>
<p>城市:
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<!--这里在选择之后,会把选择的value值赋予给name,当用户点击提交后就会提交到后台-->
<!--<select multiple>-->
<!--<option>北京</option>-->
<!--<option>上海</option>-->
<!--<option>广州</option>-->
</select>
<select>
<optgroup label="AAA">
<option>上海</option>
<option>北京</option>
</optgroup>
<optgroup label="BBB">
<option>广州</option>
</optgroup>
</select>
</p>
<p>文件: <input type="file"/></p>
<p>备注 :<textarea></textarea></p>
<!--使用label标签,代码如下-->
<div>
<label for="name_1">
姓名:
<input id="name_1" type="text"/>
</label> <label for="name_2">
婚否:<input id="name_2" type="checkbox"/>
</label>
</div>
<input type="submit" value="submit"/>
<input type="button" value="button"/>
<input type="reset" value="reset"/>
</div>
</form>
</body>
</html>

列表 ul/ol/dl

代码如下:

<!--ul列表在前面自动加“点”,代码如下:-->
<ul>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ul>
<!--ol列表在前面自动加“数字”,代码如下:-->
<ol>
<li>line1</li>
<li>line2</li>
<li>line3</li>
</ol>
<!--dl列表自动分组,代码如下:-->
<dl>
<dt>河北省</dt>
<!--dt是标签,dd是标签里的内容-->
<dd>石家庄</dd>
<dd>衡水市</dd>
<dt>山东省</dt>
<!--dt是标签,dd是标签里的内容-->
<dd>济南市</dd>
<dd>烟台市</dd>
</dl>

10、表格

<table border="1">
<!--border这里是加上边框-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!--一个tr是1行,一个td是一列,一行里可能有很多列。-->
<!--如果想加多个行就加多个tr即可-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

合并单元格(以上的表格标签其实还不是很标准,正常标准的标签如下:)

<table border="1" >
<thead>
<tr>
<th colspan="2">标题一</th>
          <!--这里colspan,就告诉html解析的时候占2个格-->
                <!--<th>标题二</th>-->
<th>标题三</th>
</tr>
      <!--一个tr是1行,一个td是一列,一行里可能有很多列。-->
    <!--如果想加多个行就加多个tr即可-->
        </thead>
<tbody>
<tr>
<td rowspan="2">内容一</td>
<td>内容二</td>
<td>内容三</td>
</tr>
<tr>
<!--<td>内容一</td>-->
<td>内容二</td>
<td>内容三</td>
</tr>
<tr>
<td>内容一</td>
<td>内容二</td>
<td>内容三</td>
</tr>
</tbody>
</table>
<hr color="green">

效果如下截图:

11、fieldset标签

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<fieldset>
<legend>协议</legend>
请仔细阅读协议内容:
</fieldset> </body>
</html>

效果如下:

前端 初级篇(HTML)的更多相关文章

  1. 前端 初级篇(CSS)

    CSS 简介 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:styl ...

  2. NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者

    NSIS安装制作基础教程[初级篇], 献给对NSIS有兴趣的初学者 作者: raindy 来源:http://bbs.hanzify.org/index.php?showtopic=30029 时间: ...

  3. Java工程师学习指南 初级篇

    Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  4. .NET Core CSharp初级篇 1-5 接口、枚举、抽象

    .NET Core CSharp初级篇 1-5 本节内容类的接口.枚举.抽象 简介 问题 如果你需要表示星期或者是某些状态,使用字符串或者数字是否不直观? 你是否发现,无论何种电脑,它的USB口的设计 ...

  5. Java工程师学习指南(初级篇)

    Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  6. Python 正则表达式入门(初级篇)

    Python 正则表达式入门(初级篇) 本文主要为没有使用正则表达式经验的新手入门所写. 转载请写明出处 引子 首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达 ...

  7. python 面向对象初级篇

    Python 面向对象(初级篇) 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发" ...

  8. 25个增强iOS应用程序性能的提示和技巧(初级篇)

    25个增强iOS应用程序性能的提示和技巧(初级篇) 标签: ios内存管理性能优化 2013-12-13 10:53 916人阅读 评论(0) 收藏 举报  分类: IPhone开发高级系列(34)  ...

  9. ASP.NET MVC 随想录——开始使用ASP.NET Identity,初级篇(转)

    ASP.NET MVC 随想录——开始使用ASP.NET Identity,初级篇   阅读目录 ASP.NET Identity 前世今生 建立 ASP.NET Identity 使用ASP.NET ...

随机推荐

  1. IOS开发之ZBarReaderView的使用

    IOS开发之ZBarReaderView的使用 HOMEABOUTGUESTBOOKCATEGORIESTAGSLINKSSUBSCRIBE 当开发IOS程序中需要用到二维码识别功能的时候,zbar这 ...

  2. windows下mysql表名不自动转换小写配置

    mysql5.6版本配置文件有两个 1.默认的配置在program files/MySQL/MySQL Server 5.6/my-default.ini 2.一个在programData/MySQL ...

  3. tomcat的bin目录中startup.bat/tomcat.6.exe/tomcat6w.exe区别

    一.tomcat6.exe 与 startup.bat的区别 1.两者都可以用于启动Tomcat tomcat6.exe则是必须将tomcat注册Windows服务之后才可以用于启动tomcat服务; ...

  4. AndroidManifest.xml详细分析

    原文地址: http://my.eoe.cn/1087692/archive/5927.html 一.关于AndroidManifest.xmlAndroidManifest.xml 是每个andro ...

  5. diango-tinymce富文本编译器

    应用到项目中 在settings.py中为INSTALLED_APPS添加编辑器应用 INSTALLED_APPS = ( ... 'tinymce', ) 在settings.py中添加编辑配置项 ...

  6. 网易2016研发project师编程题

    http://www.nowcoder.com/test/970447/summary [编程题] 小易的升级之路 小易常常沉迷于网络游戏.有一次,他在玩一个打怪升级的游戏,他的角色的初始能力值为 a ...

  7. java中訪问修饰符

    较之c++ 中 public,proctected, private 三种訪问控制, java多了默认訪问控制. java中四种訪问控制权限 简单描写叙述为一下四句: 1)private 仅本类可见 ...

  8. 关东升的《iOS实战:图形图像、动画和多媒体卷(Swift版)》上市了

    关东升的<iOS实战:图形图像.动画和多媒体卷(Swift版)>上市了 承蒙广大读者的厚爱我的<iOS实战:图形图像.动画和多媒体卷(Swift版)>京东上市了,欢迎广大读者提 ...

  9. Sql注入基础_access注入

    1.access注入攻击片段-联合查询 2.access注入攻击片段-逐字猜解法 3.Access偏移注入(表名和列名猜解成功率不是百分百,猜解不到) access注入攻击片段-联合查询法 判断注入 ...

  10. 实用的 集合工具类 和 String工具类

    集合工具类:CollectionUtil method: 1.isNotEmpty() 不为空 2.isEmpty() 为空 举例:map集合         Map<String,String ...