前端

2018-11-17 本文已影响0人四月四七日薄暮

img
使用img标签来向网页中引入一个外部图片
img标签也是一个自结束标签
属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性，则搜索引擎不会对img中的图片进行收录
width：可以用来修改图片的宽度，一般使用px作为单位
height：可以用来修改图片的高度，一般使用px作为单位
宽度和高度两个属性如果只设置一个，另一个也会同时等比例调整大小
如果两值同时指定，则按照你指定的值来设置
一般开发中除了自适应的页面，不建议设置width和height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片标签</title>
</head>
<body>
<img src="2.gif" alt="这是一只动物" width="100px" height="500px" />
</body>
</html>
相对路径
src属性配置的是图片的路径，目前我们所使用的路径全都是相对路径
相对路径：
相对路径指相对于当前资源所在目录的位置
可以使用../来返回上一级目录，返回几级目录就写几个../
图片的格式:
JPEG（JPG）

JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
一般使用JPEG来保存照片等颜色丰富的图片
GIF
GIF支持的颜色少，只支持简单的透明，支持动态图
图片颜色单一或者是动态图时可以使用GIF
PNG
PNG支持的颜色多，并且支持复杂的透明
可以用来显示颜色复杂的透明的图片
图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相对路径</title>
</head>
<body>
<img src="../img/2.gif" alt="这是一只动物" />
</body>
</html>
使用meta标签还可以用来设置网页的关键字
还可以用来指定网页的描述
搜索引擎在检索页面时，会同时枪击页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名
使用meta可以用来做请求的重定向
<meta http-equiv="refresh" content="秒数;url=目标路径" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>meta标签</title>
<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
<meta name="description" content="发布h5、js等前端相关的信息" />
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
</head>
<body>
<h1>5秒以后跳转页面</h1>
</body>
</html>
注释
1、HTML中不区分大小写，但是我们一般都使用小写
2、HTML中的注释不能嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>XHTML的语法规范</title>
</head>
<body>

-->
使用内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
属性：
src：指向一个外部页面的路径，可以使用相对路径
width：
height：
name：可以为内联框架指定一个name属性
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内联框架</title>
</head>
<body>
<h1>我是demo11</h1>
<iframe src="demo010_XHTML的语法规范.html" name="tom"></iframe>
</body>
</html>
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href：指向链接跳转的目标地址，可以写一个相对路径，也可以写一个完整的地址
a标签中的target属性可以用来指定打开链接的位置
可选值：
_self：表示在当前窗口中打开（默认值）
_blank：在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
center标签中的内容，会默认在页面中居中显示
我们可以将要居中的元素全都放到center中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<body>
<h1>我是demo12</h1>
```
  <a href="http://www.baidu.com">我是一个超链接</a><br /><br />
  
  <a href="http://www.baidu1234567.com">我是一个超链接</a><br /><br />
  
  
  <a href="demo011_内联框架.html" target="tom">我是一个超链接</a><br /><br />
  <iframe src="demo010_XHTML的语法规范.html" name="tom"></iframe>
  <center>
      <p>我是一个p标签</p>
  </center>
```
</body>
</html>
CSS的注释是/...../，作用和HTML注释类似，只不过它必须编写在style标签中，或者是CSS文件中
CSS的语法：
选择器声明块
选择器：
- 通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
声明块：
- 声明块紧跟在选择器的后边，使用一对{}括起来
- 声明块中实际上就是一组一组的名值对结构
- 这一组一组的名值对我们称为声明
- 在一个声明块中可以写多个声明，多个声明之间使用;隔开
- 声明的样式名和样式值之间使用:来连接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS语法</title>
<style type="text/css">
```
      p{
          color:red;
          font-size:40px;
      }
  </style>
```
</head>
<body>
<p>今天天气真不错，PM2.5也就500</p>
</body>
</html>
2、CSS开发工具
行内样式:
<p style="color: red;font-size: 30px"></p>
内部样式表:
<style>
p{color:red; font-size: 30px;}
<style>
外部样式表:
<link rel="stylesheet" type="text/css"href="style.css">
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>
<body>
<h1>这是一个非常漂亮的网页</h1>
<h2>你看我出不出来</h2>
<h2>你看我出不出来</h2>
<h2>你看我出不出来</h2>
<h2>你看我出不出来</h2>
<h2>你看我出不出来</h2>
<h2>你看我出不出来</h2>
<h2>你看我出不出来</h2>
<h2>你看我出不出来</h2>
</body>
</html>
3、块元素和内联元素
块元素:
所谓的块元素就是会独占一行的元素
无论它的内容有多少，它都会独占一整行
常见的块元素：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><div>我是一个span</div></p>

<a href="#"><a href="#">我是一个超链接</a></a>

<a href="#">
    <div style="background-color: red; width: 200px;">
        我是一个div
    </div>
</a>
<div style="background-color: yellow; width: 200px;">
    我是一个div
</div>

<p>我是一个p标签</p>
<p>我是一个p标签</p>

<hr />

<span>我是一个span</span>
<span>我是一个span</span>

<span style="color: red;">我是一段文字</span>

</body>
</html>
4、常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/为页面中的所有的p元素，设置一个字体颜色为红色/
/*
元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
/
/p{
color: red;
}
h1{
color: red;
}*/

    /*
        id选择器
            作用：通过元素的id属性值选中唯一的一个元素
            语法：#id属性值{}
    */
    /*#p1{
        font-size: 20px;
    }*/

    /*
        类选择器
            作用：通过元素的class属性值选中一组元素
            语法：.class属性值{}
    */
    /*.p2{
        color: red;
    }
    .hello{
        font-size: 50px;
    }*/

    /*为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色*/
    /*
        选择器分组（并集选择器）
            作用：通过选择器分组可以同时选中多个选择器对应的元素
            语法：选择器1,选择器2,选择器N{}
    */
    /*#p1,.p2,h1{
        background-color: yellow;
    }*/

    /*
        通配选择器
            作用：可以用来选中页面中的所有的元素
            语法：*{}
    */
    /**{
        color: red;
    }*/

    /*为拥有class为p3的span元素设置一个背景颜色为黄色*/
    /*
        复合选择器（交集选择器）
            作用：可以选中同时满足多个选择器的元素
            语法：选择器1选择器2选择器N{}
    */
    span.p3{
        background-color: yellow;
    }
    /*
    对于id选择器来说，不建议使用复合选择器
    p#p1{
        background-color: red;
    }
    */
</style>

</head>
<body>
<h1>悯农</h1>
<p>床前明月光</p>
<p>床前明月光</p>
<p id="p1">床前明月光</p>

<p class="p2 hello">床前明月光</p>
<p class="p2">床前明月光</p>
<p class="p2">床前明月光</p>
<p>床前明月光</p>

<p class="p3">床前明月光</p>
<span class="p3">疑是地上霜</span>

</body>
</html>
。

前端

猜你喜欢

热点阅读