前端学习-入门

来源：互联网发布：手机网络劫持怎么解决编辑：程序博客网时间：2024/06/05 00:29

01_HTML5Basic——day01 pm

1、WEB与Internet

1、Internet 因特网、互联网

主要服务: WWW,BBS(电子公告板，论坛),Email...Telnet,FTP

目标：信息共享

实现技术：分组交换原理： TCP/IP协议

2、WEB

1、什么是WEB？ WEB就是Internet上面的一种网页应用程序

将各种服务与信息进行连接，并且提供了生动的图形用户界面

2、WEB的工作原理

1、基于 B/S结构的模式

B/S : B : Browser , 浏览器 S : Server ,服务器

通过浏览器去访问服务器的一种模式，都称为BS结构模式

C/S : C ：Client ,客户端S：Server ,服务器

必须通过指定的客户端才能访问的服务器的一种程序或模式，统称为 CS结构模式代表：QQ

2、WEB的组成

由 WEB服务器(Server)、浏览器(Browser)、通信协议(HTTP协议)

HTTP: Hyper Text Transfer Protocol

超级文本传输协议

规定了数据是如何打包的以及数据在互联网上是如何传递的。

服务器：PC ：不是服务器，Personal Computer(个人计算机) Server :硬件强悍

3、浏览器与服务器

1、服务器

主要功能：存储web页面，提供托管环境；响应浏览器的请求，执行服务器端程序

主流的服务器软件：TOMCAT : Apache IIS ：微软 APACHE : Apache

2、浏览器

主要功能：User Agent : UA,用户代理；提交用户请求；解释HTML代码和脚本程序；使用图形化方式显示内容

浏览器产品：

Chrome : Google IE : Microsoft Opera : 欧朋 Safari：Apple Firefox : Mizilla

4、WEB相关技术

1、服务器端技术

只能运行在服务器端；所有的服务器端技术都提供了数据库访问能力

php jsp : Java Server Page asp : Active Server Page aspx : ASP.NET

2、客户端(浏览器)技术

运行与客户端，由浏览器解释运行

HTML CSS Javascript

2、HTML快速入门

1、HTML概述

HTML：Hyper Text Markup Language

超级文本标记语言

html文件以 .html或.htm作为结尾的

2、HTML基本语法

1、标记语法

1、什么是标记？在HTML中，用于描述功能的符号，称为标记,不同标记具备不同的功能

2、标记的组成 由 < >组成 <标记名称> : <a> <b> <br>

3、标记的类型

标记分成2大类：

1、封闭类型标记：有开始，也有显示的结束的标记，称为封闭类型标记，也叫 "双标记" 语法：<标记名称>内容</标记名称>

注意：内容，是受标记的样式控制的。

2、非封闭类型标记

有开始，可以没有结束。自己既可以表示开始也可以表示结束。也称为空标记或单标记语法：<标记名称>或<标记名称/> 注意：单标记本身就是一段独立的功能

<br> : 换行 <hr> : 水平线 <img> : 图片

2、元素：就是标记

从开始标记开始到结束标记之间的所有内容，都统称为元素

<a href="http://www.baidu.com">百度</a> 元素：标记、属性、内容

1、元素嵌套：在一个元素内部又增加了另外一个元素

一个html页面就是由各种各样的嵌套元素所组成的

语法：

<标记1><标记2></标记2></标记1>

注意：

1、嵌套顺序，一定要完整嵌套

<div><p></p></div> 正确

2、代码缩进：嵌套代码中，子级元素前，要通过几个空格来表示层级关系

嵌套标记写法：1、开始结束一起写 <div><p><a></a></p></div>

3、属性和值

属性：修饰元素不同显示效果的内容值：最终，确定显示的效果的内容

属性只能声明在开始标记中，并且属性与标记名称中间用空格分开

语法：<标记属性></标记>

在一个元素中，属性可以有过个，多个属性间用空格区分，并且排名不分先后

语法：<标记属性1属性2属性3></标记>

属性与值：

属性和值用 = 关联

语法 <标记属性1="值"属性2='值'></标记>

标准属性：

所有的元素都具备的属性

id : 标识元素在页面中的唯一名称

title : 鼠标移入到元素上时，所提示的文本内容

class : 定义元素的类样式(与CSS相关)

style : 定义元素的内联样式 (与CSS相关)

4、html注释

标识内容不会被浏览器解释运行。通常会将对代码的解释说明放在注释中

语法：

注意：

1、注释不能嵌套注释  --> 错误

2、注释不能写在标签内 <div></div>错误

5、HTML版本

HTML2.0 HTML3.0 HTML4.01 1999 12 24 发布 XHTML1.0 2000 1 26发布

HTML4.01 <div align=center></div>

XHTML1.0 <div align="center"></div>

HTML4.01 <br>

XHTML1.0 <br/>

HTML5 : H5 目标：让代码更简洁

1、所有的单标记可以不加 / <br> <br/>

2、某些特定的属性可以不给值 disabled checked selected readonly

3、html文档结构

1、文档类型声明：用于指定 html文档的风格和版本

html5 : <!doctype html> 出现在整个 html文档最顶层

2、html页面位置：<!doctype html>之下数量：有且仅有一个标签：<html></html>

html页面包含两大部分：

1、网页头部：负责定义网页的全局信息标签：<head></head>

网页头部允许包含以下内容：

1、<title></title> --标题

2、<meta/> --定义页面元数据(编码、关键字、描述...)

3、<script></script> --定义/引入Javascript

4、<link /> --引入外部CSS样式表

5、<style></style> --定义内部样式表

2、网页主体标签：<body></body>

作用：定义网页的主体，所有的显示内容，都要放在body中

4、文本标记

1、特殊字符

需求：页面中打印输出 <p></p> 注意：

1、html中，<>不能随意输出

2、页面中无论出现多少个回车和空格，最终都被解释成 1个空格

解决方案：靠 "转义字符"解决这些特殊的效果

2、文本标记

1、文本样式：能够改变文本的显示效果的标记

<b></b> : 加粗 <i></i> :斜体 <u></u> :下划线

<s></s> : 删除线 <sub></sub> :下标 <sup></sup> :上标

2、标题元素

通过改变文字的大小和加粗方式来呈现文本的显示效果，主要作用为突出显示文字 <hn></hn> n:1~6 一级标题字最大，六级标题字最小

3、段落元素

突出显示文本为段落，表现形式为上下会具备垂直的空白 <p></p>

4、换行元素效果等同于回车的效果 <br>或<br/>

CV大法: Ctrl + C :复制 Ctrl + V :粘贴

5、分区元素

1、行内分区元素 <span></span> 作用：自定义显示效果

2、块分区元素 <div></div> 作用：布局

6、分割线元素作用：在页面绘制一条水平线 <hr>

注意：水平线的前后内容会换行显示属性：size：高度width：宽度 color :颜色 align :线条的水平对齐方式取值：left(左) center(中) right(右)

7、预格式化作用：保留源文档中的格式（回车和空格） <pre></pre>

8、行内元素与块级元素

1、行内元素：多个元素会在同一行内显示<b></b> <s></s><u></u>....<span></span>

作用：修饰文本的不同表现形式

2、块级元素

默认情况下，块级元素会独占一行(宽度100% )，块级元素的前后都会自动换行

作用：布局

*******************************************************************************

阅读全文

0 0