认识HTML5


前言

在学习爬虫的过程中呢,遇到了爬取网页内容看不懂的问题,所以,自己就跑去把基础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,走进前端开发的精彩世界探索的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML 5 特性 官方详细的文档是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性: • 语义化标记 • Form 表单增强功能 • 视频 / 音频 • 画布(Canvas) • 可编辑内容 • 拖放 • 稳健的数据存储 检测浏览器支持 在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走: • 何时能用 • 网页设计师的浏览器支持列表 • HTML5 测试 • 布局引擎对比 你还可以运行 Javascript(用Javascript 检测浏览器特性)来检测 HTML5 特性的支持。你还应该用用Modernizr: 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。 你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。 值得注意的变更点 除了新的特征,你还应该记下这些重要的变更点: • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:<!DOCTYPE html>。它有意不使用版本,因此文档将会适用所有版本的HTML。 • 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang="en"> 将对 HTML5 有效。 • 简单易记的编码类型 你现在可以在 meta 标签中使用 "charset":<meta charset="utf-8″ /> • 不需要闭合标签 在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。 • 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp> 简单代码示例: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> </body> </html> 你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。 语义化标记 HTML5 新增的一些新标签除了不仅仅是更具语义的 <div> 标签的替代品,并不提供额外的功能。这些都是新增的标签:<article>、<section>、<aside>、<hgroup>、<header>,<footer>、<nav>、<time>、<mark>、<figure> 和 <figcaption>。 这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+)支持。Javascript 提供了document.createElement(tagName) 的方法,让你可以用来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。 你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset: • HTML5 Reset CSS • Reset5 简单代码示例: 兼容 IE 的 HTML5 页面布局 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> [removed][removed] <![endif]--> </head> <body> <header> <hgroup> <h1>Page Header</h1> <h2>Page Sub Heading</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article> <header> <h1>Article Heading</h1> <time datetime="2010-05-05" pubdate>May 5th, 2010</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <section> <header> <h1>Section Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p> <footer> <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p> </footer> </section> <section> <header> <h1>Section Heading</h1> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <figure> <img src="item-1.png" alt="Club"> <img src="item-2.png" alt="Heart"> <img src="item-3.png" alt="Spade"> <img src="item-4.png" alt="Diamond"> <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption> </figure> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p> <footer> <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p> </footer> </section> <footer> Article Footer </footer> </article> <aside> <header> <h1>Siderbar Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p> </aside> <footer> Page Footer </footer> </body> </html> 注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

测开小趴菜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值