课程目标
掌握 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;
}
原创文章 2
获赞 2
访问量 282