[H5新手教程，小白来看看。]新手小白

发布时间：2019-07-02 05:33:19　影响了：人

1.学习前准备

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

1.1.Hbuilder

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

1.2.有道云笔记

2.HTML基础

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

2.1.什么是HTML

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

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

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

3.HTML基础结构

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

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

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

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

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><img src=".php?url=.png" data-size="undefined"/></p><p>5.<body>部分常用标签（重点，最主要部分） </p><p>5.1.块级标签</p><p><img src=".php?url=.png" data-size="undefined"/></p><p><img src=".php?url=.png" data-size="undefined"/></p><p>2.基于布局的块级标签</p><p><img src=".php?url=.png" data-size="undefined"/></p><p>5.3.常见的行级标签</p><p>1.（文本）：(文本):无实际意义，用来包裹某部分文字，修改特定样式。</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><img src=".php?url=.png" data-size="undefined"/></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><img src=".php?url=.png" data-size="undefined"/></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>表格：<table></p><p>表格的行：<tr></tr></p><p>表格的列：<td></td></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> <div id="pages" class="text-c"></div> <div class="c"></div> <div class="fenye"> <H2><li>上一篇：<a href="https://www.hunanhr.cn/xindetihui/2019/0702/504437.html">中性粒细胞百分比偏低的危害中性粒细胞百分比偏低，有什么危害，，，，</a></li></H2> <H2><li>下一篇：<a href="https://www.hunanhr.cn/xindetihui/2019/0702/504460.html">售后咨询技巧-试题答案x:试卷答案</a></li></H2> </div> </div> </div> <div class="adzx1"><script type="text/javascript">ok3w_ads("s009");</script></div> <div class="adzx2"><script type="text/javascript">ok3w_ads("s0010");</script></div> <div class="adzx3"><script type="text/javascript">ok3w_ads("s0011");</script></div> <div class="adsx1"><script type="text/javascript">ok3w_ads("s0012");</script></div> <div class="adsx2"><script type="text/javascript">ok3w_ads("s0013");</script></div> <div class="adsx3"><script type="text/javascript">ok3w_ads("s0014");</script></div> <h6 class="bt2">猜你想看</h6> <div class="xiangguan"> <div class="xgl fl"> <ul class="lie3"> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0703/511211.html" target="_blank">【十年扶促铺就小康之路云梯关下铭刻不朽丰碑】小康之路</a><span style="float: right;">(2019-07-03)</span></li> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0704/512459.html" target="_blank">什么奔跑的快乐奔跑的快乐</a><span style="float: right;">(2019-07-04)</span></li> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0704/512681.html" target="_blank">我现在就付诸行动感悟【我现在就付诸行动】</a><span style="float: right;">(2019-07-04)</span></li> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0702/505098.html" target="_blank">excel函数与公式应用大全pdf [excel公式应用大全] </a><span style="float: right;">(2019-07-02)</span></li> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0703/510242.html" target="_blank">社会实践心得体会【暑期社会实践活动心得体会】</a><span style="float: right;">(2019-07-03)</span></li> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0703/509152.html" target="_blank">[远离颈椎病，做做“米字功”]颈椎病可以练甩手功了</a><span style="float: right;">(2019-07-03)</span></li> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0704/511996.html" target="_blank">如何提升课堂教学质量【借助体态语言,提高课堂教学质量】</a><span style="float: right;">(2019-07-04)</span></li> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0702/505678.html" target="_blank">【学生会工作总结】学生会工作总结800字</a><span style="float: right;">(2019-07-02)</span></li> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0704/513798.html" target="_blank">毕业分配自荐书1 毕业自荐书</a><span style="float: right;">(2019-07-04)</span></li> <li><a href="https://www.hunanhr.cn/xindetihui/2019/0702/504652.html" target="_blank">Win7共享打印机出现无法保存打印机设置操作无法完成错误0x000006d9解决方法_无法保存打印机设置错误</a><span style="float: right;">(2019-07-02)</span></li> </ul> <div class="c"></div> </div> <div class="xgr fr"><script type="text/javascript">ok3w_ads("s0015");</script></div> <div class="c"></div> </div> <div class="adxg1"><script type="text/javascript">ok3w_ads("s0016");</script></div> <div class="adxg2"><script type="text/javascript">ok3w_ads("s0017");</script></div> <div class="adxg3"><script type="text/javascript">ok3w_ads("s0018");</script></div> </div> <div class="mright fr" > <div class="adr1"><script type="text/javascript">ok3w_ads("s0019");</script></div> <h6 class="bt2">最新文章</h6> <div class="txt_1"> <ul class="lie3"> <li><h3><a href="https://www.hunanhr.cn/yanjianggao/2019/0703/508400.html" target="_blank" title="[浅议钢结构焊接技术发展现状及趋势]两层120平米钢结构造价">[浅议钢结构焊接技术发展现状及趋势]两层120平米钢结构造价</a></h3> </li> <li><h3><a href="https://www.hunanhr.cn/duhougan/2019/0702/504612.html" target="_blank" title="如何设置Excel表格在编辑与打印时每页都显示标题_excel表格怎么每页标头一样">如何设置Excel表格在编辑与打印时每页都显示标题_excel表</a></h3> </li> <li><h3><a href="https://www.hunanhr.cn/zuowendaquan/2019/0702/507081.html" target="_blank" title="部门述职报告_城建局长述职报告">部门述职报告_城建局长述职报告</a></h3> </li> <li><h3><a href="https://www.hunanhr.cn/fayangao/2019/0703/509336.html" target="_blank" title="班主任指导家庭教育的基本方式有_班主任工作总结_家庭教育的现状及其教育对策">班主任指导家庭教育的基本方式有_班主任工作总结_家庭教</a></h3> </li> <li><h3><a href="https://www.hunanhr.cn/shuzhibaogao/2019/0702/505347.html" target="_blank" title="马克思主义基本原理概论电大【国家开放大学电大《马克思主义基本原理概论》网络核心课终结性考试试题及答案】">马克思主义基本原理概论电大【国家开放大学电大《马克思</a></h3> </li> <li><h3><a href="https://www.hunanhr.cn/shenqingshudaquan/2019/0702/505741.html" target="_blank" title="学院党委工作总结_学院党委工作汇报">学院党委工作总结_学院党委工作汇报</a></h3> </li> <li><h3><a href="https://www.hunanhr.cn/shuzhibaogao/2019/0702/506887.html" target="_blank" title="[年轻干部思想作风状况的调查报告] 调查报告分析">[年轻干部思想作风状况的调查报告] 调查报告分析</a></h3> </li> <li><h3><a href="https://www.hunanhr.cn/jiaoxuesheji/2019/0702/504497.html" target="_blank" title="[SSM框架——详细整合教程（Spring+SpringMVC+MyBatis）] 框架整合">[SSM框架——详细整合教程（Spring+SpringMVC+MyBatis）] 框架整合</a></h3> </li> <li><h3><a href="https://www.hunanhr.cn/fayangao/2019/0702/505702.html" target="_blank" title="市“创优办”城市功能组工作小结宣传报道组工作小结">市“创优办”城市功能组工作小结宣传报道组工作小结</a></h3> </li> <li><h3><a href="https://www.hunanhr.cn/gongzuojihua/2019/0702/505163.html" target="_blank" title="《回弹法检测混凝土抗压强度技术规程》jgjt_23-2011_回弹检测混凝土抗压强度技术规程">《回弹法检测混凝土抗压强度技术规程》jgjt_23-2011_回弹</a></h3> </li> </ul> </div> </div> <div class="mright fr" style="position: sticky;top: 73px;"> <h6 class="bt2" >相关文章</h6> <div class="txt_1" > <ul class="lie3"> </ul> </div> </div> <div class="mb5"></div> <div class="mright fr" style="display: none;"><div class="adr2"><script type="text/javascript">ok3w_ads("s0020");</script></div></div> <div class="c"></div> </div> <div class="mb8"></div> <div id="scrolltop"></div> <script type="text/javascript" src="https://www.hunanhr.cn/images/top/jquery.min1.9.1.js"></script> <script type="text/javascript" src="https://www.hunanhr.cn/images/top/jquery.droppy.js"></script> <script type="text/javascript" src="https://www.hunanhr.cn/images/top/hd.js"></script> <script language="JavaScript" src="https://www.hunanhr.cn/api.php?op=count&id=504454&modelid=1"></script> <div class="c mb8"></div> <div class="foot"> <P>Copyright © 2008 - 2022 版权所有 <a href="https://www.hunanhr.cn/">职场范文网</a> </P> <p>工业和信息化部备案号：<a href='https://beian.miit.gov.cn/' rel="nofollow" target="_blank">沪ICP备18009755号-3</a><script type="text/javascript">ok3w_ads("s0021");</script></p> </div> </body> </html>