HTML基础教程html常用标签带示例

html网页基础教程

HTML基础教程html常用标签解析附带注册示例
Hypertext Markup Language, 中文也就是超文本链接标示语言。HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言。
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
html ;超文本标记语言。
html语言有标签组成。
html中的数据都会封装在标签中,因为可以通过标签中的属性值的改变对封装内的数据进行操作。
1.确定html代码范围<html></html>
在该范围中可以定义两部分内容,一部分书头,一部分是体。
<html>
<head></head>
<body></body>
<html>
head:网页的一些属性信息,比如:标题
body:网页显示的数据。
标签特点:对数据进行封装,那么就又开始和结束标签。
但是也有一些标签只体现单一功能,所以不需要结束标签,规范中要求标签必须要结束,所以这样的标签在内部结束。
如:<.br /> <hr/>分割 <img /> <input />

标签格式:<标签名 属性名=”属性值”>数据</标签名>
<标签名 属性名=”属性值” />
常用标签:

字体:<font>
<font size=”7” color=”#ffff00”>数据</font>
特殊的部分:如果要在页面显示一些特殊符号,需要进行转义。
<: < >: > &: & 空格:
标题:<h1><h2><h3><>…….<h6>

2.超链接;<a>
<a href=”https://www.networkidc.com” (在新窗口打开)target=”_blank” (显示全部标题)title=””>网络自学网</a>
当被点击后,会启动引擎所对应的解析程序,去查找指定的主机。
1 先找本地主机的hosts文件,如果没有找到该主机对应的ip地址
2 去公网NDS服务器上找对应的ip地址

<a href=”mailto:邮箱名称@163.com” >联系我们</a>
当点击链接时,就会出现邮件相关联的解析程序,本机默认的是outlook
超链接的另一作用:
定位标记:
<a name=”top”> 一个位置 </a> //不能点

<a href=”#top”> 获取那个位置</a>

3.列表标签:<dl></dl>
上层项目:<.dt>
下层项目:<.dd>(有缩进)
项目符号标签:
<ul> 无顺序
<ol> 有顺序
这两个标签的列表项都有<li>标签来封装。
<body>
<ol>
<li>网络自学网</li>
<ul>
<li>网络工程师</li>
<li>linux学习</li>
</ul>
<li>网络之家</li>
<ol type=”a”>
<li> php<./li>
<li> mysql</li>
</ol>
</ol>
</body>
1 网络自学网
a 网络工程师
b linux学习
2 网络之家
a php
b mysql

3.图像标签 <img>
<img src=”” alt=”图像说明文字”/>

4.表格标签
表格由行所组成,行由单元格组成
表格中默认都有一个tbody标签
标题标签:<caption>
<table boder=”1” bordercolor=”red” width=”60%” (内边距)cellpadding=”10” (单元格之间距离)cellspacing=”0”>
<tr>
<th></th>//居中 加粗
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>

</table>

表格是最常用的标签,用于对数据进行格式化。
6.表单标签:
该标签是可以和服务器进行交互的。
<from>
表单标签中的元素:
<input>:该标签因为type属性的值的不同,所对应的组件也不一样。
type属性:
1. text: 文本框,输入文本可见
2.password : 密码框 输入的文本不可见
3. radio: 单选框, 注意 要被选中,必须要给单选框定义一个name属性
当有多个单选框时,只能有一个被选中,这些单选框的name必须相同
4. button: 按钮组件,自定义一个按钮默认是没有任何效果的,可以通过注册时间并加入自定义效果。
5. reset: 重置按钮,将组建被操作的效果还原到初始状态吧。
6. checkbox:复选框,党对多个数据进行同时选中时。
7. file:可以进行选择的组件,通常用于附件,或者文件上传。
8. hidden: 隐藏组件,该组件不会在页面上显示,但是其定义的name和value可以提交到服务端。
9. submit:提交按钮,将组建中添加的数据提交到指定的目的地。
10. image:(比submit好看点)图像组件,为了避免提交按钮的难看,可以通过image的src属性连接一个好看的提交按钮效果。

下拉菜单:<select>
每一个下拉菜单项都有option进行封装。
<select>
<option></option>
</select>
文本区域:<textarea>

表单组件通常都需要定义name和value属性,因为要将数据发送给服务端。
服务端只有知道了该name的值才可以对提交的数据进行分别获取。

form标签中的常见属性:
action:指定数据提交的目的地。method:提交方式,两种常用值get和post,get为默认。

get和post的区别:
get:对于敏感信息不安全。
post:对于敏感信息安全。

get:会将提交信息封装在请求行,也就是http消息头之前。
post:会将提交信息封装在数据体中,也就是http消息头之后的空行后。

get:会将提交的数据像是地址栏上。
post:不会将提交的数据像是地址栏上。

get:提交数据的体积受地址栏的限制。
post:可以提交大体积数据。

对于服务端而言:
表单提交尽量使用post,因为涉及到编码问题。
对于post提交的中文,在服务端可以直接使用setCharacterEncoding(“gbk”)就可以解决
对于get提交的中文,在服务端可以只能通过IOS8859-1将数据编码一次,在通过指定的码表,如GBK解码,因为tomcat服务端默认的解码是IOS8859-1
使用表单的组件不一定要用form标签。

附带HTML基础教程html注册页面示例
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>注册页面</title>
</head>

<body>

<legend >注册区域</legend>
<form>
<table border=”1″ bordercolor=”#FFCC33″ width=”70%” cellpadding=”10″ cellspacing=”0″>
<tr>
<th colspan=”2″>注册页面</th>

</tr>
<tr>
<td>用户名:</td>
<td><input type=”text” name=”user”/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type=”password” name=”psw”/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type=”password” name=”repsw”/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type=”radio” name=”sex” value=”nan”/>男
<input type=”radio” name=”sex” value=”nv”/>女
</td>
</tr>
<tr>
<td>技术:</td>
<td>
<input type=”checkbox” name=”tech” value=”php”/>php
<input type=”checkbox” name=”tech” value=”mysql”/>mysql
<input type=”checkbox” name=”tech” value=”html”/>HTML
</td>
</tr>
<tr>
<td>国家:</td>
<td>
<select name=”country”>
<option value=”none”>–选择国家–</option>
<option value=”china”>中国</option>
<option value=”usa”>美国</option>
<option value=”en”>英国</option>
</select>
</td>
</tr>
<tr>
<th colspan=”2″>
<input type=”submit” value=”提交数据”/>
<input type=”reset” value=”清除数据”/>
</th>

</tr>
</table>
</form>
</body>
</html>
HTML基础教程html常用标签简介

成为第一个发表评论的人

发表评论

您的电子邮件地址不会被公开.


*