前端开发HTML5——基础标签

什么是HTML？

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

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

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

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

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

 

 

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

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

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

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

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

标签

　　1、<!DOCTYPE html> 表示我们的文档类型

2、<html> Html的根元素，用来包含html文档的所有元素

3. <head> 包含在头部的内容不会被显示的页面中，这里通常包含页面的编码，作者，页面

的描述信息，js的导入，css的导入等信息。

4. <meta charset="utf-8"> 用来声明当前文档的编码方式为utf-8

5. <title> 用来声明当前文档的标题，标题将会出现在浏览器的选项卡中

6. <body> 所有想要显示在浏览器中的元素都被包含在该元素中。

HTML文档的初始文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

大家须知：标签也可以称为HTML的元素，这个元素又可以分为4种。

1、块级元素（ Block elements） 独占一行空间，用来布局段落，列表，导航菜单，脚注等结构，不要将块级元素嵌套在行内元素中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>this is paragraph1</p>
    <p>this is paragraph2</p>
</body>
</html>

　　2、行内元素（ Inline elements） 与其他元素共享一行空间，一般被嵌套在块级元素中，通常作为段落的一部分出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>you are <strong>strong</strong> </p>
</body>
</html>

　　3、 空元素（ Empty elements） 只包含单个标签，通常用于在文档中插入部分内容，例如img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div><img src="a.jpg" alt=""></div>
</body>
</html>

　　4、替代元素（ replaced element ） 替代元素已经脱离了CSS的范畴，它们的表现不依赖CSS，典型的替换元素有<img>,<object>,<video>,<textarea>,<input>,<audio>,<canvas>等

HTML属性

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

 

HTML的注意事项：浏览器只会解析一个空白格；注释方式：<!--  注释内容 -->；实体：类似于空格--->&nbsp;   <  ---->&lt;    >   ----->&gt; 版权实体符---->&copy;

标签

段落标签：p　　<p></p>

标题标签：h1~6　　<h1></h1>

强调标签：em、strong   <em></em>　　<strong></strong>

加粗标签：b　　<b></b>

斜体标签：i　　<i></i>

下划线标识：u　　<u></u>

列表标签

　　有序列表：ol

　　　　子元素：li 序号默认从1开始    <ol><li></li><li></li></ol>

　　无序列表：ul

　　　　子元素：li　　<ul><li></li><li></li></ul>

　　列表：dl

　　　　子标题元素：dt

　　　　子列表项元素：dd　　<dl><dt><dd></dd><dd></dd></dt></dl>

超链接标签：a    <a href="" target=""></a>

　　链接到某个页面

　　href的值可以是某个地址url，也可以是某个页面的id值，在url后面需添加#再写id

　　target的值一般是_blank（空白选项卡）、_self（当前选项卡）、_top、_parent

图片标签：img　　<img src="" alt="">

　　添加某张图片

　　src的值是图片的地址；alt的值提示内容指图片没加载成功就会显示

表格标签：table

　　表格标签需要和其他标签结合使用，才能显示表格：caption/thead/tbody/tfoot/tr/td/th/col/colgroup,比起这些标签，表格的属性也尤为重要

　　　　表格属性（直接使用键值对的形式即可，不需要使用style属性，之后这些属性用不着了

　　　　　　•align 表格应该如何在文档中对齐，可以取值： left,center,right

　　　　　　•border 设定表格边框特性，取整数为值，单位为 px

　　　　　　•cellpadding 设定内容与单元格之间的距离

　　　　　　•cellspacing 设定单元格与单元格之间的距离

　　　　　　•width 设定表格的宽度

　　　　　　•bgcolor 设定表格的背景色

　　　　表格标签　　

<!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>
View Code

　　新增标签：

　　　　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元 素，浏览器会ᨀ供默认文字(详细信息)以供单击。

 

posted @ 2019-09-10 15:56  xsha_h  阅读(431)  评论(0)  编辑  收藏  举报