HTML简单学习记录

这篇博客详细介绍了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>
  • 注释和特殊符号:
    注释:<!--注释 -->
    特殊符号:
    空格:&nbsp;
    大于号:&gt;
    小于号:&lt;
    版权符号:&copy;
  • 特殊符号记忆方式:
    以“&”开头,以“;”结尾,用“&+一个字母”可以预览特殊符号:
    在这里插入图片描述

图像标签

<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
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值