HTML概念
什么是HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
那么什么是超文本呢？
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
这些信息可以是文字、图片、链接、视频，超文本将这些东西整合在一个页面或者一系列的页面里，用链接将他们联系起来。
一个最基本的HTML结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--编码方式-->
<title>这是我的标题</title>
</head> <!--这是页面的头部，定义关于文档的信息。-->
<body>
</body> <!--这是页面的主体部分-->
</html>
<!DOCTYPE> 声明必须是 HTML 文档的第一行,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<title> 元素可定义文档的标题,常把它放置在浏览器窗口的标题栏或状态栏上。
<html> 与 </html> 之间的文本描述网页。
<body> 与 </body>之间的文本是可见的页面内容。
什么是标签？
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
什么是元素？
元素是指一对标签中间的所有内容。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 大多数 HTML 元素可拥有属性
HTML页面是元素间相互嵌套组成的
什么是属性？
属性是标签的一部分，属性提供了有关 HTML 元素的更多的信息
- 属性总是以名称/值对的形式出现，比如：name=“value”。
- 属性总是在 HTML 元素的开始标签中规定。
比如，
<a href="http://www.baidu.com">This is a link</a>
标签是用来表示超链接标签类型，但是如何指明它指向的网站呢？我们需要为它提供href属性，使这个超链接变得完整，来实现他访问一个链接的功能。
HTML 标签与属性
- 标签由一对尖括号和里面的关键字组成。
- HTML标签可以成对出现，也可以单独出现，比如是成对出现的，是单独出现的。
- 成对的标签由开始标签和结束标签组成，结束标签要加上/，以便于匹配和区分。
一.基础标签
1.段落 paragraph
<p> 与 </p> 之间的文本被显示为段落.
浏览器会自动地在段落的前后添加空行,段落会比单纯的换行间隔大些,段落之间会相互区分.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--编码方式-->
<title>这是我的标题</title>
</head> <!--这是页面的头部，定义关于文档的信息。-->
<body>
<p> 这是一个段落 </p>
<p> 这是另一个段落 </p>
</body> <!--这是页面的主体部分-->
</html>
2.标题 headline
<h1> 与 </h1> 之间的文本被显示为标题,最大可表示六层。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--编码方式-->
<title>这是我的标题</title>
</head> <!--这是页面的头部，定义关于文档的信息。-->
<body>
<h1> 这是标题1 </h1>
<h2> 这是标题2 </h2>
<h3> 这是标题3 </h3>
<h4> 这是标题4 </h4>
<h5> 这是标题5 </h5>
<h6> 这是标题6 </h6> <!--最多可以到六级-->
<h1> 这是新的标题1 </h1>
</body> <!--这是页面的主体部分-->
</html>
3.注释
<!-- This is a comment -->
与C语言中的/* */功能相同,将注释内容与页面内容区分开来,注释不会显示在页面当中,后续大家在自制页面过程中要保持良好的代码习惯,标记好某段代码的作用.
4.链接 hypertext reference
在 href 属性中指定链接的地址，链接是通过标签进行定义的。
<a href="http://www.baidu.com">This is a link</a>
target,你可以定义被链接的文档怎样被打开
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<!--在新标签中打开-->
| 属性值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
5.图片 image
是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
<反斜杠>
D:\csdn博文
<img src="2.png" width="104" height="142" /> <!--绝对路径和相对路径-->
<img src="D:\csdn博文\2.png" width="50%" height="50%" />
与链接相似，图片中也可以设置他的属性，但是我们可以看到是单标签，并且它同时设定了三个属性，他们之间用空格间隔.
align /ə’laɪn/ 排列整齐；使对齐；（尤指）成一直线
<img src="1.png" align="bottom">
<img src="1.png" align="middle">
<img src="1.png" align="top">
bottom 对齐方式是默认的对齐方式
<img src="1.png" align="left"> <!--浮动在文本的左侧-->
<img src="1.png" align="right"> <!--浮动在文本的右侧-->
6.水平线 horizontal line /hɒrɪ’zɒnt(ə)l/
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<hr />
7.换行 break
<br> 可插入一个简单的换行符。
<br>标签是空标签（意味着它没有结束标签，因此不需要这样书写：<br></br>）。在 HTML 中，把结束标签放在开始标签中，也就是 <br />。
**注意:**不要用
的形式代替换行.<br/>
折行:当你希望在一个段落中换行但又不希望产生一个新的段落,可以用</br>元素.
<p>This is<br />a para<br />graph with line breaks</p>
8.字体
规定文本的字体、字体尺寸、字体颜色。但是建议使用样式(style)进行调整,后续会引入style和CSS,这两个一起使用可以方便调整.
<font size="3" color="red">PER DAY</font>
<font size="2" color="blue">PER DAY</font>
<font face="verdana" color="green">PER DAY</font>
9.锚点 anchor /'æŋkə/
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
<a name="Huihe">锚</a>
也可以使用 id 属性来替代 name 属性
锚点链接
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="Huihe">欢迎来到慧河工作室</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#Huihe">欢迎来到慧河工作室</a>
也可以在其他页面中创建指向该锚的链接：
<a href="http://www.xxx.com#tips">目标网站的锚点</a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
尝试时,为了显示效果建议最低保证填充页面到滚动条出现
<body>
<a name="Huihe" href="#End">欢迎来到慧河工作室</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<img src="./2.png">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a name="End" href="#Huihe">探头~</a>
</body> <!--这是页面的主体部分-->
10.样式
```内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
常用样式
background-color
设置背景颜色
<body style="background-color:yellow">
<h2 style="background-color:red">1111111111</h2>
<p style="background-color:green">2222222222</p>
也可以使用：background
color
设置文字颜色
<p style="color:green">Huile</p>
font-family
设置字体样式
<p style="font-family:verdana;color:red"> WangJi </p>
<p style="font-family:times;color:green">Huile</p>
<p style="font-family:verdana;color:green">Huile</p>
font-size
设置字体大小
<p style="font-size:30px">复试3组</p>
text-align
属性规定了元素中文本的水平对齐方式：
包括:left,center,right
<h1 style="text-align:center">This is a heading</h1>
float
元素在哪个方向浮动
<div style="background-color:grey;height:80px;float:center" >我是外层<div style="background:red;width:50px;">我是内层</div></div>
margin
margin调节与其他元素的间距
边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离
<div style="background-color:grey;height:80px;border:5px solid blue;margin:50px;padding:150px" align="center" >我是外层<div style="background:red;width:50px;">我是内层</div></div>
margin:0 auto;
padding
padding调节与边框的间距
间隙属性(padding)是用来设置元素内容到元素边界的距离
<div style="background-color:grey;height:80px;padding:150px" >我是外层<div style="background:red;width:50px;">我是内层</div></div>
<div style="background-color:grey;height:80px" >我是外层<div style="background:red;width:50px;">我是内层</div></div>
<!--体会差异，均没有设置浮动，但是设置了pedding的左边产生了间隔-->
border
border用来设置框边线
- border-width 边线宽度
- border-style 边框类型
- border-color 边框颜色
<div style="background-color:grey;border:5px solid blue" align="center" >我是外层<div style="background:red;">我是内层</div></div>
补充：
margin、padding的参数值可以有四、三、二或者一个分别作用于四边，如padding: 16px 0;
一个：将用于全部的四边
两个：第一个用于上下，第二个用于左右
三个：第一个用于上，第二个用于左右，第三个用于下
四个：将按上右下左的顺序作用于四边
五.转义字符
有时候我们需要以文本形式输入<>,而不是将他转化为一个标签,为了将标签<>正常显示,我们使用转义字符.
  //表示空格
< //less than 表示小于号
> //greater than 表示大于号
| 显示 | 说明 | 实体名称 | 实体编号 |
|---|---|---|---|
| 半方大的空白 |   |   | |
| 全方大的空白 |   |   | |
| 不断行的空白格 | |   | |
| < | 小于 | < | < |
| > | 大于 | > | > |
| & | &符号 | & | & |
| " | 双引号 | " | " |
| © | 版权 | © | © |
| ® | 已注册商标 | ® | ® |
| ™ | 商标（美国） | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
六.块与布局(重点)
大多数 HTML 元素被定义为块级元素或内联元素。
内联元素
也称为行内元素。
内联元素在显示时通常不会以新行开始。
例子：b, td, a, img
块级元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子 ：h1, p, ul, table，body
<div>
是一种块级元素，由于它属于块级元素，浏览器会在其前后显示折行。
它的作用是作为其他 HTML 元素的容器。
如果与 CSS 一同使用，
特点：前后自动换行
<div style="background:grey">我是第1块</div>
<div style="background:red">我是第2块</div>
<div style="background:blue">我是第3块</div>
<div style="background:green;float:left">我是第一块</div>
<div style="background:red;float:right">我是第二块</div>
<div style="background:yellow;float:right">我是第三块</div>
<div style="background:blue;float:right">我是第四块</div>
div支持style,class等全局属性，来设置它的样式。
框的外边用margin调节与其他元素的间距
内部用padding调节与边框的间距
border用来设置框边线 的style 包括线的粗细，线的风格颜色透明度等
div的属性
align 属性规定 div 元素中的内容的水平对齐方式。
值：center,left,right
<div align="center"> </div>
<span>
是一种是内联元素,可用作文本的容器。
元素没有特定的含义。
当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。
特点：新定义时，不会自动换行。
<span style="background:GREY">SPAN1</span>
<span style="background:GREY">SPAN1</span>
在实际编辑页面的过程中我们会使用
七.类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
我们就可以为相同的类设置相同的样式，或者为不同的类设置不同的样式。
一个类的标准形式
<div class = "new"></div>
class和style的区别
style可以直接写样式class就给div命名 然后在该html文件外面给这个名字写样式
style：
<div style="background:#000;"></div>
class：
<style type="text/css"> <!--样式表-->
.xxClass{background:#000;}
</style>
<div class="xxClass"></div>
八.页面美化
设置页面背景
<body background="1.png">
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
