HTML 初步

HTML 初步

HTML

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

1.W3C 标准

World Wide Web Consortium(万维网联盟)

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

http://www.w3.org/

http://www.chinaw3c.org/

 

W3C标准包括

1.结构化标准语句(HTML`XML)

2.表现标准语句(CSS)

3.行为标准(DOM`ECAScript)

<!--DOCTYPE :告诉浏览器,我们要使用什么规范-->
<!--HTML 注释 快捷键 CTRL +/-->
<!DOCTYPE html>
<html lang="en">
<!-- <head> 标签代表网页头部 -->
<head>
   <!-- meta 描述性标签 ,他用来描述我们网站的一些信息-->
   <!-- meta 一般用来SEO -->
   <meta charset="UTF-8">
   <meta name="description" content="第一个网站">
   <!-- 关键字作用 -->
   <meta name="keywords" content="第一个网站">
 
<!-- <title> 网页的标题-->
   <title>第一个网页</title>
</head>
<!-- <body> 标签代表网页的主体 -->
<body>
Hello World
</body>
</html>

2.基本标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<!--段落标签-->
<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>
<!--字体 标签-->
粗体 :<strong>I love you</strong> <br>
斜体 :<em>I love you</em> <br>
<!--特殊符号-->
空 格 <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
</body>
</html>

3.图像标签

常见的图像格式

JPG GIF PNG BMP

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>图像标签</title>
</head>
<body>
<!-- img 学习
src :图片地址(必填)
     相对地址(推荐使用),绝对地址
   ../   --上一级目录
   alt :图片名字(必填)
-->
<img src="../resoureces/image/1.jpg" alt="表情包" title="悬停文字" width="300" height="500">
</body>
</html>

4.链接标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>链接标签学习</title>
</head>
<body>
<!-- a 标签学习
   href:必填表示跳转到那个页面
   target:表示窗口在那里打开
     _blank 在新标签中打开
     _self 在自己的网页中打开
-->
<!--锚链接 使用name 做标记-->
<a name="top">顶部</a>
<a href="我的第一个网页.html" target="_blank">点击我跳转到第一个页面</a>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<a href="我的第一个网页.html">
  <img src="../resoureces/image/1.jpg" alt="表情包" title="悬停文字" width="300" height="500">
</a>
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
# 加标记名字
-->
<a href="#top">回到顶部</a>
<!-- 在别的也面做好标记 也可以跳转到别的页面 -->
<hr>
<!--功能链接
邮件链接:mailto:
QQ链接 qq推广
-->
<a href="mailto:2571057916@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2571057916&site=qq&menu=yes">
   <img border="0" src="http://wpa.qq.com/pa?p=2:2571057916:51" alt="点击加我领取小电影" title="点击加我领取小电影"/>
</a>
</body>
</html>

5.行内元素块元素

 

 

6.列表

什么是列表

列表就是信息资源的一种展示形式.它 可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的消息

列表的分类

无序列表

有序列表

定义列表

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围:试卷 ,问答
-->
<ol>
 <li>java</li>
 <li>python</li>
 <li>运维</li>
 <li>C/C++</li>
</ol>
<!--无序列表
应用:导航 ,侧边栏
-->
<ul>
 <li>java</li>
 <li>python</li>
 <li>运维</li>
 <li>C/C++</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>

   <dd>c</dd>
   <dd>c++</dd>

</dl>
</body>
</html>

7.表格

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>表格学习</title>
</head>
<body>
<!--表格 table
行 tr rows
列 td
colspan 跨列
rowspan 跨行
 -->
<table border="1px">
       <tr>
         <td>1-1</td>
         <td>1-1</td>
         <td>1-1</td>
         <td>1-1</td>
       </tr>
       <tr>
         <td>2-1</td>
       </tr>
       <tr>
         <td>3-1</td>
       </tr>
</table>
</body>
</html>

8.视频和音频

视频元素 :video

音频元素:audio

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>视频和音频</title>
</head>
<body>
<!--
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../resoureces/audio/1.mp3" controls autoplay>点击播放</video>
<video src="../resoureces/video/1.qlv" controls autoplay></video>
</body>
</html>

 

 

 

posted on 2021-06-27 14:25  小白jva  阅读(130)  评论(0编辑  收藏  举报

导航