一 、web基础知识
HTML：泛指前端的网页技术
HTML5：html4.0的升级版本，大前端技术
HTML4.01是1999年12月发布的 <img>
XHTML1.0是2000年1月份发布(语法更严谨) <img/>
1.web与internet
internet:全球计算机互联网络，俗称：互联网，因特网，交换网，交际网
www：world wide web 万维网 —— 访问网站的服务
BBS：论坛
FTP：上传下载文件服务
Email：电子邮件的服务
telnet：远程登录的服务
2.internet上的应用程序
1.C/S c：client 客户端 s：server服务器 .exe
2.B/S b:browser 浏览器 s：server 各类网站
3.C/S和B/S
（1）c/s需要升级
（2）b/s不需要升级
（3）我们的工作主要是b/s
3.web运行原理
web：运行在Internet上的一种B/S结构的应用程序，俗称网站
Internet：为web运行提供网络环境
web的工作原理：基于浏览器和服务器以及通讯协议来实现数据的传输和展示
.html文件保存在服务器
.html文件运行在浏览器
通讯协议：规范了数据是如何打包和传输的
服务器
（1）功能
存储数据
接收请求并给出响应
提供程序的运行环境
具备一定的安全功能
（2）服务器产品
APACHE apache
TOMCAT tomcat
IIS
（3）服务器技术
java
php
.net
python
nodejs
浏览器
（1）功能
代表用户发送请求
作为HTML、css、js的解析器
以图形化的解码展示给用户
（2）浏览器
Chrome
Firefox
Oprea
Safari
IE–edge
（3）浏览器技术
HTML5,CSS3,JS
二、HTML快速入门
1.什么是HTML
HTML：HyperText Markup Language 超文本标记语言
普通文本：a
超文本：<a></a>
标记/标签/节点/元素：超文本具体组成形式，具有自己的功能
语言：都有自己的语法结构
2.html的特点
（1）以.html或者.htm为后缀
（2）由浏览器解析执行
（3）用带有尖括号的"标记"来标识
（4）在页面中可以执行js脚本
3.HTML基本语法
（1）标记，又称标签，元素，节点
表示一些功能
标记在使用时，必须用<>包裹
标记分为两种
1°双标记(封闭类型)
<标记></标记>
双标记必须成对出现，有开始就有结束
2°单标记(非封闭类型)
<标记>或者<标记/>
练习
新建一个text文件，改名为01_ex.html
在文档中按以下要求写出标记
一对html
一对head
一对body
一对title
<html></html>
<head></head>
<title></title>
<body></body>
（2）标签的嵌套
在一对标记中出现另一对(个)标记，形成的功能的层叠
<a href="#">
<b>新浪</b>
</a>
语法：
<标签1>
<标签2>
<标签3></标签3>
</标签2>
</标签1>
练习
html中嵌套head标签，和body，head标签中嵌套title标签
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
（3）html的属性和值
通过属性和值对标记进行修饰
<标记 属性=“值”></标记>
属性必须声明在开始标记中
多个属性之间使用空格分隔
<标记 属性1=“值1” 属性2=“值2” …></标记>
属性分类
1°标准属性(通用属性)
所有元素都支持的属性
id：定义元素在页面中的唯一标识
title：鼠标悬停在元素上提示的文本
class：css中，引用类选择器
style：css中，定义行内样式
2°专用属性，只对一些(某个)标签起作用
总计：学习html，就是学习标签的功能，属性，和他的嵌套关系
（4）注释
不被浏览器解析的内容
<!--注释内容-->
1°注释不能嵌套注释
2°注释不能出现在标签中，一对<>中间
三、HTML的文档结构
HTML的文档构成：
1.文档类型的声明
不写文档类型声明，在不同浏览器中，很容易出现问题
写了文档类型声明，在不同浏览器中，不容易出现问题
<!doctype html> == 告诉浏览器当前页面使用h5版本解析
2.网页结构
<html></html>
一个页面有且只有一对html标签
作用：表示网页的开始和结束
在html标签中，有头部内容和主体内容
<html>
<head></head> 网页的头部，定义全局信息
<body></body> 网页的主体，所有显示的内容
</html>
3.head元素 是其他头元素的容器
<title></title>网页标题
<meta />定义全局信息，元数据信息
<meta charset="utf-8">
<meta name="description" content="描述内容">
<meta name="keywords" content="关键词内容">
<style></style> css定义网页的内部样式
<script></script>定义或者引用js文件
<link>css引用外部样式
4.body元素
定义网页的主体
网页背景颜色 bgcolor=“合法的颜色值”
网页字体的颜色 text=“合法的颜色值”
五.文本标记(重点！！！！！)
1.标题元素
在页面中以醒目的方式显示文本
<h1></h1> ~<h6></h6>
特点：
（1）字体大小变化
（2）字体加粗
（3）单独成行，上下之间有垂直间距
属性：align 设置标记内容水平对齐方式
取值：left/center/right
2.段落标记 paragraph
以突出的形式显示一段文本
<p></p>
特点：单独成行，文本上下有空白距离
属性：align
取值: left/center/right
注意：p标签中不允许嵌套块级元素，可以嵌套行级元素。
3.换行标记
<br>或<br/>
4.水平分割线
<hr>或者<hr/>
属性：
size:水平线的尺寸，粗细。单位为px数字
width 表示水平线的宽度。单位为px的数字或者%
align 水平对齐方式 left/center/right
color 水平线颜色，合法的颜色值
5.预格式化标签
<pre></pre>
保留了html代码中空格和回车
6.特殊字符(实体)
空格
< <
> >
© © 版权
® ® 注册商标
× 关闭的X号
¥ ￥
练习
Copyright © 2004 - 2018 <京东JD.com> 版权所有
7.文本样式标签
<strong></strong><b></b> 字体加粗
<em></em><i></i> 斜体
<del></del><s></s> 删除线
<u></u> 下划线
<sup></sup>上标
<sub></sub>下标
8.分区元素
（1）块分区
用于页面中的布局
<div></div>
特点：单独成行
（2）行分区
处理同一行文本的不同样式
<span></span>
于其他的span和文字共用一行
9.块级元素和行内元素
（1）块级元素
在网页中独占一行的元素，由上到下的排列
网页中常见块级元素
p div h1~h6 结构标记
（2）行内元素
网页中多个行内元素可以在一行内显示，从左往右排列
网页中常见的行内元素
span em i b strong u del s sub sup a img
（3）行内块
表现的方式与行内元素一样，但是具备块级元素的特性
（4）table
表格的宽高，默认是由内容来决定的。
内容多，就宽一些，或者高一些。
是一种特殊的表现方式
对于editplus的快捷键修改
快捷键总结
ctrl+v +c
ctrl+s 保存
ctrl+d 删除当前行
ctrl+alt+↓ 整行复制
alt+↑/↓ 整行移动
ctrl+b 浏览器运行代码
ctrl+shift+n 新建html页面
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
