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