HTML基础概览-优快云博客

本文链接：https://blog.youkuaiyun.com/zcy_inspire/article/details/106873961

HTML基础

HTML 超文本标记语言，由一系列标签组成
基本HTML结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body bgcolor="yellow">
        <h1 align="center">这是一个一级标题</h1>
        <p>这是第1个段落。</p>
        <p>这是第2个段落。</p>
    </body>
</html>

标签格式

<标签名属性名=“属性值”> 元素内容 </标签名>

完整网页结构

在这里插入图片描述
我们来看如下示例：

<!DOCTYPE HTML>//声明文档格式：DOCTYPE,声明了该文档是HTML 5的文档。
<`HTML`>//根元素：HTML 元素
  <head>//头元素：head 元素
  //元信息元素：meta
    <meta charset="utf-8">//编码格式：charset,通常，我们使用utf-8编码以支持各国语言
    <title>自我简介</title>//网页标题元素：title
    <meta name="description" content="张三的自我简介网站">
    <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
  </head>
  <body>//主体元素：body 元素
    <h1 align="center">自我简介</h1>
    <h2>简介</h2>
    <p>在这里简单的描述一下你自己吧。</p>
  </body>
</`HTML`>

基本标签

创建 <h1>-<h6>标签
标题标签
注意：创建标题只有 <h1> - <h6>，没有 h7，h8的。

    <h1>创建不同字体大小的标题</h1>
    <h2>创建不同字体大小的标题</h2>
    <h3>创建不同字体大小的标题</h3>
    <h4>创建不同字体大小的标题</h4>
    <h5>创建不同字体大小的标题</h5>
    <h6>创建不同字体大小的标题</h6>

创建 p 标签
p元素通常用来表示一个段落。

<p>我是一个段落</p>

创建 a 标签
a标签通常用来定义一个链接,href属性的值就是链接的地址。

 <a href="https://www.educoder.net">Educoder</a>

创建 img 标签
img标签通常用来表示一个图片。src属性的值就是图片的地址，alt属性的值是当图片没有展现出来时提示的文字。
注意：img标签为单标签,是以/>结尾的，不是</img>结尾的。

<img src="https://www.educoder.net/attachments/download/207791" alt="风景画"/>

创建 div 标签
div标签可以把文档分割为独立的、不同的部分。它没有实际的意义，仅仅表示创建了一个块级元素。

<div>我是div标签</div>

添加注释
<!–注释 -->

HTML链接：带超链接的网页

href 属性是超链接最重要的属性，它用于指定超链接目标的 URL

其中，目标URL有三种类型：
锚 URL (anchor URL)：同一网页跳转；
相对 URL (relative URL)：同一网站跳转；
绝对 URL (absolute URL)：网站间跳转。

锚 URL ：创建网页内导航
在这里插入图片描述

所以，完整的一对页面内导航的写法为：
<a href="#id">简介</a>

<开始标签 id=“id”>内容<结束标签>

此外，当href="#"时，默认回到网页顶部位置。

相对 URL 实例：跳转到同一网站的另一个网页
在这里插入图片描述

我们说的相对URL是相对于什么呢？
是相对于当前网页home.html路径的URL。.代表当前路径，所以./blog.html代表当前路径下的blog.html网页。

绝对 URL 实例：跳转到另一网页
在这里插入图片描述
指定了网页的完整路径

target 属性：在何处打开链接
我们指定了target="_blank"，所以在点击之后，将在新标签中打开链接

发送电子邮件
我们还可以将href属性值设置为mailto:邮箱地址，这样做可以调起邮箱应用，发送邮件到对应地址。

<a href="mailto:someone@email.com">

HTML标题与段落：网络文章网页

换行
<br>标签

列表

列表都是由父元素和子元素构成的，父元素用于指定要创建的列表的类型，子元素用于指定要创建的列表项目类型
三种列表类型组成元素如下：
在这里插入图片描述
有序列表实例

如果列表顺序是不能随意交换时，我们使用有序列表。例如

<body>
    <p>健身房基本锻炼步骤</p>
    <ol>
        <li>热身</li>
        <li>无氧运动(包括俯卧撑、仰卧起坐、器械锻炼等)</li>
        <li>有氧运动(包括慢跑、单车、游泳、登山机等)</li>
        <li>拉伸、放松</li>
    </ol>
</body>

显示效果如图：
在这里插入图片描述
无序列表实例

如果列表顺序不重要时，我们使用无序列表。例如：

<body>
    <p>购物清单</p>
    <ul>
        <li>酸奶</li>
        <li>苹果</li>
        <li>鸡胸肉</li>
        <li>白炽灯泡</li>
    </ul>
</body>

显示效果如图：
在这里插入图片描述
描述列表实例

描述成组出现的名称(术语)及其值之间的关联

<body>
    <p>HTML里程碑</p>
        <dl>
            <dt>1995年11月24日</dt>
            <dd>HTML2.0发布，对应的IETF文档为RFC 1866</dd>
            <dt>1997年1月14日</dt>
            <dd>HTML 3.2以W3C推荐标准的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
            <dt>1997年12月18日</dt>
            <dd>HTML 4.0发布。</dd>
            <dt>2014年10月28日</dt>
            <dd>HTML5 发布。</dd>
            <dt>2016年11月1日</dt>
            <dd>HTML 5.1发布。</dd>
        </dl>
</body>

在这里插入图片描述
文本格式化

一个网页中通常包含了文本信息，对于不同的文本类型，我们可以选择合适的 HTML 语义化元素进行标记
在这里插入图片描述
引用

q 元素用于短的引用，如句子里面的引用；

blockquote 元素表示单独存在的引用，它默认显示在新的一行。
如：

<body>
    <h1>W3C</h1>
    <p>
        <dfn>W3C</dfn> (World Wide Web) 万维网联盟创建于1994年。它是
        <q>Web技术领域最具权威和影响力的国际中立性技术标准机构</q>。
    </p>
    <p>其官方定义</q>为：</p>
    <blockquote cite="https://www.w3.org/">
     The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
    </blockquote>
</body>

效果如下
在这里插入图片描述

HTML表格

最基本的表格
在HTML表中，一个表格(table)由表行(tr)组成，每一行由单元格组成，单元格有表头(th)和表数据(td)

<body>
    <table>
        <!-- 第一行 -->
        <tr>
            <td>第一行第一个单元格数据</td>
            <td>第一行第二个单元格数据</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>第二行第一个单元格数据</td>
            <td>第二行第二个单元格数据</td>
        </tr>
    </table>
</body>

tr: table row；
th: table head；
td: table data。

带边框的表格

我们可以指定<table>元素的border属性值。

<table border="1">
</table>

带表头的表格
一般情况下，我们都会指定表格的表头信息，可以使用标题单元格进行定义

<body>
    <table width="400">
        <!-- 表标题 -->
        <caption>通讯录</caption>
        <!-- 表头 -->
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">电话</th>
            <th scope="col">备注</th>
        </tr>
        <tr>
            <td>李雯</td>
            <td>18012311234</td>
            <td>家人</td>
        </tr>
        <tr>
            <td>王谦</td>
            <td>17812311234</td>
            <td>同事</td>
        </tr>
        <tr>
            <td>周佳</td>
            <td>17413511234</td>
            <td>高中同学</td>
        </tr>
    </table>
</body>

我们设定了<table>元素的width属性，改变了表格的宽度；
我们使用<caption>元素设置了表格的标题；
数据第一行<\tr>元素中，使用<th>元素指定了表头。本例中有三列信息，所以包含了三个<th>元素；
并且，我们设置了<th>元素的属性scope的值为col。

scope 属性
在这里插入图片描述
结构更清晰的表格
顾名思义，<thead>元素标记表格的头部；<tbody> 元素包围所有数据行；最后，<tfoot>元素标记表格的尾部。

单元格跨越多行或多列的表格

设置单元格跨越多行，只需设置属性rowspan=“n”；
设置单元格跨越多列，只需设置属性colspan=“n”。

<body>
    <table>
        <caption>彩排安排</caption>
        <thead>
            <!-- 表格头部 -->
            <tr>
                <th scope="rowgroup">时间</th>
                <th scope="col">周一</th>
                <th scope="col">周二</th>
                <th scope="col">周三</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th scope="row">上午8点</th>
                <td>开场舞</td>
                <td colspan="2">歌曲串烧</td>
            </tr>
            <tr>
                <th scope="row">上午9点</th>
                <td>小品</td>
                <td>相声</td>
                <td rowspan="2">大型魔术</td>
            </tr>
            <tr>
                <th scope="row">上午10点</th>
                <td>杂艺表演</td>
                <td>乐队歌曲</td>
            </tr>
        </tbody>
    </table>
</body>