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、什么时候我们要去打开不同的浏览器查看兼容问题?
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 12岁小读者使用Python暴力破解Wi-Fi密码
- 深度学习入门Fast.ai 2.0上线!自带中文字幕,所有笔记、资源全部免费!
- 七夕节脱单“神助攻”!AI教你写情话
- Python初学者请注意!别这样直接运行python命令,否则电脑等于“裸奔”
- 一篇文章构建你的 Node.js 知识体系
- MySQL:The CHAR and VARCHAR Types
- 更新一个10年有效期的 Kubernetes 证书
- 哇,ElasticSearch多字段权重排序居然可以这么玩
- Python 自动化,Appium 凭什么使用 UiAutomator2?
- 我用几行 Python 自动化脚本完美解决掉了小姐姐的微信焦虑感
- 【设计模式】692- TypeScript 设计模式之发布-订阅模式
- 强网杯-upload
- 基于暗通道去雾算法
- 全套 | 人脸检测 & 人脸关键点检测 & 人脸卡通化
- 使用Jenkins Dashboard插件可视化部署