H5新手教程，小白来看看。?

来源：网络收集时间：2022-01-08 下载这篇文档手机版

说明：文章内容仅供预览，部分内容可能不全，需要完整文档或者需要复制内容，请下载word后使用。下载word有问题请添加微信号:或QQ：处理（尽可能给您提供完整文档），感谢您的支持与谅解。

1.学习前准备

既然想学习好H5，只是这样看是不够的，还需要动手练习，以及及时复习，所以我推荐几款软件来配合我们的学习。

1.1.Hbuilder

t010a12696849cae3d8

必备软件，学习H5的关键，你要学习一切一切的H5代码都需要他，当然你如果熟悉别的软件也可以。本小编比较熟悉的是这款软件，所以也就推荐你们使用，个人认为还是比较适合新手入门的。

1.2.有道云笔记

t014626cff9c80c0275

2.HTML基础

好了，做好之前的准备，那么我们就来正式了解一下HTML吧

2.1.什么是HTML

HTML是指超文本标记语言（Hyper Text Markup Language）。

HTML是一种用来编写网页的语言，使用浏览器将他翻译成相应的页面。

HTML并不是编程语言，他是一种标记语言。

3.HTML基础结构

HTML文档主要包括三大部分：

文档声明部分（文档开头第一行，表明文档版本）

头部部分（给浏览器的配置及给搜索引擎的信息）

主体部分。（网页的内容都在这）

t01ae5d571cdce828d8t019728b466ef228df6

4.部分常用标签（必不可少）

（用于表述网页的元数据，及网页的基本信息）

4.1.标签:</p><p></p><p>网页的标题，即网页选项卡上的文字</p><p>4.2.<link>标签:</p><p>使用Link标签链接网页标签</p><p></p><p>常用属性：</p><p>rel属性：声明链接文件的类型</p><p>type属性：可以省略</p><p>href属性：表示图片的路径地址</p><p>4.3.<meta>标签</p><p>描述文件类型和编码，搜索关键字和描述。</p><p>1.charseat：设置文档字符集编码格式。</p><p>2.HTTP-EQUIV：（将我们的信息写给浏览器看，让浏览器按里边的要求执行）</p><p>属性值：Content-type（文档类型）Refresh（网页定时刷新）set-cookie（设置缓存）</p><p></p><p>需配合content使用（http-equiv属性只表明设置哪部分，具体的设置内容放在content属性中）</p><p>3.name属性（写给搜索引擎）：使用方法同上，需掌握的属性值author（作者）keywords（关键字）description（网页描述）</p><p>4.content属性配合其他使用。</p><p>t01bd41293901e20af7</p><p>5.<body>部分常用标签（重点，最主要部分）</p><p>5.1.块级标签</p><p>t01a1940443d1e0ad32</p><p>t01a2c8c77e8f79c59c</p><p>2.基于布局的块级标签</p><p>t0139e20496a7f68e37</p><p>5.3.常见的行级标签</p><p>1.<span>（文本）：<span></span>(文本):无实际意义，用来包裹某部分文字，修改特定样式。</p><p>2.<q>（短引用）<q></q>（短引用）显示文字为“”引起来。</p><p>3.<small>（缩小字体）<small></small>（缩小字体）表示缩小字体，可以多层嵌套，直到字号最小。</p><p>4. <em>（强调） <strong>（强调）</p><p><i>（倾斜） <b>（加粗）</p><p>【Strong，em,b,i标签的区别】</p><p>1.Strong和em都表示强调，但是Strong是加粗，em是倾斜。</p><p>2.Strong和b都是加粗，em和i都能倾斜，但是Strong和em有强调含义。HTML5要求标签尽可能的实现语义化。</p><p>5.（超链接）</p><p>t01dded7983bbf99703</p><p>a.属性：</p><p>1）.href:可以是网络连接，也可以是本地文件。（路径确定同img ）</p><p>2）.target：超链接打开的位置，_self自身页面（默认）_blank 新页面1.href:可以是网络连接，也可以是本地文件。（路径确定同img ）</p><p>3）.title：鼠标之上后显示的文字。</p><p>4）.rel:指定当前文档与被连接文档的关系。"prev":被连接文档是前一篇，"next"：被连接文档是后一篇,（了解）"icon"图标"stylesheet"样式表，"prefetch"预加载。</p><p>b.锚链接</p><p>1.本页面锚链接：</p><p>a.设置锚点。</p><p>b.在超链接的href属性中，使用#name跳转到对应锚点</p><p>2.页面间锚链接： </p><p>a.在即将跳转的页面指定位置设置锚点。</p><p>b.在超链接的href属性中，使用页面地址.html#name跳到对应位置。</p><p>c.功能性连接： </p><p>1.mailto://763066931@qq.com 给指定邮箱发邮件</p><p>2.file:///f/ 打开指定文件。 </p><p>3.tencent://message/?uin=763066931 给指定qq发消息</p><p>6.<img />(图片)</p><p>t015c2eaf54ae7166b2</p><p>1).src:表示引用图片地址</p><p>2).height="100px"width="100px"图片的宽度高度，可以用css样式（style=""）代替。</p><p>3).title:图片的标题，鼠标指上后显示的文字。</p><p>4).alt:当图片无法加载时显示的文字。</p><p>5).align:设置图片周围文字相对于图片的位置，top center botton。</p><p></p><p>5.4.表格</p><p>表格：</p><p>表格的行：</p><p>表格的列：</p><p>表头：<th></th>:默认加粗，单元格居中。</p><p>常用属性：</p><p>1.border：给表格增加边框，当border属性增大时，只有外围框线增粗，中间框线不变</p><p>2.cellspacing：单元格与单元格之间的距离（默认一个像素），当cellspacing="0"，的时候，</p><p>只会是单元格间隙为0，但不会合并边线。(不常用)</p><p>【表格边框合并】使用style="border-collapse: collapse;无需再写cellspacing="0""</p><p>3.cellpadding:每个单元格内文字与边缘之间的距离</p><p>4.width height：表格的宽高（不常用）</p><p>5.align:表格的对齐方式。left center right调整表格在浏览器的位置，</p><p>相当于让表格浮动，会影响表格后边文字的排列方式（不常用）</p><p>6.bgcolor:背景色，等于style="backgroundcolor:"</p><p>7.background:背景图片等同于 style = "background-image"且背景图会覆盖背景色</p><p>8.bordercolor:边框颜色。</p><p>--></p><p></p><p>             <div class="vip"> <div class="pay-tit">注册会员下载</div>  <div class="pay-viptip">全站内容免费自由复制</div> <div class="pay-vipto"><a href="/user/index.php">马上注册会员</a></div> </div> <div class="vip-up"> <div class="pay-tit">注册会员下载</div>  <div class="pay-viptip">全站内容免费自由复制</div> <div class="pay-vipto"><a href="/user/index.php">马上注册会员</a></div> </div> <div class="pay-tips">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信： QQ：</div> </div> </div> </div> <div class="theme-popover-mask"></div> <script type="text/javascript"> $(".pay1 img").click(function () { $(".wxpay").css("display", "block"); $(".alipay").css("display", "none"); $(".pay1 img").addClass("over"); $(".pay2 img").removeClass("over"); }); $(".pay2 img").click(function () { $(".wxpay").css("display", "none"); $(".alipay").css("display", "block"); $(".pay1 img").removeClass("over"); $(".pay2 img").addClass("over"); }); </script> <script type="text/javascript"> $(document).ready(function ($) { $('.word-pic a').click(function () { $('.theme-popover-mask').fadeIn(100); $('.theme-popover').slideDown(200); $.ajax({ type: "POST", dataType: "json", url: "/user/check_rank.php", data: {'aid': '1278005'}, async: false, success: function (data, textStatus, jqXHR) { if (data.code === "2") { //游客 $(".vip-up").hide(); $(".vip-pay").hide(); var downid = '1278005' $('.wxpay a').click(function(){ var payurl = '/hupipay/payment_pay_tz.php?payway=wx&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); $('.alipay a').click(function(){ var payurl = '/hupipay/payment_pay_tz.php?payway=ali&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); } else if (data.code === "3") { $(".theme-popover .theme-poptit b").text("会员快捷下载通道"); //注册会员 $(".guest-pay").hide(); $(".vip").hide(); $(".vip-pay").show(); $(".vip-up").show(); var downid = '1278005' $('.wxpay a').click(function(){ var payurl = '/hupipay/payment_get.php?version=1.1&paymethod=2&pid='; payurl = payurl.replace('payment', 'pay'); var gotourl = payurl + downid location.href = gotourl; }); $('.alipay a').click(function(){ var payurl = '/hupipay/payment_get.php?version=1.1&paymethod=3&pid='; payurl = payurl.replace('payment', 'pay'); var gotourl = payurl + downid location.href = gotourl; }); } else if (data.code === "5") { layer.alert('超出会员组下载次数限制！', {icon: 2}); } else if (data.code === "6") { layer.alert('特权会员到期！', {icon: 2}); } else { location.href = '/plus/d.php?id=1278005'; } } }); }) $('.theme-poptit .close').click(function () { $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200); }) }) </script> <script type="text/javascript"> $(document).ready(function ($) { $.ajax({ type: "POST", dataType: "json", data: {'aid': '1278005'}, url: "/user/check_rank.php", async: false, success: function (data, textStatus, jqXHR) { if (data.code === "2") { $(document).keydown(function (e) { if (e.ctrlKey && (e.keyCode == 65 || e.keyCode == 67)) { $('.theme-popover-mask').fadeIn(100); $('.theme-popover').slideDown(200); } }); document.body.oncopy = function () { $('.theme-popover-mask').fadeIn(100); $('.theme-popover').slideDown(200); return false; } } } }); }) </script> </body> </html>