一、html的规范
1、一个html文件开始标签和结束标签<html>
</html>
2、html包含两部分内容
<head>设置相关信息</head>
<body>显示在页面上的内容</body>
3、html标签有开始标签,也必须要有结束标签。
4、html标签不区分大小写
5、有些标签没有结束标签,比如<br>换行标签
,这时我们需要在标签内结束,可以这样写<br/>
。
二、body中的常用标签
1、文字标签
<font></font>
属性有:size
、color
color
属性推荐使用十六进制表示法表示
2、注释标签
<!--注释内容-->
注释内内容不会显示在页面中,但是会出现在源代码中。
3、标题标签
<h1>标题内容</h1>
、<h2>标题内容</h2>
、…….<h6>标题内容</h6>
从1~6标题字体越来越小,标题标签自动换行
4、水平线标签
<hr/>
属性有:size
、color
5、特殊字符标签
想要在页面上显示这样的内容:<html>:是网页的开始
我们会发现不能直接在标签中写这句话,这时候就需要对特殊字符进行转义
这里列举一些转义字符:
<
:<
>
:>
空格
:
&
:&
"
:"
6、列表标签
<dl>表示列表的范围</dl>
<dt>主内容</dt>
<dd>附属内容</dd>
这里的标签不太好理解,所以写一个例子:
<dl>
<dt>水果</dt>
<dd>西瓜</dd>
<dd>橘子</dd>
</dl>
7、有序列表标签
<ol>表示列表的范围</ol>
属性:type可以控制有序列表的样式
<li>主内容</li>
例子:
<ol>
<li>西瓜</li>
<li>橘子</li>
</ol>
同样的还有无序列表的标签,写法和有序的是一样的:
<ul>表示列表的范围</ul>
属性:type可以控制无序列表的样式
<li>主内容</li>
8、图像标签
<img src="图片路径"/>
属性有:src图片的路径
、width图片的宽度
、height图片的高度
、alt图片路径错误后显示的解释文字
这里把路径重点介绍一下,路径分为绝对路径和相对路径:
绝对路径:
从盘符开始到文件所在目录的路径为绝对路径,或者网络路径,例如:
c:\Users\img\a.jpg
http://www.baidu.com/b.jpg
相对路径:
一个文件相对于另一个文件的位置,分为三种:
(1)html文件和图片在一个路径下,可以直接写文件名称,例如:<img src="a.jpg/>"
(2)图片在html的下层目录,例如:
C:\User\aa.html
:html文件
C:\Users\img\a.jpg
:图片文件
<img src="img\a.jpg"/>
(3)图片在html文件的上层目录,例如:
C:\User\html\aa.html
:html文件
C:\Users\a.jpg
:图片文件
../
:表示上层路径
<img src="../a.jpg"/>
9、超链接标签
链接资源:
<a href="链接到资源的路径">显示在页面上的内容</a>"
属性有:
href
:链接到资源的路径,如果那也不跳转的话可以设置为href="#"
。
target
:设置打开方式,默认是在本页面打开,可以设置为—_blank在新窗口打开
,_self在本页面打开
。
定位资源:
如果想要定位资源,需要定义一个位置
<a name="top">顶部</a>
回到这个位置
<a href="#top">回到顶部</a>
10、原样输出标签
<pre>需要原样输出的内容</pre>
11、表格标签
<table>表格的范围</table>
属性:
border
:表格线的粗细
bordercolor
:表格线的颜色
cellspacing
:单元格直接的距离
width
:表格的宽度
height
:表格的高度
<tr>行标签</tr>
属性:
align
:设置对齐方式,可以设置为left
、crnter
、right
。
<td>单元格</td>
属性:
align
:设置对齐方式,可以设置为left
、crnter
、right
。
colspan
:跨列。
rowspan
:跨行。
<caption>标题内容</caption>
我们使用<th></th>
也可以表示单元格,可以实现居中和加粗。
例子:
<table border="1" width="500px">
<tr><td colspan="3">1</td>
<tr><td>4</td><td>5</td><td rowspan="2">6</td></tr>
<tr><td>7</td><td>8</td></tr>
</table>
12、表单标签
因为表单标签比较复杂,但是又非常重要,本人已经学过java web的一部分内容,所以有些知识我自己明白,但是我的语言组织能力有限,讲的不是很清楚,所以如果看的不是很明白,可以自行百度。
<from>定义一个表单的范围</from>
属性:
action
:提交到的地址
method
:表单的提交方式,一般为get
和post
一般输入项:
<input type="bbb"/>
属性:
type
:见下面
name
:用于描述提交的内容的属性,比如你提交的是手机号,那么可以name="phone"
。
bbb可以为:
text
:输入框
password
:密码输入框
radio
:单选输入,需要加name
来表示选项
checkbox
:多选输入,需要加name
来表示选项
file
:文件输入
hidden
:隐藏项,不会显示在页面上
submit
:提交按钮
reset
:重置按钮
button
:普通按钮,和javascript一起使用
下拉输入项:
<select name="birth">
<option value="0">请选择</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
文本域:
<textarea cols="宽度" rows="高度"></textarea>
使用图片做提交按钮
<input type="img" src="图片路径"/>
三、head中常用的标签
1、title
:表示在标签页上显示的内容
2、<meta>
:设置页面的一些相关的内容,比如
<meta http-equiv="refresh" content="跳转的倒计时;url=跳转的地址" />
这个可以实现页面的定时跳转
3、<base>
:设置超链接标签,比如:
<base target="_blank/>"
这样所有的超链接标签都是新页面打开。
4、<link>
:引入外部的文件
html中的标签是非常多的,我列举的只是比较常用的标签,其他的标签都可以很轻松的百度到,学习html主要还是靠练,多写几个页面自然就会了。