PYTHON_DAY_12_HTML

zoukankan html css js c++ java

PYTHON_DAY_12_HTML
html css 和js说明

1.什么是html？

HTML(HyperText MarkUp Language)超文本标记语言,通过使用标记来描述文档结构和表现形式的一种语言,由浏览器进行解析,然后把结果显示在网页上，通俗的讲它就是服务器发送的字符串到浏览器，通过浏览器能解析的规则用HTML来描述，它是网页构成的基础,你见到的所有网页都离不开HTML,所以学习HTML是基础中的基础
- HTML语言是一种标记语言,不需要在服务端编译,直接由浏览器解释执行
- HTML文件是一个文本文件,包含了HTML自己的所有元素
- HTML文件必须使用html或htm为文件名后缀
- HTML不区分大小写,所以HTML与html是一样的
2. html css 和js关系

html是一个网页的主题，是由多个元素组合成的，但是这写元素保留的是基本默认属性，css就是这个网页的样式，css定义了元素的属性，js是通过jacascript语言，实现在一个页面上展现不同的css样式。
它们的关系通俗讲就是 html是一个赤裸裸的人，css是人的衣服，js作用是让人动起来

HTML 结构
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
html中元素是成对存在的，前面叫开始标签，后边叫闭合标签，如< html></ html>,还有一种不需要成对出现的标签，又称为自闭合标签

head信息

1.Meta(metadata information)

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
- 页面编码（告诉浏览器是什么编码）
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”> <meta charset="UTF-8">
　　
- 刷新和跳转
<meta http-equiv=“Refresh” Content=“30″> <meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
　　
- 关键词
关键字作用一般是让爬虫之类的收录程序，当他们在爬你的网站的时候，如果你有关键字，那么他们会优先把关键字收录到他们的记录中，比如百度：如果他们收录之后，他们搜索你的关键字的时候，就能找到咱们的网站
<meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
　　
- 描述
·　　例如：cnblogs
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
　　
- X-UA-Compatible 浏览器兼容类型
X-UA-Compatible 这个是IE8特有的，知道即可，因为做前端的同学都很害怕IE因为他们问题比较多各个版本问题很诡异，当IE8的时候微软想把各个版本的统一，那么这个参数就出现了，他为了向下兼容，如下的代码如果使用IE8的时候他会以IE7的模式运行。 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
　　

2. TITLe

网页头部信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是头部标题</title> </head> <body> </body> </html>
　　效果：

3. Link
引用外部文件
　　
- css
<link rel="stylesheet" type="text/css" href="css/common.css" >
　　
- icon图标
<link rel="shortcut icon" href="image/favicon.ico">
　　
- Style
在页面中写样式

例如：
<style type="text/css" > .bb{ background-color: red; } </style>
　　

Script
- 引进文件
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> <／script >
　　
- 写js代码
<script type="text/javascript" > ... </script >
　　

body主体

body主体是由多个标签组成，标签一般分为两种：
- 块级标签：显示外观按块显示，有一定的宽度和高度，并占据一行,如标题标签、段落标签、水平线标签、列表标签、分区标签(div)
- 行内标签：内嵌标签，类似于文本，按行逐一显示，只有本行完事之后，才继续下一行。如图像标签、超链接标签、范围标签、换行标签等
特殊符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

常用标签
- h 标题标签 h1--h6表示不同等级的标题
<h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6>
　　

效果：
标签选择器 div{ background-color:red; } <div > </div> class选择器 .bd{ background-color:red; } <div class='bd'> </div> id选择器 #idselect{ background-color:red; } <div id='idselect' > </div> 关联选择器 #idselect p{ background-color:red; } <div id='idselect' > <p> </p> </div> 组合选择器 input,div,p{ background-color:red; } 属性选择器 input[type='text']{ 100px; height:200px; }
　　

优先级：
ID选择器>类选择器>标签选择器
按照代码的上下顺序，下面的优先级更高
内层标签>外层标签
行内标签优先级高于所有样式表

CSS常用属性

background 背景
<div style="background-color: red"> 红色背景</div>
　　

效果：
<div style="background-image: url(saf.jpg); height: 100px; 100px"></div>
　　

效果：

发现当图片大小小于div时，图片默认会复制多个进行填充，看下面解决办法
<div style="background-image: url(saf.jpg); height: 100px; 100px;background-repeat: no-repeat"></div>
　　
- background-position 图片移位
<div style="background-image: url(saf.jpg); height: 100px; 100px;background-repeat: no-repeat;background-color: red ; background-position: bottom"></div>
　　

border 边框

设置边框，分为实线、虚线、点的线形式如下代码
 <div style="border: 2px solid red;height: 20px">实线</div>  <br /><div style="border: 2px dotted black;height: 20px">虚线</div>  <br/><div style="border: 2px dashed blue;height: 20px">粗虚线</div>
　　

cursor

设置鼠标停留的形状
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标小手</title> </head> <body> <p style="cursor:pointer">停放在这里显示小手(pointer)</p> <p style="cursor:help">停放在这里显示问号(help)</p> <p style="cursor:wait">停放在这里显示一个圈正在加载形状(wait)</p> <p style="cursor:move">停放在这里显示移动(move)</p> <p style="cursor:crosshair">停放在这里显示定位(crosshair)</p> </body> </html>
　　

float 浮动

默认块级元素占一整行，如果想要并排显示，可以使用float属性
float属性分左浮动、右浮动
默认：
<div style="border: 1px solid black"> <div style="background-color: red ; 50px ;height: 50px"> </div> <div style="background-color: blue ; 50px ;height: 50px"> </div> </div>
　　

效果：

如果想要红色的div和蓝色div并排显示，可以加入float属性
<div style="border: 1px solid black"> <div style="background-color: red ; 50px ;height: 50px ; float: left"> </div> <div style="background-color: blue ; 50px ;height: 50px;float: left"> </div> </div>
　　

已经达到我们的效果，通过效果发现，float起来之后，最外边的div没有里面div的支撑，已经没有了高度，如果我们既需要并排显示，也需要将float之后重新支撑最外边的div，可以进行如下配置
<div style="border: 1px solid black"> <div style="background-color: red ; 50px ;height: 50px ; float: left"> </div> <div style="background-color: blue ; 50px ;height: 50px;float: left"> </div> <div style="clear: both"></div> </div>
　　

或者利用伪类进行操作：
<style> .clearfix:after { content: '.'; clear: both; display: block; visibility: hidden; height: 0; } </style> <div style="border: 1px solid black" class="clearfix"> <div style="background-color: red ; 50px ;height: 50px ; float: left"> </div> <div style="background-color: blue ; 50px ;height: 50px;float: left"> </div> </div>
　　关于伪类的扩展：
before 在标签前加属性
after 在标签后加属性
<style> .c1:before { content: '666'; } .c2:after { content: '888'; } </style> <div> <div class="c1">777</div> <div class="c2">000</div> </div>
　　

效果：

这种用法常用于设置整个页面的背景颜色

边距 margin和padding
- margin 即外边距，用于设置对象标签之间距离间隔
- padding 即内边距，用于设置本标签内部间距
使用：
默认：
<div style="border: 1px solid red"> <div style="background-color: blue; 50px;height: 50px;">123</div> <div style="background-color: yellow; 50px;height: 50px;">456</div> </div>
　　

效果：

使用边距移动:
<div style="border: 1px solid red ;height: 150px; 150px;"> <div style="background-color: blue; 50px;height: 50px; margin: 10px 0px 0px 20px;padding: 10px 10px 10px 10px">123</div> <div style="background-color: yellow; 50px;height: 50px;">456</div> </div>
　　

效果：

说明：
- margin: 10px 0px 0px 20px 是蓝色div 距外边框上面10px、右边0px、下边0px、左边20px ，所以蓝色边框距原来的位置移动了
- padding: 10px 10px 10px 10px 是蓝色div内部，通过增加内边距，将123 向上、右、下、左各增加了10px，所以123就出现了边框中间
margin和padding 也支持单独对某个边进行设置
margin-left 对象左边外延边距（margin-left:5px; 左边外延距离5px）
margin-right 对象右边外延边距（margin-right:5px; 右边外延距离5px）
margin-top 对象上边外延边距（margin-top:5px; 上边外延距离5px）
margin-bottom 对象下边外延边距（margin-bottom:5px; 下边外延距离5px）

padding同样

定位

常常使用position用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。

position参数：
- fixed:特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位，滚动鼠标位置不移动
- absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。按照浏览器的窗口进行定位，滚动鼠标，位置会跟着移动
- relative : 　单独写没有什么什么效果，给absolute 结合才能出现化学反应，可以固定在指定的哪个框里面的位。
fixed示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 定位</title> </head> <body> <div style="background-color: #dddddd;height: 1000px"></div>  <div style="position: fixed;right:30px;top:30px;background-color: red;height: 50px; 100px"> 返回顶部 </div> </body> </html>
　　
absolute用法：
单独使用absolute用法给fixed语法一样区别在于，固定的浏览器窗口位置会随着鼠标的滚动而移动。
<div style="background-color: #dddddd;height: 100px; 200px">  <div style="position: absolute;right:30px;top:30px;background-color: red;height: 50px; 100px"> 返回顶部 </div>
　　

效果：

relative ＋ absolute用法：

relative为absolute指定了固定位置的参照标签，如上图，我需要将红色div放在左边的框里
<div style="background-color: #dddddd;height: 100px; 200px;position: relative">  <div style="position: absolute;right:30px;top:30px;background-color: red;height: 50px; 100px"> 返回顶部 </div>
　　

效果：

滚动条overflow

Overflow可以实现隐藏超出对象内容，同时也有显示与隐藏滚动条的作用。

应用场景，有这么一种情况，在一个div内有很多的的内容，如果div的框体不是很大超出去了怎么办？
如下图我不想把"Tom"超出我定义的边框样式：

使用overflow
<div style="background-color: #dddddd;height: 100px; 500px;overflow: auto"> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> 123<br/> </div>
　　

display显示与隐藏

我们常常会用到display对应值有block、none、inline这三个值
- 使用display:none;来隐藏所有信息（无空白位占据）
- display:block；用来把内联标签变成块级标签
- display:inline;用来把块级标签变成内联标签
- display:inline-block;把内联标签可以运用样式如：高度，或宽度
 <p style="display:inline;background-color: blue;height: 50px;"> 块级标签转成内联标签 </p> <div style="display: none"> display: none此标签隐藏</div> <span style="display:block;background-color: red;height: 50px;">内联标签转换成块级标签</span> <span style="display: inline-block;height: 50px; background-color:blueviolet;">内联标签可以运用样式如：高度、宽度</span>
　　

效果：

补充属性
- 背景属性
  
  background-color 规定要使用的背景颜色。
  
  background-position 规定背景图像的位置。
  
  background-size 规定背景图片的尺寸。
  
  background-repeat 规定如何重复背景图像。
  
  background-origin 规定背景图片的定位区域。
  
  background-clip 规定背景的绘制区域。
  
  background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 1
  
  background-image 规定要使用的背景图像。
  
  inherit 规定应该从父元素继承 background 属性的设置。
- 边框属性
  
  border 简写属性，用于把针对四个边的属性设置在一个声明。
  
  border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
  
  border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
  
  border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
  
  border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
  
  border-bottom-color 设置元素的下边框的颜色。
  
  border-bottom-style 设置元素的下边框的样式。
  
  border-bottom-width 设置元素的下边框的宽度。
  
  border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
  
  border-left-color 设置元素的左边框的颜色。
  
  border-left-style 设置元素的左边框的样式。
  
  border-left-width 设置元素的左边框的宽度。
  
  border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
  
  border-right-color 设置元素的右边框的颜色。
  
  border-right-style 设置元素的右边框的样式。
  
  border-right-width 设置元素的右边框的宽度。
  
  border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
  
  border-top-color 设置元素的上边框的颜色。
  
  border-top-style 设置元素的上边框的样式。
  
  border-top-width 设置元素的上边框的宽度。
  
  outline 在一个声明中设置所有的轮廓属性
  
  outline-color 设置轮廓的颜色
  
  outline-style 设置轮廓的样式
  
  outline-width 设置轮廓的宽度
- 文本属性
  
  color 设置文本颜色
  
  direction 设置文本的方向、书写方向
  
  letter-spacing 设置字符间距
  
  line-height 设置行高
  
  text-align 设置文本的水平对齐方式
  
  text-decoration 设置添加到文本的装饰效果
  
  text-indent 设置缩进
  
  text-shadow 设置添加到文本的阴影效果
  
  word-spacing 设置单词间距
- 外边距属性
  
  margin 在一个声明中设置所有的外边距属性
  
  margin-bottom 设置下外边距属性
  
  margin-left 设置左外边距属性
  
  margin-right 设置右外边距属性
  
  margin-top 设置上外边距属性
- 内边距属性
  
  padding 在一个声明中设置所有的外边距属性
  
  padding-bottom 设置下内边距属性
  
  padding-left 设置左内边距属性
  
  padding-right 设置右内边距属性
  
  padding-top 设置上内边距属性
- 定位属性
  
  position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  
  top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  
  right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  
  bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
  
  left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  
  overflow 设置当元素的内容溢出其区域时发生的事情。
  
  clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
  
  vertical-align 设置元素的垂直对齐方式。
  
  z-index 设置元素的堆叠顺序。
  
  cursor 设置光标类型
  
  display 是否显示
  
  float 设置浮动
其他技巧：
- 拐角：
效果：

代码：
<style> .jianjiao{ display: inline-block; border-top: 15px solid red; border-bottom: 15px solid yellow; border-right:15px solid green; border-left:15px solid blue; } } </style> <div class="jianjiao"> </div>
　　
- 跑马灯：
<div id="i1" style="background-color: red;color: white ; display: inline-block"> 欢迎暴强莅临指导</div> <script> // 方式1 // setInterval("f1()",1000) // function f1() { // // var tag = document.getElementById("i1"); // var text = tag.innerText; // var a = text.charAt(0) // var sub = text.substring(1,text.length) // // var new_str = sub + a // tag.innerText = new_str // // } // 方式2 setInterval(function () { var tag = document.getElementById("i1"); var text = tag.innerText; var a = text.charAt(0) var sub = text.substring(1,text.length) var new_str = sub + a tag.innerText = new_str },1000);
　　
查看全文

相关阅读:
【题解】Luogu P3217 [HNOI2011]数矩形
 【题解】 Luogu P4312 / SP4155 [COCI 2009] OTOCI / 极地旅行社
 珂朵莉树详解
 数学手法之线性基
 【题解】luogu P3386 【模板】二分图匹配
 【题解】Luogu P2146 [NOI2015]软件包管理器
 css 垂直居中方法汇总
 css3中什么时候用transition什么时候用animation实现动画
 前端进阶（8）
前端进阶（12）

原文地址：https://www.cnblogs.com/lipingzong/p/7201410.html

PYTHON_DAY_12_HTML

html css 和js说明

1.什么是html？

2. html css 和js关系

HTML 结构

head信息

1.Meta(metadata information)

2. TITLe

3. Link

body主体

特殊符号

常用标签

CSS

选择器

CSS常用属性

background 背景

border 边框

cursor

float 浮动

边距 margin和padding

定位

滚动条overflow

display显示与隐藏

补充属性

其他技巧：