本文是Web前端学习系列的第一篇，主要介绍了HTML的基本标签，包括head标签、文本标签、标题标签、段落标签、图片标签、超链接、表单等。强调了语义化的标签使用，如strong和em标签，以及表格的语义化。还提到了图片的两种格式：位图和矢量图，以及超链接的target属性和内部链接的概念。
仅为博主自用学习笔记，本篇学习平台：http://www.lvyestudy.com/html
推荐的学习路线:
HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js
HTML
HTML是一门描述性的语言，就是用标签来说话。很多时候，我们也把“标签”说成“元素”，例如把“p标签”说成“p元素”。标签和元素，其实说的是一个意思。
前端开发工具非常多，例如Sublime Text、Atom、HBuilder、Vscode、Webstorm。
基本标签-head
<em></em>斜体
head
一般来说，只有6个标签能放在head标签内。
title标签
定义网页的标题
meta标签
在HTML中，meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。
注：在Web技术中，我们一般形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”。
在HTML中，meta标签有两个重要的属性：name和http-equiv。
1、name
<!DOCTYPE html>
<html>
<head>
<!--网页关键字-->
<meta name="keywords" content="绿叶学习网,前端开发,后端开发"/>
<!--网页描述-->
<meta name="description" content="绿叶学习网是一个最富有活力的Web技术学习网站"/>
<!--本页作者-->
<meta name="author" content="helicopter">
<!--版权声明-->
<meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。"/>
</head>
<body>
</body>
</html>
keywords 网页的关键字，可以是多个，而不仅仅是一个
description 网页的描述
author author
copyright 版权信息
上表只是列举了最常用的几个属性值。在实际开发中，我们一般只会用到keywords和description。也就是说记住这两个就可以了，其他的都不用管
2、http-equiv属性
meta标签的http-equiv属性只有两个重要作用：定义网页所使用的编码；定义网页自动刷新跳转。
(1)定义网页所使用的编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
这段代码告诉浏览器该页面所使用的编码是utf-8。不过在HTML5标准中，上面这句代码可以简写为:
<meta charset="utf-8" />
在实际开发中，为了确保不出现乱码，我们必须要在每一个页面中加上。
这一句必须放在title标签以及其他meta标签前面
(2)定义网页自动刷新跳转
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
这段代码表示当前页面在6秒后会自动跳转到http://www.baidu.com这个页面。实际上，很多“小广告”网站就是用这个来实现页面定时跳转的。
link标签
link标签用于引入外部样式文件（CSS文件）
style标签
style标签用于定义元素的CSS样式
script标签
script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件
base标签
这个标签一点意义都没有，可以直接忽略
——————————————————————————————————
以下为body内的标签
文本
静态页面和动态页面的区别在于：是否与服务器进行数据交互，即使你的页面用了JavaScript，也不是动态页面，除非你还用到了后端技术。
标题标签 h
共有6个级别的标题标签：h1>h2>h3>h4>h5>h6
一个页面一般只能有一个h1标签，而h2到h6标签可以有多个。
段落标签
段落标签 p
段落标签会自动换行，并且段落与段落之间有一定的间距。
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
换行标签 br
<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
br是自闭合标签，br是break（换行）的缩写
使用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会。
br标签是用来给文字换行的，而p标签是用来给文字分段的。如果你的内容是两段文字，则不需要使用br标签换行那么麻烦，而是直接用两个p标签就可以了。
粗体标签：strong、b
<body>
<p>这是普通文本</p>
<strong>这是粗体文本</strong><br/>
<b>这是粗体文本</b>
</body>
strong标签和b标签的加粗效果是一样的。不过在实际开发中，如果想要对文本实现加粗效果，尽量使用strong标签，而不要使用b标签。这是因为strong标签比b标签更具有语义性。
文本标签
斜体标签：i、em、cite
尽量使用em标签，而不是i标签或cite标签。这也是因为em标签比其他两个标签的语义性更好。
上标标签：sup
<body>
<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
如果你想要将某个数字或某些文字变成上标效果，只要把这个数字或文字放在标签内就可以了。
下标标签：sub
中划线标签：s
<body>
<p>新鲜的新西兰奇异果</p>
<p><s>原价:￥6.50/kg</s></p>
<p><strong>现在仅售：￥4.00/kg</strong></p>
</body>
中划线效果一般用于显示那些不正确或者不相关的内容，常用于商品促销的标价中。
对于删除线效果，一般用CSS来实现，几乎不会用s标签来实现。
下划线标签：u
对于下划线效果，一般用CSS来实现，几乎不会用u标签来实现。
大字号标签：big
小字号标签：small
<body>
<p>普通字体文本 </p>
<big>大字号文本</big><br/>
<small>小字号文本</small>
</body>
在实际开发中，对于字体大小的改变，我们几乎不会用big标签和small标签来实现，而是使用CSS来实现
水平线标签
<hr />
div标签
使用“div标签”来划分HTML结构，划分区域，使得代码更具有逻辑性，从而配合CSS来整体控制某一块的样式
自闭合标签
<meta /> 定义网页的信息（供搜索引擎查看）
<link /> 引入“外部CSS文件”
<br /> 换行标签
<hr /> 水平线标签
<img /> 图片标签
<input /> 表单标签
块元素和行内元素
根据元素的表现形式，一般可以分为两类
块元素 block
块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行.
块元素内部可以容纳其他块元素和行内元素。
h1~h6 标题元素
p 段落元素
div div元素
hr 水平线
ol 有序列表
ul 无序列表
行内元素 inline
行内元素是可以与其他行内元素位于同一行的。
此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。
span、i、img都是行内元素
特殊符号
空格
" 双引号（英文） "
‘ 左单引号 ‘
’ 右单引号 ’
× 乘号 ×
÷ 除号 ÷
> 大于号 >
< 小于号 <
& “与”符号 &
— 长破折号 —
| 竖线 |
§ 分节符 §
© 版权符 ©
® 注册商标 ®
™ 商标 ™
€ 欧元 €
£ 英镑 £
¥ 日元 ¥
° 度 °
<body>
<p>欧元符号：€</p>
<p>英镑符号：£</p>
</body>
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
