快速入门HTML（二）

  • 前言提要
  • 一、DOCTYPE标签
    • 1、含义
    • 2、HTML与XHTML
  • 二、实体
  • 三、表格
    • 1、相关标签
    • 2、对齐方式
    • 3、单元格间距和填充
    • 4、合并单元格
  • 四、两个排版标签
  • 五、表单
    • 1、表单元素
    • 2、表单域
  • 练习

前言提要

本篇是对HTML常用知识的后半篇的介绍，上半篇请参考我的上一篇文章：快速入门HTML（一）
出于未知原因，我的HTML上半篇在博客里面甚至都搜不出来，咕咕猜应该是搜索引擎的问题吧，所以大家要看那篇文章的话只能找到咕咕的博客才能看了（其实咕咕也不清楚是不是给屏蔽了（小声bb），如果给屏蔽了，球球小伙伴告诉咕咕一声（哇的一声哭了出来）））话不多说，赶紧带小伙伴们体验完HTML的基本知识叭

一、DOCTYPE标签

1、含义

通过上一篇的学习，相信小伙伴们对HTML的基本结构已经十分清晰了，但是在上一篇中只讲了html、head、body等标签各自代表的意义，却没有讲到开头的DOCTYPE标签是个啥玩意，今天就带大家将HTML结构所缺漏的知识补全，准备好了就开始冲了嗷！！！

首先，让我们来看一下一个HTML所具备的基本元素，在DW（Dreamweaver）编辑器创建一个HTML文件，话不多说，上图！！

相信小伙伴们对于HTML基本结构里面的各个标签都有了大概的认识。而咕咕想补充一下，这里的文档声明，是用来声明文档遵循的规范，告知浏览器通过此规范来解析此页面中的代码。其实，HTML文档的声明在以前并不是大家看上去那么简洁的，小伙伴们应该都听说过HTML5或者H5等名词，而上图中HTML文档声明就是HTML5的文档声明。

为了让小伙伴们感受到HTML5声明文档的简洁，咕咕找到了HTML4.01的文档声明语句，小伙伴们感受一下

看到这么长一串的文档声明，是不是顿时觉得HTML5也太友好了叭！！！对的，咕咕对于HTML4这种反人类的文档声明也是十分懊恼，不过，幸运的是，我们深处HTML5的时代，实在是心疼HTML4时期的前端开发人员阿。

2、HTML与XHTML

大家也看到了，从上半篇开始，咕咕的代码文档声明都是HTML5的规范，其实啊，咕咕想告诉小伙伴们，我们HTML的规范并不是很严格的，有一个东西比HTML更加规范，那就是XHTML。

听到这里，大家可能会感到困惑，XHTML和HTML到底有什么不同呢？哎，其实啊，它们都是HTML，本质都是HTML超文本标记语言，咕咕这么说小伙伴们应该就懂啦：“ XHTML = 规范 + HTML ”

是滴，它们之间的关系并不是小伙伴们所想的复杂，这里还要提一句：XHTML是满足W3C的HTML

什么意思呢？不知道大家有没有听说过这么一个组织，W3C（万维网联盟—World Wide Web Consortium），它的前身是欧洲核子研究组织，我们如今的万维网便是起源于它。W3C最重要的任务就是发布相关万维网的标准，而W3C标准也是如今万维网唯一标准，所以，越满足W3C标准的东西，就越规范，而XHTML就是如此。

当然，可能会有的小伙伴又有了新的疑惑：“咕咕，那既然XHTML更加标准，那我们还要遵循HTML的标准吗？为什么不直接遵循XHTML的标准写代码呢？”其实啊，我们回看之前的公式，XHTML无非就是比HTML的编写更加规范而已，其本质是一样的，那么，遵循XHTML的标准编写是不必要的，在日常开发学习中，一般遵循HTML的标准编写就够了，这不会影响到我们对XHTML的编写能力，XHTML只是在语法要求上更为严格，而我们的代码重要的是逻辑，语法严格与宽松的差异是不会影响到我们对整个HTML知识点的认知的，所以小伙伴们并不用纠结于XHTML和HTML的规范问题。

二、实体

刚听到这个名词的你可能会一脸懵逼，软件不都是虚的？咋还给我整了个实的来了捏？哎哟我去，HTML这么牛掰的嘛？

其实这也是咕咕第一次听到实体时的内心独白hhhh，那就让我们一起目睹一下实体的真容叭！！

首先，有这么一个需求，我们需要编写一本关于HTML的电子教材，例如：span标签的语法是这样的<p></p>，但是，直接将“<”和“>”符号直接编写在你的HTML代码里面时，在页面是展示不出来的，也就是说浏览器直接将p标签解析了，所以我们并不能看到“<”和“>”符号；那么这个时候，HTML里提供了一种方法，让我们能够将一些被浏览器当成HTML代码解析的符号书写在页面上，这种方法就是实体。

这里我给大家介绍最常用的三个实体，事实上还有很多。
空格：&nbsp;

<：&lt;

>：&gt;

有了代表着空格、大于号、小于号这三个被浏览器解析的特殊字符的实体，就可以完成我们刚刚导出的那个需求啦

实体示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title></head><body>HTML教材：p标签的语法：&lt;p&gt;&lt;/p&gt;</body>
</html>

实体效果：

三、表格

表格使我们日常生活中使用十分频繁的一种存储数据的方式，表格能将杂乱的数据进行一个较好的整合归纳，并且十分直观，在学习中善于运用表格是十分能提高我们的效率的。那么接下来，就带大家了解一下如何使用HTML标签去构建属于我们自己的表格！！

1、相关标签

表格其实和列表有异曲同工之处，我们先来看看具体的标签含义

表格：<table>内容</table>，这个性质和ul、ol、dl是一致的，都是起到一个声明的作用

行：<tr>内容</tr>

单元格：<td>内容</td>，每一行由若干个单元格组成

每列的标题：<th>内容</th>

表格标题：<caption>内容</caption>

下面通过一个例子来体验一下表格的用法，表格示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><table border="1"><!-- 第一行 --><tr><!-- 单元格 --><td>姓名</td><td>性别</td><td>年龄</td></tr><!-- 第二行 --><tr><!-- 单元格 --><td>令狐冲</td><td>男</td><td>22</td></tr><!-- 第三行 --><tr><!-- 单元格 --><td>任盈盈</td><td>女</td><td>18</td></tr><!-- 第四行 --><tr><!-- 单元格 --><td>任我行</td><td>男</td><td>55</td></tr><!-- 第无行 --><tr><!-- 单元格 --><td>岳不群</td><td>男</td><td>50</td></tr></table>
</body></html>

表格效果：

心细的小伙伴可能会发现一个细节，那就是在table标签里面，咕咕加了border这么一个属性，并且属性值为1，那么这个1代表什么含义呢？border在英文中是指边框的意思，而数字1代表的是边框的类型，这就是为什么我们的表格是具有边框的。小伙伴们可以试试将border属性去掉，那么大家会发现原来的边框都消失了。除此之外，你也可以变换border属性的数字值，来尝试不同的边框。

2、对齐方式

对齐方式无非就是两种类型，水平对齐方式和垂直对齐方式，每种类型又分为若干种方式。
a) 水平对齐

语法：align="center/left/right"

注意：水平对齐的align这个属性是可以加在td标签和tr标签上面的，加在td标签控制的是一个单元格的对齐方式，而加在tr标签控制的是一整行单元格的对齐方式。

b) 垂直对齐

语法：valign="top/middle/bottom"

注意：垂直对齐的valign属性是可以加在td和tr标签上面的，控制的对象和align是类似的。

3、单元格间距和填充

单元格间距（cellspacing）：单元格和单元格距离，默认是2像素

单元格填充（cellpadding）：单元格和内容的距离，默认是1像素

注意：单元格间距和填充这两个属性必须加在表格的table标签上面，并且属性的值的单位为像素。科普一下：浏览器默认字体的边长为16像素，也就是说其实字体在浏览器中的上下左右长度都是一致的，为正方形。

下面来看一下这两个属性的具体用法，示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><table border="2" cellspacing="20" cellpadding="10"><!-- 行 --><tr><!-- 单元格 --><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><!-- 单元格 --><td>令狐冲</td><td>男</td><td>22</td></tr><tr><!-- 单元格 --><td>任盈盈</td><td>女</td><td>18</td></tr><tr><!-- 单元格 --><td>任我行</td><td>男</td><td>55</td></tr><tr><!-- 单元格 --><td>岳不群</td><td>男</td><td>50</td></tr></table>
</body></html>

效果图：

4、合并单元格

合并单元格在我们的excel操作中是十分常见的，那么接下来我们就要学会使用代码进行单元格的合并哦

合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面

合并列(colspan)：把不同列合并起来，写在左边的单元格上面

合并单元格示例：

注意：简单来讲，rowspan和colspan属性的值是需要合并的单元格的数目（包括自身），但是还要特别注意，被合并了的单元格需要将其对应的html代码删除，否则会造成结构混乱。

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><table cellspacing="0" cellpading="30" border="1" width="300" height="200"><caption><h3>学生证</h3></caption><tr><th align="center" colspan="4">CSDN</th></tr><tr align="center"><td>姓名</td><td>班级</td><td>学号</td><td rowspan="2">照片</td></tr><tr align="center"><td>咕咕</td><td>php14期</td><td>007</td></tr></table>
</body></html>

合并单元格效果：

四、两个排版标签

首先声明，这两个标签并没有语义

div标签：一般用于存放图片、文字、视屏等网页内容----存放一切内容------用作盒子

span标签：一般只用于存放文字--------存放文字

解读：其实div标签和css嵌套使用才能看得出效果，所以这里先不详细解释，等之后分享css的时候再和大家说明哈。span标签就是一个很普通的标签了，这个标签并不会独占一行，所以我们一般用来存放文字。

但是这里我们可以康康div标签和span标签存放文字有什么不同的区别，排版标签示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><div>离离原上草，</div><div>一岁一枯荣。</div><span>野火烧不尽，</span><span>春风吹又生。</span>
</body></html>

效果图：

PS：我们可以看到，div是需要独占一行的，这是因为div是块元素的关系，而span标签是行元素。至于什么是行元素和块元素，大家可以这样理解，行元素是没有体积的，它只能靠文字撑起体积（这里不考虑元素之间转换的问题，只考虑原生属性），文字多高多长，它就有多高多长。而块元素生来就具有百分之一百的浏览器屏宽，浏览器界面有多宽，它就有多宽。所以我们看到，两个div标签并不能在一行同时待着，因为它们都占了百分百屏宽；而span标签就可以在同一行待着，因为文字多长，span标签就多长。

五、表单

1、表单元素

文本框

可输入明文内容的输入框----用户名（用户输入什么内容就是什么内容）

语法：<input type="text">

文本框示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><input type="text">
</body></html>

文本框效果：

密码框

输入密文的输入框----密码（输入的内容会被实心圆代替）

语法：<input type="password">

密码框示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><input type="password">
</body></html>

密码框效果：

单选框

只能选择一项----主要用于性别选择

语法：<input type="radio">

单选框示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><span>性别：</span><input type="radio" name="sex">男<input type="radio" name="sex">女
</body></html>

单选框效果：

PS：这里出现了一个新属性name，其实这个属性是表单需要上传数据时所必须的属性，只有存在name属性，表单才能够正常上传，我将两个name属性都设置为了同一个值sex，这是因为单选框只能出现一个数据，表单上传单选框的数据只能有一个，所以它们的name属性必须一致，这个属性名可以自定义，但必须一致。只有这样，才能实现单选的效果。有兴趣的同学可以尝试将它们的name属性值设置为不相同，你会发现两个框你都能选中，这是不符合我们的逻辑的。

复选框

可以选择多项 — 多应用于爱好选择

语法：<input type="checkbox">

复选框示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><input type="checkbox" />足球<input type="checkbox" />排球<input type="checkbox" checked="checked" />篮球
</body></html>

复选框效果：

PS：我们可以看到，篮球是默认已经被选中了的，这和加在篮球复选框中的checked属性密切相关，checked控制的是复选框的选中与否的状态，checked属性的值一般写成自身即可，这是一种业内共识

文件上传

文件上传对于刚接触前端的我们并没有多大作用，等后期学到node.js的时候才会接触到，所以大家可以做一个了解

语法：<input type="file">

文件上传示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><input type="file">
</body></html>

文件上传效果：

下拉框

通常用于选择籍贯或收货地址中的省市区

默认选中项使用属性selected=“selected”

下拉框示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><select><option>江苏</option><option>浙江</option><option>安徽</option></select>
</body></html>

下拉框效果：

PS：select标签起到声明的作用，声明这是一个下拉框，option标签是每一个选项的内容

文本域

可以输入很多的内容----qq的留言输入框

语法：<textarea></textarea>

文本域示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><textarea>这是一个文本域</textarea>
</body></html>

文本域效果：

普通按钮

点击不会有任何效果

语法：<input type="button" value="普通按钮">

属性：value，表示按钮内部显示的内容

普通按钮示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><input type="button" value="这是一个普通按钮">
</body></html>

普通按钮效果：

提交按钮

用于提交表单的按钮，当按下这个按钮时，表单的数据就会发送到相应的服务器中

语法：<input type="submit">

提交按钮示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><input type="submit" value="这是一个提交按钮">
</body></html>

提交按钮效果：

PS：value属性的值还是按钮内部会显示的内容，不过值得一提的是，提交按钮默认有value值“提交”

重置按钮

将表单的输入状态还原的按钮，当你觉得表单的信息填写错误时，可以按下此按钮，将表单的所有内容进行重置

语法：<input type="reset">

重置按钮示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><input type="reset">
</body></html>

重置按钮效果：

PS：重置按钮的默认value值就是“重置”

2、表单域

语法：<form></form>

作用：将表单元素的值收集起来，发送给服务器，form标签的action属性的值就是数据提交的地址

第一次提交，没有数据，因为很多表单元素都没有name属性，服务器接收数据靠的就是表单的name属性

注意：form是一个双标签，里面包含所有需要一次性提交给服务器的表单元素；特别提醒，上面所讲的所有表单元素标签都必须在form双标签里面。

表单域示例：

<!doctype html>
<html><head><meta charset="utf-8"><title>无标题文档</title>
</head><body><form>用户名：<input type="text" name="username" />密码：<input type="password" name="password" /><input type="submit" /></form>
</body></html>

表单域效果：

提交的数据会在网站URL地址栏显示出来：

练习

还是和上半篇一样，咕咕为大家准备一套消化今天知识点的练习，下一篇文章会给大家带来HTML5新增的一些标签哦hhh

百度网盘链接：https://pan.baidu.com/s/14AeZRh1Tx7M8hs66TspSxA

提取码：hgjc

这些题目都是综合性很强的，小伙伴们一定要尝试独立完成，咕咕祝大家学习愉快，天天进步哈，咱们下次再见！！！

快速入门HTML（二）相关推荐

  1. 运动控制器编程_快速入门 | 篇二十一：运动控制器ZHMI组态编程简介一

    点击上方"正运动小助手",随时关注新动态! 运动控制器ZHMI组态编程简介一  今天我们来学习一下,运动控制器的ZHMI组态编程简介.本文主要从产品概述.控制器连接触摸屏使用.HM ...

  2. c语言类似于 n的标识符,C语言快速入门教程(二)

    C语言快速入门教程(二) C语言的基本语法 本节学习路线图: 引言: C语言,顾名思义就是一门语言,可以类比一下英语; 你要说出一个英语的句子需要: 单词 + 语法! 将单词按照一定的语法拼凑起来就成 ...

  3. 小猪的C语言快速入门系列(二)

    小猪的C语言快速入门系列(二) 标签: C语言 本节引言 在上一节中,对于C语言有了一个初步的了解,学会了如何使用IDE来进行 代码编写,编译和运行.而这一节,我们会对C语言的基本语法进行学习, C语 ...

  4. HTML快速入门（二）

    HTML快速入门(二) 超链接标签 列表标签 表格标签 布局标签 表单标签 1.超链接标签 标签 描述 a 定义超链接,用于链接到另一个标签 a 标签属性: href:指定访问资源的URL targe ...

  5. python快速入门【二】----常见的数据结构

    python入门合集: python快速入门[一]-----基础语法 python快速入门[二]----常见的数据结构 python快速入门[三]-----For 循环.While 循环 python ...

  6. Unity快速入门之二 GUI Transform 详解

    Unity快速入门之一 3D基础概念.Camera.Canvas RenderMode的几种方式对比_翕翕堂 Unity快速入门之二 GUI Transform 详解_翕翕堂 Unity快速入门之三 ...

  7. Spring Boot 2 快速教程：WebFlux 快速入门（二）

    2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘 ...

  8. pyqt 槽任意参数_PyQt5快速入门（二）PyQt5信号槽机制

    PyQt5快速入门(二)PyQt5信号槽机制 一.信号槽机制简介 1.信号槽简介 信号槽是Qt的核心机制,也是PyQt编程中对象进行通信的机制.在Qt中,QObject对象和PyQt中所有继承自QWi ...

  9. chisel快速入门（二）

    上一篇见此: chisel快速入门(一)_沧海一升的博客-CSDN博客简单介绍了chisel,使硬件开发者能快速上手chisel.https://blog.csdn.net/qq_21842097/a ...

  10. ih5怎么切换下一个页面_ih5快速入门（二）

    快速入门第二章,使用一个简单案例来帮助大家,第一章所介绍的都会涉及到 大家先浏览一下案例 首先我们先看首页是如何做的,在这里会运用到动效 事件 同时也会在这里告诉大家音乐如何放进去,以及点击左上角可以 ...

最新文章

  1. goland开启go mod管理
  2. linux 下的shell脚本
  3. c语言入门教程文库,C语言入门教程(全集)课件
  4. 古典密码算法------替代密码算法
  5. 大话javascript 2期：执行上下文与执行上下文栈
  6. Qt的元对象(Meta-Object)系统简介(转)
  7. 量词逻辑量词里面的v表示？_知识表示能力问答中的人工智能量词（MCQ）
  8. nginx的内存管理
  9. C++运算符重载 摘自网络
  10. unity5 静态和动态cubmap
  11. PHP执行系统外部命令函数:exec()、passthru()、system()、shell_exec()
  12. com口驱动_四足机器人FOC驱动器篇1：Odrive Moco接口板套件介绍
  13. 教你3招解决PDF文字无法复制的所有问题！！！
  14. (最详细)红米手机5 Plus的USB调试模式在哪里开启的方法
  15. 自拟计算机作文100字,三年级自拟作文100字
  16. 泛泰 A870 TWRP Recovery En英/Cn简/Tw繁
  17. Brightest Immaculate Teresa（简单题）（北理16校赛）
  18. springboot配置logback日志
  19. Leu-Trp-Leu-COOH，42293-99-2
  20. 论坛议程｜COSCon'22 大数据（D）

热门文章

  1. vcomp140.dll下载
  2. 【“工业大数据预测”系列】——第2篇：异常数据处理
  3. Revit中的默认约束问题
  4. 科林环保收购古县佳盛30MWp电站的公告
  5. 【iOS】—— UICollectionView
  6. hdu 改革春风吹满地
  7. linux打实时补丁slower,linux内核实时补丁
  8. 企业级别应用--rsync远程同步（配置 rsync 备份源、rsync 下行和上行、inotify+rsync 实时备份）
  9. Java实现调用Udesk API v2（二）
  10. [C#] Newtonsoft.Json 版本冲突