HTML 初步
HTML
Hyper Text Markup Language(超文本标记语言)
1.W3C 标准
World Wide Web Consortium(万维网联盟)
成立于1994年 ，Web 技术领域最权威和具影响力的国际中立性技术标准机构
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>
空 格
</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>
标签：网页,--,标签,列表,初步,HTML,nbsp 来源： https://www.cnblogs.com/123JiBin/p/14940522.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。