目的

HTML是前端基础内容中最简单的一个部分，这篇文章将对HTML入门相关的内容做个记录。

基础说明

简单点说HTML就是一个个的标签，用来描述网页的文档结构和内容，下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head><!-- 当前文档为UTF-8格式 --><meta charset="UTF-8"><!-- 网页标题 --><title>这里是网页标题</title><!-- 网页图标 --><link rel="shortcut icon" href="favicon.ico"><!-- 用户网页的可视区域，移动端做响应式设计时需要加上这个标签 --><meta name="viewport" content="width=device-width, user-scalable=no"><style>/* 清除浏览器默认样式 */* {margin: 0;padding: 0;}</style>
</head>
<body>这里填充网页内容
</body>
</html>

上面代码中 用  包围部分是HTML注释 。上面的代码再精简下就是下面这样：

<!DOCTYPE html>
<html><head></head><body></body>
</html>

第一行 <!DOCTYPE html> 以前有很多写法，一般固定就这样写就行了，不用去理解他。之后就是 <html> ... </html> 标签，该标签下面是 <head> ... </head> 和 <body> ... </body> 标签。 head标签中的内容不会在网页页面主体中显示，一般用来放网页的基本描述信息和一些外部链接的内容等。body标签中的内容主要是要显示在网页页面主体中的东西。下面的示例中就在body中放了内容：

事实上html、head、body这些基本的标签也完全可以省略，你只写上面示例中body中的内容浏览器也能显示内容。但是除非特殊情况，一般还是按照结构完整的来编写的好。

下面演示下在body中进行结构布局：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><style>* {margin: 0;padding: 0;}</style><style>html,body {height: 100%;}body {display: flex;flex-wrap: wrap;}.header {width: 100%;height: 10%;background-color: salmon;}.nav {width: 100%;height: 10%;background-color: darkkhaki;}.aside {width: 20%;height: 70%;background-color: lightgreen;}.main {width: 80%;height: 70%;background-color: mediumturquoise;}.footer {width: 100%;height: 10%;background-color: orchid;}div {text-align: center;}</style>
</head><body><div class="header"> 标题栏 </div><div class="nav"> 导航栏 </div><div class="aside"> 侧边栏 </div><div class="main"> 正文 </div><div class="footer"> 页脚 </div>
</body></html>

上面示例中 用了 <div> ... </div> 标签和CSS结合进行了结构布局 ，div标签作为内容容器，CSS进行具体的布局描述，这是最常见的布局方式。

上面代码中div标签前半部分有一个 class="" 的内容，这个是该标签的属性。大部分标签都有很多属性，其中body中大部分标签都有class、id等属性。

div标签是用的最广泛的标签，它的作用也就作为容器。通常的开发中可以先进行布局，然后再填充内容。上面示例也可以换成下面的方式：

上面示例中 header、nav、aside、main、footer 这些标签替换了前面示例中的 div + class 的形式（相应的CSS部分也稍有改动）。这些标签和 div 标签从功能上来说可以说是完全一样的，不过名称上更加偏向于专业用途，用这些标签来搭建上面的结构代码上会更加容易阅读理解，这个称为 HTML语义化 。语义化标签一方面有助于文档阅读，另一方面在搜索引擎收录排名优化等方面有优势。虽说如此，但是很多情况下其实也不用管那么多， div 用用就行了。

上面例子中出现在body中的 h1~h6、p、div 等标签在HTML中被称之为 块级元素 。在默认情况下块级元素会单独占用页面中的一行，可以手动设置宽度、高度、外边距、内边距。块级元素会单独占一行， 行内元素 就不会单独占一行，常见的比如 span 标签：

上图中被 span 标签包围的内容都在页面中同一行，并没有每个元素单独一行，这就是行内元素。默认情况下是无法手动设置行内元素的宽度、高度以及垂直方向上的内外边距的。此外还有 行内块元素 ，这类元素不会单独占一行，但可以手动设置宽度、高度、外边距、内边距，常见的标签有 img、input 。

块级元素、行内元素、行内块元素会因为CSS的设置而导致性质改变，同样的我们也可以手动改变其属性，当然这些就属于CSS的内容了。另外有些时候我们可以会需要 手动进行换行，这时候可以用 br 标签 ， <br> <br/> <br /> 三种写法都可以。

在HTML中写文本，有些字符是无法正确显示的，比如 " & < > 这些，另外空格在显示上也会有问题，这时候就需要用转义符了，常见的转义符如下：

字符	十进制表达	字符表达
"	"	"
&	&	&
<	<	<
>	>	>
不断开空格(non-breaking space)

常用标签介绍

HTML标签总共一百个出头的样子，但是真正用的多的估计一半都不到，除了上面演示中用到的 h1~h6、p、div 等标签外还有一些常用的标签，这里将稍微进行介绍：

input
该标签用于用户输入组件，通过其 type 属性可以获得不同类型的功能；
form
该标签通常在其内部嵌套 input 标签使用，用于向后台提交数据，通常所说的 “提交表单” 就是指这个；
textarea
该标签和 input 的text类似，支持多行文本；
button
该标签和 input 类似，type类型只支持button、reset、submit，默认为button；
该标签和 input 最大不同点在于其内部可以嵌入文本图像等；
img audio video
分别用于在页面中嵌入图片、声音、视频；
ol - li ul - li dl - dt - dd
分别为三种类型的列表；
a
该标签可以用于点击跳转到内部或外部的链接；
link
该标签通常用于链接到外部文件，常用的比如链接网页图标、样式文件等；
del
该标签用于在文字中间加上一条横线；
iframe
该标签用于在页面中内嵌其它页面；

总结

HTML很简单，上面这些内容对于入门来说足够了，更多的还是需要自主练习。更多详细内容可以自行在CSDN、博客园、百度w3c、B站、慕课网等地方学习。

前端入门 02：HTML入门相关推荐

Babylonjs入门02——VsCode+vue+babylonjs开发第一个babylon项目程序
Babylonjs入门02--VsCode+vue+babylonjs开发第一个babylon项目程序 1 环境搭建 2 创建vue项目 3 基于vue项目写第一个babylon项目 4 下一期再见 ...
MyBatis-学习笔记02【02.Mybatis入门案例】
Java后端学习路线笔记汇总表[黑马程序员] MyBatis-学习笔记01[01.Mybatis课程介绍及环境搭建][day01] MyBatis-学习笔记02[02.Mybatis入门案例] M ...
IOS基础之UIDynamicAnimator动力学入门-02
IOS基础之UIDynamicAnimator动力学入门-02 10-弹性附着 // // ViewController.m // 10-弹性附着 // // Created by 鲁军 on 202 ...
【网络爬虫入门02】HTTP客户端库Requests的基本原理与基础应用
[网络爬虫入门02]HTTP客户端库Requests的基本原理与基础应用广东职业技术学院欧浩源 2017-10-15 1.引言实现网络爬虫的第一步就是要建立网络连接并向服务器或网页等网络资源 ...
java编程菜鸟入门02
写在前面: 此博客仅用于记录个人学习进度,学识浅薄,若有错误观点欢迎评论区指出.欢迎各位前来交流.(部分材料来源网络,若有侵权,立即删除) 传送门: java编程菜鸟入门01 java编程菜鸟入门02 ...
图像篡改入门02 利用空间结构篡改定位
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 @图像篡改入门02 利用空间结构篡改定位图像篡改被动取证利用图像空间结构进行篡改定位使用一个CNN-LSTM的网络模型捕获篡改边 ...
使用双标记写html代码时如何进行嵌套,【2020Python修炼记】前端开发之前端基础和HTML入门...
发表于:2020-11-12 18:21 阅读: 119次这篇教程主要讲解了[2020Python修炼记]前端开发之前端基础和HTML入门,并附有相关的代码样列,我觉得非常有帮助,现在分享出来大家 ...
drools入门-02
drools入门-02 一. 另一种方式上一篇我们讲了一下基本理论和入门demo,这一篇我们接着讲我们用springboot另一种方式整合(这个比较常用) 1. 引入依赖 <!-- 规则引擎 ...
Linux 基础入门 02
Linux 基础入门 02 一.用户&组管理 1.1 usermod 用来修改用户账号的各项设定 -c<备注> #修改用户帐号的备注文字. -d登入目录> #修改用户登入时的 ...
使用WebRTC搭建前端视频聊天室——入门篇
转载自:使用WebRTC搭建前端视频聊天室--入门篇什么是WebRTC? 众所周知,浏览器本身不支持相互之间直接建立信道进行通信,都是通过服务器进行中转.比如现在有两个客户端,甲和乙,他们俩想要通信 ...

前端入门 02：HTML入门

文章目录

目的

基础说明

常用标签介绍

总结

前端入门 02：HTML入门相关推荐

最新文章

热门文章