html
hper text markup language --超文本标记语言
纯文本 123 hello 你好
定义网页的内容和结构
css
层叠样式表 级联样式表
定义网页的样式
静态网页 --没有功能的网页
javascript
网页的功能于行为
html基本结构
html是由标签（标记,网页元素,markup,element）组成的
单标记
<br/>
<input/>
<标签名 属性名=“属性值”/>
双标记
<p></p>
<a></a>
<div></div>
<标签名 属性名=“属性值>文本</标签名>
<html>
<head>
定义网页的属性
</head>
<body>
编写代码
</body>
</html>
h4常用标签
p:段落,前后自动空行
img:图片
重要属性: src='图片的路径' alt='图片不能正常显示时出现的文字'
width='宽px' height='高px'
注意:宽和高只能设置其中一个
a:超链接
重要属性 : href='要跳转的页面的地址'
br: 换行
h1~h6 :大纲级标题
embed:多媒体标签
h5标签: video audio
表格
表格的基本结构
表单
文本框 密码框 当选框 复选框
下拉列表 提交按钮 一般按钮
有序列表于无序列表
标签之间是相互嵌套的
<form>
<input/>
</form>
css选择器
css的作用是定义标签的样式?
它必须首先要找到对应的标签,通过什么？选择器
内联样式
写在标签内部,style属性中
内部样式 外部样式
选择器(找标签)
元素选择器(html选择器，标签选择器)
标签名{
属性名:属性值;...
}
a{ ...} 找到页面上所有的a 加样式
id选择器 (只能选取一个页面元素)
#标签的id值{
属性名:属性值;...
}
类选择器(可以给多个页面标签加样式)
.标签的类名{
属性名:属性值;...
}
派生 (父子选择器)
父选择器 子选择器{
属性名:属性值;...
}
群组选择器
p,a,#d1,div form{属性名:属性值;... }
求多个选择器的并集
通配符选择器
*{属性名:属性值;... }
选中页面上所有的元素加样式
*{margin:0;padding:0}
伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF;font-size:50px;} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
伪元素
:first-letter:给文本的第一个字符加样式
:first-line:给文本的第一行加样式
背景 边框 字体 文本 列表
h1~h6 p img a video/audio
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<!--
h1~h6 大纲级标题
-->
<h1 style='color:#ffaaaa'>hello world</h1>
<h2 style='color:#aaffaa'>hello world</h2>
<h3 style='color:#aaaaff'>hello world</h3>
<h4 style='color:#ffbbbb'>hello world</h4>
<h5 style='color:#bbffbb'>hello world</h5>
<h6 style='color:#bbbbff'>hello world</h6>
段落前 <p>我是一个段落</p>段落后
<img alt="美女" src="images/lanrenzhijia21.jpg" width="300px" /> <br/>
这是一个美女<br/>
<a href='welcome.html'>点我</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 视频 -->
<video src="video/1.mp4" controls="controls" autoplay="autoplay">
</video>
<!-- 音频 -->
<audio src="music/海阔天空.mp3" controls="controls" autoplay="autoplay">
</audio>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 style='color:pink;'>欢迎光临</h1>
<a href='hello.html'>回去</a>
</body>
</html>
ol/li/ul/border(solid/dotted)/ 内联样式、内部样式、外部样式/派生
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 有序列表
软件开发的流程
ol order list
-->
<ol>
<li>需求分析</li>
<li>概要设计</li>
<li>详细设计</li>
<li>编码</li>
<li>测试</li>
<li>实施</li>
<li>更新于维护</li>
</ol>
<ul>
<li>java</li>
<li>android</li>
<li>ios</li>
<li>.net</li>
<li>php</li>
</ul>
</body>
</html>
demo.CSS
@CHARSET "UTF-8";
/*
在外部文件中编写css称为外部样式
*/
p{
border:3px solid pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
/*
写在style标记中的称为内部样式
*/
a{
font-size:36px;
}
</style>
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
写在标签内部 style属性中的样式称为
内联样式
-->
<a href='#'>点我</a>
<a href='#'>Click Me</a>
<p style='color:red;'>you can you up</p>
<p>你好,世界</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
color:red;
}
.txt{
border: 3px dotted red;
}
.hello{
color:green;
}
</style>
</head>
<body>
<div id='d1' class="txt">you can you up</div>
<p class="txt" >you can you up</p>
<a href="#" class='hello'>点我</a>
<input type="text" value="hello" class="hello"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
border:2px solid green;
}
/*派生选择器*/
div p{
font-size:30px;
color:red;
}
</style>
</head>
<body>
<p>一个超然的段落</p>
<div>
<p>一个有爹的段落</p>
</div>
</body>
</html>
表格 文本框/密码框/单选框/......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 表格
emp表 员工表
table 根标记
thead 表头
tr 加入以行
th 在行中加入一个单元格
-->
<!--
<table border="3" width='600px' align='center'>
<thead>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工性别</th>
<th>员工年龄</th>
<th>员工薪资</th>
<th>部门</th>
</tr>
</thead>
<tbody align="center">
<tr >
<td>001</td>
<td >熊大</td>
<td>男</td>
<td>22</td>
<td>20000</td>
<td>java开发部</td>
</tr>
<tr>
<td>002</td>
<td>熊二</td>
<td>男</td>
<td>20</td>
<td>18000</td>
<td>java开发部</td>
</tr>
<tr>
<td>003</td>
<td>张三</td>
<td>女</td>
<td>20</td>
<td>17000</td>
<td>前端开发部</td>
</tr>
</tbody>
</table>
-->
<!--
简约风格
-->
<table border="3" align='center' width='600px'>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工性别</th>
<th>员工年龄</th>
<th>员工薪资</th>
<th>部门</th>
</tr>
<tr >
<td>001</td>
<td >熊大</td>
<td>男</td>
<td>22</td>
<td>20000</td>
<td>java开发部</td>
</tr>
<tr>
<td>002</td>
<td>熊二</td>
<td>男</td>
<td>20</td>
<td>18000</td>
<td>java开发部</td>
</tr>
<tr>
<td>003</td>
<td>张三</td>
<td>女</td>
<td>20</td>
<td>17000</td>
<td>前端开发部</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
文本框 密码框 单选框 复选框
下拉列表 提交按钮 一般按钮
action="后台的地址"
-->
<form action="aaa" method="post" >
用户:<input type="text" name="username"/> <br/>
密码:<input type="password" name="pwd" /> <br/>
性别:
<label>
<input type="radio" name="sex" value="M" checked/> 男
</label>
<label>
<input type="radio" name="sex" value="F"/> 女
</label>
<br/>
兴趣爱好:
<label>
<input type="checkbox" name="hobby" value="ball"/> 篮球
</label>
<label>
<input type="checkbox" name="hobby" value="swimming"/> 游泳
</label>
<label>
<input type="checkbox" name="hobby" value="reading"/> 阅读
</label>
<label>
<input type="checkbox" name="hobby" value="coding"/> 编程
</label>
<br/>
您是从何处知晓本网站的信息?
<select name="info" >
<option value="-1">---请选择---</option>
<option value="baidu">百度</option>
<option value="51job">前程无忧</option>
<option value="school">学校推荐</option>
<option value="sina">新浪网</option>
</select>
<br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="自定义" onclick="alert('hello world')"/>
</form>
</body>
</html>
超链接/伪类选择器/伪元素first-letter/div盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p,a{
color:red;
}
</style>
</head>
<body>
<p>hello</p>
<a href="#">click me</a>
<div>123</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF;font-size:50px;} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
div{
width:200px;
height:200px;
background-color:red;
}
div:hover{
width:600px;
height:600px;
background-color:green;
}
</style>
</head>
<body>
<a href="#">ClickMe</a>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p:first-letter{
font-size:50px;
color:red;
}
</style>
</head>
<body>
<p>
好好学习，天天向上
努力，不亚于任何人的努力
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
/* 宽高是指盒子内容的宽和高*/
width:100px;
height:100px;
background:red;
padding:20px;
border:3px solid green;
margin:200px;
}
</style>
</head>
<body>
<!--
盒子模型
-->
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:600px;
height:600px;
border:1px solid red;
/*
background-image: url(../web/images/zb0.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;*/
background: url(../web/images/zb0.jpg) no-repeat 10% 10%;
}
</style>
</head>
<body >
<div></div>
</body>
</html>