HTML
http://176.233.40.248/main.html
ZHANGHAO:XLY
PWD:123456
--------------------------------------------------
0. 基础概念
ZHANGHAO:XLY
PWD:123456
--------------------------------------------------
0. 基础概念
0.1. 名称/概念：超文本标记语言，Hyper Text Markup Languange，HTML
0.2. 特点：不同的含义，不同的表现形式
0.3. 表现形式：以标记的形式
普通文本 a:a
超文本 a:超链接 <a>超链接</a>
普通文本 a:a
超文本 a:超链接 <a>超链接</a>
1. HTML的标记语法
1.1 封闭类型标记/双标记
语法：<标记>超链接</标记>
e.g. <a>超链接</a>
<b>加粗</b>
1.1 封闭类型标记/双标记
语法：<标记>超链接</标记>
e.g. <a>超链接</a>
<b>加粗</b>
1.2 非封闭类型标记/单标记
语法：<标记>或者<标记/>
e.g. <img>
语法：<标记>或者<标记/>
e.g. <img>
2. 标记的嵌套
定义：在一对标记之中，允许另一对或者一个标记的出现，外层标记称为父级标记，内层标记称为子级标记，子级标记具有父级标记的样式，书写时注意层级关系。
定义：在一对标记之中，允许另一对或者一个标记的出现，外层标记称为父级标记，内层标记称为子级标记，子级标记具有父级标记的样式，书写时注意层级关系。
<标记1>
<标记2>
<标记3>
</标记2>
</标记1>
<标记2>
<标记3>
</标记2>
</标记1>
【练习】
创建一对body标记，在body标记中创建一对div标记，在div标记中创建一对a标记，在A标记中创建一个img标记
<body>
<div>
<a>
<img src = "bjp.gif">
</a>
</div>
</body>
<div>
<a>
<img src = "bjp.gif">
</a>
</div>
</body>
3. 标记的属性
定义：修饰标记的内容
【注意】声明属性时要注意的几个问题
3.1. 属性声明要到开始标记中
语法：<标记 属性>内容</标记>
语法：<标记 属性>
定义：修饰标记的内容
【注意】声明属性时要注意的几个问题
3.1. 属性声明要到开始标记中
语法：<标记 属性>内容</标记>
语法：<标记 属性>
3.2. 属性和标记之间使用空号隔开。
语法：<标记 属性>内容</标记>
语法：<标记 属性>
语法：<标记 属性>内容</标记>
语法：<标记 属性>
3.3. 属性是拥有值的，属性的值和属性之间用“=”拼接，值可以使用单引号或者双引号引起来。
<a hre = "http://www.baidu.com">百度</a>(推荐)
<a hre = ‘http://www.baidu.com’>百度</a>
<a hre = http://www.baidu.com>百度</a>
3.4. 一个标记允许拥有多个属性，属性和属性之间使用空格隔开，属性排名不区分先后顺序。
<a hre = "http://www.baidu.com" target = "_blank">百度</a>
<a hre = ‘http://www.baidu.com’>百度</a>
<a hre = http://www.baidu.com>百度</a>
3.4. 一个标记允许拥有多个属性，属性和属性之间使用空格隔开，属性排名不区分先后顺序。
<a hre = "http://www.baidu.com" target = "_blank">百度</a>
语法：<标记 属性1 = 值 属性2 = 值2 属性3 = 值3></标记>
【四大属性】
*id: 元素在网页中的唯一标识。
*title: 鼠标悬停在元素上时显示的文字。
*class: 定义元素类选择器时使用（css）
*style: 定义元素内联时使用（css）
*id: 元素在网页中的唯一标识。
*title: 鼠标悬停在元素上时显示的文字。
*class: 定义元素类选择器时使用（css）
*style: 定义元素内联时使用（css）
4. 标记的注释语句
定义：解释说明某一段或者某一行代码，而这行代码不会随着程序执行。
java注释：
//单行注释
/*
*多行注释
*/
/**
*文档只是
*/
定义：解释说明某一段或者某一行代码，而这行代码不会随着程序执行。
java注释：
//单行注释
/*
*多行注释
*/
/**
*文档只是
*/
THML注释语法：
<!--注释的内容-->
<!--下面是一个a标记，用于连接到百度服务器-->
<!--注释的内容-->
<!--下面是一个a标记，用于连接到百度服务器-->
【注意】
*注释是不能嵌套的
*注释不能出现在标记当中。
5. HTML文档标记语法
定义：每一次在创建网页前都要添加到代码内容当中，是一个固定格式
声明网页类型
定义：每一次在创建网页前都要添加到代码内容当中，是一个固定格式
声明网页类型
<! doctype html>
<html>
<head>
<!--声明网页的标题-->
<title></title>
<!--声明网页的编码格式-->
<meta charset = "utf-8">
</head>
<!--声明网页的主体-->
<body>
</body>
</html>
<html>
<head>
<!--声明网页的标题-->
<title></title>
<!--声明网页的编码格式-->
<meta charset = "utf-8">
</head>
<!--声明网页的主体-->
<body>
</body>
</html>
e.g. 我的以一张网页
<!--s声明网页格式-->
<! doctype html>
<!--声明一对thml标签-->
<html>
<head>
<!--声明网页的标题-->
<title>白建鹏</title>
<!--声明网页的编码格式-->
<meta charset = "utf-8">
</head>
<!--声明网页的主体-->
<body>
<a href = "http://www.baidu.com">百度</a>
<a href = "baijianpeng.com">这是我的第一张网页！</a>
<img src = "20180514192900125.png" >
<!--s声明网页格式-->
<! doctype html>
<!--声明一对thml标签-->
<html>
<head>
<!--声明网页的标题-->
<title>白建鹏</title>
<!--声明网页的编码格式-->
<meta charset = "utf-8">
</head>
<!--声明网页的主体-->
<body>
<a href = "http://www.baidu.com">百度</a>
<a href = "baijianpeng.com">这是我的第一张网页！</a>
<img src = "20180514192900125.png" >
</body>
</html>
创建一张网页
*【editPlus】
*file-->new-->html page
*ctrl+b
运行代码（快捷键）：
*【editPlus】
*ctrl+b
*【editPlus】
*file-->new-->html page
*ctrl+b
运行代码（快捷键）：
*【editPlus】
*ctrl+b
设置模板文件：
*【editPlus】
*tools-->preferences-->templates-->file name
(选择自己的模板文件路径。)
*【editPlus】
*tools-->preferences-->templates-->file name
(选择自己的模板文件路径。)
网页乱码解决方案：
*【editPlus】
*查看软件右下角编码格式，是不是utf-8，如果不是，
*【editPlus】
*查看软件右下角编码格式，是不是utf-8，如果不是，
修改字体大小：
*【editPlus】
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
