HTML

一、HTML的基础知识：

1、HTML（HyperText Marked Language）是什么？

超文本标记语言；超文本不仅能表示文字还可以表示图片音频视频等信息。

2、HTML的基本结构

 

 

 

 

二、HTML的基础标签

      1、标题标签

                   h1-h6   h1最大h6最小

 

 

 

2、段落标签

                   P标签标示一个页面的段落，自动换行

 

 

 

3、连接标签

                   A超链接；作用是跳转，包括页间跳转和页内跳转。

         Href；指定目标连接的URL地址；

                   Target：指定打开目标页面的方式

                            _self：在当前页面打开

                            _biank：在新页面中打开

                   Title：指定提示信息  鼠标悬停时显示

         （2）页内跳转

                   在目标标签处指定id=“。。。。”在连接处指定href=“#。。。。”

                   Id属性是页面元素的唯一标识

                   锚点（anchor）

 

 

 

      4、图片标签

                   Img（图片标签） 在网页中嵌入图片

src（路径） 图片资源的路径；可以是本地的也可以是远程的

                   Alt属性 当资源加载不出来的时候替代显示文字内容

                   Title鼠标悬停时显示名称

 

 

 

三、路径

         相对路径

                   ../表示上一级

                   ./表示当前目录

         绝对路径

四、列表标签

      1、无序列表

                   例：开班

                            入学

                            测试

                   Ul（无序列表）>li（一个列表项）

                            Type：指定无序列表的符号

                                     Circle（空心圆）

                                     Square（实心方块）

                                     Disc（实心圆）

 

 

 

 

 

 

2、有序列表

                   Ol（有序列表）>li(有序列表的列表项)

                            Type：指定有序列表符号（1、A、a、I、i）

                            Start：从几开始就写几，指定从第几个开始

 

 

 还有嵌套（其实就是无序和有序穿插来用）

3、自定列表

         Dl(自定义一个列表)>dt（列表项的标题）=dd（列表项的内容）

 

 

 

五、表单（form）

 

      1、什么是表单

                   收集用户的信息提供给后台的服务器

                   提交地址：action

      2、<form>

                  Action：指定提交的地址

                   Method：指定提交的方式 get/post两个值                

1)       长度的显示，get方式限制在2k字符以内

2)       安全性，get方式提交的数据呈现在地址栏，敏感数据容易被截获

 

 

 

3、文本框input

 

 

 

Type样式

         Value文本框中的初始文字

         Maxlength文本框中字符最大长度

         Size文本框的大小

         Placeholder占位符输入框为空的时候显示

         只有加了name属性才能提交到服务器

4、密码框

 

 

 

密码框和文本框是一样的，唯一不同的是密码框以掩码的形式显示内容，保证安全性

5、Lable

 

 

 

1）  可以单独设置样式

2）  For属性与input中id关联，单击文本可以获得对应的input的焦点

6、提交按钮

（1）       点击按钮跳转到form表单指定的action

（2）       Value属性；value对应的值就是按钮上显示的字

（3）       点击按钮将form表单中的input设立的name的属性和用户输入的值组成了键值对。并拼接在form表单中action属性值的后面

？表示参数 username是键名xiaoming是建值组成键值对多个参数之间用&分割

7、重置按钮

　　点击按钮重置表单内输入框

         Value属性，value对应值是按钮上显示的字

8、单选按钮

 

 

 

如果说若干个单选按钮编为一组（一组中只能有一个被选中），需要相同的name属性

Name相同才能互斥

如果需要默认选项，需要加上checked属性

标签属性的表示形式：

(1)    键值对：属性名=属性值

Type=“text”   name=“role”

(2)    一些值为布尔类型的属性直接使用属性名

Checked  readonly（只读）

9、多选按钮

 

 

 

10、普通按钮

 

 

点击按钮不会有任何反应

11、图片按钮

 

 

 

(1)    和提交按钮submit按钮是一样的

(2)    需要设置一个src属性，如果说没有找到图片（写了alt属性显示alt的值，没有写alt属性显示默认值提交，类似img标签）

12、button标签

 

 

 

（1）内容可以是任意资源

（2）如果button放在了form里作用和submit作用一样

13、文件选择框（file）

 

 

 

Accept可以指定选择文件类型

上传文件需要指定对应的表单属性

Enctype编码类型

14、下拉列表

 

 

 

Select定义了一个下拉列表

         Option定义了下拉列表的一个选项

         Select标签的name属性定义了提交的参数

         Option标签的内容显示了该选项显示的文本，vlue属性定义了选中选项时传递的参数值

 

 

 

可以通过multiple属性来实现。Ctrl+单机，可以多选

Select标签里size属性定义了下拉菜单显示选项的个数，当小于实际选项个数是，会自动增加一个滚动条

Selected默认选中

2）、选项分组：optgroup

 

 

 

Optgroup的lable属性定义分组显示文字，disabled设置该分组不可用

15、textarea

         主要是方便用户输入较多的文字信息，

rows指定编辑区域的行数，cols指定编辑区域的列数

16、隐藏域

 

 

 

当需要向服务器传递参数，并且参数无需用户输入，不需让用户看见

六、table和div

 表格

1、  table是表格

　　　　　　　　　　　　　　　　　　　　　　wed13班名册

 

学号	姓名	性别	年龄
01	张三	男	18
02	李四	女	19
03	王五	男	19
人数总计：39人

 

 

 

 

 

 

 

 

 

表格的组成部分：标题，表头，主题，表未，

         定义一个表格：table

         定义表格的标题：caption

         定义一个表头：thead（数据）

         定义一个主题：tbody

         定义一个表未：tfoot（汇总信息）

         定义一行：tr就是一行

         定义一个单元格：th或者td（th加粗一般用于表头部分td一般没有加粗，用于主体部分）

         Td中的rowspan是合并行数，colspan是合并列数

         Cellspacing 单元格之间的距离

 

         Cellpadding 边框与内容之间的距离

 

 

 

Div

Div定义一个分块

 

 

 显示的特点：在新的一行显示，块级标签

块 div; p; h1-h6; 列表（ul ol dl li dt dd）; form;  table

行内 span  a  lable  br

行内块 img  input  buttion  select textarea   

 

块级元素

1.       每个块都是从新的一行开始的，后面元素另起一行

2.       元素的宽度，高度，内外边距都可以设置

行内元素

         1可以和其他元素占一行

         2不可以设置元素的宽度，高度，内外边距

行内块元素

         1可以和其它元素占一行

         2可以设置宽度，高度，内外边距