html入门+css

2018-09-07  本文已影响0人  岸与海

  1. 网页的构成

  2. 结构----html

HTML用于描述页面的结构
负责页面的结构

  1. 表现----css

CSS用于控制页面中元素的样式
CSS负责页面的样式，美化页面

  1. 行为----IavaScript

JavaScript用于响应用户操作
JavaScript负责页面的行为

  1. html基本构架

<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'/>
<title>
这是第一个html
</title>
</head>
<body>
网页内容
</body>
</html>

  1. 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>

  1. 文档声明 ----DOCTYPE html

h5的文档声明，声明当前的网页是按照HTML5标准编写的,
编写网页时一定要将此声明写在网页的最上边,
如果不写文档声明，则会导致有些浏览器进入一个怪异模式，导致浏览器无法正常解析显示网页,
所以为了避免进入该模式，一定要写文档声明

  1. 自结束标签




<meta/>
<img/>
  1. 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'/>

  1. 图片

设置高宽其中一个，另一个会等比缩放，两个都设置，会按照制定比例进行显示,在实际开发中,不建议设置width和height
相对路径与绝对路径
相对路径
可以使用../来返回上一级目录，返回几级目录就写几个../
绝对路径
可以使用,但在正常的开发中,图片往往存于与代码位置同级的img文件夹中,使用相对路径的情况会比较多
图片常用格式
jpg/jpeg：支持多种颜色 可以压缩 但不支持透明 ，多用于保存颜色丰富的照片
gif:颜色少 动图 支持简单的透明
png:支持复杂的透明 颜色多
使用原则：
效果不一致的，用好的
效果一致的,用小的

  1. 字符实体

小于号: &lt
大于号: &gt
空格: &nbsp
和符号&: &amp
版权© : &copy
引号": &quot
注册商标® : &reg
商标(TM): &trade

  1. XHTML的规范：

不区分大小写，一般使用小写
注释 不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签,可以不写 /
非自结束标签如果没有 / ,浏览器尽最大的努力正确地解析页面，你所有的不符合语法规范的内容浏览器都会为你自动修正，但是有些情况会修正错误,所以,要将结构写完整
查看结构:F12 或 右键 ----检查
换行标签的的使用
html标签可以嵌套使用(可以包含font标签) 但是不能交叉嵌套
属性值必须 且 加引号（单引号或者双引号）

  1. 颜色和大小

<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>

  1. 超链接 ---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>

  1. 居中显示

<center>
<p>居中显示效果</P>

</center>

  1. css

  2. css语法

注释:
作用和HTML注释类似，只不过它必须编写在style标签中，或者是CSS文件中,使用[/**/]进行注释
语法
选择器：
通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上
声明块：
声明块紧跟在选择器的后边，使用一对{}括起来
声明块中实际上就是一组一组的名值对结构
这一组一组的名值对我们称为声明
在一个声明块中可以写多个声明，多个声明之间使用;隔开
声明的样式名和样式值之间使用:来连接

  1. 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 块和内联

  1. 块元素

所谓的块元素就是会独占一行的元素,无论它的内容有多少，它都会独占一整行
常见的块元素：div p h1 h2 h3……
div这个标签没有任何语义，就是一个纯粹的块元素,并且不会为它里边的元素设置任何的默认样式
div元素主要用来对页面进行布局的

  1. 内联元素

所谓的行内元素指的是只占自身大小的元素，不会占用一行
常见的内联元素：span a img iframe
span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式

  1. 区别

块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何其它的块元素

  1. 块和内联 语法

<!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>

上一篇下一篇

猜你喜欢

热点阅读