HTML5

HTML5基础

W3C

World Wide Web Consortium(万维网联盟)

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

W3C标准包括

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

表现标准语言(CSS)

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

常见IDE

  1. 记事本
  2. Dreamweaver
  3. IDEA
  4. 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值