HTML day2
<!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;background-color: #f00;"></div>-->
<div></div>
</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;background-color: #f00;"></div>-->
<div></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; background-color: #000;">今天天气很好</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>
