初识HTML

2021-10-28 11:06:09

1.1、什么是HTML

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

初识HTML

1.2、HTML发展史

初识HTML

1.3、HTML5的优势

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

1.4、W3C标准

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

1.5、常见IDE

记事本
Dreamweaver
IDEA
WebStorm
.......

1.6、HTML基本结构

初识HTML

1.7、网页基本信息

DOCTYPE声明
?

?
<meta>标签

1.8、网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号

 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
     <meta name="keyword" content="基本标签">
     <meta name="description" content="标题标签 段落标签 换行标签 水平线标签 字体样式标签 注释和特殊符号">
     <title>基本标签</title>
 </head>
 <body>
 <!-- 标题标签-->
 <h1>一级标签</h1>
 <h2>二级标签</h2>
 <h3>三级标签</h3>
 <h4>四级标签</h4>
 <h5>五级标签</h5>
 <h6>六级标签</h6>
 ?
 <!-- 段落标签 -->
 <p>我知道那些不该说的话
     让你负气流浪</p>
     想知道多年漂浮的时光
  <p>是否你也想家
      如果当时吻你 当时抱你
      也许结局难讲</p>
    <p>我那么多遗憾 那么多期盼</p>
 <!--水平线标签-->
 <hr/>
 <!--换行标签-->
 我知道那些不该说的话</br>
     让你负气流浪</br>
 想知道多年漂浮的时光</br>
 是否你也想家</br>
     如果当时吻你 当时抱你</br>
     也许结局难讲</br>
 我那么多遗憾 那么多期盼</br>
 ?
 <!-- 粗体， 斜体-->
 <h1>字体样式标签</h1>
 ?
 <P>粗体： <strong> I LOVE YOU  </strong></P>
 斜体： <em> I LOVE YOU</em>
 ?
 <!-- 特殊符号-->
 空       格
 空&nbsp;&nbsp;&nbsp; 格
 <br/>
 &gt;
 <br/>
 &lt;
 &copy;版权所有
 ?
 <!--
 特殊符号记忆方式
 &  ;
 -->
 ?
 </body>
 </html>

1.8、图像标签

常见图像格式

JPG
GIF
PNG
BMP
.......

初识HTML

1.9、链接标签

文本超链接
图像超链接

 <a href="path" target="目标窗口位置">链接文本或图像</a>

初识HTML

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>链接标签</title>
 </head>
 <body>
 <!--使用name标签作为标记-->
 <a name="top">顶部</a>
 <!--a标签
 href : 必填，表示要跳转到那个页面
 target : 表示窗口在哪里打开
 _blank 在新标签中打开
 _self 在自己的网页中打开
 -->
 <a href="图像标签.html">点击我跳转到图像标签</a>
 <a href="https://www.csdn.net">点击我跳转到CSDN</a>
 <br/>
 <a href="https://www.csdn.net" target="_blank"><img src="../resource/image/2.jpg" alt="图片不见了" title="跳转到CSDN" width="300" height="300"></a>
 <p> <a href="https://www.csdn.net" target="_blank"><img src="../resource/image/2.jpg" alt="图片不见了" title="跳转到CSDN" width="300" height="300"></a></p>
 <p> <a href="https://www.csdn.net" target="_blank"><img src="../resource/image/2.jpg" alt="图片不见了" title="跳转到CSDN" width="300" height="300"></a></p>
 <p> <a href="https://www.csdn.net" target="_blank"><img src="../resource/image/2.jpg" alt="图片不见了" title="跳转到CSDN" width="300" height="300"></a></p>
 <p> <a href="https://www.csdn.net" target="_blank"><img src="../resource/image/2.jpg" alt="图片不见了" title="跳转到CSDN" width="300" height="300"></a></p>
 <!-- 锚链接
 1.需要一个锚标记
 2.跳转到标记
 -->
 <a href="#top">回到顶部</a>
 <a name="down">down</a>
 <!-- 功能性链接
 邮件链接 ： mailto;
 -->
 <a href="mailto:1936065068@qq.com">点击联系我</a>

码农公寓

初识HTML

目录：

1.1、什么是HTML

1.2、HTML发展史

1.3、HTML5的优势

1.4、W3C标准

1.5、常见IDE

1.6、HTML基本结构

1.7、网页基本信息

1.8、网页基本标签

1.8、图像标签

1.9、链接标签

码农公寓

目录：

1.1、什么是HTML

1.2、HTML发展史

1.3、HTML5的优势

1.4、W3C标准

1.5、常见IDE

1.6、HTML基本结构

1.7、网页基本信息

1.8、网页基本标签

1.8、图像标签

1.9、链接标签

相关文章