<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--链接标签--> <!--核心属性就是href 属性值可以是一个跳转的地址--> <a href="">GO！百度</a> <a href="../0527day01/07.html">跳转到昨天的07.html</a> <!--适用于任何带有路径的东西--> <!--href里面的内容就是路径--> <!-- 绝对路径：从盘符开始，然后依次的往下查找 本地： C:/Users/Administrator/Desktop/0527day01/07.html 服务器的： www.baidu.... 127.0.0.1 192.168.... http://www.baidu.com 相对路径: 从当前文件开始，如果下一级目录就直接写文件夹名，上一级用../表示 盘符根路径： 直接可以跳转到当前文件所有的盘符根目录中 / 服务器底下 省略 本地底下 --> <!--图像标签 src 图片的路径， alt 当图片显示不出来的时候才会显示 图片正在下载的时候。。。加载中 图片的路径错误的时候 width height align img是我们接触的第一个行内块标签，靠左或者靠右 --> <img src="/koala.jpg" alt="图片正在加载中" width="200" align="center" /> <img src="/koala.jpg" alt="" width="200" align="center" /> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 前端和后端之间的通信 1.form提交方式 2.ajax提交方式 --> <!--核心标签：只有提交的功能，没有任何的样式--> <!--form 属性： action 提交的地址，通常为服务端的地址，如果不写，默认往本页提交 method 提交的方式。get/post 如果不写，为get提交 get和post的区别。 --> <form action="" method=""> <!-- input、button是一个行内块标签 input是表单的核心标签，通过修改input标签中的type属性来改变展现的样式--> 用户名：<input type="text" name="username"/><br /> 密码名：<input type="password" name="userpwd"/><br /> <!--提交--> <button>提交1</button> <input type="submit" /> <!--<input type="image" src="koala.jpg" />--> <!-- ?后面的内容表示参数。我们最终的目的是要把必须的参数给发送到后端 想要发送参数，input中必须含有name属性 --> </form> <button>提交1</button> <input type="submit" /> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get"> 用户名：<input type="text" name="username" value="张三" /> <br /> 密码名：<input type="password" name="userpwd" /> <br /> <!--一组必须含有相同的name属性值 input中的值有一个属性，value属性 checked 默认选中，当属性名等于属性值的时候，只需要写属性名即可 --> 男<input type="radio" name="sex" value="1" checked/> 女<input type="radio" name="sex" value="0" /> <br /> <!--一组必须含有相同的name属性值--> 兴趣爱好： <input type="checkbox" checked="checked" name="aihao" value="0"/>打酱油 <input type="checkbox" checked name="aihao" value="1"/>打架 <input type="checkbox" name="aihao" value="2"/>泡妞 <input type="checkbox" name="aihao" value="3"/>打游戏 <input type="checkbox" name="aihao" value="4"/>学习 <br /> 来自何方： <select name="hefang" id=""> <option value="武汉">武汉</option> <option value="荆州">荆州</option> <option value="黄石">黄石</option> <option value="襄阳">襄阳</option> <option value="十堰">十堰</option> </select> <br /> 自我描述： <textarea name="miaoshu" rows="" cols=""></textarea> <br /> <input type="submit" /> </form> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="" /> <!--<style> div{ width:200px; height:200px; background-color:#f00; } </style>--> <link rel="stylesheet" href="04.css" /> </head> <body> <!-- 开始学习css html 结构，承载内容 css 样式。 层叠样式表 JavaScript 行为 css的使用方式（） 1.行内样式（内联样式） <标签 style="属性名1:属性值1;属性名2:属性值2;..."></标签> 2.页面嵌入（内部样式表） 在head标签里面增加一个子标签 <style> 选择器{ 属性名1:属性值1; 属性名2:属性值2; ...... } </style> 3.外部文件（外部样式表） 在head标签里面增加一个子标签 <link rel="stylesheet" href="css文件的路径" /> 4.外部导入样式 主要用在样式初始化。因为有一些标签有自己的样式，我们需要清空，方便自己计算 css语法： （符号都是英文的） 选择器{ 属性名1:属性值1; 属性名2:属性值2; ...... } --> <!--<div style="width: 100px;height: 100px;"></div>--> <div></div> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 颜色的表示方法 1.颜色色值的英文单词 red，yellow，green，blue... 2.16进制表示法 2 010101 8 10 16 0123456789abcdef 基础三原色 红绿蓝 每个颜色是由两个16进制的数来表示的#ff 00 00 简写 #xxyyzz -> #xyz #ffff00 #ff0 #aabbcc #abc #aabcdd 不能简写的 #000000 #ffffff 白色 #cccccc 黑 白 灰 3.rgb表示法 16*16 = 256 rgb(0-255,0-255,0-255) --> <div style="width: 200px;height: 200px;background-color: rgb(255,255,0)"></div> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div01{ width: 100px; height: 100px; background-color: #ff0; } .d1{ width: 200px; height: 200px; background-color: #00f; } a,input,button{ width: 200px; height: 200px; background-color: #00f; } .grand{ width: 500px; height: 500px; background-color: #f00; } .grand .son{ width: 300px; height: 300px; background-color: #000; } *{ border: 10px solid #f00; } </style> </head> <body> <!-- css------选择器 ID选择器 使用id选择器：在元素上面增加一个id属性,id属性的属性值不用用数字开头 一个页面中只能有一个id属性值 css中id选择的表示方法用 # 表示 class选择器 使用class选择器：在元素上增加一个class属性，class属性的属性值不能用数字开头 一个页面中可以有多个class属性值 css中class选择器的表示方法用 . 表示 标签选择器 直接写标签名 组合选择器 选择器直接用,分隔开即可 子代选择器 > 只针对子代 后代选择器 用空格表示，包含着子代选择器 通用选择器 * 针对于所有的标签 --> <div id="div01"></div> <div class="d1"></div> <p class="d1"></p> <a href="">内容</a> <input type="text" /> <button></button> <div class="grand"> grand <div class="father"> father <div class="son"> son </div> </div> </div> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div #div02{ /* 1+100=101 */ color: #ff0; width: 200px; } #div01>div{ /*100+1=101*/ height: 300px; color: #f00; width: 300px; background-color: #00f; } .div01 .div02{ /*10+10=20 */ font-size: 50px; } #div01>#div02{ /*100+100=200*/ font-size: 20px; background-color: #f00; color: #fff; } div{ width: 500px!important; height: 500px!important; color: #f00!important; background-color: #ff0!important; } </style> </head> <body> <div class="div01" id="div01"> <div class="div02" id="div02" style="width: 10px;height: 10px; ">今天天气很好</div> </div> <!-- 选择器是有权重的 内联样式 1000 id 100 class 10 元素 1 通用 0 boss !important 只要出现，就以这个为主 权重越高，冲突部分的样式就以权重高的为主，并不是说这个选择器没有用了，而是里面冲突的样式 权重仅仅只能作为参考 权重的计算 不需要管子代和后代的 如果权重相同，就近原则。以后定义的为准 无聊的事： --> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 500px; height: 500px; border: 1px solid #000; text-align: right; /*文本对其方式*/ text-decoration: underline; /*文本下划线*/ color: #f00; /*设置字体的颜色*/ line-height: 166.67px; /*文本的行高*/ /*一行文字所占的高度,让他上下居中*/ /*font-family: "Microsoft YaHei";*/ /*设置字体的样式:宋体，楷体... 去百度，翻译中英文 */ font-family: "宋体"; /*自己去百度找到宋体对应的英文，节约空间*/ font-style: italic; /*规定字体是否倾斜*/ font-weight: bold; font-size: 16px ; /*设置字体的大小*/ /*在浏览器中,默认的字体大小16px 谷歌浏览器中，字体大小最小可以为12px 火狐没有限制 * */ } a{ text-decoration: none; } h1{ font-weight: normal; font-size: 5px; } </style> </head> <body> <!--文本类样式--> <div> 今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！ </div> <a href="">去百度</a> <h1>这个是h1标题</h1> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div01{ width: 100px; height: 100px; background-color: #f00; } #div01{ /*100*/ background-color: #000; } .div01:hover{ /*10+10*/ background-color: #ff0; } </style> </head> <body> <!--:hover 叫伪类选择器 当你的鼠标放上去的时候，会变化成的样子 权值 10 --> <div class="div01" id="div01"> </div> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>列表及样式</title> <style type="text/css"> ul{ list-style: none; cursor: none; /*设置鼠标的样式*/ display: block; /*元素分为三大类,设置元素的显示方式 行内 inline 块级 block 行内块 inline-block none 无 * */ } li{ display: inline; } input{ outline: none; /*visibility: hidden;*/ display: none; /*这两个的区别?*/ } </style> </head> <body> <!--有序列表和无序列表--> <!--实际开发中有序列表基本不用--> <!--这三个都是块级标签--> <ol type="1" start="3"> <li>英语</li> <li>语文</li> <li>数学</li> <li>政治</li> <li>地理</li> </ol> <ul type="square"> <li>英语</li> <li>语文</li> <li>数学</li> <li>政治</li> <li>地理</li> </ul> <input type="text" /> </body></html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; border: 1px solid #000; } .div01{ background-color: #f00; opacity: 0.1; /*取值的范围是0-1之间，可以为0和1*/ /*表示整个元素*/ } .div02{ background-color: rgba(255,0,0,0.1); /*最后一个参数a表示透明度，取值的范围是0-1之间，可以为0和1*/ /*只表示背景颜色*/ } </style> </head> <body> <div class="div01">这个是第一段文本</div> <div class="div02">这个是第二段文本</div> </body></html>