课程目标
掌握 HTML、CSS、JAVASCRIPT、JQUERY语言 。了解DW工具的使用
- 万维网(world wide web,www…)
- TCP/IP协议 (传输控制协议/Internet协议)
- 超文本开发语言HTML (没有顺序,随便点,随便看)
- 信息资源的统一定位格式URL (地址)
- 超文本传送协议 HTTP (没有协议,不能交互)
协议://域名 :端口号/文件路径/文件名.文件后缀
网页:构成网站的基本元素,分为静态网页和动态网页。 - 静态网页文件扩展名为 .html或.htm
- 动态网页文件扩展名为 .jsp或 .aspx .asp .php等 (数据库的值带到页面上)
网站:展示特定内容的相关网页的集合
斜体:<em>、 下划线:<u>、 粗体:<b>、 倾斜:<i>、
上 标:<sup>、 下 标:<sub>、 空格:  、
大于号 : > <、 小于号:&It;  
“&”符号:& & 双引号:"、"
设置字体、字号、size=“3+” 不大于 size=“3” 标签可以嵌套 不同的浏览器之间不兼容
<body>
//字体 font、size、face
<font color="aqua" face="6" size ="3+">所以暂时将你眼睛闭了起来~</font>
<br/>
<font size="3" face="6">!!!!黑暗之中漂浮我的期待~</font>
<br/>
</body>
img alt 图片无法显示的提示,如果没有alt用title替代
title 是提示语
align 设置图片和周围内容的对齐方式:left、right、bottom、middle(center)、top
<img src="img/1.jpg" width="500"px height="300px"
title="roseandrosie" alt="图片无法显示" align="middle" />
align=“middle”
三种连接:
- 页面之间连接
- 页面内链接(锚链接)
- 跳转连接
<a href="index.html">点击跳转到RR</a>
!<–内锚链接–>
<a href="#tiger">锚链接</a>
<img src="img/2.jpg"/>
<br/>
<a name="tiger">hello看到我了吗?</a>
<head>
!<–外锚链接–>
<a href="index2.html#hello">外锚链接</a>
//发邮件
<a href="mailto:[email protected]">联系我们</a>
<body text="red" //支持十六进制颜色
text="#FF0000"
bgcolor="bisque" //背景颜色
background="../img/lg.png" //背景图片
leftmargin="100px" //左右边距
topmargin="100px"> //上下边距
hello world
标签<h1>...<h6>
属性align 设置标题文字的水平对齐方式,取值范围(left,right,center,justify)
段落<p>
:p和h都具有默认换行属性,p内字体大小与网页默认大小相同,p对齐方式与h align相同
<h1 align="center">设置标题文字的水平对齐方式</h1>
<h2 align="justify">设置标题文字的水平对齐方式</h2>
<h3 align="right">设置标题文字的水平对齐方式</h3>
<!--段落标签-->
<p>水平对齐方式</p>
标签<hr/>
属性size设置水平线的粗细
属性width设置宽度
//默认align="left" width="100px" width="75%"
//size 线的厚度
//noshade="noshade xhtml的语法,html4直接写一个noshade"---阴影
//设置颜色color失去3D效果
<hr align="right" width="50%" size=5px noshade="noshade" color="chartreuse"/>
表格<table>
rowspan 合并行,colspan和并列
<table align="center"border="5" bgcolor="blue" bordercolor="aqua" width="50%" >
<caption>
标签:表格的标题
<caption><font color="blue">公司员工信息</font></caption>
设置样式:<thead><tbody><tfoor>
rowspan 合并行,colspan和并列
<thead>
//行<tr> 列<td>. valign 垂直对齐
<tr align="right" valign="top">
//th表示标题,自动居中、加粗
<th>编号</th>
<th>姓名</th>
<th>工资</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" valign="bottom" bgcolor="aqua">12</td><td>12</td>
<td>张三</td>
<td>1500</td>
</tr>
</tbody>
</table>
隐藏域
<input type="hidden" name="deptno" value="10" />
cellspacing 和 cellpadding
表单元素 表单标签都是内联,不换行.
标签<form>:<input><textarea><select><button>
文本框 & 密码框 :标签<input>
// <!--value="请输入用户名"-->
//value默认值,size文本框长度,placeholder自动消失,readonly只读
//method 默认get
<form name="myform" action="index.html" method="get">
用户名<input type="text" name="uname" size="5" placeholder="哦哦哦" readonly="readonly"/>
<br/>
密码 <input type="password" name=" upass" size="2" maxlength="5" onshow=""/>
</form>
method
get在地址栏上显示传送的值,信息不安全,地址栏有限,传送的值有限。检索快(baidu/google 搜索)
post不会在地址栏上显示信息安全(账号、用户名和密码)
文件输入框 & 多行文本框 & 注册按钮:标签<textarea>
上传文件:`<input type="file" name="myfile" />`
//多行文本框
//&# 13;文本内容换行符
个人介绍:`<textarea name="info" cols="30" rows="10">my info</textarea>`
复选框 & 单选框
默认选中 checked
爱好:<input type="checkbox" name="aihao" value="java"/>java
<input type="checkbox" name="aihao" value="C" checked="checked"/>C
<input type="checkbox" name="aihao"value="html"/>html
没有name,男女能同时勾选
性别:<input type="radio" value="男" name="sex"/>男
<input type="radio" value="女" name="sex"/>女
下拉列表 :标签<select>
//selected="selected"默认位置
//multiple="multiple"平铺,size依次显示的个数
城市:
<select name="city" multiple="multiple">
<optgroup label="南方">
<option value="shanghai">上海</option>
</optgroup>
<optgroup label="北方" >
<option value="beijing" selected="selected">北京</option>
<option value="dalian">大连</option>
</optgroup>
</select>
按钮<button>
//注册按钮(默认文本是提交)
<input type="submit" value="注册"/>
//普通按钮
<input type="button" value="普通按钮" />
//重置按钮
<input type="reset" />
//图片按钮
<input type="image" src="img/lg.png" width="100" height="80">
<button>按钮</button>
readonly :只读
disabled :值不会传到服务器,不能被Tab选中。
<a href="emps.html" target="_blank">_blank</a>
<a href="emps.html" target="_parent">parent</a>
<a href="emps.html" target="_self">_self</a>
<a href="emps.html" target="_top">_top </a>
<a href="emps.html" target="_search">_search</a>
<frameset rows="500,*">
<frameset cols="1000,*"/>
<frameset rows="150,*">
<frame src="blue.html"/>
<frame src="green.html" name="main" />
</frameset>
<frame src="bblue.html" />
</frameset>
<frame src="red.html" />
</frameset>
<a href="emps.html" target="main">跳转</a>
建议使用 <iframe>
<table border="1">
<tr>
<td colspan="2"><a href="emps.html" target="youxia"> 跳转 </a></td>
</tr>
<tr>
<td></td>
<td><iframe src="green.html" name="youxia"></iframe></td>
</tr>
</table>
滚动字幕<marquee>
loop滚动次数,behavior滚动方式
scrollamount滚动速度,scrolldelay滚动间隔毫秒数
οnmοuseοver=“this.stop()” 鼠标碰上停止
οnmοuseleave=“this.start()” οnmοuseοut=“this.start()” 鼠标碰上停止,离开继续
//来回走
<marquee behavior="alternate" scrollamount="15" loop="2" >hello 杨吉吉</marquee>
//循环走
<marquee behavior="scroll" direction="right" onmouseover="this.stop()" onmouseout="this.start()" >hello 杨吉吉</marquee>
//到头就停
<marquee behavior="slide" direction="down" scrollamount="50" width="500px" height="500px"><img src="img/1.jpg" width="50" height="45" /> </marquee>
有序列表 ol>li 属性:start设置起始数字(1,A,a,I,i),type设置样式
无序列表 ul>li 属性:type设置样式(circle空心圆、disc小黑点,square 黑色方块)
可以嵌套
<ol type="a" start="2">
<li>有序</li>
<li>有序</li>
<li>有序</li>
</ol>
段落相关标记
<address>标志文档中的地址(斜体)</address>
<blockquote>段落缩进</blockquote>
所见即所得<pre>
<pre>
void(){
printf("helloworld!");
}
</pre>
----------
void(){
printf("helloworld!");
}
<map>
<img usemap="map" src=img/1.jpg">
<map name="map">
<area shape="rect" coords="200,50,100,80" href="http://www.sina.com.cn">
<area shape="circle" coords="200,100,50" href="http://www.baidu.com.cn">
<area shape="poly"> coords="112,22,33,12,144,78" href="...">
</map>
CSS 级联样式表
采用样式表覆盖掉浏览器默认效果
优先级:行内 > 内嵌 ( id > class > html )>外部
样式表的分类:
1.行内样式表:标签内部的style
<p style="color: blueviolet;font-size: large;font-weight: 800; text-align: center; font-family: comic sans ms;">这个段落有样式</p>
2.内嵌样式表:
- html 选择器
<head>
<style type="text/css" >
input{
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom-color:black;
}
table{
border-color: chartreuse;
border-width: 500;
border-bottom-color: crimson;
}
</style>
段落标签 <div>
(层)
//block和之前一样,none 不显示,inline 不换行
div{
color: #DC143C;
line-height: 3;
display: block;
text-align: center;
letter-spacing:20px;字间距
text-decoration:underline;文字修饰
text-transform:uppercase/lowercase 英文大写/小写
}
<div style="display: inline">
ahhahahahah
bbbbb
</div>
body{
background: #7FFF00;
background-image: url(img/img/2.jpg) ;
//不平铺
background-repeat-x: no-repeat;
//左上角的左边距
background-position: 100px 100px;
}
id选择器
#myfire{
color:yellow;
}
用户名:<input type="text" class="myinput" id="myfire">
id比class优先级高
class选择器
<style type="text/css">
.myinput{
border: #7FFF00 2px solid;
框的颜色
background: #DC143C;
文本的颜色
color: blue;
}
</style>
--------------------------
<body>
用户名:<input type="text" class="myinput">
密码: <input type="text" class="myinput">
<input type="password">
</body>
3.外部样式表
.css 文件 (两种引入方式)
-- <link rel="stylesheet" href="css/外部样式.css"
-- <style type="text/css">
@import url("css/外部样式.css");
</style>
---------外部样式.css
input{
background: deeppink;
}