[code]	html书写规则:
文件的后缀名  .html(建议) 或者 .htm
标签必须用 <> 引起来 已经定义好的标签
属性
格式: key="value"
建议属性的值用引号引起来.
不区分大小写
注意:
最好将所有的内容放在一个标签中 <html></html>
有开始标签和结束标签的标签称之为围堵标签
没有结束的标签的称之为空标签  <br/>
开始标签和结束标签之间的内容称之为标签体.
<!--注释内容--> html页面中的注释
标签必须正常嵌套,
标签最好关闭

【HTML的文件标签】

html标签:

声明当前网页为html页面

子标签:
[code]<head></head>

<body></body>
head:用来存放当前页面的重要信息,一般不展示在html页面上

常见的子标签:

<title></title> 网页的标题

body:要展示的数据放在body中

【HTML的字体标签】

<font>标签

<font 属性名=”属性值”>文字</font>
size:控制字体大小.最小1 最大7

color：控制字体颜色. 使用英文设置，使用16进制数设置
face：控制字体.
[code]<font face="黑体" size="6" color="#000000">我很黑</font>

【HTML的排版标签】

<hn>标题标签
<h1>b标题</h1>
[code]	<hn></hn>
n取值 :1~6
h1最大  h6最小
自动换行 且留白 默认加粗
常用属性:
align:对齐方式
left:左  right:右 center:居中
格式:
<h2 align="center"></h2>
<p>段落标签

<br/>换行标签 break的缩写

<hr/>水平线标签水平线标签:horizontal

<b>字体加粗

<i>斜体标签

【HTML的图片标记】

<img />

[code]图片标签:★
<img/>
常用属性:
★src:图片的路径
alt:替代文字
title:移上去显示的文字
width:宽
height:高
大小的写法:
像素:123px
百分比:20%
路径的写法:
相对路径:
./ 或者 什么都不写  当前目录
../  上一级目录
绝对路径:
带协议的绝对路径:
http://www.itheima.com

【HTML的列表标签】

无序列表

<ul>

<li>内容1</li>

<li>内容2</li>

</ul>

有序列表

<ol>

<li>内容1</li>

<li>内容2</li>

</ol>

【HTML的超链接标签】

[code]	<a></a>
常用属性:
href:跳转路径
target:在那里打开
默认值:_self  _blank(在空白页面打开)

【HTML的表格标签】

表格标签：

[code]<table>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

table 的常用属性:

border:边框像素值

width:

align:表格对齐方式

tr 的常用属性:

align:内容对齐

td 的常用属性:

align:内容对齐

colspan:跨列合并值:合并的列数

rowspan:跨行合并
[code]<tr align="center">
<td>21</td>
<td colspan="2">22&23</td>

</tr>

<tr>
<td rowspan="2">31&41</td>
<td align="center">32</td>
<td>33</td>
</tr>

【HTML的表单标签】

表单标签：

需要提交的表单需要使用<form></form>括起来 action：提交路径

method：提交方式

文本框:
<input type=”text”/> name
value

size

maxlength

readonly

密码框：
<input type=”password”/>

单选按钮：
<input type=”radio”/> Checked：默认选中

复选框
<input type=”checkbox”/> Checked：默认选中

下拉列表框
<select><option></option></select> Selected：默认选中
Multiple：全部显示

文件上传项
<input type=”file” name=”file”/>
文本区
[code]<textarea name=”” cols=”” rows=””></textarea>
提交按钮
<input type=”submit” value=”注册”>

重置按钮
<input type=”reset” value=”重置”>

普通按钮
<input type=”button” value=”普通按钮”>

隐藏字段
<input type=”hidden” name=”id”/>

提交方式：

GET ：默认值提交的数据都会在地址栏中进行显示

提交的数据的时候是有大小的限制
POST ：
提交的数据不会再地址栏中进行显示
提交的数据没有大小限制
[code]表单:
常用属性:
action:信息提交的路径 默认是当前页面
method:表单提交的方式
<form action="#" method="get">

只需要掌握两种
get(默认)和post
get和post的区别:
1.get请求会把所有的参数追加在地址栏上,post请求不会
2.get请求参数大小有限制,post请求参数大小没有限制
3.post相当于get安全些
常见的子标签
input
select:下拉选
textarea:文本域

input标签
常用的属性:
type:
text:文本框 默认
password:密码框
radio:单选框
checkbox:多选框
file:文件框

submit:提交
reset:重置
button:普通按钮

hidden:隐藏域 在页面上显示 提交的时候可以提交过去
image:图片提交 替代submit
name:
可以将几个单选框(复选框)设置为一组
要想将信息保存到服务器上必须有name属性
readonly:
readonly="readonly" 只读
disabled:
disabled="disabled" 禁用

select :下拉选
格式:
<select name="pro">
<option>黑龙江</option>
</select>

textarea:文本域
常用的属性:
cols:列
rows:行

提交到服务器的内容的格式:
key=value&
对于文本框 密码框 文本域 手写的内容传递过去了

密码:<input type="password" name="password"  value="123" disabled="disabled"><br>

对于单选框和多选框来说,却没有把值传递过去
要想把值传递过去 必须设置value属性

性别:<input type="radio" name="sex" value="1" checked="checked">男
爱好:<input type="checkbox" name="hobby" value="eat">吃

若下拉选要想把选中内容的值传递过去,请加上value属性

<select name="pro">
<option value="01">黑龙江</option>
<option value="02">吉林</option>
<option value="03" selected="selected">辽宁</option>
</select>

默认值:
文本框 密码框:只需要添加value属性
姓名:<input name="username" value="xuduoduo"/><br>
单选框 多选框:添加 checked="checked"
下拉选:添加selected="selected"
文本域:标签体

当我们提交的时候 发现地址栏变化
?username=tom&password=123&sex=on&hobby=on&hobby=on&photo=&pro=黑龙江&city=哈尔滨&intr=good+girl

【HTML的框架标记】

<frameset>

</frameset>

* 使用了frameset标签，不需要使用body.

* 属性：

* rows：横向切分页面

* cols：纵向切分页面

<frame>标签代表切分每个部分的页面

* src：引入页面的路径
[code]frameset:框架集(了解)
常用属性:
cols:垂直切割
例如: cols="40%,60%"
例如: cols="40%,*,10%"
rows:水平切割
常见的子标签:
frame
注意:
最好和body不要共存
frame:具体实现
常用属性:
src:展示的页面的url
name:给当前的frame起个名称

<frameset rows="18%,*,10%">
<frame src="./head.html"/>
<frameset cols="20%,*">
<frame src="left.html"/>
<frame src="main.html" name="mainFrame"/>
</frameset>
<frame src="foot.html"/>
</frameset>

【HTML的转义字符】

[code]转义字符:
三部分构成 &实体;
掌握的转义字符:
>	&gt;  //great then
<	&lt;
&	&amp;
空格 &nbsp;

meta 元信息

[code]<meta charset="UTF-8">指定浏览器用什么编码打开此页面

附：相关代码和文档

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航