结构

结构

基本HTML文件:
<!DOCTYPE html>

称为根标记，用于告知浏览器其自身是一个 HTML 文档，标记标志着HTML文档的开始，标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。向搜索引擎表示该页面是html语言，并且语言为英文网站，其”lang”的意思就是“language”，语言的意思，而“en”即表示english这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响

HTML基本文档格式— 标记

标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后，主要用来封装其他位于文档头部的标记。一个HTML文档只能含有一对标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

HTML文档头部相关标记—</h2><p><title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能含有一对标记，之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下： <a name="LxH0j"></a></p> <h2 id="7wy4it"><a name="7wy4it" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML基本文档格式—<body> 标记</h2><p><body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后.</p> <p><a name="fhBNe"></a></p> <h1 id="28j5fx"><a name="28j5fx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Html基础 html标签关系</h1><p>1.嵌套关系<br />2.并列关系<br />嵌套关系：类似父亲和儿子之间的关系 <br /><html><br /><head></head><br /><body></body><br /></html><br />并列关系：类似与兄弟之间的关系 <br /> <head></head><br /><body></body><br><a name="qeS6z"></a></p> <h2 id="tv37y"><a name="tv37y" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML标记—双标记</h2><p>双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下： <标记名></标记名>该语法中“<标记名>”表示该标记的作用开始，一般称为“开始标记（start tag）”，“</标记名>” 表示该标记的作用结束，一般称为“结束标记（end tag）”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。 <a name="nzsNM"></a></p> <h2 id="1srgk2"><a name="1srgk2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML标记—单标记</h2><p>单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。<br />其基本语法格式如下： <br /><标记名/> <a name="PgmZ8"></a></p> <h1 id="6vtdz"><a name="6vtdz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Html基础单标记详解</h1><p><a name="uesHY"></a></p> <h2 id="c2v10k"><a name="c2v10k" class="reference-link"></a><span class="header-link octicon octicon-link"></span>水平线标记<hr /></h2><p>在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。其基本语法格式如下： <hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线。 <a name="hbrms"></a></p> <h2 id="2ljp03"><a name="2ljp03" class="reference-link"></a><span class="header-link octicon octicon-link"></span>注释标记</h2><p>注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。 <a name="wEdzx"></a></p> <h2 id="f5ip9q"><a name="f5ip9q" class="reference-link"></a><span class="header-link octicon octicon-link"></span>换行标记<br /></h2><p>在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />，这时如果还像在word中直接敲回车键换行就不起作用了. <a name="P6FRA"></a></p> <h2 id="2fztsp"><a name="2fztsp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图像标记<img /></h2><p>HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和他相关的属性。其基本语法格式如下：<br /><img src="图像路径" /><br />标记属性:</p> <table> <thead> <tr> <th>属性</th> <th>属性值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>src</td> <td>URL(路径)</td> <td>图像的路径</td> </tr> <tr> <td>alt</td> <td>文本</td> <td>图像不能显示时的替换文本</td> </tr> <tr> <td>title</td> <td>文本</td> <td>鼠标悬停时显示的内容</td> </tr> <tr> <td>width</td> <td>像素（XHTML不支持%页面百分比）</td> <td>设置图像的宽度</td> </tr> <tr> <td>height</td> <td>像素（XHTML不支持%页面百分比）</td> <td>设置图像的高度</td> </tr> </tbody> </table> <p><a name="IfUBR"></a></p> <h3 id="eclzrb"><a name="eclzrb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>路径解释</h3><p><a name="F38gw"></a></p> <h4 id="g5vexf"><a name="g5vexf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>相对路径</h4><p>相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。 <br />如<br /> <img src="img/logo.gif" alt="专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" /><br />相对路径设置分为以下三种：<br />1.图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。<br />2.图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。<br />3.图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。 <a name="rWo7u"></a></p> <h4 id="af56az"><a name="af56az" class="reference-link"></a><span class="header-link octicon octicon-link"></span>绝对路径</h4><p>绝对路径一般是指带有盘符的路径。<br />如:“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，<br />或完整的网络地址，例如“<a rel="nofollow" href="http://www.itcast.cn/images/logo.gif">http://www.itcast.cn/images/logo.gif</a>”。 <a name="gYPjQ"></a></p> <h1 id="4quv64"><a name="4quv64" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Html基础双标记详解</h1><p><a name="Wc7lz"></a></p> <h2 id="4c0ydr"><a name="4c0ydr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>段落标记<p></p></h2><p>在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。<p>是HTML文档中最常见的标记，<br />默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。 <a name="DWAKI"></a></p> <h2 id="byit11"><a name="byit11" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标题标记<hn></hn></h2><p>为了使网页更具有语义化，我们经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：<br /><h1>我是一个标题</h1> <a name="hCMq5"></a></p> <h2 id="9aji92"><a name="9aji92" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本样式标记<font></font></h2><p>多种多样的文字效果可以使网页变得更加绚丽，为此HTML提供了文本样式标记<font>，用来控制网页中文本的字体、字号和颜色。其基本语法格式如下：<br /><font>文本内容</font> <a name="NyGi4"></a></p> <h2 id="7wal7w"><a name="7wal7w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本格式化标记</h2><p>在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。<br />文本格式化常用标记:</p> <table> <thead> <tr> <th>标记</th> <th>显示效果</th> </tr> </thead> <tbody> <tr> <td><b></b>和<strong></strong></td> <td>文字以粗体方式显示（XHTML推荐使用strong）</td> </tr> <tr> <td><i></i>和<em></em></td> <td>文字以斜体方式显示（XHTML推荐使用em）</td> </tr> <tr> <td><s></s>和<del></del></td> <td>文字以加删除线方式显示（XHTML推荐使用del）</td> </tr> <tr> <td><u></u>和<ins></ins></td> <td>文字以加下划线方式显示（XHTML不赞成使用u）</td> </tr> </tbody> </table> <p><a name="Ue63n"></a></p> <h2 id="fcxjly"><a name="fcxjly" class="reference-link"></a><span class="header-link octicon octicon-link"></span>双标记演示</h2><p><!DOCTYPE html><br /><html lang="en"><br /><head><br /> <meta charset="UTF-8"><br /> <br /></head><br /><body><br /> <p></p><br /> <h1>我是一个标题</h1><br/><br /> 不加换行标记<br /> 不会换行<br/><br /> 正常文本信息<br><br /> <font color="red">样式文本内容</font><br/><br /> <b>加粗文本1</b><br/><br /> <strong>加粗文本2</strong><br/><br /> <i>斜体文本1</i><br/><br /> <em>斜体文本2</em><br/><br /> <s>删除线1</s><br/><br /> <del>删除线2</del><br/><br /> <u>下划线1</u><br/><br /> <ins>下划线2</ins><br /></body><br /></html><br /><img src="https://cdn.nlark.com/yuque/0/2022/png/29327754/1657207917753-302c8eeb-db31-4859-a7b6-a831091af469.png#clientId=uc6300b2e-f57c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=423&id=ub943bbdf&margin=%5Bobject%20Object%5D&name=image.png&originHeight=423&originWidth=521&originalType=binary&ratio=1&rotation=0&showTitle=false&size=20168&status=done&style=none&taskId=u8447ce5e-55d2-4ff7-abb4-235bd972573&title=&width=521" alt="image.png"></p> <p><a name="sWPXg"></a></p> <h1 id="a4sztf"><a name="a4sztf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Html基础超链接</h1><p><a name="KmLJR"></a></p> <h2 id="1qm9lo"><a name="1qm9lo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>创建超链接</h2><p>在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可，<br />其基本语法格式如下：<br /><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a><br />在上面的语法中，<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，下面对它们进行具体地解释。<br />href：用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。<br />target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。<br /><base ></base> 可以设置整体链接的打开状态 <a name="zrNg5"></a></p> <h2 id="21a8dl"><a name="21a8dl" class="reference-link"></a><span class="header-link octicon octicon-link"></span>超链接注意事项</h2><p>暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接。<br />不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。</p> <p><a name="iaVLq"></a></p> <h1 id="f4fej4"><a name="f4fej4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Html基础特殊符号标记</h1><table> <thead> <tr> <th>特殊字符</th> <th>描述</th> <th>字符的代码</th> </tr> </thead> <tbody> <tr> <td><br /></td> <td>空格符</td> <td> </td> </tr> <tr> <td><</td> <td>小于号</td> <td><</td> </tr> <tr> <td>></td> <td>大于号</td> <td>></td> </tr> <tr> <td>&</td> <td>和号</td> <td>&</td> </tr> <tr> <td>￥</td> <td>人民币</td> <td>¥</td> </tr> <tr> <td>©</td> <td>版权</td> <td>©</td> </tr> <tr> <td>®</td> <td>注册商标</td> <td>®</td> </tr> <tr> <td>°</td> <td>摄氏度</td> <td>°</td> </tr> <tr> <td>±</td> <td>正负号</td> <td>±</td> </tr> <tr> <td>×</td> <td>乘号</td> <td>×</td> </tr> <tr> <td>÷</td> <td>除号</td> <td>÷</td> </tr> <tr> <td>²</td> <td>平方2（上标2）</td> <td>²</td> </tr> <tr> <td>³</td> <td>立方3（上标3）</td> <td>³</td> </tr> </tbody> </table> <p><a name="iWRig"></a></p> <h1 id="a7dhpi"><a name="a7dhpi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Html基础列表介绍（list）</h1><p><a name="YvkOP"></a></p> <h2 id="bdv7gu"><a name="bdv7gu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>无序列表 <ul></ul></h2><p>语法如下:<br /><ul><br /> <li>列表1</li><br /> <li>列表2</li><br /> <li>列表3</li><br /> <li>列表4</li><br /></ul><br />无序列表中type属性值有三个<br />默认值:disc<br />方块:square<br />空心圆:circle <a name="uT2Rt"></a></p> <h3 id="7bh0oz"><a name="7bh0oz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>演示</h3><p><img src="https://cdn.nlark.com/yuque/0/2022/png/29327754/1657294319412-8c7d999d-b530-4883-a594-49a033b1740a.png#clientId=u00e0385c-5470-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=735&id=u31f35e3c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=735&originWidth=821&originalType=binary&ratio=1&rotation=0&showTitle=false&size=44569&status=done&style=none&taskId=u58319286-46c8-47a5-8fbc-b4fbec3a9b1&title=&width=821" alt="image.png"><br />加了属性值后:<br /><img src="https://cdn.nlark.com/yuque/0/2022/png/29327754/1657295133656-7c7129a0-907d-44ad-b83a-ea5f72626d76.png#clientId=u00e0385c-5470-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=709&id=u99474e3d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=709&originWidth=352&originalType=binary&ratio=1&rotation=0&showTitle=false&size=32404&status=done&style=none&taskId=ufc4c2da0-990d-478e-a397-4b1dd8b1564&title=&width=352" alt="image.png"> <a name="uQBe2"></a></p> <h2 id="c4ce5a"><a name="c4ce5a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>有序列表 <ol></ol></h2><p>语法如下:<br /><ol><br /> <li>列表1</li><br /> <li>列表2</li><br /> <li>列表3</li><br /> <li>列表4</li><br /> <li>列表5</li><br /></ol></p> <table> <thead> <tr> <th><strong>type类型y</strong></th> <th><strong> 描述</strong></th> </tr> </thead> <tbody> <tr> <td>Type=1</td> <td>表示列表项目用数字表示（1,2,3…..）</td> </tr> <tr> <td>Type=a</td> <td>表示列表项目用小写字母表示(a,b,c..)</td> </tr> <tr> <td>Type=A</td> <td>表示列表项目用大写字母表示(A,B,C..)</td> </tr> <tr> <td>Type=i</td> <td>表示列表项目用小写罗马数字表示(i,ii,iii….)</td> </tr> <tr> <td>Type=I</td> <td>表示列表项目用大写罗马数字表示(I,II,III…)</td> </tr> </tbody> </table> <p><a name="vsx40"></a></p> <h3 id="fob4bj"><a name="fob4bj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>演示</h3><p><img src="https://cdn.nlark.com/yuque/0/2022/png/29327754/1657295428232-c8b37fcf-3f39-4127-ba0d-35a561e9bdf0.png#clientId=u00e0385c-5470-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=613&id=uf5a85a64&margin=%5Bobject%20Object%5D&name=image.png&originHeight=613&originWidth=427&originalType=binary&ratio=1&rotation=0&showTitle=false&size=35265&status=done&style=none&taskId=u8704f643-a784-4051-8e6e-8c6395b52a4&title=&width=427" alt="image.png"><br />start=2<br />表示从第2个开始排序,即在小写子母中,b就是第2个,所以列表顺序从b开始. <a name="GaBYT"></a></p> <h2 id="774mfd"><a name="774mfd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>自定义列表 <dl></dl></h2><p>语法:<br /><dl><br /> <dt>名词1</dt><br /> <dd>名词1解释1</dd><br /> <dd>名词1解释2</dd><br /> <dt>名词2</dt><br /> <dd>名词2解释1</dd><br /> <dd>名词2解释2</dd><br /></dl><br />自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号. <a name="CNL0R"></a></p> <h3 id="3ucrdz"><a name="3ucrdz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>演示</h3><p><img src="https://cdn.nlark.com/yuque/0/2022/png/29327754/1657296153533-1e100ff1-da9c-462c-a69f-aeb76e2ab413.png#clientId=u00e0385c-5470-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=639&id=uf90329cc&margin=%5Bobject%20Object%5D&name=image.png&originHeight=639&originWidth=429&originalType=binary&ratio=1&rotation=0&showTitle=false&size=38661&status=done&style=none&taskId=u7dcdcf9b-5f68-4f1f-b556-624c321b75e&title=&width=429" alt="image.png"></p>