HTML

1.概念

*Hyper Text Markup Language 超文本标记语言

• 超文本是用链接的方法，将各种不同空间的文字信息组织在一起的网状文本
• 标记语言：
   * 由标签构成的语言。<标签名称> 如html，xml
   * 标记语言不是编程语言

2.快速入门

• 语法：
  1.html文档后缀名 .html 或者 .htm
  2.标签分为：
   1.围堵标签：有开始标签和结束标签。
   2.自闭合标签：开始标签和结束标签在一起。
  3.标签可以嵌套：
   写法

           <a><b></b></a>   正确写法
           <a><b></a></b>   错误写法

  4.在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双引都可）引起来
  5.html的标签不区分大小写，但是建议使用小写
3.标签：
1.文件标签：构成html最基本的标签

• html：html文档的根标签
• head：头标签。用于指定html文档的一些属性。引入外部资源
• title：标题标签
• body：体标签
• ：html5中定义文档是html文档

2.文本标签：和文本有关的标签

* 注释：<!-- 注释内容 -->
* <h1>  to  <h6>：标题标签  h1~h6字体大小逐渐递减
* <p>：段落标签
* <br>：换行标签
* <hr>：显示一条水平线
属性：
*color：颜色
1.英文单词：red，green，blue
2.rgb(值1，值2，值3)：值的范围：0~255  
3.#值1值2值3：值的范围：00~FF之间
*width：宽度
1.数值：width = '20'，数值的单位，默认是px(像素)
2.数值%：占比相对于父元素的比例
*size：高度
*align：对齐方式
*center：居中显示
* <b>：字体加粗
* <i>：斜体
* <font>：字体标签

3.图片标签：

<img>: src 图片路径
相对路径：以 . 开头的路径
* ./ ：代表当前目录
* ../ ：代表上一级目录
src = "../img/01.png"
alt：当图片加载失败则显示文字信息
alt="图片加载失败"

4.列表标签：

*有序列表：
  *ol
  *li:列表项
*无序列表：
  *ul
  *li

5.链接标签：
 定义一个超链接
  href：指定访问的资源路径url
  target : 指定打开资源的方式
  _self： 默认本页面打开
  _blank：在空白页面打开（打开新的窗口显示）

6.div和span:
 div：作为容器存在，是一个块级元素，独占一行
 span：作为容器存在，是一个内联元素，信息在一行上显示

7.语义化标签：html5中为了提高程序的可读性，提供了一些标签
 1.header   头
 2.footrer   尾
8.表格标签：table

• table：定义表格
• width：宽度
• border：边框
• cellpadding：定义内容和单元格的距离
• cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
• bgcolor：背景颜色
• align：对齐方式
• tr：行
• td：单元格
• colspan：合并列
• rowspan：合并行
• th：表头单元格
• caption：表格标题
• thead：表示表格的头部分
• tbody：表示表格的体部分
• tfoot：表示表格的脚部分

3.表单标签
 1.表单：用于采集用户输入的数据。用于和服务器进行交互。
 2.标签form：用于定义表单，可以定义一个范围，范围代表采集用户数据的范围
 3.属性：
  * action：指定提交数据的URL
    action = “链接的目的地” 跟 a 标签很像
  * method：指定提交的方式
   方式分类：一共有7种，常用有2种
提交方式：
 1.get：
  1.请求参数会在地址栏中显示。会封装到请求行中
  2.请求参数大小是有限制的
 3.不太安全
 2.post：
  1.请求参数不会在地址栏中显示。会封装在请求体中
  2.请求的大小没有限制
  3.较为安全
如果用到表单，基本上使用post
表单项中的数据要想被提交，必须指定其name属性
3.表单项标签：

• input：可以通过type属性值，改变元素展示的样式
  type属性：
• text：文本输入框，默认值
  placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

*用户名：<input type="text" name="username" placeholder="请输入用户名"/>
* password：密码输入框
密码：<input type="password" name="password" placeholder="请输入密码"/>
* radio：单选框

注意：
 1.要想让多个单选框实现单选效果，则多个单选框的name属性值必须一样
 2.一般会给每一个单选框提供value属性，指定其被选后提交的值
 3.checked属性，可以指定默认值

性别:<input type="radio"  name = "gender" value="男" checked="checked" />男
<input type="radio"  name = "gender" value="女"/>女<br/>
*checkbox：复选框

注意：
 1.一般会给每一个复选框提供value属性，指定其被选后提交的值
 2.checked属性，可以指定默认值

爱好:<input type="checkbox" name="checkbox" checked="checked">游戏<br/>
<input type="checkbox" name="checkbox">篮球<br/>
<input type="checkbox" name="checkbox">足球<br/>

*file：文件选择框
图片：请选择一张图片

*hidden:隐藏域，用于提交一些信息。
一般保存的是唯一的标识值，通常是id
隐藏域：
*按钮：
submit：提交按钮。可以提交表单
button：普通按钮
image：图片提交按钮。src属性指定图片路径

• lable：指定输入项的文字描述信息
  注意：
• lable的for属性一般会和input的id属性值对应。如果对应，则点击lable区域，会让input输入框获取焦点
  用户名：
  
• select：下拉列表
• 子元素：option，指定列表项
• selected：设置选择默认选项

城市：<select name="city">
	      <option selected="selected"> 荆州</option>
		<option value = "2"> 徐州</option>
		<option > 许昌</option>
</select>

• textarea：文本域
• cols：指定列数，每一行有多少个字符
• rows：默认多少行

文本域：<textarea rows="5" cols="10" name="textarea"></textarea>

通用属性：
  name:代表提交参数的名称，用于（服务器）后台通过该名称来获取其value值
  value:用于提交到服务器的值