HTML5

最新推荐文章于 2024-10-29 14:54:04 发布

爱笑女孩的微

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量244

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/zixiaonvhai/article/details/122461316

版权

HTML5基础

W3C

World Wide Web Consortium(万维网联盟)

成立于1994年，Web领域最权威和具有影响力的国际中立性技术标准机构

W3C标准包括

机构化标准语言(HTML、XML)

表现标准语言(CSS)

行为标准(DOM、ECMAScript“javascript”)

常见IDE

记事本
Dreamweaver
IDEA
WebStorm

如何写第一个网页

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

<!--head 代表网页头部（Ctrl + / 是注释的快捷键）-->
<head>
<!--meta描述性标签，用来描述网页的一些内容-->
<!--mate一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name ="keyworlds" content=“爱笑女孩的第一个网页">
    <meta name ="keyworlds" content=“来这里可以了解生活">

<!--title 网页标题-->
    <title>my first title</title>
</head>

<!--body网页主题-->
<body>

hello world!

</body>
</html>

HTML的基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h3>四级标签</h3>
<h4>五级标签</h4>
<h4>六级标签</h4>
<h6>七级标签</h6>

<!--段落标签(P然后按Tab键为快捷键)-->
<p>燕子，穿花衣，年年春天来这里，我问燕子你为啥来</p>
<p>燕子说：“这里的春天最美丽！</p>
<p>”小燕子，告诉你，今年这里更美丽，我们盖起了大工厂，装上了新机器，欢迎你，长期住在这里</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
燕子，穿花衣，年年春天来这里，我问燕子你为啥来 </br>
燕子说：“这里的春天最美丽！ </br>
”小燕子，告诉你，今年这里更美丽，我们盖起了大工厂，装上了新机器，欢迎你，长期住在这里 </br>

<!--粗体 ， 斜体-->

<h1>字体样式标签</h1>
粗体 ：<strong>你是猪吗？</strong>
斜体 ：<em>你才是猪</em>

<!--特殊符号-->
空    格 ：空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

<br/>
大于 ：&gt;

<br/>
小于 ：&lt;

<br/>
&copy; 版权所有爱笑女孩的微

<a href="图像标签学习.html#down">跳转</a>
</body>
</html>

html的图像标签

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

<!--使用name作为标记-->
<a name="top">顶部</a>
<!--img标签学习
src : 图片地址(相对地址"推荐使用" 绝对地址)（必填）
../ :代表上一级目录
alt: 图片名字 (必填)-->

<img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400">

<!--链接标签
a标签
href ：必填，表示要跳转到的哪个界面
target ： 表示窗口在哪里打开
_blank 在新标签中打开
 _self 在自己的网页中打开-->

<a href="my first web.html">点击跳转到页面-</a>
<!--ctrl + D 将当前行复制到下一行-->
<a href="https://www.baidu.com">点击跳转到百度页面-</a>

<br>
<a href="my first web.html">
    <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
<p>
    <a href="my first web.html">
        <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
</p>
<p>
    <a href="my first web.html">
        <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
</p>
<p>
    <a href="my first web.html">
        <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
</p>
<p>
    <a href="my first web.html">
        <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
</p>
<p>
    <a href="my first web.html">
        <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
</p>
<p>
    <a href="my first web.html">
        <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
</p>
<p>
    <a href="my first web.html">
        <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
</p><p>
    <a href="my first web.html">
        <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
</p><p>
    <a href="my first web.html">
        <img src="../resources/img/1.PNG" alt="截图" title="悬停文字" width="300" height="400"></a>
</p>



<!--锚链接
1、需要一个锚标记
2、跳转到标记
#-->
<a href="#top">回到顶部</a>
<a name="down">down</a>

<br>
<!--功能性链接

邮件链接 ：mailto-->

<a href="mailto:邮箱账号">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好，我是你的小可爱" title="你好，我是你的小可爱"/>
</a>

</body>
</html>