HTML中常用的标签
文字标签:修改文字的样式
-<font></font>
-属性:
*size:文字的大小 取值范围 1-7 ,超过了7,默认还是7
*color:文字颜色
--两种表示方法
** 英文单词: red green blue black white yellow gray...
** 使用十六进制数表示 #ffffff : RGB
- 通过工具实现不同的颜色
注释标签:
-注释标签<!-- 注释-->
标题标签:
<h1></h1> <h2></h2>......<h6></h6>
- 从h1到h6,大小逐渐变小 同时会自动换行
水平线标签:
- <hr/>
-属性
**size :水平线的粗细 取值范围1-7
**color:颜色
代码:
<hr size="4" color="pink" />
特殊字符
- 想要在页面显示这样的内容 :<html>:这是这是网站的开始!
- 需要对特殊字符进行转义:
< : <
> : >
空格:
&: &
列表标签:
- 比如需要这样的效果
传智播客
财政部
学工部
人事部
**<dl> </dl>:表示列表的范围
**在dl里面:<dt></dt>:上层结构
**在dl里面:<dd></dd>:下层标签
代码:
<dl>
<dt>传智播客</dt>
<dd>财政部</dd>
<dd>学工部</dd>
<dd>人事部</dd>
</dl>
- 想要在页面上显示这样的效果
- 财政部
- 学工部
- 人事部
- 财政部
- 学工部
- 人事部
** <ol></ol>:有序列表的范围
-属性 type: 这只排序方式 1(默认是),a,i
**在ol标签里面 <li>具体内容</li>
代码
<ol>
<li>财政部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
-想要在页面上显示这样的效果
特殊符号(方框)财政部
特殊符号(方框)学工部
**<ul></ul>:表示无需列表的范围
属性:type: circle(空心圆),disc(实心圆),square(实心方块)[默认是disc]
在ul里面 <li></li>
代码:
<ul>
<li>财政部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
图像标签
<img src = “图片的路径”/>
- 属性
-src :图片的路径
-width:图片的宽度
-height:图片的高度
-alt:当图片不能正常显示时 替代的文字
-title:当鼠标移动到图片上显示的文字
超链接标签
*链接资源
- <a href = “链接到的资源的路径”>显示在页面的内容</a>
** href:链接的资源的地址
**target:设置打开的方式,默认是在当前页面打开
-- _blank:在一个新窗口打开
-- _self:在当前页面打开 (默认是这种)
- 当超链接不需要到任何的地址,在href里面只输入‘#’就可以了
*定位资源
**如果想要定位资源:需要定义一个位置
- <a name = “top”>顶部</a>
**回到这个位置
- <a href = “#top”>回到顶部</a>
**引入一个标签 pre :原样输出
表格标签
可以对数据进行格式化,使数据显示更加清晰
<table></table>:表示表格的范围
属性:
-border:表格线粗细
-bordercolor:表格线的颜色
-cellspacing:单元格之间的距离
-width:表格的宽度
-height:表格的高度
在table里面<tr></tr>:表示行
-设置显示方式align:left center right
在tr里面<td></td>:表示行中的单元格
-设置显示方式align:left center right
使用th也可以表示单元格
表示是加粗和居中
表格的标题
<caption></caption>
合并单元格
-rowspan:跨行
-colspan:跨列
<tr><td colspan="4">函数上</td></tr>
表单标签
提交数据到网站,这个过程可以使用表单实现
<form></form>:定义一个表单的范围
属性:
-action:提交到的地址,默认是当前页面
-method:表单提交方式
-常用的有两种 get和post 默认是get
面试题目:get和post区别
- get请求地址栏会携带提交的数据,post不会携带
- get请求安全级别低,post级别高
- Get请求数据大小有限制,post没有限制
-enctype:一般不需要,做文件上传时候需要设置这个属性
输入项:可以输入内容或者选择内容的部分为了提交 每一个输入项需要加入name选项
大部分输入项可以使用 <input type=”输入项的类型”/>
普通输入项:<input type=”text”/>
密码输入项:<input type=”password”/>
单选输入项:<input type=”radio”/>
-在这里面需要属性 name
-name的属性值要相同
-必须要有一个value值
实现默认选中的属性
- checked=”checked”
复选输入项:<input type=”checkbox”/>
-在这里面需要属性 name
-name的属性值要相同
-必须有一个value值
实现默认选中的属性
- checked=”checked”
文件输入项
<input type=”file”/>
下拉输入项:不是在input标签里面的
默认选择某一个的属性是 selected=”selected”
<select name=”birth”>
<option value=”1991”>1991</option>
<option value=”1992”>1992</option>
<option value=”1993”>1993</option>
<option value=”1996”>1996</option>
</select>
文本域
<textarea cols=”” rows=””></textarea>
隐藏项(不会显示在页面上)
<input type=”hidden”/>
提交按钮
<input type=”submit” value=””/> :通过value可以修改按钮的值
使用图片提交
<input type=”image” src=”图片路径”/>
重置按钮
<input type=”reset” value=””/>通过value可以改变按钮的值
普通按钮
<input type=”button” value=”普通按钮”/>
案例:
提交注册信息的网页:log.html
其他常用标签
-- b s u i pre sub sup div span
- b:加粗
-s: 删除线
-u:下划线
-i:斜体
-pre:原样输出
-sub: 下标
-sup:上标
-div:分块并自动换行
-span:在一行显示,不换行
-p:段落标签,比br标签多换一行
HTML的头标签的使用
HTML由两部分组成 head和body
在head里面的标签就是头标签
- title标签:表示在网页的标题
-meta标签:设置页面的基本信息<meta http-equiv=”refresh” content=”3;url=http://www.baidu.com”/>三秒后自动跳转到百度界面
-base标签:统一设置超链接的基本设置
-可以统一设置超链接的打开方式<base target=”_blank”/>
-link标签:引入外部文件
框架标签的使用
<frameset>
- rows:按照行进行划分
<frameset rows=”80,*”>
- cols:按照列进行划分
<frameset cols=”80,*”>
<frame>
显示具体的页面
<frame name=”lower_left” src=”hello.html”>
使用框架标签时,不能卸载body里面,使用了框架标签,需要把body去掉