HTML

1  HTML概述

1.1     HTML是什么

HTML: 超文本标记语言，是开发网页的最基础的语言

W3C组织提供

HTML是一门标记语言，不是编程语言

HTML是一门标记语言，是利用标记来组织网页结构的

HTML是文档的一种

    word pdf txt…

1.2     HTML的结构

 

1.3     HTML语法

1.1.1     html标签

HTML是一门标记语言，标记也叫做元素/标签，标签分为开始标签和结束标签，如果标签内没有内容要修饰，可以合并成一个自闭标签。

如: <meta/> <br/> <hr/> <input/> <img/>等等

1.1.2     html属性

标签都可以具有属性，属性可以有多个，多个属性之间用空格隔开，属性的值用单引号或双引号引起来，或者不用引号。

1.1.3     html注释

注释: <!-- 注释内容 -->，注意html注释不能交叉嵌套

1.1.4     html空格和换行

如何在网页中做一个空格或者做一个换行？

由于在网页中多个连续的空白字符会被当成一个空格来显示，所以

如果要做一个空格，可以用转义字符 &nbsp;来代替;

如果要做一个换行，可以用<br/>标签来代替;

1.1.5     html和xml的区别

xml对语法的要求非常严格，如区分大小写，标签不能交叉嵌套,标签一定要关闭等

HTML对语法的要求非常不严格。 如: 标签名可以大小写混用，标签即使没有结束或者交叉嵌套，可能也会被浏览器正常解析(最好按照规范来书写!!)

xml中允许用户自己定义标签

HTML中的标签都是预定义好的，不允许用户自己定义

。。。

2 HTML标签

2.1     标题标签

<h1align="center">马云有没有去过天上人间...</h1>

<h2>马云有没有去过天上人间...</h2>

<h3>马云有没有去过天上人间...</h3>

<h4>马云有没有去过天上人间...</h4>

<h5>马云有没有去过天上人间...</h5>

<h6>马云有没有去过天上人间...</h6>

align属性:

    指定文本的排列方式: left(默认)居左，right居右，center居中

   

2.2     列表标签

2.2.1   无序列表

ul –- 用来定义一个无序列表

li –- 用来定义列表中的项

 

ul属性: type 定义无序列表中的项目符号类型

    desc(默认) circle square

2.3     img标签 -- 图像标签

<imgsrc="./img/1.jpg" alt="美女~!" width="500px" height="500px"border="5px"/>

<img/>标签用于在网页中插入一张图片

其中src属性用来指定图片的url地址

alt 用来指定代替图像显示的文本

width 指定宽度

height 指定高度

2.4     超链接 -- <a> 锚

(1) 创建指向另外一个文档的超链接

<a href="http://www.baidu.com"target="_blank">百度一下，你就不知道</a>

href属性 用来指定将要跳转的url地址

target属性 用来指定以何种方式打开超链

  _self 在当前窗口打开超链接

  _blank 在新的窗口中打开超链接

 

(2) 在当前页面的不同位置之间进行跳转

<a name=”top”></a>

…

<a href=”#top”>回到顶部</a>

 

2.5     表格标签

1.1.6     表格标签介绍

table – 用来定义一个表格

tr – 用来定义表格中的行

td – 用来定义表格中的单元格

th – 用来定义表头

1.1.7     table标签属性

border 定义边框

bgcolor 定义表格的背景颜色

cellspacing 定义单元格之间的距离

cellpadding 定义单元格边框和内容之间的距离

width  定义表格的宽度

align  定义表格的排列方式

1.1.8     tr标签属性

bgcolor 定义表格的背景颜色

align  定义表格行内容的排列方式

1.1.9     td标签属性

bgcolor 定义单元格的背景颜色

align  定义单元格内容的排列方式

width 定义单元格的宽度

height 定义单元格的高度

colspan 定义单元格横跨的列数

rowspan 定义单元格竖跨的行数

1.1.10   练习1：使用表格标签在网页中生成一个表格，如下图：

1.1.11   练习2：使用表格标签在网页中生成一个不规整的表格，如下图：

2.6     表单

2.6.1   浏览器向服务器发送数据的两种方式

思考：如果浏览器在和服务器进行通信的过程中，需要向服务器提交一些数据，比如在登陆时，需要向服务器提交用户名和密码，或者在百度搜索时，需要提交搜索的关键词汇，这些数据浏览器是如何发送给服务器的？

(1) 通过超链接向服务器发送数据

其实就是在超链接后面通过？拼接参数将数据带给服务器

参数和参数值之间用等号分隔，参数可以有多个，多个参数之间用&分隔，并且参数的名字可以重复。

(2) 通过表单向服务器发送数据

其实里通过表单及表单项标签，用户可以通过表单项输入数据，通过提交表单向服务器发送数据。

2.6.2   form标签

<form action=”http://www.baidu.com”method=”GET”></form>

action 必须存在的属性，用来指定表单提交的目的地地址

method 可选属性，用来指定以何种方式来提交表单，如果不指定，默认是GET提交

 

HTTP协议中规定了7种提交方式，其中5种都不常用，只用GET和POST。

只有使用表单，并且明确的指定了提交方式为POST时，才是POST提交，其他方式都是GET提交

1.1.12   GET和POST提交方式

GET和POST提交的区别: 主要区别在于请求参数传输过程的不相同

Ø  GET提交:

通过在地址栏拼接参数将数据发送给服务器

数据显示在地址栏，非常不安全

通过地址栏发送数据，数据量不能太大，不能超过1kb或者4kb

Ø  POST提交:

通过底层的流将数据发送给服务器

没有将数据显示在地址栏，相对更安全

没有通过地址栏发送数据，数据量理论上没有限制

 

2.6.3   表单中的项

表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它

(1)<input> 输入框

type属性: type属性的值可以有多个，当type属性的值不同时，input标签的功能效果也不同，例如:

    type=”text”       文本输入框

    type=”password”   密码框

       通过size属性设置框的宽度

type=”radio”      单选框  多个单选框的name属性值必须一致才可以单选，并且需要通过value属性指定被提交时的值

type=”checkbox”   复选框(多选框) 需要通过value属性指定被提交时的值

    type=”submit”     提交按钮 用来提交表单

type=”reset”      重置按钮，将表单项重置到初始时的状态

type=”button”     普通按钮

    type=”file”       文件上传项，可以选择文件进行上传

    type=”hidden”     隐藏域

 

通用的属性:

readonly=”readonly”   设置表单项为只读，只能读不能写，但是可以被提交

disabled=”disabled”   设置表单项为禁用，不能被提交。

 

(2)<textarea> 文本域

    <textarea cols=”30”rows=”5”>请输入个人信息…</textarea>

属性:

cols 设置列数，即输入框的宽度

rows 设置行数，即输入框的高度

   

(3)<select> <option>标签

    select 定义一个下拉选框

    option 用来定义下拉选框中的选项

    select属性:

       name属性 -- name指定该项提交时参数的名字

       size属性 –- 指定可见选项的个数

       multiple –- 指定支持多选

    option属性：

       value – 设置该选项被选中时所提交的value值。

       selected – 设置该选项默认被选中。

 

2.7     注册表单练习

 使用表格标签、表单及表单项标签、图像标签等实现网站注册表单。