htmlcss总结_html编程软件

HTML+CSS+JS 详细知识（新手向） 　　HTML 超文本标记语言 　　标记语言：通过标签的不同来代表不同的意思 　　mac地址是物化在电脑网盘硬件上的地址 　　IP里其实包含着mac的一部分 　　超文本：有文字之外的一些类似连接、按钮等的东西 　　JavaScript 　　让html有交互能力 　　
　　html 　　
　　绝对路径 　　< img src=”地址” alt=”描述 “> 　　
　　加不加span都没什么变化 的作用是形成独立空间 　　style 通用属性 　　形成独立空间 让素换行 　　在一行的末尾添加两个或多个空格，然后按回车键,即可创建一个换行 ( 　　)。 　　超链接 　　文字描述部分 　　可以跳转到其他html文件 　　target属性用于设置打开方式，其中_self代表本窗口打开，_blank代表新窗口打开，自定值代表指定窗口打开 　　< a name=”ga”> 锚点 　　< a herf=”#ga” target =”_blank ” > 跳转到 　　#跳转到本页面的锚点 　　< ul > 　　< li >< /li > < li > 　　< /ul> 无序列表容器 　　< ol > 　　< li >< /li > < li >< /li > 　　< /ol > 有序列表 　　
　　符合列表（标题+摘要） 　　
　　表格素 　　tr是表格行素 td 是普通单格素 　　border属性值为1表示有边框 ，值为0表示无边框 　　width属性用于设置表格宽度 　　cellpadding 代表单格内容与边框的间距 　　cellspacing代表单格与单格的间距 　　align代表对齐方式 left right center 　　colspan 合并单格 　　姓名 年龄性别 　　
　　inframe的src属性，用于设置嵌套哪个页面资源 　　inframe的frameborder属性，值为0代表ifram无边框 　　
　　input表单控件 type代表类型 　　密码类型： 　　<input type=”password” name=”” id=””> 　　加上value后，里面有默认的内容 　　单选框： 　　<input type=”radio” name=”” id=””> 　　name值一致后会变成一组单选框，从而形成单选效果 　　复选框： 　　<input type=”checkbox” name=”” id=””> 　　name可以不用管 　　文件上传按钮： 　　<input type=”file” name=”” id=””> 　　提交按钮： 　　<input type=”submit” value=””> 　　重置： 　　<input type=”reset” value=””> 　　按钮： 　　<input type=”button” value=””> 　　若想看到提交、重置的效果，需要提交数据的容器 　　图像域： 　　<input type=”image” src=”” alt=””> 　　和submit作用一样 　　readonly 只读 disabled 　　placeholder 设置提示信息 　　select 下拉选择 　　里面是option选项 　　<select name=”” id=””>     <option value=”选择1″></option>     <option value=”选择2″></option>     <option value=”选择3″></option> </select> 　　音乐标签 　　<audio src=””></audio> 　　autoplay 进网页就能播放 不需要按钮播放 　　loop 循环播放 　　视频标签 　　<video src=””></video> 　　font-size 控制字体大小 　　CSS 　　link链接css的属性，css单独文件创建属性 只需要在html中添加link标签就可以 　　<link rel=”stylesheet” href=””> 　　rel中填写资源 为样式单，去掉样式单后，资源会失效，属性也不能显示出来 　　html与css关联方式和8种基本选择器、伪类、伪素、其他选择器总结 CSS与HTML关联方式 　　内部样式 　　在html页面中设置style的标签，把css代码放在特定页面的head部分中，用style{}形式体现 　　外部样式 　　在css新文件中单独将属性写出来，使用link标签，将外部css文件链接到HTML中 　　行内样式 　　使用style属性，在特定的HTML标签内使用（工程量较大较麻烦） 八种基本选择器 　　素选择器 　　E{ } 　　
　　*是任意选择器，所有素都变成*中的样式 　　属性选择器 　　目录 　　E【attr = value】{} 　　*{}代表所有素的属性 　　^ $ * css中前缀后缀包含 　　
　　用属性来区分相同素 　　
　　五个相同的div 　　div[id] { 　　color:red 　　} 　　表示：是div素并且有id属性的div变成红色 　　div[id=xx] { 　　color:red 　　} 　　=代表必须是等号后的字符的id属性变成红色 　　div[id^=xx] { 　　color:red 　　} 　　^= 代表值的前缀是xx的变成红色 　　div[id$=xx] { 　　color:red 　　} 　　$=表示后缀是xx的字体变成红色 　　div[id*=xx] { 　　color:red 　　} 　　id中只要包含xx的字体变成红色 　　class选择器 　　input{ 　　groundcolor：red； 　　} 　　这样写，所有的input都会变成红色，但我们如果想要input某一标签有颜色 　　输入框背景色变成红色 　　input[type=text]{ 　　groundcolor：red； 　　} 　　class分类作用，区分开html中的素 　　因为class是通用属性，谁都能加，就没有必要用[class=]这种格式来写了，通常用素.class属性的值 　　例如：.boy{ 　　color:red 　　} 　　只有class=boy的素变成红色 　　
　　
　　两个不同的关键词同时选择一个class 　　
　　.boy设置class值为boy的字体颜色，.man设置class中 有man的背景颜色，同时选中第一个素boy man 　　注意：boy和man中间一定要加空格，否则会被认定为一个单词 　　
　　class可以跨标签定属性 　　设置.boy为红色字体，但p标签和div标签中都有.class，那么都变成红色 　　可以将素选择器和class选择器连起来写，同时寻找div标签并且class为boy的素 　　id选择器 　　用#代表id 　　同时设置class和id 可以求同存异 　　id的前缀是#，class前缀是. 　　包含选择器 　　格式：selector1 selector2{} 　　注意 1和2之间有空格 　　
　　div p{ 　　color：red 　　} 　　div中的p被选择到，所以只会有第一个p标签的内容变成红色 　　子选择器 　　selector1>selector2{} 　　body>代表子选择器，直级项目 　　
　　
　　子选择器操作div变成红色，但div中的div被定义为蓝色 　　第一个div是红色，第二个是蓝色 　　兄弟选择器 　　selector1~selector2 向下寻找selector2的素 　　“只找弟弟，不找哥哥” 　　
　　
　　以Java来寻找下面的素 　　选择器组合 　　selector1，selector2 　　将素不同样式相同的素用，连接起来即可 　　
　　li标签和class为php的全部标签中字体都为红色、 　　伪素选择器（前提是块级素（盒子）生效） 　　正常来讲，如果我们写一个单词apple，如果只想让首字母a与其他单词样式不同 　　我们会为a开辟一块新的空间，用span 并且不让它换行 　　apple 　　——–> 　　a pple 　　> 　　然后再在css文件中编辑span的格式 　　
　　通过为素选择器，我们可以在不加span标签的同时还能将首字母进行处理 　　p:first-letter 　　
　　通过减少真正素的创建来把素形成独立空间进行处理 　　但是如果我们想将第二个字母进行修改，就只能用span来开阔新的空间 　　
　　除了第一个字母被限定外，其他字母都变成了绿色 　　添加内容 　　格式：p：after/before{} 　　在p标签内容前面添加内容用before，之后用after 　　
　　伪类素器 　　不用写类选择器也可以操作已经加了类选择器的素 　　
　　在写了class类选择器后我们可以选择来将第一个素改变格式 　　
　　用伪类素器，我们可以不写class，将ul中的第一个类进行选择 　　
　　li：first-child 　　选择第二个：li：nth-child（2） 　　也可以选择odd和even，在括号中填写 　　UI状态伪类选择器 　　悬停状态，鼠标悬停状态会发生变化， 　　li { 　　color：blue 　　} 　　li:hover{ 　　color：red 　　} 　　表示鼠标悬停时候是红色 不悬停是蓝色 　　聚焦 　　例如输入框，点进去变成另一种状态 　　input：focus{ 　　backgroundcolor：green 　　} 　　其他伪类选择器 　　排除 　　
　　除了class为java的，其他li标签下的都为红色 　　
　　
　　同时过滤class为php的标签 　　优先级关系 　　优先级 　　id > class > div 　　
　　将div设置为红色 class设置为绿色 id设置为黄色 　　最终结果：文字部分为黄色 　　
　　语言执行顺序基本上都是从上到下执行，所以从上到下执行不能证明id是优先级最高，但如果将id放到最上面，文字最终颜色为id颜色，能证明id选择器优先级最高 　　同理，证明class比div级别高 　　
　　所以大小关系是id > class > div 　　2.选择器写的越长（越精确）优先级越高 　　3.当级别相同，长度相同的情况下，看代码的执行顺序 　　
　　JS 　　js是一种弱类型语言，不需要指明变量是什么类型 　　script理论上可以作为head的子素，也可以在body当中 　　js关联 　　内嵌式 　　用script标签关联 　　弹框 　　
　　输出 　　console.log(“我是控制台”); 　　在控制台打印log（）括号中的内容 　　外部js 　　<script src=”.js”> 　　如果同时使用内嵌和外引 ，内嵌的会失效 （只要加了src，内嵌就会失效） 　　在JavaScript定义变量 　　var 　　var str =”我是一个页面”； 　　定义变量，变量基本类型+复合类型 　　基本类型：数字、字符串、布尔、null、underfined（未定义） 　　var a = 10； 　　var b = “我是一个页面”; 　　var c = false; 　　var d = null; 　　var e = underfined; 　　复合类型：数组、对象、函数 　　定义数组：（json格式定义）中括号[]代表数组，大括号{}代表对象。 　　var arr = [1,2,3,4,5,6]; 　　2数组的大小是可以动态调整的，随着数据的添加自动增长； 　　3数组定义时无需指定数据类型，无需指定数组长度，可以存储任何数据类型的数据 　　定义对象 　　var obj = { 　　name:”wyh”, 　　age:20, 　　sex:”男” 　　} 　　
　　定义函数 　　//定义函数 function sleep(){ } 　　定义匿名函数 　　匿名函数不能直接存在 　　var qcby = function() 　　{ 　　} 　　把函数作为值来使用 　　console.log(qcby); 　　把函数作为函数调用来使用 　　把函数中的函数体执行一遍 　　命名：sleep() 　　匿名：qcby() 　　
　　第一次定义只是定义函数变量，到后面调用时候才会走函数内容 　　寻找html素，使用getElementById（） 　　在文档下以id的方式寻找 　　document.getElementById(); 　　可以赋值 var xx = document.getElementById(“xx”); 　　绑定事件 　　把值赋给绑定事件，所以不带括号 　　//绑定事件 wyh.onclick = sleep; 　　sleep（）是直接把函数调用 　　wyh.onclick = sleep; 是直接把sleep绑定在事件上，触发函数 　　如何使用脚本（js）来修改css样式 　　1、寻找目标素，gerElementById() 　　2、修改目标素样式 　　修改样式方式一 　　语法：obj.style.css属性（驼峰写法） = css样式值 　　修改样式方式二 　　修改目标素的class属性值 　　语法：obj.className = class选择器 　　注意：想改变属性或者是加上某些事件，第一件事要做的就是寻找 　　
　　
　　文字部分，背景颜色变成红色 　　
　　js动态将style加在代码上 　　
　　
　　背景变成随机颜色 　　Math.random() 的范围是0~1 　　
　　依次循环输出6个范围是0~9的数字来组成颜色 　　Math.round（）将随机数变成整数 　　Math.round(Math.random()*9) 　　
　　修改class的值