一.Web基础知识(了解)
web与Internet
1.Internet
全球性计算机互联网络,简称因特网,互联网,交互网.
2.Internet上的应用程序
1.c/s --可执行的桌面应用程序,需要下载安装更新
c:client客户端
s:server服务器
2.b/s ---类似京东
b:browser浏览器
s:server 服务器
3.web
web:运行在Internet之上的一种B/S结构的应用程序,俗称:网站
web的工作原理:基于浏览器和服务器以及通信(http)协议实现信息的传输和展示
浏览器:chrome,IE,firefox,opera(挪威的,欧洲用的多),safari
服务器:NODEjs,java,php,pyhton,.net
通信协议:HTTP协议,规范数据如何打包和传输
4.浏览器技术(前端技术)
HTML,JS,CSS
二.HTML快速入门(掌握)
1.什么是HTML
HyperText Markup Language 超文本标记语言
超文本:超出普通文本的功能 a:普通英文首字母 <a></a>超级链接
标记:<a></a>是标记,带有尖括号
语言:都有自己的语法
2.特点
1.由浏览器解析执行
2.用带有尖括号的"标记"来标识的
3.以.html或.htm为后缀
4.网页中可以嵌套脚本语言(js)
三.HTML的基础语法(掌握)
1.标记
标记:又称为元素或标签,在网页中,主要用来表示一些功能
标记分类:
1.封闭类型
也称为双标记,必须成对出现,有开始有结束标记.
语法:<标记>文本</标记>
ex:<a>百度</a>
也称为单标记,或空标记
语法:<标记>--<html4.01写法>或<标记/>--<xhtml1.0写法>---html5都兼容
ex:<img>或<img/>
<br>或<br/>
<hr>或<hr/>
2.标记嵌套
1.什么是嵌套
在一对标记中出现另外一对或一个标记,从而形成功能的层叠.
2.语法
<标记1>
<标记2>
内容
</标记3>
</标记1>
ex:
<a>
<b>
<i></i>
</b>
</a>
注意：
1.嵌套顺序，成对出现
2.标记换行缩进
3.属性和值
允许通过属性的方式对标记进行修饰
语法:
1.属性必须声明在开始标记中
<标记 属性名="值"></标记>
2.多个属性之间用空格隔开即可
<标记 属性名="值" 属性2="值2"...></标记>
4.标准属性（通用属性）
id:唯一标识(名称),id值一定不能重复
title:鼠标悬停在元素上时所提示的文本
class:在css中使用,引用类选择器
style:在css中使用,定义元素的行内样式
5.注释
语法:<!--注释内容-->
注意:
1.注释本身不能嵌套 <!-- <!-- --> --> 错误!!会多一个 -->
2.注释不能嵌套在标记中
四.HTML文档结构(掌握)
1.HTML文档结构组成
1.文本类型的声明
作用:告诉浏览器HTML的版本类型
语法:<!doctype html> -html5写法
在最顶端编写
2.HTML页面
在文档类型的声明下方紧挨着写一对html标记
<html></html>
作用:表示整个页面的开始与结束
在html中分两部分:
1.<head></head>
作用:表示网页的头部,定义全局信息
2.<body></body>
作用:定义网页的主体内容
3.<head></head>
1.head是其它头元素的容器
①<title></title>:定义网页的标题
②<meta> ----ex:京东例子
<meta charset="UTF-8"> //设置文档字符集
③<style></style>
④<script></script>
4.body元素
写网页的主体内容
body标记的属性
text:修饰文本颜色
bgcolor:背景颜色(注意:不是background(css写法)!!)
这两个只能在body标签里用
五.文本标记
1.特殊字符
表示一个空格
< 表示"<"
> 表示">" <p> </p> <p></p>
© 表示版权符号©
¥ 表示¥
® 表示注册商标®
× 表示关闭×号
2.文本样式
1.<b></b>:加粗
2.<i></i>: 斜体
3.<u></u>:下划线
4.<s></s>:删除线
5.<sub></sub>:下标
6.<sup></sup>:上标
3.标题元素
作用:在页面中以醒目的方式显示文本
语法:<hn></hn>
n:1-6
<h1>文本</h1>:一级标题
...
<h6>文本</h6>:六级标题
特点:
1.独占一行
2.加粗,并且字体大小可以变化
3.单独成行,上下文之间有空白间距
属性:
align:设置内容的水平对齐方式--取值:left/center/right
4.段落标记
语法:<p></p>
作用:以突出显示一段文本
特点:单独成行,上下文之间有空白间距(p的空白间距要比<div>大,div没有额外的空白间距)
属性:
align:left/center/right
5.换行元素
语法:<br>或<br/>
作用:让文本换行显示
6.水平线
语法:<hr>或<hr/>
作用:在网页中表示一根水平线
属性:
size:表示水平线的尺寸(高度),取值以px为单位的数字.
width:表时水平线的宽度,取值以px为单位的数字或者百分比
align:水平线的对齐方式,取值left/center/right
color:水平线的颜色,取值为合法的颜色值
7.预格式化
语法:<pre></pre>
1.块分区元素
作用:用于页面中布局效果
语法:<div></div>
2.行分区元素
作用:在网页中处理同一行文本的不同样式
语法:<span></span>
9.行内元素与块级元素
1.块级元素
在网页中独占一行,内容从上往下显示就是块级.
常见的块级元素:
标题元素h1~h6
段落元素p
div (pre)
2.行内元素
在网页中,多个元素在一行中从左往右显示.
常见的行内元素:
a/b/u/i/s/sub/sup/span
3.行内块 显示呈行内元素的效果,但是具备块级的特点(比如:可设置宽高)
4.table
补充:
1.段落标记自己不能嵌套自己(p)
2.块级中嵌套行内元素
六.图像和链接
1.URL
1.目录结构
文件目录:文件夹嵌套结构
2.URL
URL:Uniform Resource Locator统一资源定位器,俗称路径
3.路径的表现形式
1.绝对路径
完整路径,一定可以找到你想找的文件
网络资源:
协议+主机名称+文件目录结构+文件名称
本地资源:
从最高盘符比如c:\xampp\htdocs\Day01
2.相对路径(重点)
相对于当前某个文件位置,从它出发所经过的路径就是相对路径.
(1).同级目录
直接引用文件
ex: "2.jpg"
(2).子级目录
先进入文件夹,再引用
ex: img/1.jpg
(3).父级目录
先返回上一级,再引用
ex: ../3.jpg
ps:属性值 可加引号也可以不加
3.根相对路径
ex: /myPro/demo.html
web与Internet
1.Internet
全球性计算机互联网络,简称因特网,互联网,交互网.
2.Internet上的应用程序
1.c/s --可执行的桌面应用程序,需要下载安装更新
c:client客户端
s:server服务器
2.b/s ---类似京东
b:browser浏览器
s:server 服务器
3.web
web:运行在Internet之上的一种B/S结构的应用程序,俗称:网站
web的工作原理:基于浏览器和服务器以及通信(http)协议实现信息的传输和展示
浏览器:chrome,IE,firefox,opera(挪威的,欧洲用的多),safari
服务器:NODEjs,java,php,pyhton,.net
通信协议:HTTP协议,规范数据如何打包和传输
4.浏览器技术(前端技术)
HTML,JS,CSS
二.HTML快速入门(掌握)
1.什么是HTML
HyperText Markup Language 超文本标记语言
超文本:超出普通文本的功能 a:普通英文首字母 <a></a>超级链接
标记:<a></a>是标记,带有尖括号
语言:都有自己的语法
2.特点
1.由浏览器解析执行
2.用带有尖括号的"标记"来标识的
3.以.html或.htm为后缀
4.网页中可以嵌套脚本语言(js)
三.HTML的基础语法(掌握)
1.标记
标记:又称为元素或标签,在网页中,主要用来表示一些功能
标记分类:
1.封闭类型
也称为双标记,必须成对出现,有开始有结束标记.
语法:<标记>文本</标记>
ex:<a>百度</a>
<b>加粗</b>
2.非封闭类型也称为单标记,或空标记
语法:<标记>--<html4.01写法>或<标记/>--<xhtml1.0写法>---html5都兼容
ex:<img>或<img/>
<br>或<br/>
<hr>或<hr/>
2.标记嵌套
1.什么是嵌套
在一对标记中出现另外一对或一个标记,从而形成功能的层叠.
2.语法
<标记1>
<标记2>
内容
</标记3>
</标记1>
ex:
<a>
<b>
<i></i>
</b>
</a>
注意：
1.嵌套顺序，成对出现
2.标记换行缩进
3.属性和值
允许通过属性的方式对标记进行修饰
语法:
1.属性必须声明在开始标记中
<标记 属性名="值"></标记>
2.多个属性之间用空格隔开即可
<标记 属性名="值" 属性2="值2"...></标记>
4.标准属性（通用属性）
id:唯一标识(名称),id值一定不能重复
title:鼠标悬停在元素上时所提示的文本
class:在css中使用,引用类选择器
style:在css中使用,定义元素的行内样式
5.注释
语法:<!--注释内容-->
注意:
1.注释本身不能嵌套 <!-- <!-- --> --> 错误!!会多一个 -->
2.注释不能嵌套在标记中
四.HTML文档结构(掌握)
1.HTML文档结构组成
1.文本类型的声明
作用:告诉浏览器HTML的版本类型
语法:<!doctype html> -html5写法
在最顶端编写
2.HTML页面
在文档类型的声明下方紧挨着写一对html标记
<html></html>
作用:表示整个页面的开始与结束
在html中分两部分:
1.<head></head>
作用:表示网页的头部,定义全局信息
2.<body></body>
作用:定义网页的主体内容
3.<head></head>
1.head是其它头元素的容器
①<title></title>:定义网页的标题
②<meta> ----ex:京东例子
<meta charset="UTF-8"> //设置文档字符集
③<style></style>
④<script></script>
4.body元素
写网页的主体内容
body标记的属性
text:修饰文本颜色
bgcolor:背景颜色(注意:不是background(css写法)!!)
这两个只能在body标签里用
五.文本标记
1.特殊字符
表示一个空格
< 表示"<"
> 表示">" <p> </p> <p></p>
© 表示版权符号©
¥ 表示¥
® 表示注册商标®
× 表示关闭×号
2.文本样式
1.<b></b>:加粗
2.<i></i>: 斜体
3.<u></u>:下划线
4.<s></s>:删除线
5.<sub></sub>:下标
6.<sup></sup>:上标
3.标题元素
作用:在页面中以醒目的方式显示文本
语法:<hn></hn>
n:1-6
<h1>文本</h1>:一级标题
...
<h6>文本</h6>:六级标题
特点:
1.独占一行
2.加粗,并且字体大小可以变化
3.单独成行,上下文之间有空白间距
属性:
align:设置内容的水平对齐方式--取值:left/center/right
4.段落标记
语法:<p></p>
作用:以突出显示一段文本
特点:单独成行,上下文之间有空白间距(p的空白间距要比<div>大,div没有额外的空白间距)
属性:
align:left/center/right
5.换行元素
语法:<br>或<br/>
作用:让文本换行显示
6.水平线
语法:<hr>或<hr/>
作用:在网页中表示一根水平线
属性:
size:表示水平线的尺寸(高度),取值以px为单位的数字.
width:表时水平线的宽度,取值以px为单位的数字或者百分比
align:水平线的对齐方式,取值left/center/right
color:水平线的颜色,取值为合法的颜色值
7.预格式化
语法:<pre></pre>
作用:保留HTML中回车和空格 --我发现:文字要比正常的小
8.分区元素1.块分区元素
作用:用于页面中布局效果
语法:<div></div>
2.行分区元素
作用:在网页中处理同一行文本的不同样式
语法:<span></span>
9.行内元素与块级元素
1.块级元素
在网页中独占一行,内容从上往下显示就是块级.
常见的块级元素:
标题元素h1~h6
段落元素p
div (pre)
2.行内元素
在网页中,多个元素在一行中从左往右显示.
常见的行内元素:
a/b/u/i/s/sub/sup/span
3.行内块 显示呈行内元素的效果,但是具备块级的特点(比如:可设置宽高)
4.table
补充:
1.段落标记自己不能嵌套自己(p)
2.块级中嵌套行内元素
六.图像和链接
1.URL
1.目录结构
文件目录:文件夹嵌套结构
2.URL
URL:Uniform Resource Locator统一资源定位器,俗称路径
3.路径的表现形式
1.绝对路径
完整路径,一定可以找到你想找的文件
网络资源:
协议+主机名称+文件目录结构+文件名称
本地资源:
从最高盘符比如c:\xampp\htdocs\Day01
2.相对路径(重点)
相对于当前某个文件位置,从它出发所经过的路径就是相对路径.
(1).同级目录
直接引用文件
ex: "2.jpg"
(2).子级目录
先进入文件夹,再引用
ex: img/1.jpg
(3).父级目录
先返回上一级,再引用
ex: ../3.jpg
ps:属性值 可加引号也可以不加
3.根相对路径
ex: /myPro/demo.html
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
