`
2008winstar
  • 浏览: 57508 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • chenke: 写的很好,也可以看看那这个文章,我感觉学的还可以。http:/ ...
    HTML

HTML

    博客分类:
  • HTML
 
阅读更多

HTML相关知识

 

HTML标签

一个完成的HTML标签如下图所示: 

 

与HTML相关的几个概念:

HTML,XHTML,DHTML,HTML5

 

HTML与XHTML的区别:

标签语法上:

(1)文档类型的声明不一样,常见的文档类型声明如图所示:



  

文档类型声明(DTD)定义了文档所允许的标签、语法。

该声明位于文档中最前面的位置,处于html标签之前,此标签告知浏览器文档使用哪种HTML或者XHTML规范。

DTD声明以<!DOCTYPE>开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会是浏览器在IE下开启怪异模式渲染网页。

同时,DTD也会影响浏览器的渲染模式。

通常浏览器有两种渲染模式:怪异模式与标准模式。当一个HTML文档缺少文档类型声明,或文档类型声明不正确时,浏览器会进入怪异模式,如图下所示:


 

标准模式时:



 
 

(2)HTML标签不区分大小写,XHTML要求小写;HTML5不区分,建议统一使用小写标签;

(3)HTML中有些属性的值为可选,XHTML要求所有属性必须含有属性值,HTML5属性值是可选的,如:

<input checked> <!-- HTML 语法 -->
<input checked="checked"> <!-- XHTML语法 -->

 

(4)HTML中属性值的引号为可选,XHTML为必须;HTML5中可选,但建议统一使用双引号;

(5)HTML中有些标签的关闭标签为可选,如<p>,由于p不可以嵌套,所以默认每个p会加上结束标签;还有如一些自闭合标签:<br>,<hr>等。而在XHTML中,所有标签都必须闭合,如<br/>。

 

HTML文档结构:

 

<head>中常包含的其他标签有:

<meta>,在其他标签之前声明页面字符编码,不然可能会影响title中出现的字符实体解析;

<title>,title中不会对标签进行解析,但可以解析字符实体 ,如&copy等;

其他标签:script,style,link,base,object

注释:<!-- -->,单行或多行

 

head标签及其包含的标签示意图:


 

 

<body>标签中:

块级元素:h1-h6,p,div,ul,ol,dl,li,form,table,hr

行内元素:a,b,button,img,input,label,select

块级元素与行内元素的区别:

(1)块级元素独占一行显示,而相邻的行内元素可以在同一行中并排显示;但通过CSS样式的控制,它们之间是可以互相转换的;

(2)对行内元素设置width,height是无效的,对于margin和padding只有水平方向上有效,而竖直方向无效,这里的无效是指不会对其周边的元素产生影响。

 

有些浏览器会直接忽略无法解析的标签和属性,可以通过“data-"的方式设置自定义属性。HTML中增加元数据属性,可以在标签中设置”data-变量名"属性及其相应的属性值,然后通过脚本可以获取自定义属性的值。

 

body标签及其包含的标签示意图:



 
 

 

 浏览器通过解析HTML文档,构建DOM(Document Object Model,文档对象模型)树,如下示意图:



 

 

1 利用form实现上传时,在form的属性中,method必须是post,且必须增加enctype="multipart/form-data"属性,否则就不能上传文件。

form元素enctype属性默认值为application/x-www-form-urlencoded

 

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

<meta name="viewport" content="width=device-width, initial-scale=1">

  • 大小: 23.5 KB
  • 大小: 241.2 KB
  • 大小: 24.9 KB
  • 大小: 25 KB
  • 大小: 7.6 KB
  • 大小: 25.1 KB
  • 大小: 29.9 KB
  • 大小: 42.5 KB
  • 大小: 68.9 KB
分享到:
评论
1 楼 chenke 2015-06-21  
写的很好,也可以看看那这个文章,我感觉学的还可以。
http://www.zixun24.com/storage/2015/05/web-html-head-07.html

相关推荐

    html2image 2.0.3 用于简单的html转图片

    Html2Image html2Image = Html2Image.fromHtml(sb.toString(),null); // 这边如果设置false,图片不会自动根据内容设置长宽默认长1024 ,宽768 //html2Image.getImageRenderer().setAutoHeight(false); ...

    html2fpdf 中文支持

    html2fpdf 或 html2pdf 是在fpdf上开发的一个可以将html页面转换为pdf文件的PHP类。 官方网址 http://sourceforge.net/projects/html2fpdf/ 近日,由于开发项目需要,需要一个能将页面转换为pdf的插件,以供客户端...

    80套HTML期末学生结课大作业作品(HTML+CSS+JS)动物宠物

    临近期末, 你是否还在为HTML网页设计期末作业而发愁,是否为还在为老师的网页制作作业要求感到头大?是否觉得HTML网页作业无从下手?,网页要求的总数量太多?是否找不到合适的模板?等等一系列问题。本资源就可以为...

    零基础学HTML CSS源代码

    HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章(源代码\第2章) 示例描述:本章演示常用HTML标记和格式 注释.htm 注释的用法。 标题标记....

    深入浅出 HTML

    在你成为一名行家之后,阅读HTML书籍给你的唯一感受就是厌烦吗?那么现在就是你拿起《深入浅出HTML与CSS、XHTML》来真正学习HTML的时候了。这本书展示了学习创建符合工业标准的Web页面的完整历程——然而,除了阅读...

    [深入浅出HTML].Head.First.HTML.with.CSS.and.XHTML.pdf

    Learn the real secrets of creating Web pages, and why everything your boss told you about HTML tables is probably wrong (and what to do instead). Most importantly, hold your own with your co-worker ...

    《HTML5开发精要与实例详解》配套源码

    此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔,内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点,几乎每个知识点都将配一个精心...

    网页设计期末大作业+html+css

    适合学生的html5响应式网站 成品可以让你们修改吗? 学生网页成品坚持每周更新 学生网站一定不能太专业,否则老师会发现的! DIV+css+js学生网站如何做? 不靠这个吃饭--你还用自己做网站吗? 大学生静态网页成品...

    基于HTML(品优购)电商项目项目的设计与实现(html前端源码+毕业设计)

    通用电商模板提供下载,都是html静态页面,设计好的前端页面 1 绪论 1 1.1 项目开发背景 1 1.2 论文的研究目的和意义 2 1.2.1 开发的研究目的 2 1.2.2 开发的研究意义 3 2 项目介绍 4 2.1 web前端开发 4 2.1.1 web...

    html案例html案例html案例

    html案例html案例html案例html案例html案例html案例html案例

    圣诞树HTML.html

    圣诞树HTML,下载点击即可使用,表白神器

    HTML+CSS网页设计与布局从入门到精通

    《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...

    ECharts+html大数据可视化大屏展示模板.zip

    ECharts+html大数据可视化大屏展示模板25套,可以根据自己需求修改数据和样式,都是基于ECharts的大数据可视化展示html的模板,直接打开html即可看到展示效果。内含:智慧物流大数据展示模板,智慧医疗大数据展示模板...

    html5shiv.js

    越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人在使用IE6,IE7,IE8。为了让所有网站浏览者都能正常的访问网站,解决方案就有下面两个: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同...

    HTML5图表框架echarts实战项目(50套源码),大数据平台展示可视化效果

    最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据,效果要高大上,还好之前接触过HTML5,所以第一时间想到就是echarts,这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...

    HTML5炫酷科技感十足数据可视化

    HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据...

    winfrom中嵌套html,跟html的交互

    winfrom中嵌套html,跟html的交互,源码就在里面一看就懂,很简单

    poi创建word、生成html、itext将html转换成pdf。pd4ml将jsp转成pdf

    1.用户导入word生成pdf -首先导入word的时候读取word里面的全部内容。调用(ReadAndWriteDoc)然后将内容 传送到createPdf里面生成pdf。导入的时候读取采用poi /生成的时候采用的是...4.将html转换成pdf(itext)

    html练习html练习html练习

    html练习 html练习 html练习 html练习 html练习 html练习

Global site tag (gtag.js) - Google Analytics