HTML、XML、XHTML的区别

HTML(Hypertext Markup language)

超文本标记语言,语法较为松散的、字母大小写可以混用、标签不闭合、浏览器都能以自己的方式读取(有可能误解),不会出现报错

XML(Extensible Markup Language)

可扩展标记语言,是用来存储数据结构的语言,它是严格的语言,书写标签需要按规范,否则存储的数据就会出问题

XHTML(Extensible Hypertext Markup language)

可扩展超文本标记语言,它类似HTML语言,不过它的语法是严格的,书写更加规范

HTML语义化

根据内容结构化,选择适合的标签
便于开发者阅读和写出更优雅的代码
便于浏览器的爬虫和机器很好的解析

内容、样式、行为分离原则

内容(HTML):页面的内容与结构,不管样式
样式(CSS):负责页面的样式,通过修改一个CSS代码来控制整个页面的样式,更加合理高效
行为(JavaScirpt):控制页面的行为

常见的meta标签

meta标签用于描述HTML的元数据,它不会显示在网上,但是机器可以识别

meta charset=”uft-8”;

声明文档的使用的字符编码

meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1”;

IE内核,用最新的标准渲染
chrome内核,用chrome标准渲染

http-equiv属性

相当于http的文件头作用,向浏览器传送html文档时先传递特定的信息以辅助页面显示;
对应的有content属性进行说明

<meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80">
<meta http-equiv="Content-Language" content="zh-CN">
<meta http-equiv="Refresh" content="n;url=http://yourlink">
<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
<meta http-equiv="windows-Target" content="_top">

meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no”>

当页面需要在移动端展示的时候,加上这条标签,移动端展示就能正常
device-width:设备的宽度
initial-scale:初始的缩放比例
maximum-scale:允许用户缩放到最大的比例
minimum-scale:允许用户缩放到最小的比例
user-scalable:用户是否可以手动缩放

meta name=”keywords” content=”谷歌浏览器”

告诉浏览器我的页面关键字是谷歌浏览器,这对搜索引擎优化(SEO)有帮助

meta name=”description” content=”最好的浏览器是谷歌”

对我的页面进行一个描述,这对搜索引擎优化(SEO)有帮助

name属性

元数据的名称
对应的有content属性进行说明

文档声明的作用、严格模式和混杂模式、<!doctype html>的作用

文档声明的作用

告诉浏览器该文档的类型,以哪种方式解析文档

严格模式和混杂模式

严格模式是指浏览器按照W3C标准来解析网页,发生在加文档声明的情况
混杂模式指浏览器给网页提供了相对宽松的方式来解析页面,发生在不加文档声明的情况

!doctype html

告诉浏览器,这是HTML5的文档类型

浏览器乱码

原因:没有<meta charset=”utf-8”>;浏览器解析时使用的编码和保存文档时使用的编码不匹配
解决方法:加<meta charset=”utf-8”>

常见浏览器及内核

浏览器	内核
IE	Trident
Mozilla FireFox	Gecko
Google Chrome	Webkit
Safari	Webkit
Opera	Presto

常见的标签及使用场景

标签	描述
<！DOCTYPE>	定义文档类型
<html>	定义一个HTML文档
<title>	为文档定义一个标题
<body>	定义文档的主体
<h1>~<h6>	定义HTML标题
<p>	定义一个段落
<br>	换行
<hr>	定义水平线
<!–注释–>	定义一个注释
<a href=”#”>	定义一个链接
<img src=”#”>	定义一个图片
<ul>	定义一个无序列表
<ol>	定义一个有序列表
<li>	定义一个列表项
<dl>	自定义列表
<dt>	自定义列表项
<dd>	自定义列表描述
<table>	定义一个表格
<th>	定义表格的表头单元格（table head）
<tr>	定义表格中的行
<td>	定义表格的中的单元内容（table data）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   h1,h2,h3,h4,h5,h6{
     margin: 0;
     padding:0;
   }
  </style>
</head>
<body>
  <h1>你好</h1>
  <h2>你好</h2>
  <h3>你好</h3>
  <h4>你好</h4>
  <h5>你好</h5>
  <h6>你好</h6>
  <p>你好</p><br/>
  
  <hr>
  
  <!-- 你好 -->
  
  <a href="#">你好</a><br/>
  
  <img src="http://note.youdao.com/favicon.ico" alt="图片">
  
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>西瓜</li>
  </ul>
  
  <ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>西瓜</li>
  </ol>
  
  <table cellpadding="4" cellspacing="10" border="1" width="100%">
    <thead>
        <caption>Table</caption>
        <colgroup>
        <col span="2" align="left">
        <col align="right">
      </colgroup>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </thead>
    <tbody>
        <tr>
            <td align="right">00</td>
            <td valign="bottom">01</td>
            <td>02</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </tbody>
    <tfoot>
        <td>20</td>
        <td>21</td>
        <td>22</td>
    </tfoot>
</table>
</body>
</html>

HTML表单

form表单

用来采集用户输入的信息,提交到服务器,实现页面的交互
表单用<form>…</form>标签包起来,这样浏览器才能通过标签界定要上传的表单内容

常见input标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <form action="xxx.php" method="post">
    <!--  输入单行文本 -->
    <input type="text" name="username" placeholder="用户名"><br/>
    
    <!--  输入密码 -->
    <input type="text" name="password" placeholder="输入密码"><br/>
  
    <!--  输入多选框 -->
    <input type="checkbox" name="hobby" value="read" checked>阅读
    <input type="checkbox" name="hobby" value="sport">运动
    <input type="checkbox" name="hobby" value="music">音乐<br/>
  
    <!-- 输入单选框 -->
    <input type="radio" name="sex" value="male" checked>男
    <input type="radio" name="sex" value="female">女</br>
    
    <!-- 输入下拉列表 -->
    <select name="city">
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="ningbo" selected>宁波</option>
      <option value="wuxi">无锡</option>
    </select><br/>
    
    <!--  输入文本域 -->
    <textarea name="article" cols="30" rows="10"></textarea><br/>
  
    <!-- 按钮 -->
    <input type="button" value="按钮">
  
    <!-- 提交 -->
    <input type="submit" value="提交">
      
    <!-- 重置 -->
    <input type="reset" value="重置"> 
    </form>
  
    
</body>
</html>

get、post方式

创建表单的时候选择的两种传输数据的方式

get

传输方式是把收集的信息组合成一个URL,向后端发送
多用于向后台得到数据,不会修改数据库
本质上是URL的拼接,受URL长度的限制,保密性差,输送信息小
得到的结果对应一个URL,结果页面会被浏览器缓存
只能向服务器发送ASCII字符

post

传输方式是把数据放着HTTP包里传输的,信息不会显示在URL上
多用于向后台输入数据,会修改数据库
保密性相对好,输送信息相对大
不会有浏览器缓存
可以向服务器发送整个IS0-10646的字符

保密性来说，post比get好

数据安全来说，get比post好

1 2	<form action="xxx.php" method="post">...</form> <form action="xxx.php" method="get">...</form>

name属性

对于前端来说,可以区分同一个name是同一组数据
对于后端来说，只有设置name的元素才能提交它们相对应的值,对发送过来的数据进行归类,从而在数据库获取数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="checkbox" name="hobby" value="read" checked>阅读
  <input type="checkbox" name="hobby" value="sport">运动
  <input type="checkbox" name="hobby" value="music">音乐
</body>
</html>

radio属性

name属性的值相同是一组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="radio" name="sex" value="male" checked>男
  <input type="radio" name="sex" value="female">女
  <input type="radio" name="age" value="adult" checked>已成年
  <input type="radio" name="age" value="child">未成年
</body>
</html>

placeholder属性

提示文本,帮助用户理解要输入什么信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="text" name="username" placeholder="用户名"><br/>
  <input type="text" name="password" placeholder="输入密码">
</body>
</html>.

type=hidden隐藏域

页面中对于用户是不可见的,在表单中插入隐藏域目的是在于收集或发送信息,便于后端处理数据

1	<input type="hidden" name="#" value="#">

表单的用法

单行文本
输入密码
单选框
多选框
文本域
下拉菜单
提交按钮

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form>
    <div class="login">
      <label for="username">姓名：</label>
        <input id="username" type="text" name="username" placeholder="用户名"><br>
      <label for="password">密码：</label>
        <input id="password" type="password" name="password" placeholder="输入密码">
    </div>
    <div class="sex">
      <label>性别：</label>
      <input type="radio" name="sex1" value="male"> 男
      <input type="radio" name="sex1" value="female"> 女
    </div> 
    <div class="orientation">
      <label>取向：</label>
      <input type="radio" name="sex2" value="male"> 男
      <input type="radio" name="sex2" value="female"> 女
    </div>
    <div class="hobby">
      <label>爱好：</label>
      <input type="checkbox" name="hobby" value="dota"> dota
      <input type="checkbox" name="hobby" value="tour"> 旅游
      <input type="checkbox" name="hobby" value="pet"> 宠物
    </div>
    <div class="textarea">
      <label>评论：</label>
      <textarea>
      </textarea>
    </div>
    <div class="mycar">
      <label>我的car：</label>
      <select name="car">
        <option value="BENZ">奔驰</option>
        <option value="BMW">宝马</option>
        <option value="FORD">福特</option>
        <option value="SB" selected>萨博</option>
      </select>
    </div>
    <div class="submit">
      <input type="submit" value="提交">
    </div>
  </form>
</body>
</html>

HTML、XML、XHTML的区别

HTML(Hypertext Markup language)

XML(Extensible Markup Language)

XHTML(Extensible Hypertext Markup language)

HTML语义化

内容、样式、行为分离原则

常见的meta标签

meta charset=”uft-8”;

meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1”;

http-equiv属性

meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no”>

meta name=”keywords” content=”谷歌 浏览器”

meta name=”description” content=”最好的浏览器是谷歌”

name属性

文档声明的作用、严格模式和混杂模式、<!doctype html>的作用

文档声明的作用

严格模式和混杂模式

!doctype html

浏览器乱码

常见浏览器及内核

常见的标签及使用场景

HTML表单

form表单

常见input标签

get、post方式

get

post

name属性

radio属性

placeholder属性

type=hidden隐藏域

表单的用法

meta name=”keywords” content=”谷歌浏览器”