HTML之初探

一、HTML概述

【what】Hypertext Markup Language 超文本标记语言
【why】用于制作编写各类网站和B/S应用
【when】各种静态和动态网页中，编写网站、B/S结构应用（行业应用、商城、游戏等）时
【how】

1. 组成：由成对出现的标签组成
2. 源码：静态网页后缀为.html或.htm，动态网页后缀有.asp .php .jsp等
3. 开发工具 - 文本编辑器：记事本，Notpad++，EditPlus….

• 专业工具：Dreamweaver，Visual Studio…

4. 解释与执行工具：各种浏览器（IE,goole,火狐，360…)
5. 特点：简易性、平台无关性
6. 编写HTML网页步骤 1. 新建网页文件：
   使用记事本或文本编辑器notepad++或者其他专业工具新建网页文件，后缀为.html
7. 使用记事本方式打开网页，编写网页源代码
8. 编写HTML基本结构
9. 在头部(head)中添加网页标题
10. 在主体部分(body)添加网页内容

设计网页，必须掌握两块，第一，了解网页基本结构，即HTML基本结构；第二了解HTML常用标签。在设计网页时，往往我们会在网页中显示文字、图片等，则需要将对应的标签放置在body中来实现

二、HTML语法

HTML基本结构

【语法】

<br></br>
<br></br>
<title>此处可以放置网页标题</title><br></br>
<br></br>
<br></br>
此处用来放网页的内容<br></br>
<br></br>
<br></br>```
  
 【注意】

1. html网页基本结构包含2个部分，头部(head)和内容部分(body)，所有在网页上要显示的东西都需要放在body标签中。
2. 标签书写时要严格遵守语法，属性值赋值时要用半角的””号，标签书写语法如下  

/语法1：成对出现的标签/


<标签名 属性1="" 属性2="">内容</标签名>


/语法2：空标签/


<标签名 属性1="" 属性2="" />

```
3. 大部分标签在编写时成对出现。如，前面()是开始标签，后面()是结束标签，中间是这个标签的内容。
4. 标签必须正确嵌套。如<title></title>。可以看到head标签的开始标签和结束标签将title标签包裹在里面。
5. 书写时按照标签嵌套级别进行缩进
6. HTML不区分大小写，但是规范要求使用小写

文本标签

1. 标题 <h1> --- <h6>
   【语法】<h1>标题内容</h1>
2. 字体
   【语法】<font size="" face="" color="">文本内容</font>
   【属性】：

   属性名	作用
   color	字体颜色,颜色单词：red,blue….,十六进制数字：#ffffff….#000000
   size	字体大小
   face	字体（黑体、宋体….）

3. 字体形状
   【语法】
   <b> <i> <u> <sub> <sup>
4. 段落
   【语法】<p align="" valign="">段落内容</p>
   【属性】：

   属性名	作用
   align	水平对齐方式：left,center,right

5. 换行
   【语法】<br />
6. 水平线
   【语法】<hr width="" size="" color="" />
   【属性】：

   属性名	作用
   width	宽，像素
   size	设置水平线高度

7. 特殊字符
   【语法】&名称;
  空格
8. 注释
   【语法】<!-- 注释内容-->

图像标签

1. 语法
   【语法】<img src="" alt="" border="" width="" height="" />
   【属性】：

   属性名	值
   src	图片源文件URL地址
   width	宽，像素
   height	高，像素
   alt	图片提示文本
   border	边框宽度，像素
   align	与文本对齐方式[top | middle | buttom]

2. URL地址路径
   【相对路径】：相对于当前网页文件的路径

   文件位置	打开位置
   同级	直接用文件名
   上级	../文件名
   下级	子目录名/文件名

   【绝对路径】：文件所在位置的完整路径

超链接

1. 语法
   【语法】<a href="" targer="">链接内容（文本、图像）</a>
   【属性】
   href 链接地址

   target	打开位置
   _blank	新窗口打开
   _self	当前窗口打开（默认）
   _top	顶级窗口打开
   _parent	父窗口打开

2. 链接地址href - 链接到其他网页（href=”URL地址”）

• 链接到当前网页的锚点

（1）创建锚点标签<br></br>
<a name=""></a><br></br>
（2）创建锚点超链接：<br></br>
<a href="#锚点名">链接文本</a><br></br>```
- 链接到其他网页的锚点  
`<a href="网页地址#锚点名">链接文本</a>`
- 电子邮件链接  
`<a href="mailto:example@example.com%20">链接文本</a>`