全栈 - 19 Web 基础网页的骨骼 HTML

时间 2019-11-17

标签 web 基础网页骨骼 html 栏目 HTML 繁體版

原文原文链接

这是全栈数据工程师养成攻略系列教程的第十九期：19 Web基础网页的骨骼HTML。javascript

写Web网页的基础三件套是HTML、CSS和JavaScript，这一节让咱们先来了解下HTML。html

什么是HTML

HTML全拼是Hyper Text Markup Language，即超文本标记语言。之因此将HTML比喻成网页的骨骼，是由于它是Web网页的基本组成部分，并且HTML中所定义的元素，决定了网页的内容和结构。html5

Python是一门编程语言，能够用来处理数据、编写程序、完成任务，重在作什么和怎么作。而HTML是一门标记语言，如同画画同样，HTML告诉浏览器，应该在网页上画出哪些内容，重点在是什么和有什么。java

基本结构

使用HTML所写的代码保存时后缀名能够取成.html，通常来讲会包含如下基本结构。Web网页都是由一些HTML标签（或者称做HTML元素）组成的，即用尖括号扩起来的内容，而且呈现出层级嵌套结构。编程

<!DOCTYPE html>
<html> <head></head> <body></body> </html>复制代码

第一行代码声明了如下使用HTML5语法，HTML5是HTML的最新版本，在本来HTML的基础上增长了一些新的扩展和功能。接下来是一个html标签，包括开始标签<html>和结束标签</html>，二者之间中即是网页的所有内容。html中包括head标签和body标签，分别表明网页的头部和主体，而且head、body都有各自对应的开始标签和结束标签。head中会记录网页的基本信息和引用的资源连接等，而body中则存放着网页详细的主体结构。能够向head和body中添加更多HTML标签，从而进一步丰富对应网页的内容。canvas

能够发现，由于head和body包裹在html中，因此相对于html标签存在一级缩进。这正是HTML的层级嵌套结构，内层标签相对于直接外层标签都会保持一级缩进，所以在编写HTML代码时须要注意标签的缩进和对齐。后端

经常使用标签

HTML标签主要分为单标签和双标签两类。单标签只有开始标签，因此须要在开始的同时关闭，例如meta标签，用于定义Web网页的基本信息。如下meta标签指定了网页使用UTF-8字符集，经过标签的属性值进行设定，即将属性名和属性值都写在标签内部。浏览器

<meta charset="UTF-8"/>复制代码

而双标签既有开始标签又有结束标签，因此能够在其中包裹一些标签的内容，例如title标签，用于定义Web网页的标题。所以，双标签包含标签内容而且通常会直接显示在Web网页上，而单标签则主要是为了完成某些功能。less

<title>我爱HTML</title>复制代码

meta和title标签须要放入head之中。能够将以上例子添加到以前提供的基本结构里，而后双击.html运行，在浏览器中观察网页中出现了什么变化。dom

再来介绍一些经常使用的内容标签，这些标签都须要放入body之中，能够尝试添加并刷新浏览器，观察标签对应的效果。

首先是h1至h6，分别表示一级标题至六级标题，标题文字会依次减少。

<h1>这里是一级标题</h1>
<h2>这里是二级标题</h2>
<h3>这里是三级标题</h3>
<h4>这里是四级标题</h4>
<h5>这里是五级标题</h5>
<h6>这里是六级标题</h6>复制代码

p表示正文中的段落。

<p>这里是段落内容</p>复制代码

a表示超连接，提供Web网页之间的跳转，或者从网页的一部分跳转到另外一部分。在a标签中须要指定href属性，即跳转的目标连接，target="_blank"表示连接点击后在新标签页中打开目标连接，如下代码即生成一个跳转到个人我的博客的超连接。

<a href="http://zhanghonglun.cn" target="_blank">一个干货满满的地方</a>复制代码

img用于生成图片，src属性指定图片源文件的地址，可使用相对路径调用本地图片，或者使用互联网上能访问到的图片连接。width和height属性分别指定图片的宽度和高度，单位是像素，若是仅提供其中一个的值，则保持图片原始比例并计算另外一个的值。

<img src="http://zhanghonglun.cn/blog/wp-content/uploads/2015/04/136670958113.jpg" width="200" height="200"/>复制代码

须要注意的是，Web网页中使用的图片资源应当在知足清晰度条件下尽量地使用小文件。平面设计和网页设计不一样，前者会尽可能使用高清图片，便于后期修改细节、打印海报等；然后者只需知足在浏览器上的显示清晰度便可，文件越小则加载越快，过大的高清图片只会致使长时间的加载等待和彻底能够避免的流量浪费。

再介绍两个新的概念：块级标签和内联标签。块级标签单独占据一行，其后面的标签会在下一行出现，而多个内联标签则会显示在同一行中，直到总宽度超过了浏览器宽度才换行。以前介绍的h1至h6、p都是块级标签，而a、img则是内联标签。浏览器在渲染HTML页面时会遵循默认的文档流，从上往下依次显示每一个HTML标签，对于块级标签则独占一行，对于内联标签则放置在同一行，直到总宽度超过浏览器宽度才换行。

能够在HTML标签之间或者p等标签内容中添加br，用于添加空白行或换行。

<p>这是一段<br/>换行的段落</p>复制代码

div和span分别属于块级标签和内联标签，均可以用做其余HTML标签或页面文本的容器。它们自己没有具体的语义，仅做为其余内容的容器，从而将Web页面更加结构化地组织起来。咱们在设计网页时，每每会将页面划分为多个区域，例如导航栏、侧边栏、第一部分、第二部分、第三部分、底栏等，若是将所有内容都直接写在body的下一级中，则会给开发带来很大的不便。相比之下，合理使用div勾勒出网页内容的结构和层次，可使代码编写和阅读变得更加清晰明朗。

<div>
    div里面能够包含其余HTML标签或者文本内容
    <p>这个div是页面的第一块内容</p>
</div>

<div>
    <p>这个div是页面的第二块内容</p>
    <div>
        <span>span是内联标签，后面的文本不换行</span>
        <span>div里面还能够嵌套其余div</span>
        <p>div的使用可让页面内容更加结构化、有层次</p>
    </div>
</div>复制代码

使用table标签能够定义表格，用tr表示表格中的每一行，用td表示每一行中的单元格，用th表示表头行中的单元格。如下是一个简单的例子，固然能够经过更复杂的语法实现合并单元格等效果，在咱们掌握了CSS以后，也能够进一步美化表格样式，使得表格看起来更美观。

<table>
    <tr>
        <th>语言</th>
        <th>难度</th>
        <th>功能</th>
    </tr>
    <tr>
        <td>Python</td>
        <td>简单</td>
        <td>强大</td>
    </tr>
    <tr>
        <td>R</td>
        <td>简单</td>
        <td>强大</td>
    </tr>
</table>复制代码

使用ul和ol定义列表，分别对应无序列表和有序列表，用于展现多个并列项，每一项用li定义。

<ol>
    有序列表
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ol>

<ul>
    无序列表
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>复制代码

标签的属性

不少HTML标签都有对应的属性，即写在标签开始部分中的属性名和属性值，例如a的href、img的src等。这里再介绍四种重要并且通用的属性：id、class、name和style。

id属性能够给标签取一个id，id值应当在整个页面中是独一无二的，使用id能够针对性地操做某一个标签，例如控制样式、绑定事件等。另外，若是将a的href设置为#加上某一标签的id，则点击连接后页面将跳转到对应标签所在位置。

<p id="main">这是最主要的一段话</p>
<a href="#main">跳到main所在位置</a>复制代码

class属性能够给标签取一个class，同一个class值能够应用于多个标签，从而使用class能够同时操做多个标签，例如控制它们的样式、为它们绑定事件等。

<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>复制代码

name属性和class相似，只是基于name控制相应的标签没有class那么方便，能够将id、class和name理解成一我的的身份证号、姓、名等。

style属性能够为标签添加内联样式，即便用CSS的一种方法，等咱们了解CSS以后再详细讨论，这里提供一个简单的示例。

<p style="color:red;">这是一段有颜值的内容</p>复制代码

注释

在HTML中知足如下格式的内容即为注释，被注释的内容将不会渲染和显示。

<!--这是一个注释！-->复制代码

表单

可以接受用户输入而且能够被赋值的标签统称为表单标签，例如常见的文本框、单选框、多选框、下拉菜单等。表单标签通常都会放在form标签之中，使得在触发提交时能够一并上传所有表单标签的值。

<form action="" method="post">
    用户名 <input type="text" placeholder="用户名" name="username"/>
    密码 <input type="password" placeholder="密码" name="password"/>
    <select>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
    </select>
    一大段文本 <textarea rows="10" cols="10" placeholder="一大段文本" name="content"></textarea>
    <button type="submit">登录</button>
</form>复制代码

form的action属性指定了用户提交时应当触发的响应函数，method属性指定了提交的HTTP请求类型，这里为post；
input为输入框，不一样的type对应不一样的表单元素，可取的值包括button、checkbox、color、date、datetime、email、file、month、number、password、radio、range、submit、text、time等。placeholder指定了当标签内容为空时，在页面上显示的提示信息；
使用select和option能够定义下拉列表，默认选中第一项。option中的内容会显示在页面上，而value属性则对应每一个option的值，处于选中状态的option值将做为整个select的值；
textarea为文本框，用于显示多行文本，rows和cols分别用于指定文本框的行数和列数；
button为按钮，type="submit"表示按钮点击以后将触发提交操做，form内所有表单标签的值都会一并提交给action里定义的响应函数处理。

添加以上代码并在浏览器中刷新便可看到表单的效果。input、textarea、button都属于内联标签，所以全部的表单标签都显示在同一行。能够向input和textarea中输入文本，填写完毕后点击button便可提交。但因为这里在action中并未指定相应的响应处理函数，所以点击后页面只是简单地刷新一下。处理表单提交涉及到一些后端的内容，因此等咱们掌握了相应知识以后再回过头来说解。

颜色

HTML中能够用三种方法来表示颜色，用于修改HTML标签的外观，例如标签的文字颜色、背景色、边框色等。

第一种方法是RGB表示法。网页渲染使用R、G、B来合成任意一种颜色，分别表示颜色的红色份量、绿色份量和蓝色份量，0为最小值，255为最大值，所以rgb(0, 0, 0)表示黑色，rgb(255, 255, 255)表示白色，rgb(255, 0, 0)表示纯红色，依此类推。若是是rgba(255, 0, 0, 0.5)，则第四个份量表示颜色的透明度。

第二种方法是十六进制表示法，一样基于RGB色彩合成原理，只不过用十六进制来表示相应的值，例如#000表示黑色，#fff表示白色，#f00表示纯红色。

第三种方法是使用颜色名称，例如red、green、blue等，这些内置的名称分别对应一些预先设定好的颜色。

<p style="color:rgb(255,0,0);">红色</p>
<p style="color:#0f0;">绿色</p>
<p style="color:blue;">蓝色</p>复制代码

若是对颜色没有准确的把握，能够在须要控制颜色的地方打开开发者工具，点击右边对应的色块，交互式地进行调整直到满意。

DOM

DOM的全拼是Document Object Model，即文档对象模型。咱们以前提到HTML是层次结构化的，若是将内层标签看做直接外层标签的子节点，那么整个HTML页面能够整理成树形结构，树的根节点即html，下一层即head和body，以树形结构不断展开，这即是HTML页面的文档对象模型。

在后续内容中，咱们也会将HTML标签称做DOM元素。DOM的概念在遍历和操做HTML标签时很是有用，咱们常常须要找到一个DOM元素的父节点、兄弟节点以及子节点，而遍历一颗DOM树也是经过先访问根节点，而后递归地遍历根节点的所有子树来实现的。

HTML5

HTML5是HTML的最新版本，在本来HTML的基础上增长了一些新的扩展和功能，例如在手机上能够检测抖动、获取地理位置等，所以受到了普遍关注，而且在移动端引爆了一股开发狂潮。

HTML5中添加了一些新的功能标签，例如支持更加高级、复杂和精细绘图功能的canvas和svg，支持直接播放音频和视频的audio和video，支持嵌入多种类型资源的embed。关于svg的更多内容能够查看www.runoob.com/svg/svg-tut…，关于canvas的更多内容能够查看zhanghonglun.cn/blog/canvas…。

HTML5中也引入了一些新的语义标签，例如header、nav、section、article、aside、figcaption、figure、footer等。这些标签的使用方法和div大同小异，只是像p表明段落同样，赋予了一些用途语义。如下两种写法在实际应用中没有任何区别，都可以很好地说明这一块内容对应网页的导航栏部分，只不过前者稍微简洁一些而已。

<header>导航栏部分</header>
<div id="header">导航栏部分</div>复制代码

除此以外，HTML5中还增长了一些新的功能，例如元素拖拽、地理定位、更丰富的input type、Web存储等，限于篇幅这里就不展开介绍了，有兴趣的话能够访问如下连接获取更多内容，www.runoob.com/html/html5-…。

补充学习

HTML语法比较简单，没有复杂的编程逻辑，只须要根据本身的设计排列HTML标签便可，所以对HTML的掌握关键在于多写多练、熟能生巧。关于HTML的更多内容能够访问如下连接，www.runoob.com/html/html-t…，里面提供了更为详细和系统的讲解，并结合大量实例代码加以巩固，推荐完整地浏览和尝试一遍。

最后，推荐安装一个Sublime插件，Emmet，能够极大地加速和简化HTML代码编写，功能十分强大，详细使用方法能够参考这里，juejin.im/post/584f53…。

视频连接：

全栈 - 19 Web 基础 网页的骨骼 HTML