HTML基础介绍和基础骨架

HTML基础介绍和基础骨架
HTML的概念
HTML 全称为 HyperText Markup Language，译为超文本标记语言。
HTML 不是一种编程语言，是一种描述性的标记语言。
作用：HTML是负责描述文档语义的语言。
HTML是负责描述文档语义的语言

书写第一个 HTML 页面

HTML结构详解
HTML标签通常是成对出现的（双边标记），比如 <div 和 </div；也有少部分单标签（单边标记），如：<br /、<hr /和<img src=“images/1.jpg” /等。
属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。

一、html 的骨架
1、文档声明头
任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE ……开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。
DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

2、页面语言 lang

3、头标签 head
meta 标签：
（1）字符集 charset：
<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”
（2）视口 viewport：
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”
（3）定义“关键词”：
举例如下：
<meta name=“Keywords” content=“网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信” /
（4）定义“页面描述”：
meta除了可以设置字符集，还可以设置关键字和页面描述。
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
设置页面描述的举例：
<meta name=“Description” content=“网易。” /
上面的几种标签都不用记，但是另外还有一个标签是需要记住的：
<meta http-equiv=“refresh” content=“3;http://www.baidu.com”
上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
title 标签:
用于设置网页标题：
<title 网页的标题 </title
title标签也是有助于SEO搜索引擎优化的。
base标签：

4、标签

04-HTML标签：排版标签
#标题标签
标题使用<h1 至<h6 标签进行定义。<h1 定义最大的标题，<h6 定义最小的标题。具有align属性，属性值可以是：left、center、right。

HTML 注释
HTML 注释的格式如下：
《!-- 我是 html 注释 --》
< >
段落标签<p
段落，是英语“paragraph“缩写。

HTML标签是分等级的，HTML将所有的标签分为两种：
文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

水平线标签<hr /

换行标签<br /

div 和span 标签
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。“div + css”布局。
div和span的区别
span和div唯一的区别在于：span是不换行的，而div是换行的。

内容居中标签 <center

预定义（预格式化）标签<pre
含义：将保留标签内部所有的空白字符(空格、换行符)，原封不动地输出结果（告诉浏览器不要忽略空格和空行）。

05-HTML标签：字体标签和超链接
字体标签
#特殊字符（转义字符）
& nbsp;：空格 （non-breaking spacing，不断打空格）
& lt;：小于号<（less than）
& gt;：大于号>（greater than）
& amp;：符号&
& quot;：双引号
& apos;：单引号
& copy;：版权©
& trade;：商标™
& #32464;：文字绐。其实，#32464是汉字绐的unicode编码。

下划线、中划线、斜体
<u：下划线标记
<s或<del：中划线标记（删除线）
<i或<em：斜体标记

上标<sup 下标<sub
上小标这两个标签容易混淆，怎么记呢？这样记：b的意思是bottom：底部

三、超链接
超链接有三种形式，下面分别讲讲。

#1、外部链接：链接到外部文件
<a href=“02页面.html” 点击进入另外一个文件 </a

2、锚链接
锚链接：给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就可以利用锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。

3、邮件链接
代码举例：
<a href=“mailto:xxx@163.com” 点击进入我的邮箱 </a

超链接的属性
href：目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
_self：在同一个网页中显示（默认值）
_blank：在新的窗口中打开。
_parent：在父窗口中显示
_top：在顶级窗口中显示

06-HTML标签：图片标签
img标签介绍
#介绍
img: 英文全称 image（图像），代表的是一张图片。
如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：
<img src=“图片的URL” /

img标签的src属性
这里涉及到图片的一个属性：
src属性：指图片的路径。英文名称 source。
在写图片的路径时，有两种写法：相对路径、绝对路径
写法一