HTML基本标签

最新推荐文章于 2022-07-26 17:07:39 发布

大吖么大白菜

最新推荐文章于 2022-07-26 17:07:39 发布

阅读量54

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_45964083/article/details/115821667

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础

HTML：Hyper Text Markup Language(超文本标记语言)
超文本包括：文字、图片、音频、视频、动画等

W3C标准（world Wide Web Consortium 万维网联盟）：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

<!--DOCTYPE：告诉浏览器，要是用什么规范-->
<!DOCTYPE html>

<!--所有内容都要写在HTML标签里面-->
<html lang="en">
<!--head 是网页的头部-->
<head>
      <!--meta是描述性标签，它用来描述我们网站的一些信息-->
      <!--meta一般用来做SEO（搜索引擎优化 Search Engine Optimization）-->
    <meta charset="UTF-8">
    <meta name="keyname" content="白了个白">
    <meta name="description" content="这里是学习html的内容">

    <title>网页的标题</title>
</head>

<!--body代表网页主体-->
<body>
hello world
</body>
</html>

基本标签

题目标签

（快捷方式是h+Tab，段落标签是p+Tab，类比，其他的各种标签都是如此用快捷键）

<h1>一级标签</h1>
<h2>二级标签</h2>

段落标签（里面不一定只填文字，还可以填别的链接标签之类的）

用了就会分段

<p>哈哈哈</p>
<p>呵呵呵</p>

换行标签（比段落标签的行间距更加紧凑）

它是单标签，自闭合标签，“/”可加可不加

呵呵呵<br/>

水平线标签(也是自闭合标签)

<hr/>

效果为：

字体样式标签

粗体： <strong>呵呵</strong>
斜体： <em>呵呵</em>

注释和特殊标签

注释：   <!--这是注释-->
空格：   &nbsp;（注意要加；）
大于号： &gt;
小于号： &lt;
版权符号：&copy;

图像标签

img图像标签

src:图片地址：相对地址（推荐）；绝对地址

相对地址：
    ../ 这是到上级目录。如：
<img src="../resources/image/1.png" alt="呵呵" title=“悬停文字” width=“200” height=“200”>

在这里插入图片描述
首先用。。/返回上级，然后再写resources地址，不然无法直接找到图片地址

alt：为图片加载失败后会返回的内容。如：
在这里插入图片描述
title：为鼠标悬停图片后会显示的文字

width和height为宽高

链接标签

普通的超链接

a标签
href：必填，表示跳转到哪个页面
target：表示窗口在哪里打开
里面填_blank表示为在新页面里打开
里面填_self表示为在当前页面里打开（默认为_self）

文字超链接

<a href=“1.第一个网页.html” target="_blank">点击我跳转到页面</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>

图片超链接,改写文字的地方填写图片标签即可

<a href=“1.我的第一个网页,html”>
     <img src="../resources/image/1.png" alt="呵呵" title=“悬停文字” width=“200” height=“200”>
</a>

锚链接

需要一个标记用name关键字设置标记名称，然后用href=“#标记名称”进行跳转

        <a name="top">顶部</a>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
       <a href="#top">回到顶部</a>

也可以跳转到别的页面的锚链接，只需在链接地址后加#内容即可，如：

<a href=“1.第一个网页.html#top” target="_blank">点击我跳转到页面</a>

功能性链接

下载相关的软件之后，点击可以发送邮件

<a href="mailto:1231231231@qq.com">点击联系我</a>

列表标签

有序列表（应用范围：试卷，问答）

<ol>
    <li>java</li>
    <li>c++</li>
    <li>python</li>
</ol>

显示为：
在这里插入图片描述

无序标签(应用范围：导航，侧边栏。。)

<ul>
    <li>java</li>
    <li>c++</li>
    <li>python</li>
</ul>

在这里插入图片描述

自定义列表

dl:标签
dt：列表名称
dd：列表内容

<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>c++</dd>
    <dt>位置</dt>
    <dd>河北</dd>
    <dd>山西</dd>
</dl>

在这里插入图片描述

表格标签（table）

行 tr；列 td；colspan=“4”：跨4列；rowspan=“2”：跨2列

<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr >
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

在这里插入图片描述

视频和音频

controls:控制条
autoplay：自动播放

<video src="MP4文件的地址填好"  controls  autoplay></video>
<audio src="MP3文件的地址填好"  controls  autoplay></audio>

大吖么大白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基本标签

HTML基础HTML：Hyper Text Markup Language(超文本标记语言)超文本包括：文字、图片、音频、视频、动画等W3C标准（world Wide Web Consortium 万维网联盟）：结构化标准语言（HTML、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript）<!DOCTYPE html><h
复制链接

扫一扫