前端开发HTML5——基础标签

2022-12-31 07:13:50

什么是HTML？

　　HTML是HyperText Markup Language（超文本标记语言）的简写，他不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。“超文本”就是指页面可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

B/S架构模式（Browser/Server，浏览器/服务器模式）

　　B/S结构（Browser/Server，浏览器/ 服务器模式），是WEB兴起后的一种网络结构模式，

WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，

简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，服务器安装服务器软件，数据库软件等。

HTML文档是由很多个HTML标签和内容组成，而标签是我们学的主要知识。

HTML标签有两种，一种是单标签，一种是双标签。

单标签主要是一个标签，他只有属性，没有内容；类似于meta、img、input等标签

双标签由开始标签和结束标签组成，在两者之间填写的内容，类似于<html></html>等

有些标签是可以嵌套使用，有些标签不能嵌套使用

HTML属性

元素可以拥有很多属性，这个属性通过键值对组成，页面的显示效果也和这些属性相关，这里不解释，后期CSS内容会提到。

HTML的注意事项：浏览器只会解析一个空白格；注释方式：；实体：类似于空格--->  < ---->< > ----->> 版权实体符---->©

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <table border="2px" width="300px">

        <caption>放置表格标题的标签</caption>

        <colgroup>

            <!-- colgroup 控制表格列的效果， span就是列数的意思 -->

            <col span="2" style="background-color:blue">

        </colgroup>

        <!-- thead、tbody、tfoot三个标签只是一个界限的作用，没有实际的作用 -->

        <thead>

            <!-- tr是代表一行，th代表表头 -->

            <tr>

                <th>表头</th>

                <th>表头</th>

                <th>表头</th>

            </tr>

        </thead>

        <tbody>

        <!-- td代表单元格 colspan跨列合并，rowspan跨行合并-->

            <tr>

                <td colspan="2">1</td>

                <td rowspan="2">2</td>

            </tr>

            <tr>

                <td>2</td>

                <td>3</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

　　新增标签：

　　　　1、header　　是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。

　　　　2、nav　　是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。

　　　　3、article　　代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。

　　　　4、section　　<section>作为HTML文档独立的功能相当于div的感觉

　　　　5、aside　　元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。

　　　　6、footer　　元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。

　　　　7、address　　元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。

　　　　8、figure& figcaption 　　figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

　　　　9、details 　　details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。 details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图ᨀ供的详细数据表格。

　　　　　　open 　　当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false 时，其内部的子元素应该被收缩起来不显示。默认值为false

　　　　　　summary 　　summary元素从属于details，用鼠标单击summary元素中的内容文字时，details 元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会ᨀ供默认文字(详细信息)以供单击。

码农公寓

什么是HTML？

B/S架构模式（Browser/Server，浏览器/服务器模式）

标签

HTML属性

标签

相关文章