本文介绍了WEB的基本概念，包括WEB的组成、服务器和浏览器的作用。接着深入讲解了HTML，阐述了HTML的定义、作用及在计算机中的表现。重点解析了HTML的基础语法，如标记、属性、注释和大小写规则。此外，还详细讨论了HTML文档结构，包括文档类型声明、HTML页面结构以及<head>和<body>标记。最后，讲解了文本相关标记、标题、段落、换行、分区元素和列表标记的使用。
1、WEB
1、什么是WEB
web就是互联网上的一种应用程序 - 网页典型的应用：
1、C / S
Client : 客户端
Server : 服务器
2、B / S
B ：Browser 浏览器
S ：Server 服务器
2、WEB的组成 & 运行流程
由服务器，浏览器 和 通信协议组成服务器：处理用户的请求(request)和响应(response)
浏览器：代替用户向服务器发送请求(User Agent)
通信协议：规范了数据是如何打包以及传递的 - http
http : Hyper Text Transfer Protocal
超级 文本 传输 协议
3、WEB服务器
1、作用
接受用户的请求并给出响应存储WEB信息
具备安全性功能
2、产品
1、APACHE2、TOMCAT
3、IIS - Internet Information Service
4、Nginx
3、技术
1、JSP - Java Servre Page2、Php
3、ASP.NET
4、Python Web (Django，Flask，... ...)
4、WEB浏览器
1、作用
1、代替用户向服务器发送请求2、作为响应数据的解释引擎
2、主流浏览器产品
1、Micosoft Internet Explorer (IE)2、Google Chrome
3、Mozilla Firefox
4、Apple Safari
5、Opera Opera
浏览器靠内核处理数据，内核包含两部分：
1、内容排版引擎 - HTML，CSS
2、脚本解释引擎 - JS
3、浏览器技术
也称为 "前端技术"HTML,CSS,JavaScript
2、HTML概述
1、HTML介绍 和 基本语法
1、什么是HTML
HTML ：Hyper Text Markup Language
超级 文本 标记 语言编写网页的一款语言
超文本：具备特殊功能的文本就是超文本
普通文本 a ：普通字符a超文本 a ：表示的是超链接功能
普通文本 b ：普通字符b
超文本 b ：表示文字加粗功能
标记：超文本的组成形式
普通文本 a : a超文本 a : <a></a>
语言：语言有自己的语法规范
W3C：World Wide Web Consortium
万维网联盟
2、HTML在计算机中的表现
所有的网页在计算机中都是以 .html 或 .htm 作为结尾的文件来进行表示的开发工具：所有的文本编辑类软件都可以作为开发工具
1、记事本
2、Editplus，Sublime
3、Dreamweaver,WebStorm,... ...
运行工具：浏览器
推荐使用：Google Chrome
3、HTML 基础语法（重点）
1、标记的语法
1、什么是标记
在网页中，用于表示功能的符号称为 "标记/标签/元素"2、语法
所有的标记，在使用时必须用<>括起来标记分为 双标记 和 单标记
1、双标记
由开始标记 和 结束标记组成<标记>...</标记>
ex:
1、<a>...</a>
2、<b>...</b>
3、div 标记
<div>....</div>
4、p 标记
<p>....</p>
注意：双标记，有开始，必须要有结束，否则显示效果会出错
2、单标记
只有一个标记，既能表示开始，又能表示结束。单标记自己就是个独立的功能，没有文本或其他内容可以控制
<标记> 或 <标记/>
ex:
1、<br> 或 <br/> : 换行
2、<hr> 或 <hr/> : 一条水平线
3、<img> 或 <img/> : 显示图片
2、标记的嵌套
在一对标记中，再出现另外一对标记，目的是为了实现功能的嵌套超链接 ： <a></a>
加粗 ：<b></b>
加粗的超链接：
1、<a><b>....</b></a>
2、<b><a>....</a></b>
为了良好的可读性，被嵌套的内容尽量独占一行，并添加缩进
<a>
<b>... ...</b>
</a>
3、标记的属性 和 值
1、什么是属性
在标记中，用来修饰标记显示效果的东西就是属性2、语法
1、属性的声明必须在开始标记中<标记 属性的声明位置处></标记>
2、属性名 和 标记名 之间要用空格隔开
<标记 属性名称></标记>
3、属性名 和 属性值之间用=连接，属性值要用" " 或 ' ' 引起来
<标记 属性名="值"></标记>
4、一个元素允许设置多个属性，多属性之间排名不分先后，但多属性之间要用空格隔开
<标记 属性1="值1" 属性2="值2"></标记>
4、HTML中的注释
<!--注释内容1
注释内容2
-->
注意：
1、注释不能出现在<>中
<p<!-- -->>... ...</p>
以上写法是错误的
2、注释不能嵌套
<!--
这是注释内容
<!--
这是注释内容
-->
-->
以上写法是错误的
5、HTML中不区分大小写
<p></p><P></P>
<P></p>
4、HTML 文档结构
1、文档类型声明
出现在网页最顶端的第一个标记作用：告诉浏览器使用HTML的哪个版本
<!doctype html>
2、HTML页面
在文档类型声明之下，使用一对 html 标记来表示网页的开始和结束<html></html>
在 html 中，包含两对子元素
1、<head></head>
表示网页头部信息2、<body></body>
表示网页主体信息3、<head> 标记
作用：描述网页的头部信息，对于网页起到控制的作用子元素：
1、<title>标题内容</title>
2、指定网页编码
<meta charset="utf-8">
告诉浏览器按照utf-8的编码方式进行网页解析
注意：必须要保证网页文件的编码方式也是utf-8
5、文本相关标记
1、HTML中特殊字符处理
1、 表示一个空格2、< 表示一个 <
3、> 表示一个 >
4、© 表示一个 ©
5、¥ 表示 ￥
2、文本样式标记
1、作用
修改文本在网页中的表现形式2、标记
1、<i></i> : 斜体显示文本2、<u></u> : 下划线显示文本
3、<s></s> : 删除线显示文本
4、<b></b> : 加粗显示文本
5、<sup></sup> : 上标方式显示文本
6、<sub></sub> : 下标方式显示文本
特点：
该组标记能够与其他的标记或文本在一行内显示
3、标题标记
1、作用
以不同的文字大小以及加粗方式显示文本2、语法
<h#></h#># : 1-6
<h1></h1> :一级标题
<h2></h2> :二级标题
... ...
特点：
1、会改变文字的大小以及加粗效果
2、每个标题都会具备垂直的空白距离
3、每个标题独占一行
4、每个标题都会具备一个属性
属性：align
取值：
1、left ：左对齐
2、center ：居中对齐
3、right ：右对齐
4、段落元素
1、作用
突出显示一段文本，每段文本独占一行/块，并且每个段落都会具备一小段的垂直空白距离2、语法
<p></p>属性：
align
取值：left / center / right
5、换行元素
<br> 或 <br/>6、分区元素
1、块分区元素
标记：<div></div>作用：布局(配合CSS)
特点：独占一行/一块
2、行内分区元素
标记：<span></span>作用：设置同一行文本的不同样式(配合CSS)
特点：允许在一行内显示多个span元素，也能够与其他的文本在一行内显示
7、行内元素 与 块元素
1、块元素
只要在网页中能独占一行/一块的元素都称为块级元素，简称为块元素p,h1,h2,h3,h4,h5,h6,div
作用：都可以做布局
所有的块元素都会具备align属性
2、行内元素
多个元素能够在一行内显示的，就是行内元素span,i,b,s,u,sub,sup
作用：处理文本的样式
6、列表标记
1、作用
按照从上到下的方式来进行数据排列并能够显示列表的标识在内容的前面
2、列表的组成
1、列表的类型
1、有序列表 - <ol></ol> (Order List)2、无序列表 - <ul></ul> (Unordered List)
2、列表项
<li></li> (List Item)ex:
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
3、列表的属性
1、有序列表 - ol
1、type
取值：1、1：按数字方式排列显示，默认值
2、A：按大写英文字符显示
3、a：按小写英文字符显示
4、I：按大写罗马数字显示
5、i：按小写罗马数字显示
2、start
指定有序的字符是从 几 开始显示2、无序列表 - ul
1、type
取值：1、disc : 实心圆点，默认值
2、circle : 空心圆点
3、square : 实心方块
4、none : 不显示任何标识
4、列表的嵌套
在一个列表项中，又出现一个列表<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
扫一扫
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
