一、HTML5
HTML： HTML4.01 版本（1999.12-2014）
HTML5：H5
二、web基础知识（了解）
1.web与Internet
Internet:全球性的计算机互联网络，简称因特网，互联网，交互网。
提供的服务：
www服务：world wide web通过网络的方式去访问网站（万维网）
Email:电子邮件
BBS：电子公告板，俗称论坛
FTP:文件的上传下载
telnet:远程登录
2.Internet上的应用程序
< 1>c/s 程序
c:client
s:server
通过指定的客户端连接服务器的程序（桌面应用程序）
代表：qq,网络游戏，.exe程序
<2>b/s 程序
b:browser 浏览器
s:server 服务器
通过浏览器去访问服务器
代表：网站
3.web应用程序
web:运行在internet之上的一种B/S结构的应用程序，俗称网站。
web的作用：将各类信息和服务进行无缝的连接，并提供生动形象的用户界面。
web的工作原理：基于浏览器和服务器以及通信协议来实现数据的传输和展示。
通信协议：规范了数据是如何传递和打包。
服务器：
<1>功能
存储web信息，并提供程序的运行环境
接收用户请求并给出响应
具备一定的安全功能
<2>服务器产品
TOMCAT(JAVA)
APACHE
IIS
<3>服务器技术
Java/php /ASP.NET/python/NODE.JS(前端技术：操作数据库)
4.浏览器：
<1>.功能
代理用户提交请求（UA：User Agent）
解析HTML,CSS,js,以图形化的方式展示给用户
三、.HTML快速入门
1.什么是HTML？
HTML：HyperText Markup Language 超文本标记语言
a：普通字母
<a></a>//超级文本，超链接
HTML的特点：
1.用带有尖括号的“标记”来标识
2.以.html或.htm为后缀
3.由浏览器解析执行
4.可以嵌套脚本语言（javascript）
2.HTML基础语法
<1>标记
标记，又称元素或标签，在网页中表示一些功能。
标记在使用时，必须使用<>括起来，标记分为两种：
1.封闭类型（双标记）
必须成对出现，有开始和结束标记
语法：<标记>内容</标记>
ex:
<a>百度</a> 正确
<a>百度 错误
2.非封闭类型（单标记）
也称为空标记，只有一个标记，既表示开始又表示结束。
语法：<标记>或<标记/>
ex:
<img>或<img/>
练习：
新建一个txt文档，将文档的后缀改为.html，然后在文档中编写如下代码
1.写一对
2.写一对
3.写一对
4.写一个
<2>标记的嵌套
1.什么是嵌套
在一对标记中出现另外一对（个）标记，从而形成功能的层叠。
2.语法
<标记>
<标记>
<标记/>
</标记>
</标记>
ex:
<a>
<b>
<img>
</b>
</a>
<a><b><img></b></a> 正确，不推荐
<a>
<b>
</img>
</a>
</b> 错误
嵌套注意问题：
1.嵌套顺序，换行缩进
2.成对出现，去嵌套其它的标记
<3>属性和值
属性作用：修饰标记
语法：
<标记 属性名称1=“值1” 属性名称2=“值2”><标记/>
要求必须写在开始标记中，属性和值之间用等号连接，如果有多个属性，属性之间用空格隔开。
ex:
设置段落标记对齐方式为居中对齐
标准属性（通有属性）：
id:定义元素在页面中独一无二的标识
style:在css中，定义行内样式
class:在css中，引用类选则器
title:鼠标悬停时元素上所提示的文字
<4>注释
语法：
注意：
1.注释不能嵌套
2.也不能出现在标记中
四、HTML文档结构
1.HTML文档的声明
文档的声明:<!doctype html>
作用：告诉浏览器HTML的版本类型
2.HTML页面结构
根标记:
在根标记中包含网页头和网页主体：
网页头： 定义网页的全局信息
网页主体： 显示网页的所有内容
3.head元素
head是其它头元素的容器
<title></title>//定义网页的标题
<meta>//定义全局信息，如：编码格式，关键词，描述内容，元标签等等。
<meta charset="utf-8"/>
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述内容"/>
<style></style>//定义内部样式
<script></script>//定义/引用js脚本
<link>//引入css文件
4.body元素
显示网页的所有内容
修饰body的属性：
text:定义整个网页的文字颜色
bgcolor:定义网页的背景颜色
五、文本标记(重点)
1.特殊字符
用一些转义字符来表示特殊的符号
空格
< 表示<
> 表示>
© @
¥ ￥
® ®
× 关闭符号x
练习：完成以下版权设置 3分钟
Copyright @ 2004 - 2018 京东<JD.com> 版权所有
2.文本样式标记
<b></b> 加粗
<i></i> 倾斜
<u></u> 下划线
<s></s> 删除线
<sub></sub> 下标
<sup></sup> 上标
3.标题元素
语法：
<hn></hn> n:1-6
<h1>内容</h1>
...
<h6>内容</h6>
特点：
1.改变字体的大小
2.加粗显示
3.标题元素自带上下空白间距
4.独占一行
属性：
align:设置内容水平对齐方式
取值：
left:左
center:中
right:右
4.段落标记
语法：
<p>内容</p>
特点：
1.独占一行，并且上下文之间有空白间距
2.字体无加粗和大小变化
属性：
align:设置内容在水平方向的对齐方式
取值:left/center/right
5.换行标记
语法：
<br>或<br/>
6.分割线
语法：
<hr>或</hr>
属性：
1.width 宽度，表示水平线的宽度，取值为px或%的数值。
2.align 水平线对齐方式，取值：left/center/right
3.size 表示水平线的尺寸（高度），取值为px或%的数值。
4.color 水平线的颜色，取值为合法的颜色值
7.预格式化
作用：用于保留html代码中回车和空格
语法：
<pre></pre>
8.分区元素
1.块分区元素
作用：用于页面的布局
语法：<div></div>
特点：单独成行
2.行分区元素
作用：处理同一行文本的不同样式
语法：<span></span>
特点：包裹的内容在一行中显示
9.行内元素与块级元素
1.块级元素
在页面中独占一行，从上往下排列的元素
常见的块级元素：
h1-h6,p,div,列表,结构标记
2.行内元素
多个元素在一行中显示，从左往右排列的元素
常见的行内元素：
span,i,b,u,s,sup,sub
10.图片和链接
（1）URL：统一资源定位器
用于表示网络中的任意资源的位置
（2）路径的表现形式
A.绝对路径（完整路径）
网络资源：协议+主机+目录结构+文件名称
本地路径：从最高盘符处开始去查找
B.相对路径(用的比较多)
从当前文件所在位置开始查找资源所经过的路径，就是相对路径
同级目录：直接引用 ex:p1.jpg
子级目录：先进入，再引用 ex: img/p1.jpg
父级目录：先返回，再引用 ex：../p1.jpg
C.根相对路径
永远是从web站点的根目录处开始查找
ex：/codeboy/img/p1.jpg
（3）图像格式
.jpg 压缩比率大
.png 背景透明
.gif 动画
（4）图像元素
语法：<img>
属性：
src :指定要显示图像的URL
width:指定宽度
height:指定高度
alt：图片不能正常加载时显示的文字
注意：如果需要修改图片的尺寸，一般只修改一个属性即可，因为是锁定比例。
（5）链接
语法：<a>内容</a>
属性:
href ：指定跳转的路径
target：指定打开新网页的方式
取值 _blank:在心得标签页中打开新网页；_self：默认值，在当前网页中打开新的网页
链接的其他表现形式：
a.资源下载
让链接的URL，链接到rar/zip的文件即可。
<a href="a.rar">下载</a>//a.rar 必须存在
b.电子邮箱链接
<a href="mailto:g-yangyan@tedu.cn">打开邮箱</a>
c.返回页面的顶部
<a href="#">返回页面顶部</a>
d.链接到js
<a href="javascript:js代码" >执行js代码</a>
//举例
<a href="javascript:SayHello()" >执行js代码</a>
<script type="text/jscript">
function SayHello(){
alert("hello world !");
}
</script>
或者
<a href="javascript:alert('hello world')" >执行js代码</a>
（6）锚点：网页中一个记号，可以通过超链接跳转到记号位置处
a.定义锚点
<1>使用a标签中的name属性进行定义
<a name= "锚点名称" ></a>
<2>使用任意元素的id属性定义锚点
<any id="锚点名称"></any>
b.链接到锚点
<1>链接到当前页面的锚点
<a href=“#锚点名称”></a>
<2>链接到其他界面 的锚点
<a href="网页URL#锚点名称"></a>
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
