HTML简介及标签详解

目录

1、HTML概念

2、HTML网页基本结构

 3、HTML的常用标签

3.1、 H1~H6标题标签,效果是加粗字体,双标签,属于块状标签。

 3.2、 p段落标签,是一个双标签,效果是分端,属于块状标签。

 3.3、 s删除线标签,双标签,行内标签,效果是有条删除线。

3.4、  u下划线标签,双标签,行内标签,效果是有下划线

 3.5、 b标签,双标签,行内标签,效果字体加粗。

 3.6、i标签,双标签,行内标签,效果是字体变斜体。

 3.7、 img标签,单标签,行内块状标签,是图片标签,用于在网页中显示图片,其中src是图片的路径,alt是当浏览器找不到该图片时显示的文字信息,其中src中的路径可以是网络路径、本地路径和绝对路径。

3.8、 a标签,超链接标签,单标签,用于网页的跳转。

4、标签及用法

5、table表格标签

6、input标签

1、input里面有很多属性,其中type属性的用法很多,比如设置成text就是文本框。

2、type属性的作用

7、iframe内嵌框架标签

1、iframe里面的src是内嵌的地址。

2、name属性用于定位嵌入的浏览上下文的名称。该名称可以用作a标签与form标签的 target 属性值,也可以用作input标签和button标签的 formtarget 属性值,还可以用作window.open()方法的 windowName 参数值。

8、 补充HTML中的转义字符

9、列表标签


1、HTML概念

HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如JavaScript)。

2、HTML网页基本结构

第一行是HTML5的文档声明,还包含了html根部标签,head头部标签,body身体标签,title是网页的标题,其中显示在网页上的内容都写在body身体标签里面。

 3、HTML的常用标签

3.1、 H1~H6标题标签,效果是加粗字体,双标签,属于块状标签。

 3.2、 p段落标签,是一个双标签,效果是分端,属于块状标签。

 3.3、 s删除线标签,双标签,行内标签,效果是有条删除线。

3.4、  u下划线标签,双标签,行内标签,效果是有下划线

 3.5、 b标签,双标签,行内标签,效果字体加粗。

 3.6、i标签,双标签,行内标签,效果是字体变斜体。

 3.7、 img标签,单标签,行内块状标签,是图片标签,用于在网页中显示图片,其中src是图片的路径,alt是当浏览器找不到该图片时显示的文字信息,其中src中的路径可以是网络路径、本地路径和绝对路径。

3.8、 a标签,超链接标签,单标签,用于网页的跳转。

点击后会跳链接到你所指定的网页。

4、标签及用法

标签名标签的作用单/双标签
br换行
hr分割线
font字体(大小和颜色)

5、table表格标签

1、table标签里面一般放tr行,td单元格放在tr行里面。

2、应用场景:可用于页面的排版,布局等。

3、table标签里面td可以的设置的属性

solspan属性:跨列

rowspan属性:跨行

6、input标签

1、input里面有很多属性,其中type属性的用法很多,比如设置成text就是文本框。

2、type属性的作用

属性效果
text文本框
password密码框
email邮箱
number数字
date日期
time时间
datetime-local
日期+时间
radio单选(要实现单选还要设置name属性一样),如果要实现默认选中就使用checked
checkbox复选框(多选)
file文件选择器

3、以上都是表单标签一般写在form表单标签里面,其中还有select下拉框标签,配合option使用,还有文本域标签textarea。

7、iframe内嵌框架标签

1、iframe里面的src是内嵌的地址。

2、name属性用于定位嵌入的浏览上下文的名称。该名称可以用作a标签与form标签的 target 属性值,也可以用作input标签和button标签的 formtarget 属性值,还可以用作window.open()方法的 windowName 参数值。

3、效果

8、 补充HTML中的转义字符

转义字符描述
&nbsp转义为空格
&lt转义为小于号<
&le转义为小于等于号≤
&gt转义为大于号>
&ge转义为大于等于号≥
&copy转义为版权符号©

9、列表标签

1、有序(ol)和无序列表(ul),内部都是套li使用。

2、有序列表ol就是有顺序的列表,以下是效果图。

3、无序列表的作用就是没有顺序,效果图。

  • 35
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值