H5简介
<!--HTML：超文本标记语言 （英文：HyperText Markup Language ）是一种用于创建网页的标准标记语言，但是它不属于编程语言的范畴-->
<!-- HTML5:它是HTML标记语言的一个最新版本，其定义了很多新元素，比如新语义标签，智能表单，多媒体标签等，可以帮助开发者创建丰富的互联网应用 -->
<!-- 通常情况下，我们的一个网页可以分为三个部分：HTML,CSS,JAVASCRIPT.如果把一个人比做一个人的话，HTML相当于人的骨架，CSS相当于人的皮肤，JAVASCRIPT相当于人的动作，这三者结合起来才能构成一个好看的网页 -->
H5基本标签实例1
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 图像标签：img标签：单标签 -->
<!-- img标签属性：1.src:图像的路径2.alt:图片不能显示的时候替换的文本 -->
<img src="../images/1.jpg" alt="">
<img src="../images/1111.jpg" alt="没有找到此图片">
<img src="../images/1.jpg" title="佩奇">
<img src="../images/1.jpg" title="设置宽度和高度" width="50">
<img src="../images/1.jpg" title="设置边框"border="50">
<img src="../images/1.jpg" alt="">
<!-- 超链接标签：a标签属性：1.href：指定要连接的地址。2.target：用于指定链接界面的打开方式，取值self和blangk. -->
<h3>友情链接：</h3>
<!-- 外部链接： -->
<a href ="https://www.baidu.com" target="_self">百度官网</a>
<a href ="https://www.sohu.com" target="_blank">搜狐官网</a>
<!-- 内部链接： -->
<a href ="html基本标签-2.html" >本地页面</a>
</body>
</html>
结果：
H5基本标签实例2
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html基本标签-3</title>
</head>
<body>
<!-- 无序标签 :并列关系-->
<!-- 注意事项：ul标签里面只能存放li标签，放其它的不推荐 -->
<h3>你喜欢的英雄联盟人物：</h3>
<ul>
<li>压缩</li>
<li>寡妇</li>
<li>男刀</li>
<li>男枪</li>
<li>提莫</li>
<li>雪人</li>
</ul>
<!-- 有序列表：即有排列顺序的，其各个列表项按照一定的顺序排列 -->
<ol >
<li>杰夫贝佐斯</li>
<li>比尔盖茨</li>
<li>沃伦巴菲特</li>
<li>博纳的阿诺特</li>
</ol>
<!-- 自定义列表：通常用于对术语或者名词进行解释和描述， 自定义列表的列表项前面没有任何符号 type来改变类型例如“a” start来决定从第几个开始-->
<dl>
<dt>北京</dt>
<dd>首都</dd>
<dd>国家化城市</dd>
<dd>一线城市</dd>
</dl>
</body>
</html>
结果：
H5的基本结构实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度一下，你就知道</title>
</head>
<body>
<!-- 标题标签：为了使网页更加语义化，我们经常会在页面中用到标题标签，HTML中提供了6个等级的标题。 -->
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
<!-- 段落标签（P）：在网页中要把文字有条理的显示出来，就离不开段落标签，就如同我们写文章一样，整个网页就可以分为入干个段落 -->
<p>段落标签</p>
<p>段落标签1</p>
<!-- 水平线标签：<hr/>在网页中经常会看到一些水平线将段落和段落之间隔开，是文章结构清晰，层次分明。hr:单标签 -->
<hr/>
<!-- 换行标签：<br/> -->
<!-- div和span标签：没有语义，是网页布局的盒子。div+sapn组合，div独占一行，span并不会独占一行-->
<div>这是一个div标签</div>
<span>这是一个span标签</span>
<span>这又是一个span标签</span>
<!-- 文本格式化标签： -->
<!-- <b></b>和<strong></strong>:文字以粗体的方式显示,通常使用strong -->
<!-- <i></i>和<em></em>:文字以斜体的方式显示 ,通常使用i标签-->
<!-- <s></s>和<del></del>:文字以删除线的方式显示 ,通常使用del-->
<!-- <u></u>和<ins></ins>:文字以加下划线的方式显示,通常会使用u标签 -->
好哇！<strong>哈日哦 </strong>WIO<b>俺吃饭</b>那陪我<br/>
<i>我知道你</i>，<em>在我世界最重要</em><br/>
<s>原件998</s>现价9.98<br/>
<ins>omgod!</ins>
</body>
</html>
结果：
.
<img src="图片地址" alt="图片加载不出来现实的内容" title="鼠标放在上面显示的内容" width="" height=""/>
(1)当前文件与目标文件在同一个目录下，直接写图片的名字加后缀
(2)当前文件与目标文件的文件夹在同一个目录下，文件夹/+图片名字后缀
(3)当前文件所处文件夹与目标文件夹在同一个目录下，../文件夹/图片名字后缀
表格
<table width="" height="" border="1" bgcolor="green" cellspacing="5" cellpadding="8">
<tr>
<td></td>
</tr>
</table>
表格宽度：width 表格高度：height 表格边框：border
单元格与单元格之间的间距：cellspacing="20" 单元格与内容之间的空隙cellpadding="10"
水平对齐方式：align="left/center/right";(如果此属性加到table相对于浏览器的对齐方式；如果加到tr或td上表示单元格内容相对于单元格的对齐方式)
垂直对齐：valign="top/middle/bottom"
rowspan="数字" 合并行
colsspan="数字" 合并列
扫一扫
1782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
