当前位置:首页 > 前端开发 > HTML(1)基本标签

HTML(1)基本标签

6个月前 (05-27)54

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>

标签格式

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

完整网页结构

HTML(1)基本标签 _ Java侠
我们来看如下示例:

<!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 :创建网页内导航
HTML(1)基本标签 _ Java侠

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

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

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

相对 URL 实例:跳转到同一网站的另一个网页
HTML(1)基本标签 _ Java侠

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

绝对 URL 实例:跳转到另一网页
HTML(1)基本标签 _ Java侠
指定了网页的完整路径

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

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

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

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

换行
<br>标签

列表

列表都是由父元素和子元素构成的,父元素用于指定要创建的列表的类型,子元素用于指定要创建的列表项目类型
三种列表类型组成元素如下:
HTML(1)基本标签 _ Java侠
有序列表实例

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

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

显示效果如图:
HTML(1)基本标签 _ Java侠
无序列表实例

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

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

显示效果如图:
HTML(1)基本标签 _ Java侠
描述列表实例

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

<body>
    <p>HTML里程碑</p>
        <dl>
            <dt>19951124</dt>
            <dd>HTML2.0发布,对应的IETF文档为RFC 1866</dd>
            <dt>1997114</dt>
            <dd>HTML 3.2以W3C推荐标准的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
            <dt>19971218</dt>
            <dd>HTML 4.0发布。</dd>
            <dt>20141028</dt>
            <dd>HTML5 发布。</dd>
            <dt>2016111</dt>
            <dd>HTML 5.1发布。</dd>
        </dl>
</body>

HTML(1)基本标签 _ Java侠
文本格式化

一个网页中通常包含了文本信息,对于不同的文本类型,我们可以选择合适的 HTML 语义化元素进行标记
HTML(1)基本标签 _ Java侠
引用

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(1)基本标签 _ Java侠

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 属性
HTML(1)基本标签 _ Java侠
结构更清晰的表格
顾名思义,<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>

效果如图
HTML(1)基本标签 _ Java侠

作者:zcy_inspire
来源链接:https://blog.csdn.net/zcy_inspire/article/details/106873961

标签: HTML

“HTML(1)基本标签” 的相关文章

a标签target属性

html中特殊的目标(注意事项) 有 4 个保留的目标名称用作特殊的文档重定向操作: _blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。...

SpringMVC 表单标签中 htmlEscape 属性的作用

SpringMVC 表单标签中 htmlEscape 属性的作用

一、SpringMVC 表单元素标签 如下: <form:textarea path="remarks" htmlEscape="false"...

html 行级元素和块级元素标签列表

html 行级元素和块级元素标签列表

一、显示元素 (一)块级元素 div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockq...

HTML:设置背景颜色和图片

设置背景颜色 <html> <head> <!-- <style> body...

关于HTML中下拉框的一些属性

关于HTML中下拉框的一些属性

首先,我们的初始下拉框是这样的。 这显然需要改,再来看看我们下拉框的html代码 <body> <h1 align...

HTML - 标签和属性

1. 标签 -单标签         只有自己一部分,自己把自己闭合的标签...

html 点击元素后颜色的变换

可以利用CSS的伪类实现: a:link,定义正常链接的样式; a:visited,定义已访问过链接的样式; a:hover,定义鼠标悬浮在链接上时...

html中cellpadding属性作用,table标签cellpadding属性的作用及使用方法

html中cellpadding属性作用,table标签cellpadding属性的作用及使用方法

在html中制作表格,需要用到table标签,而该标签中的cellpadding属性可设置单元格边距大小,下面我们就一起学习一下cellpadding属性的作用及使...

html5的颜色的渐变的问题

html5的颜色的渐变的问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...

在Html的CSS中去除
  • 标签前面小黑点以及ul、LI部分属性方法
  •       div是很多人做网站都会用到的,但在显示默认效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,现在我们可以用以...