目录
1、文件标签
2、文本标签
3、图片标签
4、列表标签
5、链接标签
6、块标签
7、语义化标签
8、表格标签
9、综合案例
上一节介绍了HTML的基本概念,和基本语法,本节介绍下HTML的基本标签和表单标签。这部分学习可以参照W3Cschool,一个很好的网站。
1、文件标签
文件标签是构成HTML最基本的标签,包括:
- html:html文档 的根标签
- head:头标签,用于指定html文档的一些属性,引入外部的资源
- title:标题标签
- body:体标签
- :html5中定义该文档是html文档
2、文本标签
文本标签是和文本相关的标签,包括:
注释:
-
换行标签,自闭和标签 -
标题标签,字体大小逐渐递减,自带换行效果
-
段落标签
-
显示一条水平线,可以修改属性(color、width、size、align),但是不建议使用了,后续学习CSS时进行样式优化
- 字体加粗
- 斜体
- 字体标签,可以设置属性(color、size、face等)
居中标签
【举例】:利用IDEA新建HTML文件,观察使用以上几个标签的效果
文本标签
hello,
world
环游世界
环游世界
环游世界
环游世界
环游世界
环游世界
环游世界
第一段:环游世界环游世界环游世界环游世界环游世界环游世界
第二段:环游世界环游世界环游世界环游世界环游世界环游世界
第三段:环游世界环游世界环游世界环游世界环游世界环游世界
江山无限好
江山无限好
确实不错噢
确实不错噢
确实不错噢
另外,HTML中有一些特殊字符,要每个特殊字符标识不同,列表如下:
3、图片标签
展示图片,其重要属性 src:指定图片的位置,其余还有设置长宽、对齐属性等;
【举例】:图片标签的使用,注意下src 设置路径的两种形式
图片标签
4、列表标签
列表标签包括有序列表ol和无序列表ul,列表的每一项用li闭合。
【举例】:使用有序列表和无序列表
列表标签
- 上厕所
- 洗脸
- 刷牙
- 吃饭
- 上厕所
- 洗脸
- 刷牙
- 吃饭
- 上厕所
- 洗脸
- 刷牙
- 吃饭
5、链接标签
a:定义一个超链接,关键属性:
- href:指定访问资源的URL
- target:指定打开资源的方式
_self:默认值,在当前页面打开
_blank:在空白页面打开
【举例】:使用链接标签
链接标签
点我
点我_本页面跳转
点我_新选项卡跳转
6、块标签
次此处简单介绍div和span标签,后续一般配合css使用。
【举例】:div 和 span 标签
块标签
百度
一下
百度
一下
7、语义化标签
html5中,为了提高程序的可读性,使用的标签,一般也是结合css一起使用。
【举例】使用header、footer
块标签
我是头
8、表格标签
html中表格的形式,先有行,然后每个行中定义单元格。
- table:定义表格,一下属性了解即可,一般使用css控制表格样式
width:宽度
border:边框
cellpadding:定义内容与单元格之间的距离
cellspacing:定义单元格之间的距离,若为0,则单元格的线会合为一条
bgcolor:表格背景色
align:表格对齐方式 - tr:定义行
- td:定义单元格
- th:定义表头单元格
【举例】:使用表格标签
表格标签
编号
姓名
成绩
1
张三
100
2
李四
99
其他相关标签:
- caption:定义表格标题
- thead:表示表格头部分
- tbody:表示表格体部分
- tfoot:表示表格尾部分
9、综合案例
做一个模拟百度网站的首页,早期没有css时,基本都用的是table进行布局:
- 1.确定使用table进行布局
- 2.如果某一行只有一个单元格,则使用
- 3.如果某一行有多个单元格,则使用,内嵌单元格,避免使用合并单元格方式,不利于维护
模拟百度
新闻
hao123
地图
视频
贴吧
学术
更多
抗击肺炎
南京
晴15℃
设置
账号
作于202005181145,已归档
———————————————————————————————————
本文为博主原创文章,转载请注明出处!
若本文对您有帮助,轻抬您发财的小手,关注/评论/点赞/收藏,就是对我最大的支持!
祝君升职加薪,鹏程万里!
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.e1idc.net