web学习第一天

最新推荐文章于 2022-08-02 20:26:49 发布

qq_34935726

最新推荐文章于 2022-08-02 20:26:49 发布

阅读量257

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_34935726/article/details/81674199

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、网 Internet 因特网
什么是:由若干台电脑、手机、通过网线(wifi)链接所组成的结构
二、基于Internet的程序结构
1、C/S
Client/Server（客户端/服务器）
特点：通过指定客户端界面访问到服务器端的程序结构

2、B/S
Browser/Server（浏览器/服务器）
特点：通过浏览器访问服务器端

三、web

1、什么是web：基于Internet的应用程序，保存在服务器端的一种
以.html结尾的文件。

2、浏览器

   2.1 作用
   1.作为html，css，JavaScript的文本编辑器
   2.以图形化的方式呈现web界面
   3.提交用户的请求

   2.2 主要的浏览器产品
   IE 火狐 360 2345 UC QQ 谷歌猎豹浏览器等；以下几款
   浏览器解析代码底层内核原理不同，是程序员优先使用的几款：
   1. Microsoft Internet Explorer：IE浏览器 6-10 11
   2. Google Chrome：谷歌浏览器
   3. Mozilla Firefox：火狐浏览器
   4. Apple Safari：苹果浏览器 BOM
   5. Opera opera：欧朋浏览器

   2.3 技术
   1.HTML
   2.CSS
   3.JavaScript

3.服务器

   3.1 功能
   1.响应服务器请求，执行服务器端程序
   2.存储数据（文本，视频，音频，图片），提供最基本的管理环境
   3.提供最基本的安全保障

   3.2 产品（web应用服务器）
   1.Tomcat
   2.Apache

3.3 技术
1.php 2.java JavaEE 3.nodejs 4.python

-------------------------------------------------------------------------------------------
HTML

一、HTML

什么是：Hyper Text Markup Language
超文本标记语言
含义：写法不同，含义不同
普通文本a：字母a
超文本a：超链接

写法：以标记的方式超文本链接a：<a></a>
ex：<a href="http://www.baidu.com">百度一下</a>
<b></b>(加粗)

HTML的语法规范

一、标记语法

1、封闭类型标记/双标记
语法：<标记>内容</标记> ex：<b>我是加粗的</b>
2.非封闭典型标记/单标记
语法：<标记> ex：<img>

二、标记的嵌套问题

什么是：在一对标记中，允许另一对或者另一个标记的出现，
外层标记称为父级标记，内层标记称之为子级标记，
子级标记具有父级标记的样式，书写时注意层级关系。

三、标记的属性

什么是属性：用来修饰标记的内容样式
在声明属性时，需要注意以下几点：
1、属性要声明在开始标记中
语法：<标记属性></标记>
2、属性和标记之间要以空格隔开
语法：<标记属性></标记>
3、属性是可以拥有值的，属性的值和属性之间使用“=”连接，值可以使用
"或者“”引起来
语法： <标记属性=值></标记>
<标记属性='值'></标记>
<标记属性="值"></标记>
4、一个标记允许有多条属性，属性和属性之间使用空格隔开，属性排名不分先后顺序
语法： <标记属性1="值" 属性2="值" 属性3="值"></标记>
ex：<a href="http://www.baidu.com">百度一下</a>

   四大属性
   1.id：元素在页面中的唯一标识
   2.title：鼠标悬停在元素上时显示的文字
   3.class：定义类选择器时使用(css)
   4.style：定义内联样式时使用(css)

四、注释语法

什么是：用于解释说明某一段代码，不会被执行的语句
语法：单行注释： 
多行注释：

五、html文档语法

什么是：以后凡是写一张html网页，我们就需要声明出html完整的语法规范
语法：
声明html文档类型
<!doctype html>
声明一对html标签
<html>
   声明html头部标记
   <head>
       声明网页名称
       <title></title>
       设置编码格式
       <meta charset="utf-8">
   </head>
   <body>

   </body>
</html>

新建一个html网页步骤
1.File->new->html page(ctrl+shift+N)

Editplus如何设置谷歌浏览器打开网页
tools->preferences->tools->browser ->external browser-chrome
->other browser->选中谷歌浏览器的路径(chrome.exe)->apply->ok

打开网页快捷方式
1、ctrl+B

Editplus设置模板文件
tools->preferences->file->templates->file name->找到自己保存的html文件->apply->ok
----------------------------------------------------------------------------------
HTML的文本语法

一、特殊字符标记
在写网页的时候，会有一些字符和网页样式发生冲突，这时候使用特殊字符标记来显示该字符
1. < less than &ll;
2. > greater than >
3. 空格  
4 ¥ ¥
5.×(叉) &times；
6.©(alt+169) &copy ；

二、换行标记
语法：<br/>

三、特殊文本标记
1.加粗 <b></b>
2.倾斜 <i></i>
3.下划线<u></u>
4.删除线<s></s>
5.下标<sub></sub> ex： H<sub>2</sub>O H2O
6.上标<sup></sup> ex： 2<sup>2</sup> 2的平方

四、标题元素
语法：<h1></h1>-<h6></h6>
特点：
   字体放大和缩小
   字体加粗
   拥有上下垂直空白间距
   自占一行
属性:
1.align 元素在水平方向的排列方式
取值：left(默认)/center/right
ex：<h1 align="center"></h1>

五、分割线元素
语法：<hr>
属性
1.width   宽
取值：以px为单位的数值或者以%为数值
2.align   元素在水平方向的排列方式
取值：left/certer/right
3.size   尺寸
取值：以px为单位的数值
4.color   颜色
取值：合法的颜色英文单词或者16进制的数值（#rgb）ex:color="#7062BB"

ex：<hr width="675px" align="left" size="10px" color="#7062bb">

十进制逢十进一
01 02 03 04..09 10..100..9456
9456 = 9*10^3+4*10^2+5*10^1+6*10^0

将十进制转换为十六进制
方法一：逆推法
方法二：短除法/分解质因数
十六进制逢十六进一
01 02 03..09 a b c d e f 10 11 12 ..1010
1010 = 1*16^3+0*16^2+1*16^1+0*16^0 = 4112
ea = 14*16^1+10*16^0 = 234

六、段落元素
语法：<p></p>
特点：
   1.自占一行
   2.拥有上下垂直空白间距
属性：align 元素在水平方向的排列方式
取值：left/certer/right

七、预格式化标记
作用：保留标记内容中的所有空格和换行
语法：<pre></pre>

八、分区元素
1、行内分区元素
作用：用于添加一行文本中的不同样式
语法：<span></span>
ex: 他的包是<span style="color:blue">蓝色</span>的
2、块分区元素
作用：布局
语法：<div></div>
属性：align 元素在水平方向的排列方式 (自占一行)
取值：(left/center/right)

------------------------------------------------------------------------------
图像

一、url
什么是：uniform resources locator 统一资源占位符/统一资源标识符
作用：用于标识某一资源文件的位置
ex："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

目录路径：寻找资源文件时所经过的文件夹
ex："C:\Program Files (x86)\Google\Chrome\Application\"

二、url在web中的展现形式

1、绝对路径
什么是：从系统的最高盘符下寻找资源文件所经过的路径
ex："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
适用场合：从互联网中获取资源
绝对路径的组成：
1)http协议 http:// https://
2)域名 www.baidu.com
3)目录路径寻找资源文件时所经过的文件夹
4)文件名 1.png
http://m.360buyimg.com/babel/jfs/t23110/53/2009071563/87089/d645b876/5b70ff1bN03b179f1.jpg
2、相对路径

3、跟相对路径

图片
语法：<img>
属性：
1)src 用于加载图片
取值：图片的url地址