网页编程设计常用的各类标签

最新推荐文章于 2024-08-16 17:54:29 发布

一头成精的苹果

最新推荐文章于 2024-08-16 17:54:29 发布

阅读量3.7k

点赞数 4

分类专栏： javascript学习笔记文章标签：网页

本文链接：https://blog.csdn.net/dairuyu19971011/article/details/83997720

版权

javascript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

网页编程设计常用的各类标签

之前看了一些js的学习资料，完成了一个非常简单的图片库创建，一开始在运行资料中的各个示例程序时看到了几个网页编程的最基础的标签，并没有再深究，只知道它是这样用，今天上了网站开发技术，老师讲到了网页编程的一些常用的标签，在这里分享给大家，也顺便复习一下下。

HTML
所谓的HTML又称为超文本标记语言（Hyper Text Markup Language）,是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种标记语言。被用来结构化信息，例如变体、段落和列表等，也可以在一定程度上描述文档的外观和语义。
html标签
简单来说，html标签的作用就是控制html文档的外观，使用时要用尖括号括起来，不同的标签决定了不同的 Web页面外观，在浏览器中标签被解释成具体的内容，如超级链接、标题、段落等。
标签的两种状态：起始标签和结束标签
典型的HTML文本的基本结构形式：

<html><!--html标记符，表示这是一个超文本标记语言--!>
<head><!--文件头标记符，描述HTML首部内容，说明文档的整体信息--!>
<title><!--文档的标题--!>
文本标题
</title>
</head>
<body><!--体部标记符，设置文档的可见部分，只有这一部分的内容可以在浏览器中显示出来--!>
文本内容
</body>
</html>

HTML文档结构

1.标签：HTML文档由标签和被标签的内容组成。标签的作用就是能产生所需要的各种鲜果，类似于一个排版软件，将网页的内容排成理想的效果，基本格式为：

<标签>受标签影响的内容</标签>

2.标签的属性：每一个标签都有一系列的属性，不同的属性表达不同的效果，格式为：

<标签 属性1=" 属性值1" 属性2="属性值2"...>受标签影响的内容</标签>

不同的属性之间用空格隔开。

下面我们写一个简单的网页看看效果

<html>
<head>
<title>西南交通大学</title>
</head>
<body>
西南交通大学在成都
</body>
</html>

运行效果如下图所示：
在这里插入图片描述

简单表格标签

<!--表格格式设置--!>
<table  width="500" border="1" bordercolor="blue">
<!--表格标题设置--!>
<caption align="left">院系</caption>
<!--表头设置--!>
<tr><th>院系名称</th> <th>招生人数</th> <th>男女比例</th></tr>
<!--表项设置--!>
<tr><td>地球科学与环境工程学院</td> <td>400</td> <td>1：7</td></tr>
<tr><td>人文学院</td> <td>500</td> <td>2：7</td></tr>
<tr><td>建筑学院</td> <td>350</td> <td>5：3</td></tr>
<tr><td>信息学院</td> <td>550</td> <td>7：3</td></tr>
</table>

运行效果如下图所示：
在这里插入图片描述

标题处理
在HTML中，用户可以通过Hn标记符来标识文档中的标题和副标题，其中n是数字1-6，分别表示不同级别的标题。使用标题样式时，必须使用结束标记符。属性align用来设置标题在页面中的对齐方式：left（左对齐）、center（居中）、rigth（右对齐）。例：

<h1 align="center">西南交通大学</h1>
<h2 color="red">学校概况</h2>
<h3>师资力量</h3>
<h4>院系</h4>
<h5>学校图片</h5>
<h6>历届毕业生就业情况</h6>

运行情况如下图所示：

注意：在一个标题行下无法使用大小不同的字体；标题格式显示在浏览器窗口内，不显示在浏览器的标题栏中。

注释标记符

<!--注释内容--!>

强制换行标记符
强制换行标记符为
,放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，并且不会在行与行之间留下空行。
强制换段标记符
在html文档中，无法用多个回车、空格等来调整文档的段落格式，通常使用
来进行强制换段操作。并且可以设置段落的格式：

<p align="对齐方式">文字</p>

例：

<!--换行和换段操作--!>
西南交通大学位于成都市，是一个历史悠久的大学。<br>
它有着120多年的历史<p>
是国家211工程院校

运行效果如下图所示：
在这里插入图片描述

显示预排格式标记符
HTML中有很多不支持的特殊控制符号，如回车或者多个空格，在浏览器中无法显示，我们可以通过
```
标记符将预先排好的格式保留下来，例：
```

<pre>我  爱  我  的  大  学
我的大学是我梦想的摇篮！
</pre>

运行效果如下图所示：
在这里插入图片描述

水平线
在页面中插入水平线，可以使不同功能的文字分隔开，看起来美观。例：

<hr align="center" size="6" color="green" width="50">

运行效果如下图所示：
在这里插入图片描述
还有一部分文字处理格式，有空继续更新。未完待续~~~~
最后附上例子的完整代码：

<html>
<head>
<title>西南交通大学</title>
</head>
<body >

<h1 align="center">西南交通大学</h1>
<hr align="center" size="6" color="green" width="500">
<pre>我  爱  我  的  大  学

我的大学是我梦想的摇篮！
</pre>
<h2 color="red">学校概况</h2>


<!--换行和换段操作--!>
西南交通大学位于成都市，是一个历史悠久的大学。<br>
它有着120多年的历史<p>
是国家211工程院校

<h3>师资力量</h3>

<h4>院系</h4>

<h5>学校图片</h5>

<h6>历届毕业生就业情况</h6>



<!--表格格式设置--!>

<table  width="500" border="1" bordercolor="red">

<!--表格标题设置--!>

<caption align="left">院系</caption>

<!--表头设置--!>

<tr><th>院系名称</th> <th>招生人数</th> <th>男女比例</th></tr>

<!--表项设置--!>

<tr><td>地球科学与环境工程学院</td> <td>400</td> <td>1：7</td></tr>

<tr><td>人文学院</td> <td>500</td> <td>2：7</td></tr>

<tr><td>建筑学院</td> <td>350</td> <td>5：3</td></tr>

<tr><td>信息学院</td> <td>550</td> <td>7：3</td></tr>

</table>
</boday>
</html>