HTML&XML--源动力
初识HTML
HTML的概述
HTML的概念
HTML 全称为 HyperText Markup Language，译为超文本标记语言。
HTML 不是一种编程语言，是一种描述性的标记语言。
作用：HTML是负责描述文档语义的语言。
超文本，有两层含义：
（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。
（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。
标记语言
HTML 不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：
（1）标记语言是一套标记标签。比如：标签<a>表示超链接、标签<img>表示图片、标签<h1>表示一级标题等等，它们都是属 于 HTML 标签。
说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。
（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。
HTML是负责描述文档语义的语言
HTML 格式的文件是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。
image.png
html开发工具
html编写工具
- 文本编辑器：notepad,notepad++,editplus
- 开发工具：visual studio ,vscode等
- 网页设计工具：dreamweaver
<!DOCTYPE html> 文档什么头，即DTD(Documnet Type Define)
<html lang="en"> html标签，lang语言设置，en：定义页面语言为英语；zh-CN：定义页面语言为中文。
<head> 头标签
<title>：指定整个网页的标题，在浏览器最上方显示。
<base>：为页面上的所有链接规定默认地址或默认目标。
<meta>：提供有关页面的基本信息
<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
<link>：定义文档与外部资源的关系。
HTML标记语言是否区分大小写？
HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。
HTML页面的后缀名？
HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
image.png
HTML标签
排版标签
<h1>、<p>、<hr />、<br />、<div>、<span>
标题标签<h>：�使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，
属性值可以是：left、center、right。
段落标签<p>：
可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来，离不开段落标签。
就如同我们平常写文章一样，整个网页也可以分为若干个段落
水平线标签<hr />
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。
换行标签<br />
文本强制换行显示
<div>和<span>标签
div标签：可以把标签中的内容分割为独立的区块。必须单独占据一行。
span标签：和div的作用一致，但不换行。
div和span的区别？
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
超链接
超链接<a>
1、外部链接：链接到外部文件
a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
2、锚链接
给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说：页面的返回顶部。
超链接的属性
href：目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示
- _top：在顶级窗口中显示
图片标签
img
英文全称 image（图像），代表的是一张图片。html标记语句为：<img src="图片的URL" />
img能支持图片类型：
- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
- 不能往网页中插入的图片格式是：psd、ai等。
src属性
在写图片的路径时，有两种写法：相对路径、绝对路径
- 相对路径：相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和上一层目录
<img src="2.jpg">
<img src=".\2.jpg">
<img src="..\2.jpg">
- 绝对路径：
（1）以盘符开始的绝对路径。举例：
<img src="C:\Users\zhangay\Desktop\html\images\1.jpg">
（2）网络路径。举例：
<img src="https://img2.baidu.com/it/u=3884696342,748367806&fm=26&fmt=auto&gp=0.jpg">
alt 属性
alt：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。
title 属性
提示性文本。鼠标悬停时出现的文本。
列表标签
列表标签分为三种：
- 无序列表<ul>
- 有序列表<ol>
- 定义列表<dl>
1、无序列表<ul>，无序列表中的每一项是<li>
英文单词解释如下：
- ul：unordered list，“无序列表”的意思。
- li：list item，“列表项”的意思。
属性：
ul type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。项目符号可以是图片，需要通过CSS设置<li>标记的背景图片来实现(CSS中讲)。
<ul>里面的<li>标签也有type属性（虽然说这种写法很少见）。
注意：
- li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
- ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
- 列表之间是可以嵌套的。
ul标签实际应用场景：
导航条、明细列表
内嵌框架
<iframe>框架
内嵌框架用<iframe>表示。<iframe>是<body>的子标记。
属性：
src="subframe/the_second.html"：内嵌的页面路径
width=800：宽度
height=“150：高度
scrolling="no"：是否需要滚动条。默认值是true。
name="mainFrame"：窗口名称。公有属性。
注意：
利用name这个属性，我们可以在框架里进行超链。
表格标签
<table>表格
一个表格<table>是由每行<tr>组成的，每行是由每个单元格<td>组成的。 所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。 在以前，要想固定标签的位置，唯一的方法就是表格。
属性：
- border：边框。像素为单位。
- style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条）
- width：宽度。像素为单位。
- height：高度。像素为单位。
- bordercolor：表格的边框颜色。
- align：表格的水平对齐方式。属性值可以填：left - right center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
- cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。 注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
- cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
- bgcolor="#99cc66"：表格的背景颜色。
- background="路径src/..."：背景图片。 背景图片的优先级大于背景颜色。
- bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
- bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色 这两个属性的目的是为了设置3D的效果。
- dir：公有属性，单元格内容的排列方式(direction)。 可以 取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left） 既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。
<tr>：行
一个表格就是一行一行组成的。
属性：
- dir：公有属性，设置这一行单元格内容的排列方式。可以取值：
- ltr：从左到右（left to right，默认）
- rtl：从右到左（right to left）
- bgcolor：设置这一行的单元格的背景色。 注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
- height：一行的高度
- align="center"：一行的内容水平居中显示，取值：left、center、right
- valign="center"：一行的内容垂直居中，取值：top、middle、bottom
<td>：单元格
属性：
- align：内容的横向对齐方式。属性值可以填：left - right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
- valign：内容的纵向对齐方式。属性值可以填：top middle bottom
- width：绝对值或者相对值(%)
- height：单元格的高度
- bgcolor：设置这个单元格的背景色。
- background：设置这个单元格的背景图片。
单元格的合并
单元格的属性：
- colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
- rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。
转义符&注释符
转义符
在html中有些字符和html规范中是不识别或者冲突的，可以通过转义符来实现。
注释符
对html进行注释说明，只在源码中可见，在网页中是不可见的
image.png
HTML表单
表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
属性：
- name：表单的名称，用于JS来操作或控制表单时使用；
- id：表单的名称，用于JS来操作或控制表单时使用；
- action：指定表单数据的处理程序，一般是服务端地址
- method：表单数据的提交方式，一般取值：get(默认)和post
get提交和post提交的区别：
- GET方式： 将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。 特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
- POST方式： 将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。 特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
<input>：输入标签
用于接收用户输入。
属性：
type="属性值"：文本类型。属性值可以是：
- text（默认）
- password：密码类型
- radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。 ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
- checkbox：多选按钮，name 属性值相同的按钮作为一组进行选择。
- checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type="radio"或者type=checkbox时，可以用这个属性。属性值也是checked，可以省略。
- hidden：隐藏框，在表单中包含不希望用户看见的信息
- button：普通按钮，结合js代码进行使用。
- submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
- reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
- image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
- file：文件选择框。 提示：如果要限制上传文件的类型，
value="内容"：文本框里的默认内容（已经被填好了的）
size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。 注意size属性值的单位不是像素哦。
readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。
注意：多个个单选框的input标签中，name 的属性值可以相同，但是 id 的属性值必须是唯一的。我们知道，html的标签中，id的属性值是唯一的。
<select>：下拉列表标签
<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签
<select>标签的属性：
multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 multiple=""，也可以写成multiple="multiple"。
size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
<option>标签的属性：
selected：预选中。没有属性值。
<textarea>标签：多行文本输入框
text 就是“文本”，area 就是“区域”。
属性：
rows="4"：指定文本区域的行数。
cols="20"：指定文本区域的列数。
readonly：只读。
<label>标签
绑定文字和控件标签
让label标签的for 属性值，和 input 标签的 id 属性值相同，那么这个label和input就有绑定关系了。
XML简介
XML 被设计用来传输和存储数据。
XML的定义：
- XML 指可扩展标记语言（EXtensible Markup Language）
- XML 是一种标记语言，很类似 HTML
- XML 的设计宗旨是传输数据，而非显示数据
- XML 标签没有被预定义。您需要自行定义标签。
- XML 被设计为具有自我描述性。
- XML 是 W3C 的推荐标准
XML 与 HTML 的主要差异
- XML 不是 HTML 的替代，而是对HTML的补充。
- XML 被设计为传输和存储数据，其焦点是数据的内容。
- HTML 被设计用来显示数据，其焦点是数据的外观。
XML语法规则：
1、必须有声明语句，声明格式如下：
<?xml version="1.0" encoding="utf-8"?>
2、XML 标签对大小写敏感
3、XML文档有且只有一个根元素
4、属性值使用引号
5、所有的标记必须有相应的结束标记
6、所有的空标记也必须被关闭
7、XML 必须正确地嵌套
XML中的转义符：
如果你把字符 "<" 放在 XML 元素中，会发生错误，这是因为解析器会把它当作新元素的开始。
image.png
XML 中的注释
XML 元素：
从开始标签直到结束标签的部分称为元素，元素可包含其他元素、文本或者两者的混合物。元素也可以拥有属性。
XML元素 命名规则
- 名称可以含字母、数字以及其他的字符
- 名称不能以数字或者标点符号开始
- 名称不能以字符 “xml”（或者 XML、Xml）开始
- 名称不能包含空格
XML 属性
XML 元素可以在开始标签中包含属性，类似 HTML。
属性可以转化为元素，元素不一定转化为属性
属性的问题：
- 属性无法包含多重的值（元素可以）
- 属性无法描述树结构（元素可以）
- 属性不易扩展（为未来的变化）
- 属性难以阅读和维护
image.png
