-
网页的构成
-
结构----html
HTML用于描述页面的结构
负责页面的结构
- 表现----css
CSS用于控制页面中元素的样式
CSS负责页面的样式，美化页面
- 行为----IavaScript
JavaScript用于响应用户操作
JavaScript负责页面的行为
- html基本构架
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'/>
<title>
这是第一个html
</title>
</head>
<body>
网页内容
</body>
</html>
- html常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'/>
<meta name = description' content = '关于网页的描述'/>
<meta name = 'keywords' content = '搜索网站的关键字'/>
<meta http-equiv="refresh" contenat="5;url = http://hao.135069.com/">
<title>
这是第一个html
</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<img src = '图片路径' alt = '图片名称或者描述' width = '200px'/>
<p>这是一个p标签,这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签 </p>
<p>这是一个p标签,这是一个p标签, 这是一个p标签,
这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签,
这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签, 这是一个p标签 </p>
<!--a标签,href指向一个网址,_blank表示新窗口打开,_self或者不写是当前窗口打开 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--实体:&实体名 大于 小于 空格,相当于字符转义-->
</body>
</html>
- 文档声明 ----DOCTYPE html
h5的文档声明，声明当前的网页是按照HTML5标准编写的,
编写网页时一定要将此声明写在网页的最上边,
如果不写文档声明，则会导致有些浏览器进入一个怪异模式，导致浏览器无法正常解析显示网页,
所以为了避免进入该模式，一定要写文档声明
- 自结束标签
<meta/>
<img/>
- meta标签
<meta name = charset = 'utf-8' >
<meta name = 'keywords' content = 'H5,js,python'/>
<meta name = 'description' content = 'JS，发布H5,'/>
<meta http-equir = 'refresh' content = '5;url = http://www.biadu.com'/>
- 图片
设置高宽其中一个，另一个会等比缩放，两个都设置，会按照制定比例进行显示,在实际开发中,不建议设置width和height
相对路径与绝对路径
相对路径
可以使用../来返回上一级目录，返回几级目录就写几个../
绝对路径
可以使用,但在正常的开发中,图片往往存于与代码位置同级的img文件夹中,使用相对路径的情况会比较多
图片常用格式
jpg/jpeg：支持多种颜色 可以压缩 但不支持透明 ，多用于保存颜色丰富的照片
gif:颜色少 动图 支持简单的透明
png:支持复杂的透明 颜色多
使用原则：
效果不一致的，用好的
效果一致的,用小的
- 字符实体
小于号: <
大于号: >
空格:  
和符号&: &
版权© : ©
引号": "
注册商标® : ®
商标(TM): &trade
- XHTML的规范：
不区分大小写，一般使用小写
注释 不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签,可以不写 /
非自结束标签如果没有 / ,浏览器尽最大的努力正确地解析页面，你所有的不符合语法规范的内容浏览器都会为你自动修正，但是有些情况会修正错误,所以,要将结构写完整
查看结构:F12 或 右键 ----检查
换行标签的的使用
html标签可以嵌套使用(可以包含font标签) 但是不能交叉嵌套
属性值必须 且 加引号（单引号或者双引号）
- 颜色和大小
<h2>这是<font color = 'red' size = '7'>一个二级标题</font>二级标题</h2>
7.内联框架----iframe
iframe 语法
src:指向一个外部页面的路径,可以使用相对路径
width
height
name :可以为内联框架指定一个name属性
但在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<h1>我是内联框架</h1>
<iframe src="ex.html" name = 'tom' frameborder="0"></iframe>
</body>
</html>
- 超链接 ---a标签
连接到各个已经存在的网站
连接不存在的网站
连接本地的html文件
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com111111" >超链接</a>
<br>
<a href="home_work.html" target="tom">homework</a>
<br>
<iframe src="ex.html" name = 'tom' frameborder="0"></iframe>
</body>
</html>
- 居中显示
<center>
<p>居中显示效果</P>
</center>
-
css
-
css语法
注释:
作用和HTML注释类似，只不过它必须编写在style标签中，或者是CSS文件中,使用[/**/]进行注释
语法
选择器：
通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
声明块：
声明块紧跟在选择器的后边，使用一对{}括起来
声明块中实际上就是一组一组的名值对结构
这一组一组的名值对我们称为声明
在一个声明块中可以写多个声明，多个声明之间使用;隔开
声明的样式名和样式值之间使用:来连接
- css语句
css样式编写砸head中的style的标签中
然后通过CSS选择器选中指定元素
然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用将样式表编写到style标签中，也可以使表现和结构进一步分离，它也是我们推荐的使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css语法</title>
<style type="text/css">
/这是一个css注释/
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>今天天好情况气</p>
<p>hddddddddd</p>
</body>
</html>
将昂是表编写到外部的css文件中
还可以将样式表编写到外部的CSS文件中，然后通过link标签来将外部的CSS文件引入到当前页面中,这样外部文件中的CSS样式表将会应用到当前页面中
将CSS样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用,最大限度地使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入,可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的CSS文件
p{
color: red;
font-size: 100px
}
h1{
color: blue
font-size: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css语法</title>
<link rel="stylesheet" type="text/css" href='style.css' >
</head>
<body>
<p style = 'color = red;font-size:40px'>窗前明月光</p>
<p>今天天好情况气</p>
<p>hddddddddd</p>
</body>
</html>
11 块和内联
- 块元素
所谓的块元素就是会独占一行的元素,无论它的内容有多少，它都会独占一整行
常见的块元素：div p h1 h2 h3……
div这个标签没有任何语义，就是一个纯粹的块元素,并且不会为它里边的元素设置任何的默认样式
div元素主要用来对页面进行布局的
- 内联元素
所谓的行内元素指的是只占自身大小的元素，不会占用一行
常见的内联元素：span a img iframe
span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式
- 区别
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何其它的块元素
- 块和内联 语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块和内联</title>
</head>
<body>
<p style="color: blue">这是一个p标签</p>
<span>这是一个span</span>
<span style="color: red">这是一嗯嗯是是男是女</span>
<div style="background-color: red;font-size: 100px">我事业恩你定的那女的</div>
</body>
</html>
网友评论