HTML简单学习记录

最新推荐文章于 2022-07-02 15:09:37 发布

Jatine

最新推荐文章于 2022-07-02 15:09:37 发布

阅读量3.2k

点赞数 21

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

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

版权

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>

最低0.47元/天解锁文章

Jatine

关注

21
点赞
踩
96

收藏

觉得还不错? 一键收藏
5
评论
HTML简单学习记录

文章目录HTML简单学习记录简介HTML基本结构网页基本标签图像标签链接标签超链接锚链接功能性链接行内元素和块元素列表表格视频和音频视频音频页面的简单布局iframe内联框架表单语法表单元素格式单选框多选框按钮下拉框文本域文件域邮件验证url验证数字验证滑块（音量）搜索框表单的应用表单的初级验证HTML简单学习记录简介HTML5（超文本标记语言）是 Hyper Text Markup Language 5 的缩写，超文本包括文字、图片、音频、视频、动画等等HTML基本结构<body&gt
复制链接

扫一扫