HTML标签（上）

最新推荐文章于 2023-04-02 14:32:57 发布

6666，

最新推荐文章于 2023-04-02 14:32:57 发布

阅读量323

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/low1101/article/details/103146944

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浏览器是什么？

首先浏览器是一个软件，是用来执行网页代码（包括HTML标签、CSS样式表和JavaScript脚本）的一个软件，然后把执行结果显示出来，常用的主流浏览器软件有Internet Explorer、Google Chrome、Firefox、Safari等，软件开发过程中常使用Google Chrome和Firefox浏览器，尤其Google Chrome浏览器。

HTML是什么？

HTML全拼是：Hyper Text Markup Language，即“超文本标记语言”，是一种解释性语言，用于制作网页界面，使用该语言编写的网页最终被浏览器解释执行。

HTML的结构是什么？

<html>
    <!--用来标记HTML文档的开始和结束(html注释)-->
	<head>
	<!--用来标记HTML文档的头部开始和结束-->
	</head>
	<body>
        <!--用来标记HTML文档的主体开始和结束-->
	</body>
</html>

HTML标签：

单标签：标签单独出现，语法：<标签名/>，比如<img/>。可以没有标签反斜线，即<img>也可以，但是这样不符合万维网联盟(World Wide Web Consortium，简称W3C) 规范.，

双标签：标签成对出现，语法：<标签名>内容</标签名>，比如<a></a>。

注意:HTML标签中的标签名不区分大小写，但为了符合W3C规范，推荐使用小写。

HTML标签属性：

HTML标签属性放在起始标签的尖括号内，如果有多个属性，则使用空格分开，语法结构：

单标签：<标签名属性名1="属性值1"　属性名2="属性值2" ... 属性名N="属性值N"/>，比如img标签中src 、width、height和title属性;

双标签：<标签名属性名1="属性值1"　属性名2="属性值2" ... 属性名N="属性值N">内容</标签名>，比如a标签href和target;

注意：

1.属性之间使用空格间隔；

2.属性出现的先后顺序没有要求；

3.某些属性值可以不使用双引号引起来；但为了符合W3C标准，要求所有的属性值都使用双引号引起来；

<head>标签的子标签：

<titli>标签：用于设置页面标题
<link>标签：用于设置页面标题的图标

<body>标签的子标签：

<img>标签：用于调用img内的各个格式的图片，视频等等。

例子如下：（可以发现都是单标签）

<html>
    <head>
        <meta charset="utf-8" />
        <title>百度一下，你就知道</title>
        <link rel="shortcut icon" href="img/png-1536.png" type="image/x-icon" />
	</head>
    <body>
        <img src="img/png-1548.png" width="30%" title="这是头猪" />
    <body>
<html>

执行结果如下：

<body>标签的子标签：

b标签，加粗
i标签，斜体
del标签，中划线
h标签，h1——>h6,用于区分大小
span标签，无格式，但是以后css样式会用到很多

例子如下：

    <i>十二生肖</i>
    <b>十二生肖</b>
    <del>十二生肖</del>
    <h1>十二生肖</h1>
    <h6>十二生肖</h6>
    <span>十二生肖</span>

执行结果：

<body>标签的子标签：

p标签,paragraph单词缩写，是一个段落标签
div标签，division单词缩写，常用于文档中分区

注意：在各个标签中也可以加入样式，style

例子：

    <p style="text-align: center; border:blue 3px dashed; font-size:70px;">十二生肖</p>
    <div style="text-align: center; font-family: 'arial black';font-size: 70px;">十二生肖</div>

执行结果：

<body>标签的子标签：

ul标签，无序标签
ol标签，有序标签

例子：

    <ol start="2" type="A">
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
        <li>体育</li>
    </ol>
    <ul type="circle">
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
        <li>体育</li>
    </ul>

执行结果：

<body>标签的子标签：

table标签，表格标签，用于建立表格
th标签，tabke head 表头
tr标签，table row表的一行数据，在此添加数据
td标签，table date 表的数据。

例子：用以上标签实现一个如下的表格：

    <style>
        table{
            border-spacing: 0px;
            border-collapse: collapse;
            border: blueviolet 1px solid;
        }
        th{
            border: blueviolet 1px solid;
        }
        td{
            border: blueviolet 1px solid;
        }
    </style>
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>001</td>
            <td>Tim</td>
            <td>ASDFGHJKL</td>
        </tr>
        <tr>
            <td>002</td>
            <td>JOM</td>
            <td>ZXCVBNMP</td>
        </tr>

行的合并：rowspan。
列的合并：colspan。

<style>
	        table{
	            border-spacing: 0px;
	            border-collapse: collapse;
	            border: blueviolet 1px solid;
	        }
	        th{
	            border: blueviolet 1px solid;
	        }
	        td{
	            border: blueviolet 1px solid;
	        }
   		</style>
	    <table>
	        <tr>
	            <th>编号</th>
	            <th colspan="2">姓名</th>
	        </tr>
	        <tr>
	            <td rowspan="2">001</td>
	            <td>Tim</td>
	            <td>ASDFGHJKL</td>
	        </tr>
	        <tr>
	            <td>JOM</td>
	            <td>ZXCVBNMP</td>
	        </tr>
	    </table>

结果如下:

注意：使用时，一定要把被合并的行或列删除，不然会出现这种数据错乱的情况：

6666，

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML标签（上）

浏览器是什么？首先浏览器是一个软件，是用来执行网页代码（包括HTML标签、CSS样式表和JavaScript脚本）的一个软件，然后把执行结果显示出来，常用的主流浏览器软件有Internet Explorer、Google Chrome、Firefox、Safari等，软件开发过程中常使用Google Chrome和Firefox浏览器，尤其Google Chrome浏览器。HTML是什么...
复制链接

扫一扫

专栏目录