初识HTML

HTML

什么是HTML

Hyper Text Markup Language(超文本标记语言)

HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持
    • 微软
    • Google
    • 苹果
    • Opera
    • Mozilla
  • 市场需求
  • 跨平台

W3C标准

  • W3C
    • World Wide Web Consortium(万维网联盟)
    • 成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构
    • http://www.w3.org/
    • http://www.chinaw3c.org/
  • W3c标准包括
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)

一个网页

<!-- DOCTYPE:告诉浏览器使用的规范 -->
<!DOCTYPE html>

<html lang="en">

<!-- head标签代表网页头部-->
<head>
    <!-- meta描述性标签,他用来描述网站的一些信息-->
    <!-- meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="关键字">
    <meta name="description" content="内容描述">

    <!-- title网页标题-->
    <title>一个网页</title>
</head>

<!-- body标签代表网页主体-->
<body>

</body>
</html>

标签

基本标签

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

<!-- 标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>阿珍爱上了阿强</h5>

<!-- 段落标签-->
<p>阿珍爱上了阿强</p>
<p>在一个有星星的夜晚</p>
<p>飞机从头顶飞过</p>
<p>流星也划破那夜空</p>
<p>虽然说人生并没有什么意义</p>
<p>但是爱情确实让生活更加美丽</p>
<p>阿珍爱上了阿强</p>
<p>在一个有星星的夜晚</p>
<p>飞机从头顶飞过</p>
<p>流星也划破那夜空</p>
<p>虽然说人生并没有什么意义</p>
<p>但是爱情确实让生活更加美丽</p>

<!--水平线标签-->
<hr/>
<!--换行标签-->
阿珍爱上了阿强 <br/>

在一个有星星的夜晚 <br/>

飞机从头顶飞过<br/>

流星也划破那夜空<br/>

虽然说人生并没有什么意义<br/>

但是爱情确实让生活更加美丽<br/>

阿珍爱上了阿强<br/>

在一个有星星的夜晚<br/>

飞机从头顶飞过<br/>

流星也划破那夜空<br/>

虽然说人生并没有什么意义<br/>

但是爱情确实让生活更加美丽<br/>

<!--粗体,斜体-->
<h1>字体样式标签</h1>

<strong>粗体</strong>
<br/>
<em>斜体</em>
<br/>
<!--特殊符号-->

空 格:一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
&gt;大于号
<br/>
&lt;小于号
<br/>
&copy;版权符号
</body>
</html>

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src:图片地址
    相对地址(推荐使用),绝对地址
    ../   返回上一级目录

    alt: 当图片加载失败时 显示alt的值
    title: 悬停时,显示title的值
-->
<img src="../resource/image/tx.jpg" alt="图片标签" title="美女" >
<a href="链接标签.html#down" target="_blank">跳转</a>
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--a标签
href:必填,表示要跳转到的网页
target: 表示窗口在哪里打开
     _blank : 在新页面中打开
     _self : 在自己的网页中打开
-->
<h1 id="top">顶部</h1>
<a href="一个网页.html" >点击跳转到第一个网页</a>
<br/>
<a href="基本标签.html" target="_self">点击跳转到基本标签网页</a>
<br/>
<a href="http://www.baidu.com">点击跳转到百度</a>
<br/>
<!--功能性标签

邮件链接:mailto:
QQ链接
-->
<a href="mailto:934947443@qq.com">点击联系我</a>
<br/>
<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::53" alt="你好" title="你好"/>
</a>
<br>

<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<a href="图像标签.html" target="_blank"> <img src="../resource/image/tx.jpg" alt="图片"></a>
<br/>
<!--锚链接
1.需要一个锚标记
2.跳转到标记点 #

-->
<a href="#top" name="down">回到顶部</a>



</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值