您的位置：首页 > Web前端 > HTML

HTML简单使用

2016-04-27 17:04 411 查看

HTML简单使用

标签：前端技术

HTML

HTML(Hypertext Marked Language), 即超文本标记语言,能够独立于各种操作系统平台(如UNIX/Linux/Windows等)进行信息展示.HTML由WEB发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立.

所谓超文本:是因为它可以加入图片/声音/动画/视频等内容(超越了文本的范畴);

所谓标记:是因为HTML所有的操作都是通过标记实现, 每一个HTML文档都是静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,它只是一种排版资料显示位置的标记结构语言, 如:

<标签名称>标签内容</标签名称>

HTML规范

一个HTML文件必须有开始标签和结束标签

<html></html>

;

HTML包含head/body两部分内容:

<head>页面设置信息</head>

<body>页面显示内容</body>

HTML标签要有始有终(如

<table></table>

), 空元素标签需要在标签内结束(如

<hr/>

<br/>

);

HTML代码不区分大小写;

HTML操作思想

一个网页中可能会有很多数据, 不同的数据需要不同的显示效果,此时就使用标签把需要展示的数据封装起来,通过修改标签属性值以实现标签内数据样式的变化;

一个标签相当于一个容器,想要修改容器内数据样式,只需要修改容器属性值.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>First Html</title>
</head>
<body>
<font size="5" color="red">Hello World !</font>
<hr/>
<font size="6" color="green">世界你好</font>
</body>
</html>

HTML常用标签

简单标签

注释标签

<!--  HTML的注释  -->

注意: 浏览器不展示,但查看源代码时可看到.

文字标签 : 修改文字样式

<font></font>


属性	描述
size	文字的大小(取值范围1-7)
color	文字颜色[两种表示方式:英文单词(red/green/blue)/十六进制数(#ffffff:RGB)

标题标签

<h1></h1>

<h6></h6>

: 依次变小

水平线标签

<hr/>


属性	描述
size	水平线粗细取值范围 1-7
color	颜色

特殊字符: 需要对特殊字符进行转义才能在网页上显示:


字符	转义
<	<
>	>
空格
&	&
注册符®	®
版权符©	©

图像标签

<img src="图片的路径"/>


属性	描述
src	图片路径
width	图片宽度
height	图片高度
alt	图片出错时显示的文字

超链接标签

<a href="资源地址">说明</a>

属性

描述

href

链接资源地址,当超链接不需要跳转时,设为

target

设置打开的方式[

_blank

新窗口打开/

_self

当前页打开(默认)]

拓展:
定义锚点: `<a name="top">顶部</a>`
回到锚点: `<a href="#top">回到顶部</a>`

列表标签

层次列表

<dl></dl>

: 层次列表

<dt></dt>

: 上层内容

<dd></dd>

: 下层内容

<dl>
<dt>阿里巴巴集团</dt>
<dd>淘宝</dd>
<dd>阿里云</dd>
<dd>阿里妈妈</dd>
</dl>

有序列表

<ol></ol>

: 有序列表


属性	描述
type	排序方式[1(默认)/a/i]

<li></li>

: 列表内容

<ol type="A">
<li>百度</li>
<li>阿里</li>
<li>腾讯</li>
</ol>

无序列表

<ul></ul>

: 无序列表


属性	描述
type	实心圆disc(默认)/空心圆circle/实心方块square

<li></li>

: 列表内容

<ul type="circle">
<li>百度</li>
<li>阿里</li>
<li>腾讯</li>
</ul>

表格标签

<table></table>

: 用于对数据进行格式化, 使显示更加清晰


属性	描述
border	表格线
bordercolor	表格线颜色
cellspacing	单元格距离
width	表格宽度
height	表格高度

<caption></caption>

: 表格标题

<tr></tr>

: 行


属性	描述
align	设置内容对其方式[left/center/right]

<th></th>

: 表格首行列

<td></td>

: 表格内容列

合并单元格

rowspan

：跨行

<td rowspan="行数"></td>

colspan

：跨列

<td colspan="列数"></td>

<table border="1" bordercolor="aqua" cellspacing="0" width="400" height="150">
<caption>表格标题</caption>
<tr>
<td colspan="4" align="center">跨列标题</td>

</tr>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
<tr align="center">
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td rowspan="2">跨行内容</td>
</tr>
<tr align="center">
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>

如果单元格内没有内容, 需要使用空格符

占位.

表单标签

<form></form>

: 用于向服务端提交数据


属性	描述
action	提交地址,默认提交到当前页面
method	提交方式[GET/POST]
enctype	指定发送到服务器数据的编码格式[ application/x-www-form-urlencoded : 表单数据/ multipart/form-data : 文件上传]

表单输入项

每个输入项中必须要有一个

name

属性, 以标识该输入项的

key

,服务端获取表单数据时用.

文字输入项：

<input type="text"/>

密码输入项：

<input type="password"/>

单选按钮：

<input type="radio"/>

性别:
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女

两个按钮name属性值相同,且必须有value值,实现默认选中:

checked="checked"

.

复选按钮：

<input type="checkbox"/>

爱好
<input type="checkbox" name="hobby" value="checkbox"/>羽毛球
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="swim"/>游泳

属性描述同radio.

文件上传:

<input type="file"/>

下拉菜单:

<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>

默认选择

selected="selected"

文本域

<textarea cols="10" rows="10"></textarea>

隐藏项

<input type="hidden" />

不会显示在页面上, 但会存在于HTML代码里面.

提交按钮

<input type="submit"/>

图片提交

<input type="image" src="图片路径"/>

重置按钮

<input type="reset"/>

普通按钮

<input type="button" value=""/>

需要同JS一起使用.

其他标签


标签	作用
<b/>	加粗
<s/>	删除线
<u/>	下划线
<i/>	斜体
<pre/>	原样输出
<sub/>	下标下标
<sup/>	上标上标
<p/>	段落标签(比br标签多一行)
<div/>	自动换行(结合CSS)
<span/>	不自动换行(结合CSS)

HTML头标签

<title>

: 网页显示标题

<meta>

: 页面设置

<meta name="keywords" content="">

<meta http-equiv="refresh" content="3;url=current.html" />

<base/>

: 设置当前页面所有链接默认地址

<base target="_blank"/>

: 统一设置超链接打开方式

<link/>

：引入外部文件,如CSS等

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

标签：

相关文章推荐

新的分享

章节导航