HTML学习

最新推荐文章于 2024-09-22 10:46:41 发布

大猩猩StudyData

最新推荐文章于 2024-09-22 10:46:41 发布

阅读量250

点赞数

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

本文链接：https://blog.csdn.net/weixin_39391878/article/details/121392239

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!--DOCTYPE:告诉浏览器，我们用什么规范-->
<!DOCTYPE html>
<html lang="en">

<!--head:网页头部-->
<head>
    <!--meta:描述性标签，用来描述我们网站的一些信息
    一般用来做SEO
    -->
    <meta charset="UTF-8">
    <meta name="keywords" content="SEO关键词">
    <meta name="description" content="描述我们的网站信息">
    <!--title:网页标题-->
    <title>我的第一个HTML网页</title>
</head>

<!--body:网页主体-->
<body>

<!--标题标签，h1到h6-->
<h1>标题标签</h1>
<h2>也是标题标签，和h1字体大小不一样</h2>
<!--段落标签-->
<p>这是一个段落  这是一个段落</p>
<!--水平线标签，只有闭合标签-->
<hr/>
<!--换行标签，只有闭合标签-->
我是一个换行标签<br/>
<!--字体样式-->
<strong>粗体</strong>
<em>斜体</em>
<!--特殊符号，&开头-->
空格 &nbsp;
大于 &gt;
小于 &lt;
版权 &copy;
<!--图片标签
src：图片地址
alt：图像的替代文字，如果图片没有加载出来，则显示这个文字
title：鼠标悬浮在上面的时候，显示的文字
width：宽度
height：高度
-->
<img src="src" alt="文字" title="悬浮文字" width="900px" height="700px">

<!--链接标签
href：链接路径
target：目标窗口位置，_blank 用新的窗口打开 默认_self当前窗口打开
-->
<a href="path" target="_blank">链接文本或者图片，这里可以插入一个图片标签</a>

<!--锚链接标签
1、需要一个锚标记,使用id或者name作为标记
2、跳转到标记，使用#，或者前面加上具体的某个页面的位置
-->
<a id="top">顶部</a>
<a href="#top">回到顶部</a>
<a id="down">底部</a>
<a href="other.html#down">回到底部</a>

<!--功能性链接标签
邮件链接：mailto
-->
<a href="mailto：12345678@qq.com">点击联系我</a>

<!--列表：有序列表、无序列表、自定义列表-->
<!--有序列表
1、语文
2、数学
-->
<ol>
    <li>语文</li>
    <li>数学</li>
</ol>
<!--无序列表，前面有小黑点
语文
数学
-->
<ul>
    <li>语文</li>
    <li>数学</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
科目名称
语文
数学
-->
<dl>
    <dt>科目名称</dt>
    <dd>语文</dd>
    <dd>数学</dd>
</dl>

<!--表格标签
table：标签
tr：行
td：列
colspan：跨列
rowspan：跨行
-->
<table >
    <tr>
        <td colspan="2">1-1</td>
        <td>1-2</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

<!--
音频标签
视频标签
src：地址
controls：进度条
autoplay：自动播放
-->
<video src="path" controls autoplay></video>
<audio src="path" controls autoplay></audio>

<!--内联框架-->
<iframe src="www.baidu.com" width="300px" height="300px" ></iframe>
</body>
</html>