1.html简介

HTML(Hypertext Marked Language)称为超文本标记语言，是一种标识性的语言。

它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

版本(新)：

HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手

2.H5包含的知识

HTML：通过标签搭建一个网页的框架

------------

CSS3、JS：

CSS：美化网页，布局

JavaScript(JS)：交互，比如轮播图、新闻滚动、表单校验......

3.常用的开发工具

1. HBuild[推荐]

2. WebStorm

3. Text

4. Dreamweaver：比较老的工具

4. H5的结构

Hello H5

5.常用标签

5.1 文本相关

5.1.1 标题标签(块元素[独占一行的元素])

默认加粗、而且独占一行

我是H1

我是H2

我是H3

我是H4

5.1.2 段落标签 p

5.1.3 换行、水平线

无需在标签内写内容，我们称之为自结束标签/单标签需要封装内容的标签，需要成对出现的

可以设置属性

---

5.1.4 特殊符号

空格：

大于号：>

小于号：<

版权：@copy;

5.1.5 斜体、加粗(行内元素[水平排列的标签])

加粗：b/strong

斜体：i/em

加粗

我是strong

斜体

我是斜体

5.2 超链接(行内元素)

5.2.1 主要功能

1.链接到另外一个页面/请求

2.锚点链接

3.a标签中可以嵌套img，作为超链效果

4.打开客户端工具，比如联系我们[发邮件、qq、迅雷]

5.2.2 关键属性

5.2.2.1 href:要到的目的地

5.2.2.2 name:锚点名字

第一步：定义一个锚点

第二步：跳转到锚点位置

5.2.2.3 target

_blank:开一个新窗口

_self:当前窗口

5.2.3 例子

1.跳转到01-index.html

2.跳转到百度

此标签也是一个行内元素

此标签也是一个行内元素

此标签也是一个行内元素

此标签也是一个行内元素顶部

top

bottom

打开邮箱客户端

5.3 图像

5.3.1 一般格式

5.3.2 属性

5.3.2.1 src：图片路径

本地资源

网络资源

5.3.2.2 width、height

width：设置图片宽度

height:设置图片高度

注意：width和height若指给定一个，图像不会变形 若不是原来比例，就会变形

5.3.2.3 alt:图像不能正常显示的情况下使用

5.3.3 例子

5.4 列表

5.4.1 无序列表

• 列表内容

特点：

1.每个li独占一行；默认样式黑色实心点

2.可以通过type属性修改列表样式

5.4.2 有序列表

1. 列表内容

特点：

1.每个li独占一行；默认样式数字

2.可以通过type属性修改列表样式

5.4.3 自定义类表

dl:自定义类别的开始

dt:一级分类

dd:二级分类

水果

苹果

5.5 表格

表格的基本标签

tr:行

td:单元格

th:默认加粗且居中，一般用于设置表头

td:无th默认的样式

table常用的属性：

border:设置边框

cellspacing:单元格之间的间隙

cellpadding:设置内容跟单元格内边框的间隙

合并列：

学生成绩

合并行：

张三

了解：thead、tbody、tfoot

用处：

1.可以单独设置某一部分的效果

2.tbody可以逐行显示【互联网的远古时代，网速比较慢的时候】

5.6 表单

表单元素

明确：表单作为向后台发送数据的一个重要元素，经常用到

1.所有的表单元素都在form中

form中常用的属性

①action:请求交给谁处理

②method:请求方式，常用的两种get和post

【面试】get和post的区别

get post

请求参数在哪显示 浏览器地址栏 不在地址栏【请求体】

大小有无限制 有限制 无限制，常用这个

安全性 不安全 安全

2.input系列，通过type属性去标识属于什么元素

type:text ----文本框，输入可显示的文字，比如用户名、昵称

type:password ---密码框，默认实心黑点显示

type:radio ---单选按钮

注意： ①name属性必须一致，否则无法实现单选

②value要给定：后台java代码中，要获取这个value值的

type:checkbox ----复选框 用法同radio

type:file ----文件框

type:hidden ---隐藏域

type:button ---按钮，不能直接提交表单，若提交需要结合后面的js

type:image ---用图片作为提交按钮

---邮箱 会自动验证Email地址格式是否正确

---网址：会自动验证URL地址格式是否正确

---数字

---滑块

---搜索框

3.select：下拉框 + option

4.textarea:文本域

5.表单元素的标注

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

标注的文本

注意：lable的for的值跟input的id值一致

属性：

readOnly：只读

disabled：

required：验证内容不能为空

placeholder：为input类型的文本框提供可描述输入字段预期值的提示信息

pattern：正则校验

5.7 音/视频

您的浏览器不支持 video 标签。