HTML概述

HTML是什么?

超文本标记语言（Hyper Text Markup Language），由标签组成，除支持普通文本之外，还支持流媒体（超文本）。

（1）主要强调HTML的标签都是成对儿的，有开始标签，一般都会有对应的结束标签。

（2）强调代码的合理缩进

（3）强调HTML语法松散不严格

（4）强调HTML不区分大小写

（5）强调标签的属性，每个属性都包括属性名和属性值，属性值可以使用单引号括起来，也可以使用双引号括起来。

（6）强调HTML中的注释怎么写

（7）<meta charset="UTF-8"/>解决乱码问题

乱码产生是因为文件采用UTF-8方式，但浏览器打开该文件时采用GBK方式打开的，所以乱码该行代码的作用就是

告诉浏览器采用哪一种字符编码打开该文件。

基本标签

在线调试网页->菜鸟教程

• 段落标记

  <p></p>
  

• 标题字

  <h1>
    h1~h6
  </h1>
  
  

• 换行

  独目标记

  <br/>
  

• 水平线

  <hr/>
  

• 预留格式

  <pre>
  for i = 1 to 10
       print i
  next i
  </pre>
  

• 粗体字

  <b></b>
  

• 斜体字

  <i></i>
  

• 插入字

  <ins></ins>
  

• 删除字

  <del></del>
  

• 右上角加字

  <sup></sup>
  

• 右下角加字

  <sub></sub>
  

• font标签

  <font size="3" color="red">This is some text!</font>
  

实体符号

• 空格

   

• 大于号

  >

• 小于号

  <

表格

• 基本表格

  <table border="像素" width="像素或百分比" height="像素或百分比" align="center">
    <tr align="center">
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td align="center">test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
  

• 单元格合并

  行合并：rowspan

  列合并：colspan

• th标签

• thead、tbody、tfoot标签

• 背景颜色和背景图片

  bgcolor background

图片

（1）<img src="" width="" height="" alt="" title=""/>

（2）只设置图片的宽度，高度等比例缩放，不建议设置高度，设置高度容易失真。

超链接

（1）超链接的作用

向服务器发送请求，链接到某个资源

（2）链接到网络中的某个资源

<a href="http://www.baidu.com"></a>

（3）链接到本地的某个资源

<a href="本地文件的相对路径或绝对路径都可以"></a>

（4）图片做超链接

<a href=""><img/></a>

（5）超链接的target属性

_blank _self _parent _top

（6）用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果，只不过超链接更傻瓜式。

列表

• 有序列表

  <ol type="1/A/a/I">
    <li>中国
      <ol>
        <li>北京</li>
        <li>天津</li>
        <li>上海</li>
      </ol>
    </li>
    <li>美国</li>
    <li>日本</li>
  </ol>
  

• 无序列表

  <ul type="disc/circle/square">
    <li>中国
      <ul>
        <li>北京</li>
        <li>天津</li>
        <li>上海</li>
      </ul>
    </li>
    <li>美国</li>
    <li>日本</li>
  </ul>
  

表单

• 表单起什么作用

  用户填写表单，提交数据给服务器，所以表单是专门用来收集用户数据的。

• 第一个表单

  <form action="http://192.168.101.2:8080/crm/login">
  用户名<input type="text" name="uname" />
  密码<input type="password" name="pwd"/>
  <input type="submit" value="登录"/>
  <!--普通按钮不具备提交表单的能力-->
  <input type="button" value="登录"/>
  </form>
  
  <!--submit放到form外部无法提交表单-->
  <input type="submit" value="登录"/>
  

  （1）action属性等同于超链接的href属性，填写请求的url

  （2）input标签属于输入域标签，input标签的type属性是text，表示文本框，是password，表示密码框

  （3）input标签的type是submit表示提交按钮，该按钮可以提交表单，所谓表单的提交是发送请求url，并携带数据给服务器。

  （4）所有按钮的value属性都是用来设置按钮上显示的文本内容

  （5）发送请求并提交数据时，数据格式遵循HTTP协议，所有浏览器都会采用这种格式：url?

  name=value&name=value&name=value...，其中name是input标签的name属性，value是input标签的value属性

  （6）文本框和密码框的value不需要开发人员指定，用户填写的数据就是value。

  （7）submit按钮放到form标签外面无法提交表单

  （8）普通按钮不具备提交表单的能力。

• 用户注册表单

  • 表单项包括

    （1）用户名 <input type="text" name="username" />，value属性不需要写，用户填写的数据就是value

    （2）密码

    <input type="password" name="pwd" />，value属性不需要写，用户填写的数据就是value

    （3）性别

    男<input type="radio" name="gender" value="m"/>，性别是单选按钮，用户只能选，所以该标签需

    要添加value属性

    女<input type="radio" name="gender" value="f" checked/>，checked默认选中

    同一组的单选按钮，name必须相同

    提交给服务器的数据是：gender=m 或者 gender=f

    （4）兴趣

    运动<input type="checkbox" name="aihao" value="sport"/>

    音乐<input type="checkbox" name="aihao" value="music" />

    跳舞<input type="checkbox" name="aihao" value="dance" checked/>，checked表示默认选中

    同一组的复选框，name相同

    以上三项都被选中的话，提交的数据是：aihao=sport&aihao=music&aihao=dance

    （5）学历

    <select name="xueli">
     <option value="gz">高中</option>
     <option value="zk">专科</option>
     <option value="bk" selected>本科</option>
    </select>
    

    selected默认选中

    当选中本科时，提交的数据为：xueli=bk

    （6）简介

    <textarea cols="列数" rows="行数" name="jianjie"></textarea>，文本域没有value属性，用户填写的内容就是value
    

    （7）注册按钮

    <input type="submit" value="注册"/>：该标签放在form标签内部才起作用

    （8）重置按钮

    <input type="reset" value="重置" />

    （9）再次强调表单提交时的数据格式

    action?name=value&name=value&name=value&name=value...

    这是HTTP协议中规定的，这些有规律的数据提交给服务器之后，以后服务器端的java程序要解析这段数据的

  • form表单的method属性

    （1）method不写或写上get都属于get请求，method写post才是post请求

    （2）get请求在HTTP协议的请求行上提交数据，最终提交的数据会显示在浏览器地址栏上

    （3）post请求在HTTP协议的请求体中提交数据，最终提交的数据不会显示到浏览器地址栏上

    （4）只有当使用form表单，并且method属性设置为post才是post请求，其他请求均为get，超链接

    也是get请求。

• 下拉列表怎么显示多个条目，怎么支持多选

  （1）支持多选：multiple="multiple"

  （2）显示多个条目：size="3"

• file控件

  （1）文件上传时使用 （2）<input type="file"/>

• hidden控件

  隐藏域控件，页面上看不到，但提交表单时会提交数据

• readonly与disabled

  （1）readonly：只读，不能修改，提交表单时数据会提交

  （2）disabled：只读，不能修改，提交表单时数据不会提交

• input 控件的 maxlength

  maxlength 属性规定输入字段的最大长度，以字符个数计。

• HTML中元素的id属性

  （1）讲述HTML文档是一棵树（DOM树），树上有很多节点，每个节点一般都会有id属性，id属性具有唯一性，在同一个文档中不能重复，id是该节点的唯一标识。后期所学的javascript语言可以对DOM树上的节点进行增删改，达到动态效果。javascript主要通过节点的id来获取该元素。

  （2）<a id=""></a>，超链接有id；<form id=""></form>，form表单有id；<input type="text" id="username"/>，input标签有id。

• div和span

  （1）理解div是一种图层，div主要使用在网页布局方面，通过后期所学的CSS可以设置div的宽度、高度、位置等样式。div比table的布局更加灵活。

  （2）div图层可以嵌套使用

  （3）默认情况下div独占一行，span不会独占行。