HTML

一、HTML的基本概念
互联网三大基石：
1.html：显示数据
2.http：传输数据

3. url ：定位数据
   协议://ip地址或主机名:端口号/网络中的内容...
   HTML（Hyper Text Makeup Language）：
   超文本标记语言
   文本的概念：
   1.什么是文本：记录一些文本信息的称之为文本。
   2.什么是纯文本：只记录文字本身，不记录样式的文本叫纯文本。
   3.什么是超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
   html的版本：
   以后主流html5版本，html 4版本包括两个小版本 html4.01和xhtml1.0
   html的本质：
   使文本具有语义的功能
   html的语法：
   1.html的注释不能嵌套
   2.标签必须正确的关闭
   3.标签必须成对儿的出现，单标签除外
   4.标签不能随意嵌套
   5.标签中可以有属性，属性出现在首标签的尖括号内且必须和首标签有一个空白字符，属性和属性之前必须有一个空白字符
   6.属性必须有值，且值必须被引号引起来（在html中单引号和双引号是一个意思）
   7.标签使用小写字母
   （具体标签用法可上http://www.w3school.com.cn/查询）

二、常用标签
1、标题标签
标签：<h1>标题内容</h1>
<h2>标题内容</h2>
……
<h6>标题内容</h6>
（一共只有六级）
作用：附加标题样式
备注：不常用

2、段落标签
标签：<p>内容</p>
作用：划分段落
备注：常用

3、font标签
标签：<font size="大小" face="字体集" color="颜色">内容</font>
作用：控制字体的字体集，大小和颜色
备注：在HTML5中已被淘汰

4、链接标签
标签：<a></a>
作用：文档内部锚点，跳转到外部文档，下载资源
属性：href，target
备注：具体用法查看W3C

5、图像标签
标签：<img/>
作用：插入图像
属性：src，alt
备注：支持格式：png，jpeg，gif，pdf

6、带格式化的标签
标签：
<b>加粗字体</b>
<strong>另一种粗体</strong>
<big>大号字体</big>
<em>强调字体</em>
<i>斜体</i>
<small>小号字体</small>
_下标
^上标
<del>中划线</del>
<ins>下划线</ins>
<pre>预格式文本</pre>（即保留文本的所有格式）
<blockquote>引用</blockquote>

7、表格标签
标签：<table>代码</table>
作用：布局，呈现需要表格布局的内容
代码：
<tr></tr>行
<td></td>列
属性：
Border:规定表格边框的宽度
其余属性查看W3C使用

8、无序列表
标签：无序列表始于 <ul> 标签。每个列表项始于 <li>。
作用：是一个项目的列表，此列项目使用粗体圆点
代码：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

9、有序列表
标签：始于 <ol> 标签。每个列表项始于 <li> 标签。
作用：也是一列项目，列表项目使用数字进行标记
代码：
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

10、div标签
标签：<div>div标签</div>
作用：是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符
代码：
<div>
div标签
</div>
11、块级元素和行内元素
块级元素
独自站一行的标签
例：p标签
行内元素
在一行内紧挨着，直到一行结束
例：带格式的标签标签

四、表单
标签：<form></form>
作用:收集用户输入的内容
属性：

实例：

  <!--文本-->
  <p>
      请输入用户名：<input type="text">
      <!--默认值可用value属性，例如：
      <input type="text" value="用户名">
      -->
  </p>
  <!--密码-->
  <p>
      密码：<input type="password" >
  </p>
  <!--单选框-->
  <p>
      请选择性别：
      <input name="gender" type="radio">男
      <input name="gender" type="radio">女
  </p>
  <!--多选框-->
  <p>
      请选择爱好：
      <input type="checkbox">打篮球
      <input type="checkbox">游泳
      <input type="checkbox">打乒乓球
  </p>
  <!--数字-->
  <p>
      请选择年龄：<input type="number">
  </p>
  <!--日期-->
  <p>
      请选择出生日期：<input type="date">
  </p>
  <!--按钮-->
  <p>
      是否年满18岁：
      <input type="button" value="是">
      <input type="button" value="否">
  </p>
  <!--颜色-->
  <p>
      请选择你喜欢的颜色：<input type="color">
  </p>
  <!--范围-->
  <p>
      请选择范围：<input type="range" min="1" max="10">
  </p>
  <!--邮箱-->
  <p>
      请输入邮箱：<input type="email">
  </p>
  <!--提交-->
  <p>
      <input type="submit">
  </p>
  <!--重置-->
  <p>
      <input type="reset">
  </p>
  <!--网址-->
  <p>
      请输入个人博客：<input type="url">
  </p>
  <!--文件-->
  <p>
      请选择文件：<input type="file">
  </p>
  <!--选择-->
  <select>
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
  </select>