1.1 HTML基础知识点
一、HTML是什么？
Hyper Text Markup Language 超文本标记语言 的缩写
开发一个html文件，可以有很多方式 ：比如Dreamweaver,HBuilder等等专业工具。 最简单的方式就是用记事本写一个
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
二、中文乱码问题
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
三、基础结构
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面标题</title> </head> <body> <h1>行标题</h1> <p>段落。</p> </body> </html>
四、常用标签
- HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.（由大变小）
- HTML 段落是通过标签 <p> 来定义的.（会自动换行）
- <b> <strong> 都可以用来实现粗体的效果
- <i>和<em>都可以表示斜体效果
- HTML 链接是通过标签 <a> 来定义的.
- HTML 图像是通过标签 <img> 来定义的.
- <hr> 标签在 HTML 页面中创建水平线。
- 注释：<!-- 这是一个注释 -->
- 预格式<pre></pre>保留原有的格式
- 删除标签<del>使用del标签实现的删除效果</del>
- <ins>即下划线标签</ins>
五、标签的格局
- <img> 即图像标签 ,需要设置其属性 src指定图像的,路径src直接使用文件名，不需要/(绝对路径、相对路径)，可用
width="200"height="200"描述大小。用块确定相应位置
<div align="left"> <img src="example.gif"/> </div> <div align="center"> <img src="example.gif"/> </div> <div align="right"> <img src="example.gif"/> </div>
alt图片的默认文字，图片不存在的时候，alt就会出现
2.超链接<a href="跳转到的页面地址">超链显示文本</a>属性target点击变色
当鼠标放在超链上的时候，就会弹出提示文字。title="跳转到http://www.12306.com"
使用图片也可以超级链接</a href="www.baidu.com"><img src="1.jsp"></a>
3、表格，border表示边框<table border="1">
tr(table row)表示行，所有3个tr元素
td(table data)表示列，每一行，有2列，所以每一个tr元素里，有2个td元素
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素，width可以填像素和百分比。
<table border="1" width="200px"> <tr> <td width="50%" align="left">1</td> <td>2</td> </tr> <tr> <td align="center">3</td> <td>4</td> </tr> <tr> <td align="right">a</td> <td>b</td> </tr> </table>
设置td的属性valign；valign="top"、"middle"、"bottom"
设置td的属性colspan（行合并）、设置td的属性rowspan（列合并）
同时：设置tr或者td的属性bgcolor背景色。
4、列表
列表分无序列表和有序列表
分别用<ul>标签和<ol>标签表示
六、HTML的块div和span
div是块元素，即自动换行 ，常见的块元素还有h1,table,p
span是内联元素，即不会换行 ，常见的内联元素还有img,a,b,strong
这两种标签都是布局用的 这种标签本身没有任何显示效果 ，通常是用来结合css进行页面布局
<div align="left"> <img src="http://how2j.cn/example.gif"/></div><div align="center"> <img src="http://how2j.cn/example.gif"/></div><div align="right"> <img src="http://how2j.cn/example.gif"/></div>