HTML常用标签

最新推荐文章于 2023-09-04 20:56:45 发布

16406070101

最新推荐文章于 2023-09-04 20:56:45 发布

阅读量473

点赞数 2

分类专栏： HTML 初识

本文链接：https://blog.csdn.net/a15929748502/article/details/88911816

版权

HTML 初识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML是什么？

HTML是一种标签语言（超文本标签语言），用来写静态页面，不需要编辑，直接交给浏览器执行。

下面是一个最简单的HTML：

<html>
<head>
    <title>hello<title>
</head>
<body>
</body>
</html>

可以看到其实是由三个部分组成的，最外面是html 标签，html标签里有两个部分，分别是head和body，头部的标签里一般写的是标题或引入外部的js 代码，而内容就要写到body里。这就是一个HTML的整体轮廓哟。

当我们认识了HTML的三大部分后，我们开始看一些标签，什么是标签呢？标签都封装在一对<>中，标签只改变网页的显示方式，本身不会显示在窗口里，HTML文档中最先出现的标签是<html>标签，<html>标签是文档标识符，它是成对出现的，首标签和尾标签分别位于文档的最前和最后，明确的表示文档是超文本标识语言编写的，该标签没有任何属性。

事实上。我们现在常用的web浏览器，都可以自动识别HTML文档，并不要求有<html>标签，也不该对标签进行任何操作。

1.head中的标签

也就是标签的内容。如下图

2.body中的标签

<body>标签是成对出现的，在<body>..</body>标签之间的内容，将显示在web浏览器窗口的用户区内。它是HTML文档的主体部分，可以吧HTML文档的主体区域简单的理解成标题以外的所有部分，该部分可以包含<table>,<img>.<div>等标签。结束标签</body>指明主体部分的结尾，在<body>标签中可以规定整个文档的一些基本属性。

（1）属性信息可以添加的有

bgcolor:指定HTML文档的背景色。

text:指定HTML文档中文字的颜色。

link:指定HTML文档中待连接超链接对象的颜色。

alink:指定HTML文档中链接中的超链接对象的颜色。

vlink:指定HTML文档中已连接超链接对象的颜色。

background:指定HTML文档的背景文件。

<html>
<head>
    <title>hello</title>
</head>
<body   bgcolor="11ffff">
111111
</body>
</html>

（2）字符的转义

在HTML里有很多特殊的符号是需要特别处理的，例如“<",">"这两个符号是用来表示标签的开始和结束，是没有办法通过打“<”和“>”来呈现的，必须输入编码表示法，"&It;",

通常情况下，HTML会自动截去多余的空格，不管你加多少空格，都被看成一个空格，如果要显示多个空格可以使用&nbsp；表示空格。

用<>举例

<html>
<head>
    <title>hello</title>
</head>
<body   bgcolor="11ffff">
111111
&lt;111&gt;
</body>
</html>

（3）HTML 格式标签

HTML的格式标签的主要作用是在浏览器中控制文本对象的显示，包括段落，换行，水平线等标签，下面是几个常用的HTML格式标签，所有的格式标签全部都是嵌套在<body>...</body>标签对之间的。

<p>:段落标签，用于创建一个段落，在此标签内的文本以段落方式显示在浏览器中，支持alian 属性来设置对齐方式，语法如下：

<p alian="属性">段落内容</p>,其中置左（alian="left"），置中（alian ="center"）,置右（alian="right"）标签成对出现.

<br>:换行标签，用于在不另起一段的情况下将当前的文本进行强制转换，它的起始标签必须有，而结束标签是禁止出现的，也就是说<br >标签属于单独出现的标签。

<pre>：预格式化标签，用于有时候设计者需要按照自己的格式和编辑时的格式相同，<pre>...</pre>标签对可以完整保留设计者在源文件中所定义的格式，包括各种空格，缩进以及特殊符号，全部都原封不动的反映在浏览器上。

下面是做出的例子。

没加标签之前：

<html>
<head>
    <title>hello</title>
</head>
<body>
111111
222222
333333
444444
555555
666666
777777
888888
</body>
</html>

加上<p>...</p>

<html>
<head>
    <title>hello</title>
</head>
<body>
<p>111111
222222</p>
333333
444444
555555
666666
777777
888888
</body>
</html>

加上<br>

<html>
<head>
    <title>hello</title>
</head>
<body>
111111
222222
333333
444444
555555
666666<br>
777777
888888
</body>
</html>

在<p>...</p>中加上<br>

<html>
<head>
    <title>hello</title>
</head>
<body>
111111
222222
333333
<p>444444
555555
666666<br>
777777</p>
888888
</body>
</html>

加上<pre>...<pre>

(4)列表标签

HTML文档中使用列表标签主要有无序列表和有序列表，排序列表，目录列表，菜单列表，描述性列表五类列表。

<ul>..<li>...</li>...</ul>:无序列表

<ol>..<li>...</li>...</ol>:有序列表

<dl><dt>列表头<dd>列表内容。

实例

<html>
<head>
    <title>hello</title>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ol>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ol>
<dl>
<dt>
1
</dt>
<dd>
2
</dd>
</dl>
</body>
</html>

(5)文本标签

<hn>:将文本设置为标题显示，<hn>...</hn>标签对。夹在标签对之间的文字是HTML文档标题，设定标题字体大小，n从1（大）---6（小）。

字体修饰标签

<b>:粗体字。

<i>：斜体字。

<u>:带有下划线

字体标签

<font>:设置文档的字体，通过改变其属性，对文本进行不同的设置，可以对文本的字体，大小，颜色，进行改变。

<html>
<head>
    <title>hello</title>
</head>
<body>
<h1>
H1 
</h1>
<h2>
H2
</h2>
<h3>
H3 
</h3>
<h4>
H4
</h4>
<h5>
H5
</h5>
<h6>
H6
</h6>
<b>
B
</b>
<i>
i
</i>
<u>
U
</u>
<font  size="20px">
font的作用
<font>
</body>
</html>

(6)超链接HTML

<a>:最显著的优点就在于它支持文档的超链接，用户可以很方便的在不同的文档以及同一个文档的隔断段落之间跳转链接包括两个部分：锚点和目标点，描点就是链接的源点，当鼠标被移动到锚点会变成小手状，此时，用户通过单击鼠标就可以到达链接的目标点。

href属性：用于设定链接地址，其链接地址必须是URL地址，必须给出具体的路径。当链接到的文件是HTML时直接打开网页，当文件的扩展名不是HTML时，会将链接文件下载到本地计算机上或者直接执行。如果是文本文件则在浏览器中直接进行编辑。

target属性：控制打开链接的位置，属性值有：

_blank:在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变，

_self:将连接的文档载入所在同一窗口或者框架。

等。

下面是例子中供我跳转的页面，在本地，也是一个HTML页面，文件名是w.html

<html>
<head>
	<title>跳转到这个页面</title>
</head>
<body>
跳转到这个页面
</body>
</html>

下面是含有超链接的页面

<html>
<head>
	<title>含有超链接的HTML页面</title>
</head>
<body>
<a href="w.html">w.html</a>
</body>
</html>

name属性：超链接标签<a>同样可以用来进行文档的内部定位，设计者需要做的就是首先在文档中设定一个标签，成为“锚定点”，这样做就是首先在文档内的某位置设定了一个标签，通过超链接标志<a>的href属性，可以跳转到已经设定好的锚定位标签的位置。

<p><a name="需要定位的位置">需要定位的文本</a>

如下例子

<html>
<head>
	<title>含有超链接的HTML页面</title>
</head>
<body>
<a href="#定位的位置">跳转到定位的位置</a>
<pre>
A
 B 
  C
   D 
    E
     F
      G
       H
A
 B 
  C
   D 
<a name="定位的位置">
    E
</a>
     F
      G
       H
</pre>
</body>
</html>

(7)HTML 图像标签

<img>:用于在HTML文档中插入标签，只有起始标志，没有终止标志，所有的图形样式有<img >的属性来决定。

src属性：标志着图片的来源。src的值是一个完整的URL。

当然还可以根据属性自由的设置长宽，有无边框，边框粗细。

下面我用本地的图片做一个实例；

<html>
<head>
	<title>含有超链接的HTML页面</title>
</head>
<body>
<img src="l.png">
</body>
</html>

(8).HTML 表格标签

<table>:

<tr>:用来创建表格的每一行，只可以用来放在<table >标签对之间，而且此标签对之间加入文本是无效的。

<td>用来创建表格的每一列，只可以用来放在<table >标签对之间，而且此标签对之间加入文本是无效的。

<th>：表头

<html>
<head>
	<title>含有一个姓名年龄表</title>
</head>
<body>
<table border="1">
<tr>
	<th>姓名</th>
	<td>方进</td>
	<td>陆臻</td>
	<td>陈默</td>
</tr>
<tr>
	<th>年龄</th>
	<td>17</td>
	<td>18</td>
	<td>19</td>
</tr>
</table>
</body>
</html>

（9）HTML框架

一个浏览器文档窗口中一般只显示一个网页文件，但是，使用框架标签就可以讲一个浏览器文档分割成多个子窗口，每个子窗口中都可以显示一个独立的网站文件。

框架是有英文Frame翻译过来的，它代表浏览器文件窗口中的一个子窗口，每个框架都可以显示一个HTML文件，多个框架组成了一个框架集（Frameset）。框架集通常的使用方式是在一个框架中放置一个网页，此网页含有可以连接到其他网页的超链接条目，访问者单击这些超链接的条目后可以将超链接指向的网页恩建显示在另一个指定的框架中，如果要求在单个应用窗口中显示一个以上的网页，就可以使用框架。

<html>
<head>
<frameset   cols="50%,50%">
	<frame  src="http://www.baidu.com">
	<frame  src="http://www.qq.com">
</frameset>
</head>
</html>

(10)HTML 表单标签

表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息。使网页具有一定的交互功能，一般是将表单设计在一个HTML文档中的，当用户写完信息做提交，表单的内容就会被传送到服务器上，等处理完了之后，再将信息返回客户端。

<form>:创建一个表单，在标签对之间都属于表单的内容。

action属性:表明接收方

method属性：表明方法

target属性：

实例：

<html>
<body>
<form action="xx.php" method="get">
	<p>username:<input type="text" name="fname"/></p>
	<p>password:<input type="password" name="lname"/></p>
	<p><input type="file"></p>
	<p><textarea></textarea></p>
	<input type="submit" value="submit"/>
</form>
</body>
</html>

16406070101

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签

HTML是什么？HTML是一种标签语言（超文本标签语言），用来写静态页面，不需要编辑，直接交给浏览器执行。下面是一个最简单的HTML：<html><head> <title>hello<title></head><body></body></html>可以看到其实是由...
复制链接

扫一扫

专栏目录