Web开发网站-02
目录
1 超链接
- 标签<a href=",,," "target="...">教育网</a>
- 属性:
href:指定资源访问的url
target:指定在何处打开资源链接
_self:默认值,在当前页面打开
_blank:在空白页面打开
2 css属性
text-decoration:规定添加到文本的修饰,none表示定义标准的文本
font-size:设置字体大小
color:定义文本的颜色
line-height:设置行高
text-indent:定义第一行内容的缩进
text-align:规定元素中的文本的水平对齐方式
3 视频
- 视频标签:<video>
src:规定视频的url
controls:显示播放控件
width:播放器的宽度
height:播放器的高度
4 音频
- 音频标签:<audio>
src:规定音频的url
controls:显示播放器控件
5 段落/换行
- 段落标签:<p>
- 换行 <br>
6 文本加粗
- 文本加粗标签<b> / <strong>
注意:在html中无论输入多少个空格,只会显示一个。尅使用空格占位符:
7 页面布局
- 盒子:页面中所有的元素(标签),都可以看作是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
- 盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)。
8 布局标签
- 布局标签:实际开发网页中,会大量频繁的使用div和span这两个没有语义的布局标签。
- 标签<div><span>
- 特点:
-
div标签:
- 一行只显示一个(独占一行)
- 宽度默认是父元素的宽度、高度默认由内容撑开
- 可以设置宽度(width、height)
-
span标签:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置高度(width、height)
-
div标签:
9 盒子模型CSS属性
- width:设置宽度
- height:设置高度
- border:设置边框的属性,如:1px solid #000;
- padding:内边框
- margin:外边框
注意:如果只需要设置某一个方位的边框、内边框、外边框,可以在属性名后加上 -位置,如:padding-top、padding-left、padding-right...
10 表格、表单标签
表格标签
- 场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表
- 标签
标签 | 描述 | 属性/备注 |
<table> | 定义表格整体,可以包裹多个<tr> | border:规定表格边框的宽度 width:规定表格的宽度 cellspacing:规定单元格之间的空间 |
<tr> | 表格的行,可以包裹多个<td> | |
<td> | 表格单元格(普通),可以包裹内容 | 如果是表头单元格,可以替换为<th> |
表单标签
- 场景:在网页中主要负责数据采集功能,如 注册、登录等数据采集。
- 标签 <form>
- 表单项:不同类型的input元素、下拉列表、文本域等。
- <input>:定义表单项,通过type属性控制输入形式
- <select>:定义下拉列表
- <textarea>:定义文本域
注意:表单项必须有name属性才可以提交 。
- 属性
- action:规定当提交表单时向何处发送表单数据,url
-
method:规定用于发送表单数据的方式。get、post
-
get:表单数据拼接在url后面,?username=java,大小有限制
- post:表单数据在请求体中携带,大小没有限制
-
get:表单数据拼接在url后面,?username=java,大小有限制
<input>的type属性 |
描述 | 形式 |
text |
默认值,定义单行的输入字段 | |
password | 定义密码字段 | |
radio | 定义单选按钮 | |
checkbox | 定义复选框 | |
file | 定义文件上传按钮 | |
date/time/datetime-local | 定义日期/时间/日期时间 | |
number | 定义数字输入框 | |
定义邮件输入框 | ||
hidden |
定义隐藏域 | |
submit/reset/button | 定义提交按钮/重置按钮/可点击按钮 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html-表单</title>
</head>
<body>
<!-- form表单属性:
action:表单提交的url,往何处提交数据。
method:表单提交方式
get:在url后面拼接表单数据,比如:?username=Tom&age=12,url长度有限制。默认值
post:在消息体(请求体)中传递的,参数大小无限制的。
-->
<form action="" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"><br><br>
性别:<label ><input type="radio" name="gender" value="1">男</label>
<label ><input type="radio" name="gender" value="2">女</label><br><br>
爱好: <label><input type="checkbox" name="hobby" value="java">java</label>
<label><input type="checkbox" name="hobby" value="game">game</label>
<label><input type="checkbox" name="hobby" value="sing">sing</label>
<br><br>
图像:<input type="file" name="image"> <br><br>
生日:<input type="date" name="birthday"> <br><br>
时间:<input type="time" name="time"> <br><br>
日期时间:<input type="datetime-local" name="datetime"> <br><br>
邮箱:<input type="email" name="email"> <br><br>
年龄:<input type="number" name="age"> <br><br>
学历: <select name="degree" >
<option value="">---------请选择---------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select><br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea><br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>
以上示例代码!
上一篇: Web开发网站-03
下一篇: 网站系统开发中的用户