HTML入门

HTML入门

相关概念

  • HTML全称:Hyper Text Markup Language,是一种标记语言。
  • HTML文档也叫做 web 页面。
  • HTML文档由HTML标签嵌套和相关文本等组成,每种标签内还有对应的属性。
  • HTML元素是一个完整的标签和内容:一个 HTML 元素包含了开始标签与结束标签。
  • Web 浏览器:Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户。
  • 中文编码:目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。example:

HTML元素

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

另外,HTML 文档由嵌套的 HTML 元素构成。

HTML属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name=”value”

另外,属性值不强制单或双引号,但是在必要时候需要里用

他人笔记:

  1. 属性和属性值,尽量小写,本来这样做也方便些。
  2. class 属性可以多用 class=” “ (引号里面可以填入多个class属性)
  3. id 属性只能单独设置 **id=” “**(只能填写一个,多个无效)

HTML文本格式化

HTML 文本格式化 | 菜鸟教程 (it028.com)。嘿嘿,没啥好说的

HTML链接

HTML使用标签 来设置超文本链接。

  1. 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
  2. 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
  3. 在标签 中使用了href属性来描述链接的地址。
  4. 默认情况下,链接将以以下形式出现在浏览器中:
  • 一个未访问过的链接显示为蓝色字体并带有下划线。

  • 访问过的链接显示为紫色并带有下划线。

  • 点击链接时,链接显示为红色并带有下划线。

语法:TEXT

对应属性:target

内部元素:

Ⅰ. 标签:</p> <p>1.<title> 在 HTML/XHTML 文档中是必须的。</p> <p>2.<title> 元素:</p> <ul> <li>定义了浏览器工具栏的标题</li> <li>当网页添加到收藏夹时,显示在收藏夹中的标题</li> <li>显示在搜索引擎结果页面的标题</li> </ul> <p>Ⅱ.<base>标签:</p> <p>base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。</p> <p>Ⅲ. <link>标签:</p> <link> 标签定义了文档与外部资源之间的关系。 <link> 标签通常用于链接到样式表。 <p>Ⅳ. <style>标签:</p> <style> 标签定义了HTML文档的样式文件引用地址. 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档: Ⅴ. < meta> 标签: meta标签描述了一些基本的元数据。 META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。 Ⅵ. <script>标签: < script >标签用于加载脚本文件,如: JavaScript。 上述详解:[HTML 头部 | 菜鸟教程 (it028.com)](http://www.it028.com/html-head.html) ## 图像标签 < img /> 属性:src = "url" ; alt="无法加载图片时的文本" < map >标签:[W3School TIY Editor](http://www.w3school.com.cn/tiy/t.asp?f=tags_areamap_1) ## 表格标签 定义:< table > < /table > < th >表头;< tr >表的一行;< td >表格单元; ## 列表标签 ### 无序列表: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br></pre></td></tr></table></figure> ### 有序列表: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ol</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br></pre></td></tr></table></figure> ### 定义列表: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">dl</span>></span></span><br><span class="line"><span class="tag"><<span class="name">dt</span>></span>Coffee<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"><span class="tag"><<span class="name">dd</span>></span>Black hot drink<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"><span class="tag"><<span class="name">dt</span>></span>Milk<span class="tag"></<span class="name">dt</span>></span></span><br><span class="line"><span class="tag"><<span class="name">dd</span>></span>White cold drink<span class="tag"></<span class="name">dd</span>></span></span><br><span class="line"><span class="tag"></<span class="name">dl</span>></span></span><br></pre></td></tr></table></figure> 自定义列表不仅仅是一列项目,而是项目及其注释的组合。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。 ## < div >< span > 块级元素:块级元素在浏览器显示时,通常会以新行来开始(和结束)。例子:<h1>, <p>, <ul>, <table> 内联元素:内联元素在显示时通常不会以新行开始。例子:<b>, <td>, <a>, <img> < div >: HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 < span >: HTML <span> 元素是内联元素,可用作文本的容器。 <span> 元素也没有特定的含义。 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。 附:id属性详解:[HTML id 属性 (w3school.com.cn)](http://www.w3school.com.cn/html/html_id.asp) - `id` 属性用于为 HTML 元素指定唯一的 id(id只能用一次) - `id` 属性的值在 HTML 文档中必须是唯一的 - CSS 和 JavaScript 可使用 `id` 属性来选取元素或设置特定元素的样式 - `id` 属性的值区分大小写 - `id` 属性还可用于创建 HTML 书签 - JavaScript 可以使用 `getElementById()` 方法访问拥有特定 id 的元素 ## HTML内联框架 frame 用于在网页内显示网页。 语法:<iframe src="URL"></iframe> ### 1.Iframe - 设置高度和宽度 height 和 width 属性用于规定 iframe 的高度和宽度。 属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。 实例 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">"demo_iframe.htm"</span> <span class="attr">width</span>=<span class="string">"200"</span> <span class="attr">height</span>=<span class="string">"200"</span>></span><span class="tag"></<span class="name">iframe</span>></span></span><br></pre></td></tr></table></figure> ### 2.Iframe - 删除边框 frameborder 属性规定是否显示 iframe 周围的边框,设置属性值为 "0" 就可以移除边框 ### 3.使用 iframe 作为链接的目标 iframe 可用作链接的目标(target),链接的 target 属性必须引用 iframe 的 name 属性: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">"demo_iframe.htm"</span> <span class="attr">name</span>=<span class="string">"iframe_a"</span>></span><span class="tag"></<span class="name">iframe</span>></span></span><br><span class="line"><span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.w3school.com.cn"</span> <span class="attr">target</span>=<span class="string">"iframe_a"</span>></span>W3School.com.cn<span class="tag"></<span class="name">a</span>></span><span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure> ### 语义元素 HTML中的语义元素清楚地向浏览器和开发者描述其意义。<div>和<span>是非语义元素,但是<form>等可以 | 标签 | 描述 | | :----------- | :------------------------------------------------- | | <article> | 定义文章。 | | <aside> | 定义页面内容以外的内容。 | | <details> | 定义用户能够查看或隐藏的额外细节。 | | <figcaption> | 定义 <figure> 元素的标题。 | | <figure> | 规定自包含内容,比如图示、图表、照片、代码清单等。 | | <footer> | 定义文档或节的页脚。 | | <header> | 规定文档或节的页眉。 | | <main> | 规定文档的主内容。 | | <mark> | 定义重要的或强调的文本。 | | <nav> | 定义导航链接。 | | <section> | 定义文档中的节。 | | <summary> | 定义 <details> 元素的可见标题。 | | <time> | 定义日期/时间。 | ### HTML规范 1. < !DOCTYPE HTML >书写正确 2. 元素及属性值小写 3. 关闭每一个元素,即便它是空的 4. 属性值加引号 5. 类似alt等属性是必备的 6. 正确空格和缩进,适当使用空格更加美观(等号两边) 7. 避免长代码行 8. 尽量使用小写文件名 9. 使用正确的文件扩展名:.html(而不是.htm),.css,.js ### HTML字符实体 在 HTML 中,某些字符是预留的。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 空格:  参考链接:[HTML ISO-8859-1 参考手册 (w3school.com.cn)](http://www.w3school.com.cn/charsets/ref_html_8859.asp) ### HTML表情 使用UTF-8字符集:<meta charset="UTF-8"> example : A = A Emoji 字符是来自 UTF-8 字母的字符: - 😄 是 128516 - 😍 是 128525 - 💗 是 128151 😄 == 😄 ### HTML框架 Frame 标签定义了放置在每个框架中的 HTML 文档。 在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">frameset</span> <span class="attr">cols</span>=<span class="string">"25%,75%"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"frame_a.htm"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"frame_b.htm"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">frameset</span>></span></span><br></pre></td></tr></table></figure> 假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"。 ### HTML背景 #### 背景颜色(Bgcolor) 背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span> <span class="attr">bgcolor</span>=<span class="string">"#000000"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span> <span class="attr">bgcolor</span>=<span class="string">"rgb(0,0,0)"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span> <span class="attr">bgcolor</span>=<span class="string">"black"</span>></span></span><br></pre></td></tr></table></figure> #### 背景图片 <body background="abc.gif"> <body background="https://abc.com/gg.gif"> ### URL编码 在URL中,通常有一组被认为是"不特殊"字符的字符,它们不需要被进行URL编码,可以直接在URL中使用。这包括: 1. **字母和数字:** 包括大写和小写字母(A-Z、a-z)以及数字(0-9)。 2. **连字符和下划线:** "-"(连字符)和"_"(下划线)。 3. **点号:** "."(点号)。 4. **波浪线:** "~"(波浪线)。 这些字符在URL中被认为是安全的,不会引起混淆或破坏URL结构。其他字符如果在URL中使用,就需要进行URL编码。 URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。 URL 不能包含空格。URL 编码通常使用 + 来替换空格。 ### HTML表单 #### 1.< form >标签 < form > ······ < /form >块内写入表单,其属性见下表: | 属性 | 描述 | | :----------------------------------------------------------- | :----------------------------------------------------------- | | [accept-charset](http://www.w3school.com.cn/tags/att_form_accept-charset.asp) | 规定用于表单提交的字符编码。 | | [action](http://www.w3school.com.cn/tags/att_form_action.asp) | 规定提交表单时将表单数据发送到何处。 | | [autocomplete](http://www.w3school.com.cn/tags/att_form_autocomplete.asp) | 规定表单是否应打开自动完成(填写)功能。 | | [enctype](http://www.w3school.com.cn/tags/att_form_enctype.asp) | 规定将表单数据提交到服务器时应如何编码(仅供 method="post")。 | | [method](http://www.w3school.com.cn/tags/att_form_method.asp) | 规定发送表单数据时要使用的 HTTP 方法。 | | [name](http://www.w3school.com.cn/tags/att_form_name.asp) | 规定表单名称。 | | [novalidate](http://www.w3school.com.cn/tags/att_form_novalidate.asp) | 规定提交时不应验证表单。 | | [rel](http://www.w3school.com.cn/tags/att_form_rel.asp) | 规定链接资源和当前文档之间的关系。 | | [target](http://www.w3school.com.cn/tags/att_form_target.asp) | 规定提交表单后在何处显示接收到的响应。 | target属性有下值: | _blank | 响应显示在新窗口或选项卡中。 | | --------- | ------------------------------ | | _self | 响应显示在当前窗口中。 | | _parent | 响应显示在父框架中。 | | _top | 响应显示在窗口的整个 body 中。 | | framename | 响应显示在命名的 iframe 中。 | 例子: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">"action_page.php"</span> <span class="attr">method</span>=<span class="string">"GET"</span> <span class="attr">target</span>=<span class="string">"_blank"</span> <span class="attr">accept-charset</span>=<span class="string">"UTF-8"</span></span></span><br><span class="line"><span class="tag"><span class="attr">ectype</span>=<span class="string">"application/x-www-form-urlencoded"</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> <span class="attr">novalidate</span>></span></span><br><span class="line">.</span><br><span class="line">form elements</span><br><span class="line"> .</span><br><span class="line"><span class="tag"></<span class="name">form</span>></span> </span><br></pre></td></tr></table></figure> get与post简单提醒: 关于 GET 的注意事项: - 以名称/值对的形式将表单数据追加到 URL - 永远不要使用 GET 发送敏感数据!(提交的表单数据在 URL 中可见!) - URL 的长度受到限制(2048 个字符) - 对于用户希望将结果添加为书签的表单提交很有用 - GET 适用于非安全数据,例如 Google 中的查询字符串 关于 POST 的注意事项: - 将表单数据附加在 HTTP 请求的正文中(不在 URL 中显示提交的表单数据) - POST 没有大小限制,可用于发送大量数据。 - 带有 POST 的表单提交无法添加书签 **提示:**如果表单数据包含敏感信息或个人信息,请务必使用 POST 附:novalidate深究:[深入探究novalidate_笔记大全_设计学院 (python100.com)](https://www.python100.com/html/74598.html) #### 2.表单元素: < input >:属性有type,name, value。< input > 元素根据不同的 *type* 属性,可以变化为多种形态。 < select >:例子: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">select</span> <span class="attr">name</span>=<span class="string">"cars"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"volvo"</span>></span>Volvo<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"><span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"saab"</span>></span>Saab<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"><span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"fiat"</span>></span>Fiat<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"><span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"audi"</span>></span>Audi<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"><span class="tag"></<span class="name">select</span>></span></span><br></pre></td></tr></table></figure> name类似于键,value类似于值。 *<option>* 元素定义待选择的选项。 列表通常会把首个选项显示为被选选项。 您能够通过添加 selected 属性来定义预定义选项。 < textarea >:该元素定义多行输入字段(*文本域*),如下例: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">textarea</span> <span class="attr">name</span>=<span class="string">"message"</span> <span class="attr">rows</span>=<span class="string">"10"</span> <span class="attr">cols</span>=<span class="string">"30"</span>></span></span><br><span class="line">The cat was playing in the garden.</span><br><span class="line"><span class="tag"></<span class="name">textarea</span>></span></span><br></pre></td></tr></table></figure> < button >:该元素定义可点击的按钮,如下例: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">onclick</span>=<span class="string">"alert('Hello World!')"</span>></span>Click Me!<span class="tag"></<span class="name">button</span>></span></span><br></pre></td></tr></table></figure> < datalist >:预定义选项,如下例: <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">"action_page.php"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">list</span>=<span class="string">"browsers"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">datalist</span> <span class="attr">id</span>=<span class="string">"browsers"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Internet Explorer"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Firefox"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Chrome"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Opera"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Safari"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">datalist</span>></span> </span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure> #### 3.输入类型: link:[HTML 输入类型 (w3school.com.cn)](http://www.w3school.com.cn/html/html_form_input_types.asp) #### 4.input表单属性: value, readonly, disabled(禁用)等等 link:[HTML Input 属性 (w3school.com.cn)](http://www.w3school.com.cn/html/html_form_attributes.asp) </div> </article> <div id="footer-post-container"> <div id="footer-post"> <div id="nav-footer" style="display: none"> <ul> <li><a href="/">主页</a></li> <li><a href="/categories/">分类</a></li> <li><a href="/tags/">标签</a></li> <li><a href="/archives/">归档</a></li> <li><a href="/link/">友链</a></li> <li><a href="/about/">关于</a></li> <li><a href="/poem/">写诗</a></li> <li><a href="/search/">搜索</a></li> </ul> </div> <div id="toc-footer" style="display: none"> <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML%E5%85%A5%E9%97%A8"><span class="toc-number">1.</span> <span class="toc-text">HTML入门</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E6%A6%82%E5%BF%B5"><span class="toc-number">1.1.</span> <span class="toc-text">相关概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E5%85%83%E7%B4%A0"><span class="toc-number">1.2.</span> <span class="toc-text">HTML元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E5%B1%9E%E6%80%A7"><span class="toc-number">1.3.</span> <span class="toc-text">HTML属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96"><span class="toc-number">1.4.</span> <span class="toc-text">HTML文本格式化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E9%93%BE%E6%8E%A5"><span class="toc-number">1.5.</span> <span class="toc-text">HTML链接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#head"><span class="toc-number">1.6.</span> <span class="toc-text">< head ></span></a></li></ol></li></ol> </div> <div id="share-footer" style="display: none"> <ul> <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/&text=HTML入门"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/&title=HTML入门"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/&is_video=false&description=HTML入门"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" href="mailto:?subject=HTML入门&body=Check out this article: http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/"><i class="fa-solid fa-envelope fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/&title=HTML入门"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/&title=HTML入门"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/&title=HTML入门"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/&title=HTML入门"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/&name=HTML入门&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li> <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=http://blog.hackpax.top/HTML%E5%85%A5%E9%97%A8/&t=HTML入门"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li> </ul> </div> <div id="actions-footer"> <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fa-solid fa-bars fa-lg" aria-hidden="true"></i> 菜单</a> <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fa-solid fa-list fa-lg" aria-hidden="true"></i> 目录</a> <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fa-solid fa-share-alt fa-lg" aria-hidden="true"></i> 分享</a> <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa-solid fa-chevron-up fa-lg" aria-hidden="true"></i> 返回顶部</a> </div> </div> </div> <footer id="footer"> <div class="footer-left"> Copyright © 2016-2025 Pax </div> <div class="footer-right"> <nav> <ul> <!-- --><li><a href="/">主页</a></li><!-- --><!-- --><li><a href="/categories/">分类</a></li><!-- --><!-- --><li><a href="/tags/">标签</a></li><!-- --><!-- --><li><a href="/archives/">归档</a></li><!-- --><!-- --><li><a href="/link/">友链</a></li><!-- --><!-- --><li><a href="/about/">关于</a></li><!-- --><!-- --><li><a href="/poem/">写诗</a></li><!-- --><!-- --><li><a href="/search/">搜索</a></li><!-- --> </ul> <ul> </ul> </nav> </div> </footer> </div> <!-- styles --> <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"/> <!-- jquery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> <!-- clipboard --> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js" crossorigin="anonymous"></script> <script type="text/javascript"> $(function() { // copy-btn HTML var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"复制到粘贴板!\">"; btn += '<i class="fa-regular fa-clone"></i>'; btn += '</span>'; // mount it! $(".highlight table").before(btn); var clip = new ClipboardJS('.btn-copy', { text: function(trigger) { return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','') } }); clip.on('success', function(e) { e.trigger.setAttribute('aria-label', "复制成功!"); e.clearSelection(); }) }) </script> <script src="/js/main.js"></script> <!-- search --> <!-- Baidu Analytics --> <!-- Cloudflare Analytics --> <!-- Disqus Comments --> <!-- utterances Comments --> </body> </html>