本章主干知识点：

  • 基本标签、列表标签（li、ol、dd）、文本效果标签
  • 实体字符、表格标签
  • 表单标签、框架、Div

导学

  1. 本阶段学习重在应用，不用过分关注页面是否美观
  2. CSS 可以很深入，我们只需掌握基本使用
  3. 学习的核心还是掌握案例
  4. 前端编程随时 F12 开着控制台，注意有无报错

HTML

HTML 简介

HTML (Hyper Text Mark-up Language) 超文本标记语言，是一种编程语言，也可以说是一种标准、规范。

  • 超文本：页面不仅可以包含普通文本，还可以包含图片、链接、音乐、程序等非文本内容
  • 标记：HTML 提供了一系列标记（标签），每个标记都有不同的含义和作用，浏览器根据标记的含义把内容显示到页面上

学习HTML主要是学习常用标签的用法和语法规范。

HTML 效果展示页面.zip

基本标签

  • <!DOCTYPE> 定义文档类型，表明该文档的类型和版本（了解）
  • 定义 HTML 文档（页面）
  • 定义文档的标题</li><li><meta> 定义文档的元数据，影响浏览器对页面的解析处理</li><li><body> 定义文档的主体</li><li><h1> ~ <h6> 定义 标题文本</li><li><p> 定义段落文本</li><li><br> 定义换行</li><li><hr> 定义水平线</li><li><!--...--> 定义注释</li></ul> <p><strong><!DOCTYPE></strong><br />The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.</p> <p>The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.</p> <blockquote> <p><!DOCTYPE> 不是一个 HTML 标签，它表示页面的 HTML 版本。</p> </blockquote> <p>In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.</p> <blockquote> <p>因为 HTML 4.01 基于 SGML，所以它需要声明对 DTD 的引用，DTD 指定了标记语言的规则，以便浏览器正确地渲染。</p> </blockquote> <p>HTML5 is not based on SGML, and therefore does not require a reference to a DTD.</p> <blockquote> <p>HTML5 不基于 SGML，所以声明简单了许多：<!DOCTYPE html></p> </blockquote> <p><strong>Tip</strong>: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.</p> <blockquote> <p>不添加 <!DOCTYPE>，浏览器也会使用默认设置渲染网页，但极不提倡这样做。</p> </blockquote> <p><strong><html></strong><br />The <html> tag tells the browser that this is an HTML document.<br /> <br />The <html> tag represents the root of an HTML document.</p> <blockquote> <p><html> 是 HTML 文件的根标签。</p> </blockquote> <p> <br />The <html> tag is the container for all other HTML elements (except for the <a rel="nofollow" href="https://www.w3schools.com/tags/tag_doctype.asp"><!DOCTYPE></a> tag).</p> <p><strong><head></strong><br />The <head> element is a container for all the head elements.<br /> <br />The <head> element can include a title for the document, scripts, styles, meta information, and more.</p> <blockquote> <p><head> 内包含标题、代码段、样式、元数据等。 元数据 <a rel="nofollow" href="https://www.w3schools.com/tags/tag_meta.asp"><meta></a> 中定义了页面编码。</p> </blockquote> <p> <br />The following elements can go inside the <head> element:</p> <ul> <li><a rel="nofollow" href="https://www.w3schools.com/tags/tag_title.asp"><title></a> (this element is required in an HTML document)</li><li><a rel="nofollow" href="https://www.w3schools.com/tags/tag_style.asp"><style></a></li><li><a rel="nofollow" href="https://www.w3schools.com/tags/tag_base.asp"><base></a></li><li><a rel="nofollow" href="https://www.w3schools.com/tags/tag_link.asp"><link></a></li><li><a rel="nofollow" href="https://www.w3schools.com/tags/tag_meta.asp"><meta></a></li><li><a rel="nofollow" href="https://www.w3schools.com/tags/tag_script.asp"><script></a></li><li><a rel="nofollow" href="https://www.w3schools.com/tags/tag_noscript.asp"><noscript></a></li></ul> <p><strong><body></strong><br />The <body> tag defines the document’s body.<br /> <br />The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.</p> <p><strong><h1> to <h6></strong><br />The <h1> to <h6> tags are used to define HTML headings.<br /> <br /><h1> defines the most important heading.</p> <p><h6> defines the least important heading.</p> <p><br /><strong><p></strong> <br />The <p> tag defines a paragraph.<br /> <br />Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).</p> <blockquote> <p>浏览器会自动在 <p> 标签的前后添加 margin。</p> </blockquote> <p><strong><br></strong><br />The <br> tag inserts a single line break.<br /> <br />The <br> tag is an empty tag which means that it has no end tag.</p> <p><strong><hr></strong><br />The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).<br /> <br />The <hr> element is used to separate content (or define a change) in an HTML page.</p> <blockquote> <p><br> <hr> 都是空标签，没有结束标签。</p> </blockquote> <p><a name="28bddf00"></a></p> <h2 id="c81unh"><a name="c81unh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表标签</h2><p>无序列表</p> <ul> <li><ul>：在页面上显示一个无序列表</li><li><li>：表示一个列表项</li><li><p>type 属性决定图标样式</p> <p><br />有序列表</p> </li></ul> <ol> <li><ol>：在页面上显示一个有序列表</li><li><li>：表示一个列表项</li><li><p>type 属性：1 a A i I</p> <p><br />自定义列表</p> </li></ol> <ul> <li>dl：在页面上定义一个自定义列表</li><li>dt：定义父节点列表项</li><li>dd：定义子节点列表项</li></ul> <p>注：dt 和 dd 不是嵌套关系，而是并列的<br />dl：description list</p> <p>自定义列表示例：</p> <pre><code class="lang-html"><dl> <dt>1 详细介绍</dt> <dd>1.1 由来</dd> <dd>1.2 定义</dd> <dt>2 语言特点</dt> <dt>3 书写方式</dt> <dd>3.1 由来</dd> <dd>3.2 定义</dd> </dl> </code></pre> <p>1 详细介绍<br />1.1 由来<br />1.2 定义<br />2 语言特点<br />3 书写方式<br />3.1 由来<br />3.2 定义</p> <p><a name="c8b98927"></a></p> <h2 id="fyw6m6"><a name="fyw6m6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>语法规范</h2><ul> <li>标签成对出现，有开始标签就需要有结束标签</li><li>标签不区分大小写，但建议使用小写</li><li>一对标签的内容可以为空、文本，或者其他标签（标签可以嵌套）</li><li>如果一对标签的内部总是为空，可以简写为单标记形式，如 <br/></li><li>两对标签不可以交叉</li><li>标签可以包含若干属性，属性间使用空格隔开，属性间没有顺序</li><li>一些标签需要配合使用，共同完成一件复杂的事情</li><li><p>浏览器把若干连续的空白字符（空格符、换行符、制表符）处理成一个空格的效果</p> <p><br />注：最开始时为了推广 HTML，对语法要求不严格，这导致不规范的 HTML 代码也能被浏览器正常解析，但我们自己编码时一定要严格遵守 HTML 语法规范。</p> </li></ul> <p><a name="0a34b4d9"></a></p> <h2 id="byacba"><a name="byacba" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本显式效果标签</h2><p>在最开始的时候，使用标签控制文本的显示效果，随着技术的发展，现在使用 CSS 控制页面的效果。<br /> <br />由于确实不用了，懒得展示，详见<a rel="nofollow" href="https://www.yuque.com/attachments/yuque/0/2019/zip/101969/1553057815239-9f7edf00-85e5-448d-97d5-022eafc21250.zip?_lake_card=%7B%22uid%22%3A%22rc-upload-1553057487397-5%22%2C%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2019%2Fzip%2F101969%2F1553057815239-9f7edf00-85e5-448d-97d5-022eafc21250.zip%22%2C%22name%22%3A%22HTML+%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%E9%A1%B5%E9%9D%A2.zip%22%2C%22size%22%3A1881%2C%22type%22%3A%22application%2Fx-zip-compressed%22%2C%22ext%22%3A%22zip%22%2C%22progress%22%3A%7B%22percent%22%3A0%7D%2C%22status%22%3A%22done%22%2C%22percent%22%3A0%2C%22card%22%3A%22file%22%7D">HTML 效果展示页面.zip</a>。</p> <p><a name="2c2b14e6"></a></p> <h2 id="e51nav"><a name="e51nav" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 实体字符</h2><p>在 HTML 中，有一些特殊字符，如</p> <blockquote> <p> < “ & 等具有特殊含义，在使用时容易造成冲突，另外 © ® × ÷ 等字符在键盘上没有对应的按键 。<br /> <br />为了方便开发者灵活使用这些字符，HTML 提供了对应的实体字符供开发者使用。</p> </blockquote> <table> <thead> <tr> <th><strong>显式结果</strong></th> <th><strong>描述</strong></th> <th><strong>实体名称</strong></th> <th><strong>实体编号</strong></th> </tr> </thead> <tbody> <tr> <td></td> <td>空格</td> <td> </td> <td> </td> </tr> <tr> <td><</td> <td>小于号</td> <td><</td> <td><</td> </tr> <tr> <td>></td> <td>大于号</td> <td>></td> <td>></td> </tr> <tr> <td>&</td> <td>和号</td> <td>&</td> <td>&</td> </tr> <tr> <td>“</td> <td>双引号</td> <td>"</td> <td>"</td> </tr> <tr> <td>®</td> <td>注册商标</td> <td>®</td> <td>®</td> </tr> <tr> <td>×</td> <td>乘号</td> <td>×</td> <td>×</td> </tr> <tr> <td>÷</td> <td>除号</td> <td>÷</td> <td>÷</td> </tr> </tbody> </table> <p>< less than<br />> greater than</p> <p><a name="9c942d88"></a></p> <h2 id="agfapa"><a name="agfapa" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表格标签</h2><ul> <li><table> 定义一个表格整体</li><li><caption> 定义表格标题</li><li><tr> 定义表格中的行</li><li><td> 定义行中的单元格（colspan、rowspan 属性可以合并单元格）</li><li><thead> 表头</li><li><th> 定义表格中的表头单元格</li><li><tbody> 表格主体，可用于大表格分段显示优化</li><li><tfoot> 表格的脚注</li></ul> <pre><code class="lang-html"><table width="400px" cellpadding="5px" border="1" cellspacing="0px" style="border-collapse: collapse"> <caption>信息统计表</caption> <thead> <tr> <th>编号</th><th>姓名</th><th>性别</th><th>年龄</th> </tr> </thead> <tbody> <tr> <td>1</td><td>蛋蛋</td><td>男</td><td>25</td> </tr> <tr> <td>2</td><td>建国</td><td>男</td><td>16</td> </tr> <tr> <td>3</td><td>赖宝</td><td>男</td><td>27</td> </tr> <tr> <td>4</td><td>浇水</td><td>男</td><td>18</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">合计：4人</td> </tr> </tfoot> </table> </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2019/png/101969/1553058636770-87e9cd6c-0d96-41b4-a24e-e2cd1bb7ce9c.png#align=left&display=inline&height=206&name=image.png&originHeight=206&originWidth=416&size=6747&status=done&width=416" alt="image.png"></p> <p><a name="d30fed72"></a></p> <h2 id="bc6p1u"><a name="bc6p1u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>超链接标签</h2><p>链接到外部资源：</p> <pre><code class="lang-html"><a href="http://www.rupeng.com/index.shtml" target="_blank">如鹏网</a> <a href="人丑就要多读书.jpg">人丑就要多读书.jpg</a> <a href="人丑就要多读书.zip">人丑就要多读书.zip</a> </code></pre> <p>超链接只是指定资源的位置，浏览器在获得这些资源后处理时，如果浏览器可以解析显示，就会直接解析显示，否则，就以文件下载的方式处理（当然，也可指定强制下载）。</p> <blockquote> <p>可以通过 target 属性规定在何处打开链接文档。 _self（Default）、_blank、_parent、_top、framename</p> </blockquote> <p>链接到页面内的另一个 <a> 标签：</p> <pre><code class="lang-html"><a name="mao">定义一个位置（锚）</a> <a href="#mao">指向这个位置</a> </code></pre> <p>同一项目页面间引用：</p> <pre><code class="lang-html">“.”表示当前目录，引用下级目录文件时可以省略 <a href="./dir1/test1.html">test1</a> <a href="dir1/test1.html">test1</a> “..”表示父目录 <a href="../main.html">test1</a> </code></pre> <p><a name="f76e5330"></a></p> <h2 id="ek05ni"><a name="ek05ni" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图片标签</h2><p>用来在页面上显示一个图片：</p> <pre><code class="lang-html"><img src="人丑就要多读书.jpg" alt="人丑就要多读书"/> </code></pre> <ul> <li>src：指定图片资源位置</li><li>alt：当找不到 src 指定的图片资源时，显示在浏览器上的说明提示</li><li>width、height：指定图片显示的宽、高。宽高最好只指定一个，另一个会自动缩放</li><li>border：指定图片边框的宽度</li></ul> <p>注：src 的值尽量写资源的相对路径，因为很多浏览器这里不支持绝对路径</p> <p><a name="ea912bc3"></a></p> <h2 id="d300js"><a name="d300js" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单标签</h2><ul> <li><form> 定义供用户输入信息的表单，收集用户信息</li><li><input> 定义多种输入控件<ul> <li>text、password、radio、checkbox、file、hidden、button、submit、reset</li><li>用 value 属性来定义发送给服务器的值</li></ul> </li><li><label> 定义表单控件的标注</li><li><textarea> 定义多行的文本输入控件</li><li><select> 定义下拉列表 、<option> 定义下拉列表的选项</li><li><p><button> 定义普通按钮</p> </li><li><p>submit 时会提交各个 input 的 name（非空的） 和 value</p> </li><li>在输入框中按回车键和点击 submit 按钮的效果相同</li><li>通过 form 的 action 属性指定提交的位置</li><li>通过 form 的 method 属性指定提交的方式 get/post</li></ul> <p>提交表单示例：<br /><img src="https://cdn.nlark.com/yuque/0/2019/png/101969/1553058919270-4acd108b-875d-42e8-b07c-a021f1c6dfcc.png#align=left&display=inline&height=28&name=image.png&originHeight=28&originWidth=550&size=3729&status=done&width=550" alt="image.png"></p> <p>注：对于后端程序员，表单是很常用的，需牢牢掌握。</p> <p>label 的 for 属性，可以方便 input 获取焦点（只要点击“账号”，焦点就会锁定到 account）</p> <pre><code class="lang-html"><label for="account">账号：</label><input type="text" id="account" /> </code></pre> <p>单选按钮通过 name 属性绑定为一组（男、女 同时只能勾选一个）</p> <pre><code class="lang-html"><input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender" value="女" />女 </code></pre> <p>将 label 的 for 属性指向单选、多选按钮时，点击 label 即可选择</p> <pre><code class="lang-html"><input type="checkbox" id="run"/><label for="run">跑步</label> </code></pre> <p><a name="1730365e"></a></p> <h2 id="bolwwq"><a name="bolwwq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>框架标签</h2><p><iframe> 定义内嵌框架</p> <pre><code class="lang-html"><iframe src="inner.html" width="600px" height="370px"></iframe> </code></pre> <p><a name="1365034a"></a></p> <h2 id="5t2wph"><a name="5t2wph" class="reference-link"></a><span class="header-link octicon octicon-link"></span>页面布局标签 div span</h2><p><div>(division) 和 <span> 都可以把页面分成相对独立的各个部分（分区），方便布局。<br /> <br />不同之处在于 div 默认有换行效果，而 span 则没有。</p> <pre><code class="lang-html"><div>div1</div> <div>div2</div> <div>div3</div> <span>span1</span> <span>span2</span> <span>span3</span> </code></pre> <p>效果：<br /><img src="https://cdn.nlark.com/yuque/0/2019/png/101969/1553059085645-3f3e3ff5-3040-47db-8a48-c1f9cc266651.png#align=left&display=inline&height=84&name=image.png&originHeight=84&originWidth=166&size=1430&status=done&width=166" alt="image.png"></p> <p>div+css 布局方式是现在的主流，具体将在 css 课程中讲解。</p> <p>如今提倡网页内容和表现形式分离，即 html 标签主要负责定义网页内容，css 负责定义显示样式。</p>