教你快速上手HTML
教你快速上手HTML
1、<head>
头信息的作用
(1)可以设置网页的标题
(2)可以通知浏览使用指定的码表解释html页面
(3)content:搜索关键字
2、图片展示
(1)<img src="" alt=""/>
img标签常用的属性:
width: 设置图片宽度
height 设置图片高度
alt: 如果图片资源无法找到,就显示对应的文字对图片进行说明
(2)相对路径
以.开头的路径
./:代表当前目录
../:代表上一级目录
3、超链接
<a href="#">点我</a>
(1) 常用的属性
href : 用于指定链接的资源
target: 设置打开新资源的目标: _Blank 在独立的窗口上打开新资源 _self 在当前窗口打开新资源
(2)原理
href属性值如果是以http开头的,那么浏览器会马上启动http解释器去解释该网址,首先会在本地机器去找一个hosts文件, 如果在hosts文件上该域名没有对应的主机,那么浏览器就去到对应的dns服务器去寻找该域名对应的主机号。如果找到了对应的主机,那么该请求就会发给对应的主机。
如果a标签的href属性值没有以任何协议开头,那么浏览就会启动file协议解释器去解释该资源路径。
href属性值并不是以http开始,而且其他 的一些协议,那么这时候浏览器就回去到我们本地的注册表中去查找是否有处理这种协议 的应用程序,如果有,那么马上启动该应用程序处理该协议。
(3)
邮件 的协议: mailTo
迅雷的协议: thunder
如果有需要请发送邮件至:<a href="mailTo:123456@qq.com">123456@qq.com</a><br/>
4、常用标签
<h1>~<h6> 表示是一个标题
<p> 段落标签
<hr/> 水平线标签
<br/> 换行标签
<sub> 下标
<sup> 上标
<pre> 原样标签: 原样标签会保留空格和换行符
<ol> <li> 有序的列表标签
<ul> <li> 无序的列表标签
行内标签(span) 文本信息在一行展示,行内标签 内联标签
块标签<div> div标签的内容会独立占一行
5、html的标签作用
(1)用于描述一个网页的结构的
(2)标签的类型:
有开始标签与结束标签 <p> </p>
开始标签与结束标签都是在一个标签体内的, <hr/> 功能单一不需要封装数据到标签中。
6、实体标签
(1)因为> < 等一些符号在html页面中是有着特殊含义,这些字符如果需要在页面中显示,这时候就应该使用实体标签
(2)常用的实体字符:
空格
小于号 <
大于号 >
人民币 ¥;
版权 ©
商标 ®
7、媒体标签
(1)<embed>
标签
<embed></embed>
hidden : 设置隐藏插件是否隐藏
src :用于指定音乐的路径
<embed src="1.mp3" ></embed>
(2) <marquee>
飘动标签
direction : 指定飘动的方向
scrollamount : 指定飘动的速度
loop :指定飘动的次数
8、file
file协议(文件协议)这种协议主要是用于搜索本地机器的资源文件的
9、table
(1)表格标签
<table> 表格
<tr> 行
<td> 单元格
<th> 表头 默认的样式是居中,加粗
<caption> 表格的标题
(2) 常用的属性
border 设置表格的边框
width : 设置表格的宽度
height: 设置表格的高度的
colspan: 设置单元格占据指定的列数
rowspan : 设置单元格占据指定的行数
10、form表单标签
(1) 表单标签的作用是用于提交数据给服务器的
(2)表单标签的根标签是标签
(3)常用的属性
action: 该属性是用于指定提交数据的地址
method: 指定表单的提交方式
get : 默认使用的提交方式, 提交的数据会显示在地址栏上
post : 提交的数据不会显示在地址栏上
(4)注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值
11、框架标签
(1)frameSet : 一个frameSet可以把一个页面切割成多份,只能按照行或者列切割,不能用于body标签体内容
(2) frame 不能被切割的, frame是位于frameSet中。
(3) iframe: 在一个网页中分隔一部分的位置显示另外一个网页的的信息。