HTML/CSS/JavaScript

最新推荐文章于 2024-06-23 20:25:37 发布

GFJadfkljasfg

最新推荐文章于 2024-06-23 20:25:37 发布

阅读量257

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/GFJadfkljasfg/article/details/115690366

版权

HTML：

div:独占一行，自动换行。包裹其它标签，自动换行。
table tr:同一行内容，左右有内容的实现：

td align=“left” /td align=“right” 两个td一左一右。
用div 左浮动，右浮动。
如果内容超过浏览器长度，设置width:100% 这样就不会超过浏览器长度。
input标签：
input 里type=email 在表单提交时可以效验邮箱，不符合邮箱规则就不让提交。
input里radio 单选。 checkbox.多选
date 日期
select标签加上multiple后会显示全部选项，区别不加。
textarea标签

&nbsp;   代表空格
overflow:hidden 溢出隐藏、清除浮动、解决外边距塌陷

CSS:

层叠样式表 cascading style sheets:
样式层层叠加，样式不冲突的一起作用，有冲突的，应用优先级高的。

<div   id = "bq1"  style = " position:absolute; left:50px; top:50px;background-color: #1cfff8; height: 100px;width: 100px;" ></div >
<div  id = "bq2"  style = " position:relative;background-color: yellowgreen; height: 100px;width: 100px;" ></div >
<div  id = "bq3"  style = " position:relative;background-color: red; height: 100px;width: 100px;" >
    <div  id = "bq4"  style = " position:absolute; left:10px; top:10px;background-color: #666666; height: 50px;width: 50px;" ></div >
</div >

position:relative

relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

position:absolute
----将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。
absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：

设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

行内样式1

内部样式2（style）

外部样式3(link)

在这里插入图片描述
优先级：行内 >(内部=外部)：后两者级别一样，看顺序（离内容近的优先展示）

CSS选择器：
基本选择器的优先级从高到低：id选择器，class选择器，元素选择器

<style type="text/css">
    span{color: red;font-size: 100px}
</style>

根据id选择器进行html文件修饰 
    <style type="text/css">
		#s1{color: red;font-size: 100px}
		#s2{color: green;font-size: 100px}
		#s3{color: blue;font-size: 100px}
    </style>

根据class选择器进行html文件修饰：
    <style type="text/css">
        .s1{color: purple;font-size: 100px}
        .s2{color: pink;font-size: 100px}
        .s3{color: yellow;font-size: 100px}
    </style>

//属性选择器
     <style type="text/css">
        input[type='text'] {
            background-color: pink;
        }
        input[type='password'] {
            background-color: yellow;
        }
        font[size] {
            color: green
        }
	</style>

代码：
	<a href="https://hao.360.cn/">点我吧</a>
伪元素选择器：
    <style type="text/css">
        <!--静止状态 -->
        a:link {color: red;}
        <!--悬浮状态 -->’
        a:hover {color: green;}
        <!--触发状态 -->
        a:active {color: yellow;}
        <!--完成状态 -->
        a:visited {color: blue;}
    </style>

层级选择器
 <div id="div1">
     <div class="div11">
         <span>span1-1</span>
     </div>
     <div class="div12">
         <span>span1-2</span>
     </div>
</div>
<div class="div2">
    <div id="div22">
        <span>span2-1</span>
    </div>
    <div id="div23">
        <span>span2-2</span>
    </div>
</div>

<style type="text/css">
    #div1 .div11{color:red;}
    #div1 .div12{color:purple;}
    .div2 #div22{color:green;}
    .div2 #div23{color:blue;}
</style>

CSS属性

CSS盒子模型

JavaScript

一种解释性脚本语言，动态类型，弱类型，基于原型继承的语言。

组成：ECMAScript语法+DOM+BOM

JS事件：
在这里插入图片描述
DOM文档对象模型。document object model
DOM事件

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

RegExp对象

regular expression 正则表达式
描述字符模式的对象。主要用于字符串的模式匹配，检索替换。

var patt1=new RegExp("^1[3589]\\d{9}$"); 
document.write(patt1.test("13688889999"));//true

var reg=/java/ig; 
var str="hello java,java是最好的编程语言，我爱Java"; 
var s=null; 
while(s=reg.exec(str)){ 
	document.write(s); 
	document.write("<br/>"); 
}

innerHTML

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="abcd";
</script>

一个内容，一个属性值。

<img id="image" src="1.gif">
<script>
document.getElementById("image").src="2.jpg";
</script>

EventListener

document.getElementById("myBtn").addEventListener("click", displayDate);

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

addEventListener(event, function, useCapture);
第三个参数为true: 事件使用捕获传递 先外后内
false:冒泡传递 先内后外

element.removeEventListener("mousemove", myFunction);

操作元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

BOM:浏览器对象模型brower object model

<script>
function newDoc()
  {
  window.location.assign("http://www.baidu.com/")
  }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>

<script>

document.write(location.href); //返回当前页面url

</script>

定时器
setInteval() 循环执行
clearInteval

setTimeOut() 执行一次
clearTimeOut

Cookie:
以键值对的形式保存在用户硬盘上的文件。可跨一个域名下多个网页，不能跨多个域名。
cookie的使用场景：
保存用户登陆状态
定制页面皮肤，所在地区等
购物车
记录用户浏览纪录
缺点：
会被禁用
不同浏览器，不能互用cookie
cookie可能被删除
cookie不够安全。

document.cookie="userId=888; userName=1601";

var strCookie=document.cookie;

date.setTime(date.getTime()+expiresDaysx24x1000x3600); 

document.cookie="userId=888; userName=1601; expires="+date.toGMTString();

GFJadfkljasfg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML/CSS/JavaScript

HTML：超文本标记语言。hyper text markup language开发网页。使用标签描述网页，展示给用户。div:独占一行，自动换行。包裹其它标签，自动换行。table tr:同一行内容，左右有内容的实现： td align=“left” /td align=“right” 两个td一左一右。如果内容超过浏览器长度，设置width:100% 这样就不会超过浏览器长度。input标签：input 里type=email 在表单提交时可以效验邮箱，不符合邮箱规则就不让提交。in
复制链接

扫一扫