一、基础标签补充
1、div 标签和span标签 (没有特别的样式,常用)
div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
<div>我是div</div>
<div>我是div</div>
<div style="width:100%;height :80px;background-color:red">
<div style="width:50%;height :30px;background-color:yellow"></div>
<div style="width:50%;height :50px;background-color:green"></div>
</div>
<span>我是span<span>我是span</span></span>
<span>我是span</span>
<span>我是span</span>
2、img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽"
height="高(宽高两个属性只用一个会自动等比缩放)">
建议尽量使用本地图片!!!
3、a标签 (超链接标签)
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
(1)href属性指定目标网页地址。该地址可以有几种类型:
- 绝对路径跳转:指向另一个站点(比如:href="http://www.baidu.com")
- 相对URL - 指当前站点中确切的路径(href="index.htm")
- 锚URL:在本页面跳转(#top 、#id)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#sb">跳到sb哪里</a>
<a href="#sb1">跳到sb1哪里</a>
<div style="width: 100%;height: 1600px;background-color: aqua;"></div>
<p id="sb">来这里呀</p> <div style="width: 100%;height: 1000px;background-color: red;"></div>
<a name="sb1">come on!</a>
</body>
</html>
锚的制作示例
(2)target属性:
- _blank表示在新标签页中打开目标网页
- _ self表示在当前标签页中打开目标网页
3、列表
(1)无序列表(ul)
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:
(1)disc(实心圆点,默认值)
(2)circle(空心圆圈)
(3)square(实心方块)
(4)none(无样式)
(2)有序列表(ol)
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>
type属性: start是从数字几开始
1 数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
4、标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
5、表格(重点)
表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
<table border='1'>
<thead> #标题部分
<tr> #一行
<th>序号</th> #一个单元格
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody> #内容部分
<tr> #一行
<td>1</td> #一个单元格
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
属性:
- border: 表格边框.
- cellpadding: 内边距 (内边框和内容的距离)
- cellspacing: 外边距.(内外边框的距离)
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)
效果:
二、特殊字符
内容 | 对应代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权标识(写公司网站的时候会用到) | © |
注册(一个圆圈里面有个R) | ® |
简单展示几个:其他的请直接百度搜 html特殊符号对照表
三、标签嵌套原则
1、块级标签:该标签独占一行;如(p,h1-h6,hr、div)
内联标签:该标签不独占一行;如(b, i,u,s)
2、通常情况:
- 块级元素可以包含内联元素和部分块级元素;
- 内联元素不能包含块级元素,可以包含某些内联元素
注意:p标签比较特殊,嵌套的时候嵌套部分有多少部分数据就显示多少段。
四、input 标签
1、用户输入 type="text"
2、密码(密文)输入:type="password"
3、日期输入:type="data"
4、单选框:type="radio"
5、复选框:type="checkbox"
6、提交:type="submit"
7、普通按钮:type ="button"
8、重置:type="reset"
9、隐藏按钮:type ="hidden"
10、文件:type="file"
表格汇总:
type属性值 | 表现形式 | 对应代码 |
---|---|---|
text | 单行输入文本 | <input type=text" /> |
password | 密码输入框(不显示明文) | <input type="password" /> |
date | 日期输入框 | <input type="date" /> |
checkbox | 复选框 | <input type="checkbox" checked="checked" name='x' /> |
radio | 单选框 | <input type="radio" name='x' /> |
submit | 提交按钮 | <input type="submit" value="提交" /> #发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新 |
reset | 重置按钮 | <input type="reset" value="重置" /> #页面不会刷新,将所有输入的内容清空 |
button | 普通按钮 | <input type="button" value="普通按钮" /> |
hidden | 隐藏输入框 | <input type="hidden" /> |
file | 文本选择框 | <input type="file" /> (等学了form表单之后再学这个) |
属性说明:
- name:表单提交时的“键”,注意和id的区别
- value:表单提交给服务器的时对应项的值
- type="button", "reset", "submit"时,为按钮上显示的文本年内容
- type="text","password","hidden"时,为输入框的初始值
- type="checkbox", "radio", "file",为输入相关联的值
- checked:radio和checkbox 设置默认选中值
- readonly:text和password设置只读
- disabled:设置不可更改,相当于冻结输入窗口
五、form标签(实现用户与服务器交互)
**记住form表单里面有两个属性:action控制往哪里提交数据、method控制用什么方式提交。
1、功能:用于向服务器传输数据,从而实现用户与服务器的交互
表单中可以包含input标签,比如:文本字段、复选框、单选框、提交按钮等
表单还可以包含textarea、select、fieldset和 label标签。
2、表单属性大全
属性 | 描述 |
---|---|
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集)。 |
action | 规定向何处提交表单的地址(URL)(提交页面)。 |
autocomplete | 规定浏览器应该自动完成表单(默认:开启)。 |
enctype | 规定被提交数据的编码(默认:url-encoded)。enctype="multipart/form-data" |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET)。 |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标(默认:_self)。_blanck |
3、简单的盗号原理
method=“get"
method="post"
时常听到别人号被盗了,被盗的原理应该就是在这里。当你登陆别人的私密连接的时候,你的信息就在别人的服务器接收到了你的账号密码的信息,他们将信息提取出来,就可以登陆你的账号了。私密链接最好不好打开哦。
4、form书写规范
5、文件提交信息
六、select 标签 (下拉选择框)
<form action="http://127.0.0.1:8001" method="post">
<select name="city" id="">
<option value="1">北京</option>
<option value="2" selected="selected">深圳</option>
<option value="3">上海</option>
</select> <input type="submit" value="提交">
</form>
select 代码
七、labal标签
1、定义:<label> 标签为 input 元素定义标注(标记)如果不用这个label给input标签一个标记,input会变黄
2、标签添加的两种方法
方法一:添加id索引
方法二:把需要添加的内容包裹在label标签内部
八、text多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
属性说明:
- name:名称
- rows:行数 #相当于文本框高度设置
- cols:列数 #相当于文本框长度设置
- disabled:禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8001" method="get"> <div>
<!--给id="uname"的元素添加标签-->
<label >用户名: <input type="text" name="username" placeholder="此处账户输入" >
</label>
</div> <div>密码:
<input type="password" name="passwd" >
</div> <div>日期:
<input type="date" name="date">
</div> <div>时间:
<input type="time" name="time">
</div> <div>单选框:
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2"> 女 </div> <div>复选框: <input type="checkbox" name="hobby" value="1"> 女
<input type="checkbox" name="hobby" value="2">电影
<input type="checkbox" name="hobby" value="3"> 人妖
<input type="checkbox" name="hobby" value="4"> 大宝剑
</div>
<!--提交-->
<div>请选择城市:</div>
<!--<select name="citys" id="" multiple>-->
<select name="citys" id=""> <option value="1">深圳</option>
<option value="2" selected>北京</option>
<option value="3">上海</option>
</select> <div>
<input type="submit" value="确认">
</div> <!--button:--> <div>
<input type="button" value="普通按钮">
</div> <div>
<input type="reset" value="重置sb">
</div> <div>
<input type="hidden" value="alex is a big boss" >
</div> <div>
<input type="file" >
</div> </form> <!--下拉选择框-->
<form action="http://127.0.0.1:8001" method="post">
<select name="city" id="">
<option value="1">北京</option>
<option value="2" selected="selected">深圳</option>
<option value="3">上海</option>
</select> <div>
<textarea name="textbox" id="tt" cols="30" rows="10"></textarea>
</div>
<div><input type="submit" value="提交"></div> </form> </body>
</html>
input、select、form、textarea演示代码