资源分类
1.静态资源:使用静态网页开发技术发布的资源.所有用户访问得到的结果一样HTML,CSS,JavaScript
HTML:用于搭建基础网页,展示页面内容
CSS:用于美化页面,布局页面
JavaScript:控制页面的元素,让页面有一些动态的效果
2.动态资源:使用动态网页及时发布的资源.所有用户访问得到的结果可能不一样.jsp/servlet,php,asp
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给游览器
概念
1.HTML,即Hyper Text Makeup Language 超文本标记语言
超文本使用超链接的方法,将各种不同空间的文字信息交织在一起的网状文本.标记语言由标签构成的语言.*<标签名称>*如html,xml,标签语言不是变成语言.
快速入门
<html>
<head>
<title>title</title>
</head>
<body>
<font color='red'>Hello World</font><br/>
<font color='green'>Hello World</font><br/>
</body>
</html>
1.html文档的后缀:.html或 .htm
2.标签分为(1)围堵标签:有开始和结束标签,如< html >< /html >(2)自闭和标签:开始和结束标签在一起,如 < br/ >
3.标签可以嵌套
需要正确嵌套,不能你中有我,我中有你
<!--错误-->
<a><b></a></b>
<!-正确>
<a><b></b></a>
4.在开始标签中可以定义属性.属性是由键值对构成,值需要使用引号(单双都可)引起来
5.html的标签不区分大小写,但是建议使用小写
标签
文本标签
| 标签 | 作用 |
|---|---|
| < html > | html文档的根标签 |
| < head> | 头标签.用于指定html文档的一些属性.引入外部资源 |
| < title > | 标题标签 |
| < body> | 体标签 |
| < ! DOCTYPE html> | html5中定义该文档是html文档 |
| < !-- 注释内容-- > | 注释 |
| < h1 > to < h6 > | 标题标签 |
| < br > | 换行标签 |
| < hr > | 水平线,属性:color 颜色 width 宽度 size 高度 align 对齐方式 |
| < b > | 字体加粗 |
| < i> | 斜体 |
| < font> | 文字属性 |
| < center > | 居中标签 |
属性定义:
color
1.red,green,blue
2.rgb(value 1,value2,value3) value range:0-255
3.#value1value2value3 value range:00-FF
width
1.width=‘20’ 单位默认px(像素)
2.width= % 占比相对于父元素的比例
图片标签
<!--显示一张图片-->
<!-绝对路径->
<img src="image/jingxuan_2.jpg" align="right" alt="Mark" width="500" heigth="500"/>
<!-相对路径->
<img src="./src/image/mark.jpg">
<img src="../src/image/mark.jpg">
列表标签
| 标签 | 作用 |
|---|---|
| 有序标签 | < ol > |
| 元素 | < li > |
| 无序标签 | < ul > |
<!--有序列表-->
<ol type="A" start="5">
<li>登录CSDN</li>
<li>进入博文管理</li>
<li>写笔记</li>
<li>发布文章</li>
</ol>
<!--无序列表-->
<ul type="cycle" >
<li>登录CSDN</li>
<li>进入博文管理</li>
<li>写笔记</li>
<li>发布文章</li>
</ul>
链接标签
用来定义一个超链接
属性(1)href 指定访问资源的URL(统一资源定位符)(2)target 指定打开资源的方式 _self:默认值,在当前页面打开;_black:在空白页面打开
<a href="www.baidu.com">TEST</a>
<a href="www.baidu.com" target="_self">TEST</a>
<a href="www.baidu.com" target="_blank">TEST</a>
<a href="./test.html">TEST</a>
<a href="mailto:www.baidu.com">TEST</a>
<a href="www.baidu.com"><img src="image/1.jpg"></a>
div和span
div: 每个div占满一整行.块级标签
span:文本信息在一行展示,行内标签 内联标签
表格标签
表格属性
width 宽度
border 边框
cellpadding 定义内容和单元格的距离
cellspacing 定义单元格之间的距离.如果指定为0,则单元格的线会合为一条
| 标签 | 作用 |
|---|---|
| < table > | 定义表格 |
| < tr > | 定义行 |
| < td > | 定义单元格 |
| < th > | 定义表头单元格 |
| < caption > | 表格标题 |
| < thead > | 表示表格的头部分 |
| < tbody > | 表示表格的体部分 |
| < tfoot > | 表示表格的脚部分 |
表单标签
概念:用于采集用户输入的数据,与服务器进行交互
form:用于定义表单,可以定义一个范围,范围代表采集用户数据的范围
属性
action:指定提交数据的URL
method:指定提交方式
分类:一共7种,2种比较常用
get() :请求参数会在地址栏中显示,请求参数有限制,不安全
post() :请求参数不会在地址栏中显示.会封装在请求体中.
表单项中的数据想被提交:必须指定其name属性,请求参数无限制,安全
| 标签 | 作用 |
|---|---|
| input | 可以通过type属性值,改变元素展示的形式 |
| select | 下拉列表 |
| textarea | 文本域 |
input
text:文本输入框,input type默认值
palceholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
password密码输入框
<form action="#" method="post">
用户名:<input name="username"><br>
密码:<input name="password"><br>
<input type="submit" value="登录">
</form>
radio:单选框
注意:1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样.
2.一般会给每一个单选框提供value值,指定其被选中后提交的值
3.checked属性,可以指定默认值
checkbox:多选框
注意:1.一般会给每一个单选框提供value值,指定其被选中后提交的值
2.checked属性,可以指定默认值
<form action="#" method="get">
用户名:<input type="text" name="username" placeholder="请输入用户名"><br>
密码:<input type="password" name="password" palceholder="请输入密码"><br>
性别:<input type="radio" name="gender" value="female"> 男
<input type="radio" name="gender" value="female"> 女
爱好:<input type="checkbox" name="hobby" value="JAVA"> 学Java
<input type="checkbox" name="hobby" value="BLOG"> 写博客
<input type="checkbox" name="hobby" value="CSDN"> 逛CSDN
<br>
<input type="submit" value="登录">
</form>
label:指定输入项的文字描述信息
注意:label的for属性一般会和input的id属性匹配.如果对应了,则点击label区域,会让input输入框获取焦点.
<lamble for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"> <br>
file:文件选择框
<input type="file" name="file"><br>
hidden:隐藏域,用于提交一些信息.
<input type="hidden" name="id" value="aaa"><br>
按钮:submit:提交按钮,可以提交表单.
button:普通按钮(无法提交)
image:图片提交按钮 src属性指定图片的路径
<input type="submit" value="登录">
<input type="button" value="普通按钮">
<input type="image" src="img/mark.jpg">
select
下拉列表,子元素option,指定列表项
<select name="province">
<option value="">--请选择--</option>
<optioan value="1">北京</option>
<optioan value="2">上海</option>
<optioan value="3" selected>陕西</option>
</select>
textarea
cols 指定列数,每一行有多少个字符
rows 指定行数
<textarea cols="20" rows="5" name="des"></testarea>
html5新特性
取色器
<input type="color" name="color">
生日
<input type="data" name="birthday">
邮箱
用来校验邮箱格式是否正确
<input type="eamil" name="email">
案例
完成如下表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label> </td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label> </td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label> </td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label> </td>
<td><input type="text" name="name" id="name"></td>
</tr>
<td><label for="tel">手机号</label> </td>
<td><input type="text" name="name" id="tel"></td>
</tr>
<td>性别</td>
<td><input type="radio" name=name" id="male">男
<input type="radio" name="name" id="female">女
</td>
</tr>
<td><label for="birthady">出生日期</label> </td>
<td><input type="text" name="birthday" id="birthady"></td>
</tr>
<td><label for="checkcode">验证码</label></td>
<td><input type="text" name="checkcode" id="checkcode"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
