HTML知识复习

HTML5学堂:本篇文章主要是从头到尾串一下HTML4.0的知识点。很多知识在网站各个文章中都已经讲解过了,在这里就不再重复书写了。学习时,知识点固然重要,但是能否将知识点串成线,织成网?希望大家能够通过此文章,与我一起将HTML4.0的知识更好的串下来。

另外,本篇文章献给我亲爱的学生们使用,希望能够在复习方面能够帮上你们的忙。

标签的基本分类

在原来CSS出现、普及之前,HTML标签有很多种,主要分为结构性、内容性与修饰性的标签。随着CSS的广泛使用,HTML代码当中很多标签都已经不再使用了,比如<i><font>

对于上面提到的标签,我们当前已经不再去这么分类了,仅仅是作为一个了解。而采用了另外一种分类方法——按照标签的显示类型。

根据标签的显示类型,我们可以将元素分为块状元素、行内元素以及其他类型元素。此处需要注意的有两点:

其一在于,并不能够将所有的标签简单的划分为块和行,对于<table>等元素,表现形式与块、行都有所区别,被称为表格系列元素。有关元素的具体分类,详见日志《HTML元素的显示类型》。

第二点需要注意的是,我们要弄清楚块状元素与行内元素,在默认的表现样式上有什么区别。详见《行内元素和块状元素的区别》

对于HTML标签,我们除了基本标签之外,还需要知道HTML注释应当如何书写

标签对SEO的影响

标签的基本嵌套以及标签属性的书写,对于网页的SEO是有一定的影响的。比如说,a标签需要添加title的属性,对于img标签需要添加alt和title的属性。对于标签的合理使用和嵌套,一方面能够有利于SEO,另一方面,能够避免掉在网页中出现布局等方面的问题。

有关标签的基本嵌套请查看《HTML标签嵌套规则》

有关SEO,应该说SEO是个大学问,对于前端来讲,只会涉及SEO中很少的一部分知识,请查看《解读SEO 黑帽白帽》

两组需要练习的标签

1、表单系列元素:我们需要熟悉form表单的一系列元素,然后能够清晰的说出基本属性。

2、表格系列元素:虽然我们使用了DIV+CSS的布局方式替代掉了table的布局方式,但并不意味着,在页面中不去使用table这个元素。通常情况下,table主要用于呈现网页中的一些数据表。

有关这两系列元素,我们来实操一下:

表单系列元素

<form action="">
<legend>HTML5学堂</legend>
<input type="text" name="" value="">
<input type="password" name="" value="">
<input type="radio" name="" value="">
<input type="checkbox" name="" value="">
<input type="button" name="" value="">
<input type="submit" name="" value="">
<select name="" id="">
<option value="">梦幻雪冰</option>
<option value="">独行冰海</option>
<option value="">扶、公子</option>
</select>
<textarea name="" id="" cols="30" rows="10">HTML5学堂</textarea>
</form>

表格系列元素

<table border=1 bordercolor='#f00' cellspacing=1 cellpadding=50>
<caption>标题部分</caption>
<thead>
<tr>
<th colspan=5>你的简历</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td >你猜</td>
<td >工作</td>
<td colspan=5 rowspan=5><img src="/C:/Users/ibokan/Desktop/1.png"></td>
</tr>
<tr>
<td colspan=2 >背景</td>
<td >中国公民</td>
</tr>
<tr>
<td colspan=2>年龄</td>
<td>20世纪</td>
</tr>
<tr>
<td colspan=2>住址</td>
<td>中国</td>
</tr>
<tr>
<td colspan=2>专业</td>
<td>HTML5</td>
</tr>
<tr>
<td colspan=3 >工作经历</td>
<td>曾经干过很多项目</td>
</tr>
<tr>
<td colspan=3 >自我评价</td>
<td>为人热情诚恳,比较容易融入团队</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=3 >版权信息</td>
</tr>
</tfoot>
</table>

1、合理使用thead、tbody、tfoot以及caption标签

2、对于cellspacing和cellpadding要能够区分开

3、熟练使用colspan和rowspan

还有什么?

除了上面的这些之外,还需要注意如下知识:

网页标签的书写规范

1、标签书写在尖括号标识符中

2、标签需成对的出现

3、在起始标记当中可以书写属性/可以定义标签属性

4、标签互相嵌套,形成文档结构

5、文档所有信息必须在html当中,元信息放置在head当中,传递的信息和网页显示内容应当放置在body当中

一些小细节

1、strong、em、i、b标签的区别

2、img的src属性以及src中文件位置关系(路径)的确定

3、为何使用h1标签去嵌套标题,而不使用p标签(虽然效果也能够实现),为何用p标签去放置段落文本,而不是使用div

4、h1-h6标签当中,哪些是最常用的?为什么呢?

5、table当中,每个单元格的内容在垂直方向上是如何对齐的?

6、常见浏览器的调试工具包括哪些?

7、什么时候我们要去打开不同的浏览器查看兼容问题?

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

优秀的Java程序测试是什么样的?

测试的名字至关重要,特别是从文档角度来看的话。我们应该能够大声读出测试的名字就像一组需求一样。事实上,有一个伟大的IntelliJ插件,叫Enso,它会将你的测...

372
来自专栏大前端开发

从编程小白到全栈开发:操控浏览器

一个程序猿和普通电脑用户,当他们浏览到一个效果炫酷的网页的时候,他们的反应是不太相同的:

523
来自专栏java一日一条

优秀的Java程序测试是什么样的?

作为测试驱动设计和开发的忠实粉丝,我相信创造良好的测试是我们作为Java开发人员可以做的最重要的事情之一。我们写测试出于许多原因:

501
来自专栏FreeBuf

Frida在爆破Windows程序中的应用

谈到爆破,相信大部分网络安全从业者都并不陌生,爆破爆破,就是暴力破解嘛。通过枚举尝试尽可能多的可能解,再进行验证判断是否正确。在进行web的爆破时,我们通常会使...

442
来自专栏牛客网

新鲜出炉的百度-春招-前端面经

1. 自我介绍 2. 项目经验,我说项目名说错了,然后又说了一遍,面试官不知道什么心态的鬼魅一下 3. Html5不同于以前版本的特点 4. Html5新增ap...

33011
来自专栏数据小魔方

rept——一个可以一键成图的神奇函数!

今天想跟大家分享一个特别有趣的函数——rept函数。 ▼ 这个函数,就如同它的名字一样,具有重复显示字符的功能。 如图所示,在A57单元格中有一个数字1,如果我...

3245
来自专栏前端杂货铺

样式化加载失败的图片

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅 加载失败的图片是比较丑陋的,比如 但是我...

3167
来自专栏HTML5学堂

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

2717
来自专栏DannyHoo的专栏

利用plist文件查看后台返回数据的数据类型

当看客看到标题的时候或许会有些疑惑,有的人甚至会鄙视写者。查看后台返回的数据类型为什么要用plist文件,这也太麻烦了吧。我既然写这篇博客,肯定是有一定的原因的...

461
来自专栏禁心尽力

采用HTML5之"data-"机制自由提供数据

周末总是过得很快,又到了跟代码亲密接触的日子,我在北京向各位问好,今天我分享一点关于前端的东西,HTML5之标签"data-*"自定义属性的值传递。     ...

18710

扫描关注云+社区