Html标签简明教程

html标签的使用:字体、列表、图像、表格、超链接、表单等,学会了这些标签就可以写网页代码了。

 

概述

1、Html就是超文本标记语言的简写,是最基础的网页语言
2、Html是通过标签来定义的语言,代码都是由标签所组成
3、Html代码不用区分大小写
4、Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成
5、头部分是给Html页面增加一些辅助或者属性信息
6、身体部分是真正存放页面数据的地方

多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容,可以在标签内结束。例如<br />
想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性的改变,增加了更多的效果选择。
属性与属性值之间用”=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。或者公司规定书写规范
格式:
<标签名 属性名=“属性值”>数据内容</标签名>
<标签名 属性名=“属性值”/>
操作思想:
为了操作数据,都需要对数据进行不同的标签封装,通过标签中的属性对封装的数据进行操作,标签就相当于一个容器,对容器中的数据进行操作,就是在不断的改变容器的属性值。

字体标签:<font>
例:<font size=5 color=red>字体标签示例</font>
注:简单颜色可以直接写对应的英文,复杂的颜色用16进制表示,表现形式#FF0000两个数为一组,按红、绿、蓝排列,如:#00FF00表示绿色,建议用工具选取

标题标签:<h1><h2>…<h6>
因为标题是文本中常用的内容,为了方便操作而定义,使文章排版更加清晰。
特殊字符:
如果要在网页上显示一些特殊符号,比如< > &等,因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来表示

列表标签: <dl>
<dt>:上层标签
<dd>:下层标签
 

复制代码
代码如下:

<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl>

列表中项目符号对应的标签
<ol>:数字标签(a A I i 1 )
<ul>:符号标签(circle disc square)
<li>:具体项目内容标签:此标签在<ol><ul>中有效
通过type属性修改项目符号,如果想做出效果更好的列表,如:黑色圆点用图片表示,就会用到CSS。
例:

复制代码
代码如下:

<ol type="1">
<li>游戏名称</li><code></code>
<ol type="a">
<li>War1</li>
<li>War2</li>
<li>War3</li>
</ol>
<li>游戏说明</li>
<ol type="a">
<li>War1INTRO</li>
<li>War2INTRO</li>
<li>War3INTRO</li>
</ol>
</ol>

图像标签: <img>
<img src=”../dir/file” alt=”说明文字" height width border/>
src属性中可用两个点(../)代表上层目录
alt属性中的说明文字在鼠标悬停和图片加载失败时显示
图像地图:用<img>封装好图像后,切换到DW设计视图,在属性中选择热点区域形状并在图像上拖动出一块热点区域,用热点区域链接某个资源。在页面中点击热点区域就会跳转到相应资源。

表格标签: <table>
组成:
标题标签: <caption>给表格提供标题。
表头标签: <th> ,一般对表格的第一行或者第一列进行格式化,就是粗体显示,并不常用。
行标签: <tr>
单元格标签: <td>  ,加载行标签的里面,可以简单理解为,先有行,再在行中加入单元格。
格式:
 

复制代码
代码如下:

<table border="10" width="40%">
<caption>表格标题</caption>
<tbody><!--为表格分体-->
<tr><!--第一行-->
<th colspan="2">姓名</th>
<th>年龄</th>
</tr>
</tbody>
<tbody>
<tr align="center"><!--第二行-->
<td>张三</td>
<td>李四</td>
</tr>
</tbody>
</table>

属性:
<table>
cellpadding:规定单元边沿与其内容之间的空白。
cellspacing:规定单元格之间的空白。
<td>
rowspan:规定单元格可以横跨的行数。
colspan:规定单元格可以横跨的列数。
注:
table标签中默认都有一个tbody标签 thead、tbody、tfoot
浏 览页面时,浏览器解析由table标签封装的页面数据时,读到</table>表格结束标记才会显示数据,若封装页面数据的表格很大,没读到 结束标记就不显示任何数据,用户体验不佳,所以将表格分为多个部分,读一个</tbody>就显示一部分。用tbody将表格分体

超链接标签: <a>
两种用法:
一、超链接 <a href=””>
 

复制代码
代码如下:

<a href="<a href="http://www.sina.com.cn">http://www.sina.com.cn</a>" target="_blank">新浪</a>
<!--href
属性值可以是url,也可以是本地文件target属性是指定在哪个窗口或者帧中打开.-->

二、定位标记 <a name=””>
一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷。
注:定位标记要和超链接结合使用才有效。使用标记时一定在href值的开始加入#标记名。
例:

复制代码
代码如下:

<a name="target">标记位置</a>
<p>......
<!--很多空行制造网页过长的效果-->
<a href="#target">返回标记</a>

邮件链接:

复制代码
代码如下:

<a href="<a href="mailto:111@qq.comt">mailto:111@qq.comt</a>">联系我们</a>

迅雷链接:

复制代码
代码如下:

<a href="thunder://abcdef">妹子.wav</a>

属性:
<table>
cellpadding:规定单元边沿与其内容之间的空白。
cellspacing:规定单元格之间的空白。
<td>
rowspan:规定单元格可以横跨的行数。
colspan:规定单元格可以横跨的列数。
注:
table标签中默认都有一个tbody标签 thead、tbody、tfoot
浏 览页面时,浏览器解析由table标签封装的页面数据时,读到</table>表格结束标记才会显示数据,若封装页面数据的表格很大,没读到 结束标记就不显示任何数据,用户体验不佳,所以将表格分为多个部分,读一个</tbody>就显示一部分。用tbody将表格分体

超链接标签: <a>
两种用法:
一、超链接 <a href=””>
 

复制代码
代码如下:

<a href="<a href="http://www.sina.com.cn">http://www.sina.com.cn</a>" target="_blank">新浪</a>
<!--href
属性值可以是url,也可以是本地文件target属性是指定在哪个窗口或者帧中打开.-->

二、定位标记 <a name=””>
一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷。
注:定位标记要和超链接结合使用才有效。使用标记时一定在href值的开始加入#标记名。
例:

复制代码
代码如下:

<a name="target">标记位置</a>
<p>......
<!--很多空行制造网页过长的效果-->
<a href="#target">返回标记</a>

邮件链接:

复制代码
代码如下:

<a href="<a href="mailto:111@qq.comt">mailto:111@qq.comt</a>">联系我们</a>

迅雷链接:

复制代码
代码如下:

<a href="thunder://abcdef">妹子.wav</a>

表单标签: <form>
表单标签是最常用的标签,用于与服务器端的交互。
<input>:输入标签;接受用户输入信息
 其中type属性指定输入标签的类型
 文本框 text:输入的文本信息直接显示在框中。
 密码框 password:输入的文本以圆点或者型号的形式显示。
 单选框 radio:如:性别选择。
 复选框 checkbox:如:兴趣选择。
 隐藏字段 hidden:在页面上不显示,但在提交的时候随其他内容一起提交。
 提交按钮 submit:用于提交表单中的内容。
 重置按钮 reset:将表单中填写的内容设置为初始值
 按钮 button:可以为其自定义事件。
 文件上传 file :后期扩展内容,会自动生成一个文本框,和一个按钮。
 图像 image 它可以替代 submit 按钮

<select>:选择标签,提供用户选择内容。如:用户所在省份。size属性为显示项目个数。
<option>:子项标签,属性 selected 没有属性值,加在子项上,其中一个子项上,子项就变成默认被选项。
<textarea>:多行文本框,如:个人信息描述。
<label>:用于给各元素定义快捷键。
 for 属性:指定快捷键作用的表单元素。必须与要作用的表单元素的 id 值相同。
 accesskey 属性:指定快捷键,此快捷键需要和 alt 键组合使用。

表单提交:
1、先定义 form 表单中的 action属性值,指定表单数据提交的目的地(服务端)。
2、明确提交方式,通过指定 method 属性值。如果不定义,那么 method 的值默认是 get。
get和post这两种最常用的提交方式的区别:
1、get提交将数据显示在地址栏,对于敏感信息不安全。post提交不显示在地址栏。
2、地址栏中存放的数据是有限的,所以 get 方式对提交的数据体积有限制。post可以提交大体积数据。
3、对提交数据的封装方式不同:get:将提交数据封装到了消息头前面,请求行中。post:将提交的数据封装到消息头后,数据体中。

其他标签
<pre></pre> :此标签内封装的文本数据格式将保持原样,包括空格和缩进等格式。常用于页面中显示带有缩进层次的代码。
<p></p> :段落标签,两个段落之间带有空行
<b>加粗 <strong>加粗 <i>斜体 <u>下划线 <sub>下标 <sup>上标
<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>此标签内可以让内容动起来,scroll滚动穿过/alternate来回 弹/slide一下摔死: <form>
表单标签是最常用的标签,用于与服务器端的交互。
<input>:输入标签;接受用户输入信息
 其中type属性指定输入标签的类型
 文本框 text:输入的文本信息直接显示在框中。
 密码框 password:输入的文本以圆点或者型号的形式显示。
 单选框 radio:如:性别选择。
 复选框 checkbox:如:兴趣选择。
 隐藏字段 hidden:在页面上不显示,但在提交的时候随其他内容一起提交。
 提交按钮 submit:用于提交表单中的内容。
 重置按钮 reset:将表单中填写的内容设置为初始值
 按钮 button:可以为其自定义事件。
 文件上传 file :后期扩展内容,会自动生成一个文本框,和一个按钮。
 图像 image 它可以替代 submit 按钮

<select>:选择标签,提供用户选择内容。如:用户所在省份。size属性为显示项目个数。
<option>:子项标签,属性 selected 没有属性值,加在子项上,其中一个子项上,子项就变成默认被选项。
<textarea>:多行文本框,如:个人信息描述。
<label>:用于给各元素定义快捷键。
 for 属性:指定快捷键作用的表单元素。必须与要作用的表单元素的 id 值相同。
 accesskey 属性:指定快捷键,此快捷键需要和 alt 键组合使用。

表单提交:
1、先定义 form 表单中的 action属性值,指定表单数据提交的目的地(服务端)。
2、明确提交方式,通过指定 method 属性值。如果不定义,那么 method 的值默认是 get。
get和post这两种最常用的提交方式的区别:
1、get提交将数据显示在地址栏,对于敏感信息不安全。post提交不显示在地址栏。
2、地址栏中存放的数据是有限的,所以 get 方式对提交的数据体积有限制。post可以提交大体积数据。
3、对提交数据的封装方式不同:get:将提交数据封装到了消息头前面,请求行中。post:将提交的数据封装到消息头后,数据体中。

其他标签
<pre></pre> :此标签内封装的文本数据格式将保持原样,包括空格和缩进等格式。常用于页面中显示带有缩进层次的代码。
<p></p> :段落标签,两个段落之间带有空行
<b>加粗 <strong>加粗 <i>斜体 <u>下划线 <sub>下标 <sup>上标
<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>此标签内可以让内容动起来,scroll滚动穿过/alternate来回弹/slide一下摔死

今天就写到这,再有其它HTML标签需要学习下回再加上,持续更新。

时间: 2024-10-30 01:44:02

Html标签简明教程的相关文章

Android编程Widget创建与使用方法简明教程_Android

本文实例讲述了Android编程Widget创建与使用方法.分享给大家供大家参考,具体如下: Android reference中有关于如何建立一个Widget的详细方法,这里简要说明一下,详情可以查看Android SDK中自带的reference. 要建立一个Widget,分为如下几个步骤: (1) 创建一个类,让其继承类AppWidgetProvider,在AppWidgetProvider中有许多方法,例如onDelete(Context,int[]),onEnable(Context)

深度学习简明教程

深度学习简明教程 作为机器学习的一个分支,深度学习可以说是当下相当热门的一个话题.像Google.Microsoft.IBM这样的巨头都围绕深度学习重点投资了一系列新兴项目,他们的目标是为了开发能够学习越来越多复杂任务的神经网络.但是它是如何工作的呢?本文中我们一起来进行探讨. 你有收到过垃圾邮件吗? 当下垃圾邮件过滤器早已替我们过滤掉大部分我们不想收到的电子邮件,且精度十分之高.但是并没有多少人知道这些垃圾邮件是如何与正常邮件筛选开的.因为新的垃圾邮件地址能够很容易重新注册,所以不能简单地基于

F#简明教程二:F#类型系统和类型推断机制

在上一篇教程<F#与函数式编程概述>中我们了解到F#和函数式编程的一些特点,更多关于F#语言和函数式编程的介绍可以参考51CTO之前对微软MVP赵颉老师的专访<TechED 09视频专访:F#与函数式编程语言>.本节教程我们将学习到F#的一些基础原理,在开始之前,让我们先温习一下我们的Hello World代码: #light System.Console.WriteLine("This is one hello") printfn "This is

XML简明教程目录

XML简明教程第1课: 处理XML元素 XML简明教程第2课: 处理XML文档 XML简明教程第3课 处理XML数据岛 XML简明教程第4课: 使用XML对象模型 XML简明教程第5课:使用XML名域 XML简明教程第6课 使用XML Schema XML简明教程第7课:在XML文档中使用数据类型 XML简明教程第8课:访问经过类型定义的XML值 XML简明教程第9课:使用C++ XML DSO XML简明教程第10课 :C++ XML DSO中使用主/细节特征 XML简易教程之一 XML简易教

XSL简明教程目录

XSL简明教程(1)XSL入门 XSL简明教程(2)XSL转换 XSL简明教程(3)在客户端的实现 XSL简明教程(4)在服务器端的实现 XSL简明教程(5)XSL的索引 XSL简明教程(6)XSL过滤和查询 了解WEB页面工具语言XML(一)背景 了解WEB页面工具语言XML(二)定义 了解WEB页面工具语言XML(三)支持工具 了解WEB页面工具语言XML(四)应用分类 了解WEB页面工具语言XML(五)好处 了解WEB页面工具语言XML(六)展望

Linux防火墙iptables简明教程

  前几天微魔部落再次遭受到个别别有用心的攻击者的攻击,顺便给自己充个电,复习了一下linux下常见的防火墙iptables的一些内容,但是无奈网上的很多教程都较为繁琐,本着简明化学习的目的,微魔为大家剔除了许多冗余的内容,提取出尽量多的精华部分成文,和大家共同学习,本文涉及的内容包括如下 Linux防火墙iptables简明教程 1.安装iptables 2.查看现有的iptables规则 3.删除某iptables规则 4.清除现有iptables规则 5.创建规则 6.设置开机启动 7.保

Python类的定义、继承及类对象使用方法简明教程

  这篇文章主要介绍了Python类的定义.继承及类对象使用方法简明教程,本文用浅显易懂的语言讲解了类的定义.继承及类对象的使用,非常实用易懂,需要的朋友可以参考下 Python编程中类的概念可以比作是某种类型集合的描述,如"人类"可以被看作一个类,然后用人类这个类定义出每个具体的人--你.我.他等作为其对象.类还拥有属性和功能,属性即类本身的一些特性,如人类有名字.身高和体重等属性,而具体值则会根据每个人的不同;功能则是类所能实现的行为,如人类拥有吃饭.走路和睡觉等功能.具体的形式如

Jquery插件编写简明教程

 这篇文章主要介绍了Jquery插件编写简明教程,jquery插件开发实例,需要的朋友可以参考下  代码如下: /*  1.jQuery插件文件名推荐命名为 jquery.[插件名].js 以免和其他javascript库插件混淆.例如命名为jquery.color.js  2.所有的对象方法名都应当附加到jQuery.fn对象上而所有的全局函数都应当附加到jQuery对象本身上.  3.在插件内部,this指向的是当前通过选择器获取的jquery对象,而不像一般方法哪样,例如chick()方法

Java 8简明教程

原文地址 本文由 ImportNew - 黄小非 翻译自 winterbe.欢迎加入翻译小组.转载请见文末要求. ImportNew注:有兴趣第一时间学习Java 8的Java开发者,欢迎围观<征集参与Java 8原创系列文章作者>. 以下是<Java 8简明教程>的正文. "Java并没有没落,人们很快就会发现这一点" 欢迎阅读我编写的Java 8介绍.本教程将带领你一步一步地认识这门语言的新特性.通过简单明了的代码示例,你将会学习到如何使用默认接口方法,La