当前位置：首页> 正文

Web基础知识 、 HTML快速入门

Web基础知识 、 HTML快速入门
Web基础知识 、 HTML快速入门
1272208556@qq.com
1、HTML + CSS + UI
2、Javascript
3、HTML5CORE + AJAX + Jquery
4、Bootstrap,Angular JS + 其他框架
1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO
======================================================
1、Internet
1、什么是Internet
是全球性计算机互联网络,是由若干终端(PC,移动端)以及特殊的传输介质而组成的一个网络结构
PC:Personal Computer
2、提供的服务
信息共享
Telnet : 远程连接
Email : 电子邮件
WWW : 万维网 www.baidu.com
BBS : 电子公告板 ，论坛
FTP : 上传和下载服务
3、实现技术
1、分组交换原理:数据通过数据包进行传递，到达目的地后，对数据包进行重组
2、TCP/IP 协议簇
2、WEB
1、什么是WEB
就是 WWW（World Wide Web）
w3c : www consortium 万维网联盟
2、能干什么
能够将各类的信息和服务进行连接，提供图形用户界面
信息:文字、图片、音频、视频
服务:Telnet, FTP , Mail , HTTP ...
3、万维网就是无数的文档集合（网页文档）,文档会驻留在世界（互联网）的任何一个角落
3、WEB的工作原理
WEB是基于Internet的多媒体信息服务系统
1、基于 浏览器 / 服务器 模式
B / S : Browser / Server
在服务器上，主要以网页的形式发布多媒体信息
2、由WEB服务器、浏览器、通信协议组成
3、WEB 相关技术
1、服务器端技术（后台）
PHP,JSP,ASP 。。。 。。。
2、客户端技术(前端技术)
HTML,
CSS,
Javascript
=========================================================
1、HTML 入门
1、什么是HTML
HTML(Hyper Text Markup Language),超级文本标记语言
超文本:
标记 : 超文本都是由标记组成的
<a>
语言 : 包含自己独特的语法
HTML最终由浏览器负责解释
HTML总可以嵌入一些脚本语言编写的程序段:Javascript,VBScript
2、HTML版本
超级文本标记语言（第一版）
HTML2.0
HTML3.2
HTML4.0
HTML4.01
XHTML1.0
HTML5
3、标签(标记)
1、标签语法
1、必须使用尖括号扩起来
<a>,<div> ...
<A>,<a>
2、有封闭类型的标签，也有非封闭类型的标签
1、封闭类型
也称作双标记，则必须成对出现
<标记>文本内容</标记>
不同的标记，决定了"文本内容"的不同表现形式
eg:<a></a>,<p></p>,<div></div>
2、非封闭类型
也称作单标记、空标记
<标记>
或者
<标记/>
eg:
<hr>,<br>,<img>
3、元素
标记就是元素，元素也称为标记
4、元素嵌套(标签嵌套)
标签之间相互嵌套，形成复杂的语法结构
<body>
<p>
<a></a>
</p>
</body>
5、属性
属性是出现在开始标记中的内容,作用是修饰元素
<p 属性名="属性值"></p>
<p 属性名='属性值'></p>
<p 属性名=属性值></p>
标准属性:每个元素都会具备的通用属性
id : 定义每个标签的唯一标识
title:提示文本
class:样式相关，类样式
style:样式相关，行内样式
操作1：定义一对p标签，id属性设置为program
<p id="program"></p>
多属性:
<p 属性1="值" 属性2="值"></p>
注意：多属性之间，排名不分先后
2、创建HTML文档
开发工具:任何一个文字编辑软件都可以开发HTML
EditPlus ： 超级记事本
运行环境:任何一个浏览器都能运行HTML
Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera
超文本文件(HTML文档):
是一个以.html或.htm结尾的文档
3、文档结构
1、文档类型声明
声明使用的html版本和风格
<!doctype html>
2、html页面
1、文档根元素
每个文档有且仅有一对根元素 , html
2、在根元素的内部，包含两对子元素
1、head : 页面的头部内容
定义页面全局信息
包含:
<title></title> : 网页标题
<meta />:声明元数据(编码,关键字,描述)
<style></style>:声明内部样式表
<link />:引入外部样式表
<script></script>:定义或引入脚本文件
2、body : 页面的主体内容
任何一个标签，都可能会出现在body中
3、head元素
1、声明网页标题
<title></title>
2、定义网页文本编码格式
默认:ISO-8859-1,只支持英文以及英文状态下的标点符号
utf-8:支持中英文,标点符号
<meta charset="utf-8" />
3、... ...
4、body元素
属性:
text : 文本的颜色
bgcolor : 背景颜色
练习1:
1、为body添加两个属性，text，bgcolor
2、文本颜色 : 红色(red)
背景颜色 : 银色(silver)
3、在body中随意写上一段文本，观察页面显示效果
5、文本标记
1、特殊的文本
转义字符:
空格:&nbsp;
< : &lt; less than
> : &gt; greater than
版权标识:&copy;
2、文本标记
1、文本样式
<b>...</b> : 加粗文本
<i>...</i> : 斜体文本
<u>...</u> : 下划线
<s>...</s> : 删除线
<sup>...</sup> : 上标
<sub>...</sub> : 下标
2、标题元素
1-6级6个标题
<hn></hn> n:1-6
一级最大
六级最小
3、段落元素
提供了结构化文本的表现方式
语法:<p></p>
注意：
1、每对p标签单独成一个段落
2、段落与其他元素有垂直空白，段落间距
常用属性:
align : 水平对齐方式
取值:left center right
4、换行元素
在代码的任何位置处，实现回车的效果
<br />
5、水平线
又叫分割线
<hr />
属性:
1、size : 水平线的粗细，通常以像素(px)为单位
2、width: 宽度
3、align: 水平线的水平对齐方式
4、color: 颜色
6、分区元素
目的：为元素进行分组，多数用在布局中
块分区元素:<div></div> 层
行内分区元素:<span></span>
注意：
div ：主要用在布局上
span：修改其内部内容的样式
7、预格式化
保留源文档中的空格和回车
<pre>
文本内容
</pre>
3、注释
可以写在html源码中，但不被浏览器解释的文本
语法:
<!-- 注释内容 -->
4、行内元素与块级元素
块级元素:默认情况下，块级元素独占一行，元素的前后都会自动换行 div,hn,hr,p
块级元素作用:布局
行内元素:默认情况，多个元素位于同一行，不会换行
span,文本标记... ...
行内元素作用:修改内部内容的样式
展开全文阅读
框架基础知识入门快速CSShtml

内容头条

相关内容