html 基础篇

一、html 定义、语法、及xhtml xml的区别

html: 超文本标记语言，hyper text markup language
标记（又叫元素）：用尖括号括起来的，用于描述功能的特定符号。标记分为封闭型（双标签）和非封闭型（单标签）。 比如：



属性：用于修饰元素。属性和值用等号连接，值用双引号括住。
例子：

。
绝大多数元素都支持的属性叫标准属性： id title class style
注释的语法:
相似体：xml 和xhtml.
（摘自：http://www.cnblogs.com/shishixiaozi/p/5688590.html）
他们的定义：
①、html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；
②、xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；
③、xml即时可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签。（前些时候xml也用于网站前后端的数据传递，现在网站基本上都用json 格式的字符串来传输数据）
他们的区别：
①、xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套；
②、对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的，

和

是不同的标签；
③、xhtml的属性值必须在引号之中；xhtml不支持属性简略写法。比如h5 （h5 以下表示html 5 简称）提议的 当属性值为true时checked 简写。这个在xhtml是不支持的。
④在xhtml中，name属性是不赞成使用的，在以后的版本中将被删除。

二、html的标签结构　

1.基本结构
是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。h5以下版本：需要写明dtd的类型，dtd类型有3类：过渡的(Transitional) 严格的(Strict) 框架的(Frameset)。h5 提供了这部分的简写：
页面开始的标签，可添加全局生效的属性。比如：lang 页面的支持的语言，style:”font-size:14px“ (手机兼容的字体大小定义)。
这标签支持的属性详细列表：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
定义全局信息
定义网页的编码格式
网页标题

网页主体

网页结束标签
2. head 里面的标签及用法
允许搜索机器人搜索站内所有连接。如果不想被搜索，设置name=”robots.txt”。
跟百度搜索有关
跟百度搜索有关
视口设置，设置网页的宽度等于设备的宽度，初始倍数为：1，不允许客户调整窗口大小。响应式网站必用，手机网站也用到。
设置IE 浏览器用最新版本来渲染
用于引入外部文件（css或者icon）
引入icon的例子：




css 内部样式，建议用外部样式来配置css
js脚本，建议js都放置在的标签之前。
async 属性规定一旦脚本可用，则会异步执行。
注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
注释：有多种执行外部脚本的方法：
如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

三、常用标签

标签（又叫元素）：由<>括起来的内容；便签分为单标签和双标签。
单标签有

---



如果按作用分：标签又分为行内元素和块级元素；
行内元素：span a img s b em strong i sup sub audio svg video等
块级元素：p div h1~h6 等
h5 新加的结构标签：header 页头 nav 定义导航条 section 主体内容部分 aside footer定义页脚
1 a 标签

作用：
① 超链接，完成页面的跳转动作。
href=”#” 跳到页面顶部
href=”javascript: void(0)” 屏蔽a 标签的跳转动作
② 目标为下载资源

③ 电子邮件连接
打开邮件
④ 连接到JS
执行JS功能
⑤ 锚点，跳转到已标记的锚点
怎么标记锚点： 其他标签:内容
怎么跳转到指定锚点：
本页面跳转：内容
跳转到其他页面锚点处： 内容
2. form 表单
表单作用：收集数据并提交给服务器
① 表单元素：

action 定义表单提交时发生的动作，值为要传递地址。省略为，提交给本页。
method: 定义表单提交数据的方式；跟据http协议，提交方式共有8种。最常用的有get\post 请求。
enctype: 指定编码方式。编码方式有3中，application/x-www-form-urlencoded 默认方式；multipart/form-data 将文件进行二进制提交（不包括字符\标点）；3. text/plain 将表单中的普通字符进行二进制编码提交。
name: 提交数据时用到，用于区分不同的表单
② 表单控件input
作用：用于接收用户数据并依托于表单提交服务
分类： 文本输入框（text，password）,按钮，单选，复选，隐藏，文件选择框，图片。
h5 新加的类型：search tel url range number color email week date month
③ textarea 文本域
④ select 和option
⑥label 用法 控件 .
⑦fieldset 用法

分租标题

例子：

 <form action="http://www.baidu.com" method="post" name="form1" id="f1">
    <fieldset>
      <legend>用户基本信息legend>
    
     <p>
        用户名：<input type="text" name="txtName" maxlength="10" placeholder="请输入用户名">
     p>
     <p>
        密 码：<input type="password" name="txtPwd" maxlength="20" placeholder="请输入密码" value="123456">
     p>
     <p>
        确认密码：<input type="password" name="txtConfirmPwd" disabled value="123456">
     p>
     
     <p>
       用户性别：
       <input type="radio" id="chkMale" name="rdoGender" value="M" checked>
       <label for="chkMale">男label>

       <input type="radio" id="chkF" name="rdoGender" value="F">
       <label for="chkF">女label>
     p>
    fieldset>
     
     <p>
       用户爱好：
        <input type="checkbox" name="chkHobby" value="Eat">吃
        <input type="checkbox" name="chkHobby" value="Drink">喝
        <input type="checkbox" name="chkHobby" value="play" checked>玩
        <input type="checkbox" name="chkHobby" value="happy">乐
     p>

      
        <p>
          <input type="hidden" name="txtID" value="1102345">
          <input type="file" name="txtFile">
        p>
      
       <p>
         自我介绍：
         <textarea name="txtIntro" cols="50" rows="10">这家伙很懒，什么都没留下textarea>
       p>
      
      <p>
        籍贯地址：
        <select name="selAddress">
          <option value="BJ">北京option>
          <option value="TJ">天津option>
          <option value="SH">上海option>
          <option value="CD">成都option>
          <option value="CQ">重庆option>
          <option value="GZ">广州option>
        select>
      p>
      <p>
        就业城市：
         <select name="selCity" size="4" multiple>
          <option value="BJ">阿富汗option>
          <option value="TJ">伊拉克option>
          <option value="SH">叙利亚option>
          <option value="CD">印度option>
        select>
      p>
     
      <p>
         <input type="submit" value="提交">
         <input type="reset" value="重置">
         <input type="button" value="普通">
         <input type="image" src="images/btn_login.JPG">
         <button>另提交button>
       p>

    form>

四.属性

属性：用于修饰标签内容
语法：写在<>里边，属性=”“。如：width=”“100
标准属性：id class style title