1.HTML概念

2.HTML文档基本结构

3.HTML常用标签

3.1.标签的使用

3.2.常用标签

3.2.1.文本标签h1-p-br-hr-span

3.2.2.图片标签-img

3.2.3.列表标签ul(ol)-li

3.2.4.定义描述标签dl-dt-dd

3.2.5.布局标签层-div

3.2.6.超链接-a

3.2.7.表格标签-table-tr-th-td

3.2.8.表格高级标签-caption-thead-tbody-tfoot

3.2.9.表单-form

3.3.标签分类

1.HTML概念

HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。

2.HTML文档基本结构

3.HTML常用标签

3.1.标签的使用

1.标签的分类

围堵标签：有开始标签和结束标签，例如 <html></html>
自闭和标签：开始标签和结束标签都在一个标签中 <br/>

2.标签可以嵌套

3.标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开

4.html标签不区分大小写，但是推荐全小写

<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称>
<p id="p1" name="p1">
</p>

3.2.常用标签

3.2.1.文本标签h1-p-br-hr-span

1.标题标签<h1></h1>

一般用在文章的标题上

2.段落标签<p></p>

一般用在正文。

3.换行标签<br/>

一般用在段落中强制换行。

4.水平线标签<hr>

一般用来分隔内容。

5.范围标签<span></span>

一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。
是为了改变局部内容样子，我们才通过范围标签包裹，然后修改它的样式。

3.2.2.图片标签-img

图片基本属性

设置图片的热点区域

图片img的map地图标签，包裹着多个热点区域area，每一个区域点击后跳转
一张图片上点击不同区域跳转到不同的网页的效果

3.2.3.列表标签ul(ol)-li

一般用在导航上，商品列表，图片排列等

3.2.4.定义描述标签dl-dt-dd

一般用在图文混编的场景中。
如下图图片下方文字对图片进行描述，这时候就可以使用定义描述标签。

3.2.5.布局标签层-div

一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局

3.2.6.超链接-a

超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能

页面间跳转

锚链接

当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也可以实现不同页面间的锚链接

本页面的锚链接

页面间的锚链接

3.2.7.表格标签-table-tr-th-td

规则表格

不规则表格-跨行跨列

3.2.8.表格高级标签-caption-thead-tbody-tfoot

标题标签和逻辑分区标签

逻辑分区标签主要包括头thead包裹字段行，tbody主体包裹内容行，tfooot结尾，通过逻辑分区标签整体控制样式，不需要一个个修饰。

3.2.9.表单-form

用于采集用户输入的数据。然后和服务器进行交互。

常用的表单项元素属性

下面是常用的表单项元素

文本框

密码框

单选按钮

复选框

文件域

日期-h5中的新特性

隐藏域

下拉列表框

文本域

提交按钮/图片按钮/重置按钮/普通按钮

button标签可以与input实现的按钮相互替换

label标签

3.3.标签分类

html标签可以分为块状元素和行级元素两类。

块状元素：

一般都是新起一行，可以容纳行内元素和其他块级元素；

行级元素：

一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。

PS:区分的简单方法：是否独占一行。

块状元素和行内元素的区别：

块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
块级元素可以设置宽高；行内元素设置宽高无效。
块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。（此处的属性稍后介绍）

标签归类：

属于块状元素的：

标题标签 h1-h6,

段落标签 p ,

水平线标签 hr,

有序列表标签 ol--li，

无序列表标签 ul--li，

定义描述标签 dl-dt-dd，

容器标签 div：

属于行级元素的：

范围标签：span

图像标签：img

3.4.框架iframe

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
例如大家可以观察一下自己的京东个人中心页面，点击左侧内容的时候，只有右边页面在变动。
通过超链接方式，可以在内嵌框架显示指定的页面，超链接中的target值要与框架的name值一致，才能对应起来。

3.5.框架集frameset

HTML5常用标签【知识点整理】相关推荐

html5 meta标签属性整理
html5 meta标签属性整理前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下 ...
HTML5 Audio标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
HTML5 Audio/标签Api整理（二）
1.实例2: 相对较完整 Html代码: <style>#volumeSlider .slider-selection {background:#bababa;} </style&g ...
04-前端技术_HTML与HTML5常用标签
目录一,HTML与HTML5常用标签学前准备 1,HTML简介 1.1 HTML是什么 1.2 HTML发展历史 1.3 HTML⽂档类型的设定 2,HTML基础语法 2.1 HTML基本结构: ...
自学整理之HTML5常用标签和知识——小白篇
自学完后整理出来的一些内容,希望能帮到同样是小白的你们 HTML介绍编译规范常用标签块级和行内元素小知识大用处 HTML介绍超文本标记语言(Hyper Text Markup Languag ...
html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构网页的内容二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
20-HTML与HTML5常用标签(前端)
感谢你的路过,希望学生的笔记能给你一点微不足道的参考 Java基础思维导图,完整Java体系的链接目录标题一,B/S: Browser/Server 浏览器/服务器端二, HTML 2.1. 概 ...
前端基础第一天：HTML常用标签知识点
学习目标理解: 相对路径三种形式应用排版标签文本格式化标签图像标签链接相对路径,绝对路径的使用 1. HTML常用标签首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写 ...
HTML和HTML5常用标签
文章目录 1.HTML简介 2.HTML基础语法 3.HTML文本标签 4.HTML格式化标签 5.HTML图像标签 6.HTML超链接标签 7.HTML表格标签 8.HTML表单标签 8.1.for ...

HTML5常用标签【知识点整理】

1.HTML概念

2.HTML文档基本结构

3.HTML常用标签

3.1.标签的使用

3.2.常用标签

3.2.1.文本标签h1-p-br-hr-span

3.2.2.图片标签-img

3.2.3.列表标签ul(ol)-li

3.2.4.定义描述标签dl-dt-dd

3.2.5.布局标签层-div

3.2.6.超链接-a

3.2.7.表格标签-table-tr-th-td

3.2.8.表格高级标签-caption-thead-tbody-tfoot

3.2.9.表单-form

3.3.标签分类

3.4.框架iframe

3.5.框架集frameset

HTML5常用标签【知识点整理】相关推荐

最新文章

热门文章