HTML基础

最新推荐文章于 2023-03-06 17:15:50 发布

「已注销」

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量375

点赞数

本文链接：https://blog.csdn.net/myfengcc/article/details/52040472

版权

第一章 HTML基础

1.1HTML简介

HTML文件就是包含具有特定含义的标签以及文本内容的文本文件。

1.2HTML基本组成

HTML主要由标签，文本内容，样式规则构成

1.3HTM文档结构

一个HTML文档<HTML></HTML>，由头部<head></head>和主体<body></body>构成

HTML是解释型语言，语法要求不严，为和xml，xhtml的语法衔接，文档结构尽量完整，

无文本内容的空标签，<br></br>建议使用<br/>

标签属性名称的大小写：html不区分大小写。同一个文件统一大小写，HTML 中建议使用小写，XHTML中必须小写

属性值：可以直接写，可以放在单引号，建议放在双引号中。

1.4HTML字符实体

	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

HTML会把连续的空白字符（空格，换行，制表符）当做一个处理，若要显示多个空格就要使用实体

实体大小写敏感

1.5HTML标签

1.5.1HTML基本标签

代码标签

<pre></pre>保留原有的排版格式，<xmp></xmp>示例代码

块标签

<span></span>:同一行中定义块<div></div>：独立占用一行

列表标签

内嵌标签<embed >页面嵌入flash 或视频

注释标签<!--~~~~~--!>

元信息标签<meta>:为页面提供相关的元信息的设置，如针对搜索了引擎的关键字、页面字符集等

1.5.2超链接标签

1.URL：统一资源定位符

URL的完整组成:协议、授权、主机、端口、路径、资源名称、查询字符串、锚点等8个部分

e.g.http://user:ped@10.0.1.1:8080/sub/index.html?name=tom#abc

“http”表示协议，另有https、ftp等协议；

"user:pwd@"表示授权账号与密码

“10.0.1.1”表示主机地址，也可以是类似于www.abc.cn的域名

“8080”：表示默认端口号 http协议的默认端口号是80

“sub ”表示资源路径

“index.html”:要访问资源的名称；

“？name=tom”表示查询字符串，符号“？”开头，以“名称=值”的形式组织，若有多个名称值“&”连接

“#abc”表示锚点，“#”开头

2.超链接

若，此url不完整，将当前页面的url相应部分加入到此URL中

target属性：默认值_self _blank _parent _top

3.锚点定位

-----

4.其他用法

1.5.3表格标签

1.5.4表单标签

隐藏表单域，<input type="hidden"></input>]

</select>

1.5.5框架标签

第二篇 XML篇

第三章XML基础

3.1XML简介

XML语言是Internet环境中跨平台的、依赖于内容的数据存储、交换技术，是当前处理结构化文档信息的最有力工具之一，

什么是 XML?

XML 指可扩展标记语言（EXtensible Markup Language）

XML 是一种标记语言，很类似 HTML

XML 的设计宗旨是传输数据，而非显示数据

XML 标签没有被预定义。您需要自行定义标签。

XML 被设计为具有自我描述性。

XML 是 W3C 的推荐标准

XML 与 HTML 的主要差异

XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计：

XML 被设计为传输和存储数据，其焦点是数据的内容。

HTML 被设计用来显示数据，其焦点是数据的外观。

HTML 旨在显示信息，而 XML 旨在传输信息。

3.2XML文档结构

一个最简单的XML文档，至少要有一个标签元素<root/>\

通常还会有声明、类型约束、样式表等，如下：

<? xml version="1.0" encoding="UTF-8"?>//声明 version是XML规范版本 encoding 设置文件内容的字符编码

<? xml-stylesheet type = "text/xsl" href=“stu.xsl”?>//声明什么式样表，type：式样表类型

<! DOCTYPE Studneg SYSTEM "stu.dtd"> //指定文档的类型约束定义，另外也可以使用Schema

<! -- student information -->//注释

<Student id= "s001"> //每个文档有且仅有一个根元素

</student>

3.XML基本语法

XML语法有很大的强制性

任何标签有始有终，成对出现
没有标签体的元素这样使用<tag/>XML解析器会翻译成<tag></tag>
同一属性不允许在同一元素中出现多次；
特殊字符（<>&）不能出现在属性值中

标签元素的主题内容主要有字符数据、CDATA节和子元素三种

<html> === &lt ====<! [CDATA[<html>标签是xxxxxx]]>

<![CDATA[……]]>就是CDATA节语法格式

3.4XML实体字符

XML也有实体字符5个（html有）

<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
'	撇号	'

xml的过于自由会让对方无法下手，所以xml文件的约束非常必要，介绍两种约束技术：DTD和Schema

3.5DTD

DTD文档类型定义，是早期用于XML约束的技术，有点简单，缺点功能较弱

3.5.1 使用DTD

在XML 中使用DTD三种方式：内部，外部，内外部结合

DTD文档有三种应用形式：

1.内部DTD文档： <!DOCTYPE 根元素[定义内容]>

2.外部DTD文档： <!DOCTYPE 根元素 SYSTEM "DTD文件路径">

3.内外部DTD文档结合： <!DOCTYPE 根元素 SYSTEM "DTD文件路径" [定义内容]>

内部：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE poem [

<!ELEMENT poem (author, title, content)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT content (#PCDATA)>

]>





<poem>

<author>王维</author>

<title>鹿柴</title>

<content>空山不见人，但闻人语声。返景入深林，复照青苔上。</content>

</poem>

外部：、

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE poem SYSTEM "dtd_1.dtd"><poem><author>王维</author><title>鹿柴</title><content>空山不见人，但闻人语声。返景入深林，复照青苔上。</content></poem>

<?xml version="1.0" encoding="UTF-8"?><!ELEMENT poem (author, title, content)><!ELEMENT author (#PCDATA)><!ELEMENT title (#PCDATA)><!ELEMENT content (#PCDATA)>

3.5.2 元素定义

DTD中使用ELEMENT来定义元素

<! ELEMENT NAME TYPE>

ELEMENT 是关键字，NAME是元素名，TYPE是元素类型。

常见的元素类型有：

EMPTY:空元素，没有主体内容

ANY：任意，既可以有文本内容，也可以有子元素

#PCDATA：文本类型，任何字符数据均可，但不能有子元素

子元素：由指定子元素按照指定次数、次序出现

使用子元素时,会使用到的特殊符号：

* 出现次数不限，同RegExp中的量词

+至少出现一次，同RegExp中的量词

?出现0或1次，同RegExp中的量词

,出现顺序

（）分组

|并列（或）

注：关键字一定要大写，元素名与类型之间一定要有空格

3.5.3属性定义

DTD中使用ATTLIST来定义元素的属性，一次可为一个元素定义多个属性，Attribute List 缩写ATTLIST

3.5.4实体定义

<?xml version="1.0" encoding="GBK"?>

<!DOCTYPE root[

<!ENTITY titlue "引用字符1">

<!ENTITY titlue2 "引用字符2">

]>

<root>

<title value="&titlue;"> &titlue; </title>

<title2>

<value><a>&titlue2;</a></value>

</title2>

</root>

3.6Schema

XML Schema 比 DTD 更强大。XML Schema 最重要的能力之一就是对数据类型的支持。

DTD不遵守XML语法（写XML
实例时候用一种语法，写DTD的时候用另外一种语法）
DTD数据类型有限（与数据库数据类型不一致）
DTD不可扩展
DTD不支持命名空间（命名冲突）

  
  
   
   3.6.1 命名空间
  
  
  
  
   
   目的：解决在同一文档中相同的元素名具有不同的含义而产生的命名冲突（类似于java中的包的概念）
  
  
  
  
   
   <prefix:naem xmlns:prefic="URL">
  
  
  
  
   
   ……
  
  
  
  
   
   </prefix:name>
  
  
  
  
   
   其中prefix 表示命名空间的前缀，name是元素名，xmlns：prefix用来定义前缀，URL表示所使用的命名空间路径
  
  
  
  
   
   <w:root xmlns：w="http://www.itany.com/XSD">
  
  
  
  
   
   ……
  
  
  
  
   
   </w:root>
  
  
  
  
   
   3.6.2XSD文件定义与使用
  
  
  
  
   
       与DTD不同，Schema只能使用外部方式，没有内部Schema。Schema文件使用xsd作为文件后缀
  
  
  
  
   
   xsd文件的基本结构如下：

  
  
   
   <?xml version="1.0"encoding=“UTF-8”?>

  
  
  
  
   
   <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

  
  
  
  
   
   targetNamespace="http://www.w3school.com.cn"

  
  
  
  
   
   xmlns="http://www.w3school.com.cn"

  
  
  
  
   
   elementFormDefault="qualified">

  
  
  
  
   
   <xs:element name="note">

  
  
  
  
   
       <xs:complexType>

  
  
  
  
   
         <xs:sequence>

  
  
  
  
   
   <xs:element name="to" type="xs:string"/>

  
  
  
  
   
   <xs:element name="from" type="xs:string"/>

  
  
  
  
   
   <xs:element name="heading" type="xs:string"/>

  
  
  
  
   
   <xs:element name="body" type="xs:string"/>

  
  
  
  
   
         </xs:sequence>

  
  
  
  
   
       </xs:complexType>

  
  
  
  
   
   </xs:element>
  
  
  
  
   
   </xs:schema>
  
  
  
  
   
   

  
  
  
  
   
   <!-- 对应的xml一个例子 -->

  
  
  
  
   
   <?xml version="1.0"?>

  
  
  
  
   
   <note>

  
  
  
  
   
       <to>George</to>

  
  
  
  
   
       <from>John</from>

  
  
  
  
   
       <heading>Reminder</heading>

  
  
  
  
   
       <body>Don't forget the meeting!</body>

  
  
  
  
   
   </note>

3.6.3数据类型

分为简单类型和复杂类型

元素可以是简单类型，也可以是复杂类型，视元素的内容和属性而定，如果元素有至少一个子元素或者至少有一个属性，就只能定义成复杂类型。而属性一定只能定义为简单类型。

Schema内置简单类型

String boolean byte int float double decimal dateTime date time Name QName ID IDREF

自定义简单类型 int 的基础上添加数值的下限

3.6.4常用元素

1.element：定义或引用元素

定义元素语法：

<xsl:element name="NAME" type="TYPE" />

或

<xsl:element name="NAME">

<!--类型定义--!>

</xsl:element>

引用元素语法：

<xsl:element ref="NAME"/>

2.attribute:定义或引用属性

3.simpleType：定义简单类型

4.complexType

5.group定义或引用元素组

3.7XSL

在xml中可以使用样式表技术除了css还有xsl。css只能改变数据的表面外观，xsl还可以改变数据的原始结构。

3.7.1基本语法

3.7.2XSL基本结构

XSL是可扩展的样式表语言的缩写，包含了XSLT（用于转换xml文档的语言）、XPath(用于在xml文档中导航的语言)、XSL-FO（用于格式化xml文档的语言）三个重要组成部分。

3.7.3XSL常用标签

template模板规则定义
apply-templates模板应用
value-of数据输出
for-each数据循环
if条件判断
choose、when、otherwise多分支判断
sort排序

、

第四章 XML解析

4.1XML DOM简介

JavaScript中有DOM（文档对象模型），当时的DOM是基于HTML文档的，这里的是基于XML文档的DOM.

XML DOM 是基于节点（NODE）类型的，其中几乎所有的类型都和节点有关，要么是继承自Node,要么是Node的集合。

4.2标准DOM解析

按照W3C的标准DOM分别使用JavaScript和Java对XML进行解析操作，客户端侧重读取，服务器端侧重写

4.2.1 JS解析XML

步骤：1.创建document对象，加载xml文档或XML格式字符串

2.加载xml文档或xml格式字符串

3.获取根元素

4.按照xml文档结构进一步处理

解析 XML 文件

function loadXMLDoc(dname){

try{ //Internet Explorer

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

}

catch(e){

try{

xmlDoc = document.implementation.createDocument("","",null);

}

catch{

alert(e.message);

}

}

try{

xmlDoc.async = false;//同步

xmlDoc.load(dname);//加载xml文档并解析

return(xmlDoc);

}

catch(e){

return(null);

}

}

解析 XML 字符串

function loadXMLString(txt){

alert("js:"+txt);

try{ //Internet Explorer

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async= false;

xmlDoc.loadXML(txt);

return(xmlDoc);

}

catch(e){

try{//Firefox,Mozilla,Opera,etc

parser = new DomParser();

xmlDoc = parser.parseFormString(txt,"text/xml");

return(xmlDoc);

}

catch(e){

alert(e.message())

return(null);

}

}

}

获取根元素

var root= doc.documentElement;root变量是element类型，可以通过root.nodeName(tagName)属性获取根元素的名字。

element类型有childNodes属性获取其子节点的集合（NodeList类型）

var subs = root.childNodes//获取根元素的子节点集合

var size = subs.length//获取子节点集合的数量

若有两个子节点时，IE中size=2，FF中size=5。原因：IE中或自动去掉元素之间空白的文本节点，EF中会原样保留。所以，为了个浏览器得到的结果相同，建议使用getElementByTagName方法获取子元素，代码如下，以保证各浏览器size的相同。

var subs = root.getElementByTagName("book")//获取根元素的所有名为book的子元素集合，返回NodeList

var size = subs.length；

Element的getAttribute方法获取指定属性的值，

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

第一章 HTML基础1.1HTML简介HTML文件就是包含具有特定含义的标签以及文本内容的文本文件。1.2HTML基本组成HTML主要由标签，文本内容，样式规则构成1.3HTM文档结构一个HTML文档，由头部和主体构成HTML是解释型语言，语法要求不严，为和xml，xhtml的语法衔接，文档结构尽量完整，无文本内容的空标签，建议使用标签属性名称的大小写：
复制链接

扫一扫