文章目录
- 前言
- 一、HTML5是什么?
- 二、HTML5代码实训
- 1.基础介绍
- 2.代码实训
- 总结
前言
在学习爬虫的过程中呢,遇到了爬取网页内容看不懂的问题,所以,自己就跑去把基础HTML5了解了一下,也对其有了一定的了解,所以也希望把HTML5的学习内容写成一篇文章,记录下来。
一、HTML5是什么?
HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。
HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的。
HTML5是前端开发三大核心之一,其他两个是CSS和JavaScript,CSS主要是美化网页的,JavaScript主要是做动态的。开始接触到了前端开发的时候,才会去想原来我们自己经常浏览的网页,其实是这么做出来了。
接触了HTML,慢慢的就会从一个网页使用者变成一个观察者,最后会成为网页的设计开发者,这就是前端开发的路
二、HTML5代码实训
1.基础介绍
(1).基础网页介绍
网页中head表示头部,其中的meta标签表示描述网站的一些内容,title标签是表示网页标题的。
body表示网页的主体,网页编写就是在body内完成的,body中的内容将会显示在网页中。
(2).基础标签(一般网页常用标签)
标签 | 说明 |
h# | 标题 |
p | 段落 |
br | 换行 |
hr | 水平线 |
(3).图像标签:img src="" alt=""
src表示图片地址,alt表示图片文字显示,当我们想要在网页中放入图片时,可以使用img图像标签
(4).链接标签 a href="" target=""
href表示所跳转的网页,target表示窗口在哪里打开,一般有_blank 在新标签中打开,_self 在自己的网页中打开。这是最常用的两种。在网页中会碰到好多链接标签,在爬取豆瓣电影网页的过程中我便看到了
(5).列表标签
列表标签分三类,一是有序列表,二是无序列表,三是自定义列表
由图展示:
补充type的用法:
在有序列表中,type可以更改序号的形式,可以是大小写字母,也可以是数字等
在无序列表中,type可以改变符号类型,有disc(实心圆点)、circle(空心圆点)、square(方块)
(6).表格标签 table tr表示行 td表示列
rowspan 跨行 colspan 跨列
(7).媒体元素
audio 音频 video 视频
可以向网页中插入视频或者音频
(8).表单标签
form 创造供用户输入的HTML表单
表单指创建一个HTML表单,让访问者在其中填写信息,在将其信息发送到服务器
表单在HTML中是很重要的一环,包含了文本框,单选多选框,电子邮件输入框,隐藏域等等
这些主要以代码呈现给大家了解
2.代码实训
本文章的代码实训主要就是以表单为例,因为自己还没有学习前端开发的CSS以及JavaScript,无法以真正的网页进行举例。
例:制作一个会员注册表单
这是一个简单的表单实例答案,接下来会用代码来给大家进行表单的基础知识应用作为一个会员注册,我们首先肯定是要有一些基础信息的
ID,密码,生日,国籍都是最基本的信息
input元素是定义浏览者可输入数据的输入字段,根据其中不同的type属性来区分
ID type为text 最基本的文本字段
密码 type为password 密码字段
出生日期 type为data 日期时间字段
国籍 是选择栏,用select表示,其中用option标签表示内容
还有常见的多选单选框 type分别为CheckBox,radio
重置 type为raset 提交 type为submit
这个一个会员注册表单的完整代码
总结
虽然学习的知识HTML的最简单的知识,但是通过这最简单的学习,让我了解到了前端开发,网页制作的乐趣,也让我在学习爬虫时对网页的认识增进一步,虽然现在学的还很浅显,但是随着时间的推移,我一定会走进HTML,走进前端开发的精彩世界探索的。