HTML简单学习记录

最新推荐文章于 2022-08-28 01:03:02 发布

Jatine

最新推荐文章于 2022-08-28 01:03:02 发布

阅读量3.9k

点赞数 21

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

本文链接：https://blog.csdn.net/asdfghjkl_zth/article/details/122764783

版权

这篇博客详细介绍了HTML5的基本结构，包括标题、段落、图像、超链接、行内元素与块元素、列表、表格、视频音频的使用，以及表单的语法和验证方法。通过实例展示了HTML5如何创建网页和实现交互功能。

摘要由CSDN通过智能技术生成

HTML简单学习记录

简介

HTML5（超文本标记语言）是 Hyper Text Markup Language 5 的缩写，超文本包括文字、图片、音频、视频、动画等等

HTML基本结构

在这里插入图片描述

<body>、</body>等成对的标签，分别叫开放标签和闭合标签，单独呈现的标签（空元素），如<hr/>意为用/来关闭空元素

DOCTYPE声明：告诉浏览器我们要使用什么规范
<title>标签
<meta>标签：描述性标签，用来描述网站的信息，一般用来做SEO（搜索引擎优化）

网页基本标签

标题标签：<h1>一级标签</h1>、<h2>二级标签</h2>…
段落标签：<p></p>
换行标签：<br/>
水平线标签：<hr/>
字体样式标签：
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
注释和特殊符号：
注释：
特殊符号：
空格： 
大于号：>
小于号：<
版权符号：©
特殊符号记忆方式：
以“&”开头，以“;”结尾，用“&+一个字母”可以预览特殊符号：

图像标签

<img src="path" alt="text" title="text" width="x" height="y" />

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >

</body>
</html>

其中：

"…/"指上级目录

src与alt是必填项，其他选填

链接标签

超链接标签：<a></a>

<a href="path" target="目标窗口位置">链接文本或图像</a>

在这里插入图片描述

其中：
href是必填项

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

<a href="https://www.baidu.com" target="_blank">点击我在新窗口跳转到百度</a>
<a href="https://www.baidu.com" target="_self">点击我在当前窗口跳转到百度</a>

<br>
<!--头像超链接-->
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E5%A4%B4%E5%83%8F&step_word=&hs=0&pn=95&spn=0&di=124960&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2876708552%2C1198222067&os=3794562073%2C801013625&simid=2876708552%2C1198222067&adpicid=0&lpn=0&ln=1978&fr=&fmq=1643707728507_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=head&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_source%2F1d%2F31%2F79%2F1d3179f050039cc45f9f62a105b12c3a_8.jpg%26refer%3Dhttp%3A%2F%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1646300533%26t%3D721bdd7ed82b9131d2a8f1785f0eb869&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3FuwvjAzdH3Flbab0-89nnn9b_z%26e3Bip4s&gsm=5c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDEsMiw1LDcsOCw2LDQsOQ%3D%3D">
    <img src="../resource/image/1.jpg" alt="头像" title="悬停文字" >
</a>

</body>
</html>

在这里插入图片描述

其中：

target="_blank"表示在新窗口跳转页面；target="_self"表示在当前窗口跳转页面

超链接

锚链接

1.需要一个标记
2.跳转到标记
通过”#“+标记名跳转到目标标记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title&l

最低0.47元/天解锁文章

HTML简单学习记录

文章目录

HTML简单学习记录

简介

HTML基本结构

网页基本标签

图像标签

链接标签

超链接

锚链接