前言
本文主要记录我学习前端的笔记，如有不准确之处还请劳烦您指出，万分感谢。
1、HTML是什么？（HTML概述）
HTML (HyperText Markup Language）是超文本标记语言。"超文本"就是表示页面内可以包含非文字如:图片、链接、音乐等等。
它是一种建立网页文件的语言，通过标记式的指令（(Tag)，将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。
HTML网页文件可以使用记事本、写字板、HBuilder、Sublime等编辑工具来编写，以.htm或..html为文件后缀名保存。将HTML网页文件用浏览器打开显示，若测试没有问题则可以放到服务器(Server)上，对外发布信息。
2、编辑工具
HBuilder X
小Tips：为了避免没有保存而导致丢失的情况以及方便预览，因为预览需要先保存才可以预览最新的更改，所以可以在设置里边打开自动保存，这样点击鼠标右键就可以保存啦，如下图
在上方菜单栏选择工具，即可出现设置按钮
3、基础语法
3.1.标签
HTML 标记是由<和>所括住的指令标记，用于向浏览器发送标记指令。主要分为:单标记指令、双标记指令(由<起始标记>内容</结束标记>构成)。
HTML语言使用标志对的方法编写文件，既简单又方便。它通常使用<标志名>内容</标志名>来表示标志的开始和结束，因此在HTML文档中这样的标志对都必须是成对使用的。为了便于理解，将
HTML标记语言大致分为:基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。
3.1.1.单标签
单标签，不设置属性值，如：
<br/>(换行） <hr/>(水平线）3.1.2.单标签属性
单标签（也叫空元素），设置属性值，如：
<hr winth="800" />3.1.3.双标签（大多数双标签都有属性）
双标签，不设置属性值，如：
<title>...</title>3.1.4.双标签属性
双标签，设置属性值，如：
<body bg color="red">...</body>
<font size="7">...</font>3.2.整体结构
HTML的内容都是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签和标签之间有需要正确嵌套。
通常一个HTML网页文件包含3个部分:标记头区<HEAD> . .....</HEAD>、内容区<BODY>. ... . .</BODY>和网页区<HTML>. . ....</HTML>。
<html>
<head></head>
<body></body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--网页主体内容-->
</body>
</html>4.常用标签一
HTML页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染，我们需要记忆常用的标签即可。大致可分为如下几类:标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div和span等。
4.1.标题（块级元素）
<h1></h1>h1~h6大小依次递减，切记页面中不能有大量<h1>标签，一般一个页面有一个即可。不可以和加粗混用。注：块级元素可以自动换行
4.2.段落（块级元素）
<p></p>4.3.换行（单标签）
<br>或者</br>一般情况下，回车不能实现换行效果，需要用br
4.4.水平线(单标签）
<hr>常用属性 ：color：颜色 size：粗细 width（百分比或px）：长度 align：对齐方式
4.5.列表
4.5.1.无序列表
<ul><li></li></ul>无序列表即每个元素前面没有序号，元素前面的黑圆点可以改变形式(type)
4.5.2.有序列表
<ol><li></li></ol>无序列表即每个元素前面有序号，元素前面的序号也可以改变形式(type)
4.6.div（层）（块级元素）
<div></div>万能标签
默认占全部高度，有多少内容占多少高度，可以设置其宽高（style属性）。
width：宽 height：高 align：对齐方式（中为center）
4.7.span（块）（行内元素）
<span></span>不可以设置宽高，有多少内容占多少地方，注：行内元素不会自动换行。
4.8.格式化标签
4.8.1.font
<font></font>规定文本的字体（face）、字体尺寸（size）、字体颜色（color）。
4.8.2.pre
<pre></pre>定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。文本内部空格用 ；（牛逼视频）
4.8.3.文本标签
b(粗文本)也可以用strong、i (斜体文本)、u(下划线文本)、del(中划线文本) 、 sub (下标文本) 、sup (上标文本)
5.常用标签二
5.1.a标签
<a href="http://www.baidu.com">百度</a>a标签定义超链接，用于从一张页面链接到另一张页面。a元素最重要的属性是href属性，它指示要链接的目标位置，同时没有href属性a标签内的内容与普通文本没有区别，也就失去了超链接的功能。若是想要跳转到当前页面，那么 href的值为#。被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标(target属性)。
| 属性 | 值 | 描述 |
| href | URL | 连接所要跳转的位置，可能是其他或当前页面。 |
| target | _blank <br>空白窗口 _parent <br> _self <br>当前窗口 _top <br> | 规定在何处打开链接文档。<br> _blank :开启新页面显示页面;<br> _self :当前页面显示跳转到页面，默认值。<br> _top:用于有frameset布局的页面，想要覆盖整个页面显示。<br> Framename:这里framename与上边的值不同，具体以为frame起了什么样的名字为准，该值指示要连接的页面跳转后将在相应名称的框架中显示。 |
<a href="#">百度</a>意为点击百度刷新一次页面
<a href="http://www.baidu.com"target="_blank">百度</a>意为在新页面打开百度
<a>标签作为锚点：（即实现回到顶部等定位的效果）
a标签的name属性值：
<a name= "top">< /a>
其他的id属性值：
<div id="top"></div>
锚点的使用:
<a href="#top"></a>
回到顶部：<a href="#">回到顶部</a>
5.2.img
<img>向网页中嵌入一张图片
常用属性:
src:需要引入的图片的地址(必须属性)
alt:当图片破损或不存在时，显示文本的内容
title:当鼠标悬停在图片上时显示的文本
width:图片的宽度
height:图片的高度
border:图片边框
5.3.表格
<table width="400px" align="center" border="1" style="border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>19</td>
</tr>
</table>table标签定义HTML表格。
tr标签定义表格的行。
tr元素包含一个或多个th或td元素td标签定义HTML表格中的标准单元格。
th定义表格内的表头单元格。th元素内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。
简单的HTML表格由table元素以及一个或多个tr、th、或td元素组成。理解: table相当于一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格， th中的内容同时有加粗的效果。
table的属性：
width：宽度
border：边框
align：对齐方式
合并边框：style="border-collapse: collapse;
tr的属性：
align：对齐方式
bgcolor：背景颜色
总结
本次笔记主要记录了视频中讲解的几种标签用法，感觉不错！
627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
