无留
无留

HTML总结

一、HTML简介

1.什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML总结_第1张图片
2.HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号 包围的关键词，比如
  • HTML 标签通常是成对出现 的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签 和 闭合标签

<标签>内容

(1)HTML标签

整个网页是从这里开始的，然后到结束。

(2)head标签

head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。

表1 内部标签

标签 描述
定义了文档的信息
</td> <td>定义了文档的标题</td> </tr> <tr> <td><base></td> <td>定义了页面链接标签的默认链接地址</td> </tr> <tr> <td><link></td> <td>定义了一个文档和外部资源之间的关系</td> </tr> <tr> <td><meta></td> <td>定义了HTML文档中的元数据</td> </tr> <tr> <td><script></td> <td>定义了客户端的脚本文件</td> </tr> <tr> <td><style></td> <td>定义了HTML文档的样式文件</td> </tr> </tbody> </table> <p><head>的内部标签也非常重要，在前期大家只需要感性认知就可以。</p> <h3 id="(3)%3Cbody%3E">(3)body标签</h3> <p>body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。</p> <p>后续笔记讲解的标签都是在<body>标签内部的各种标签。</p> <h2 id="3.HTML%20%E5%85%83%E7%B4%A0">3.HTML 元素</h2> <p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p> <p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:</p> <p>HTML 元素:</p> <p><span style="background-color:#a2e043;"><p>这是一个段落。</p></span></p> <p></p> <h2 id="(%E4%B8%80)%E3%80%81%E6%AE%B5%E8%90%BD%E6%A0%87%E7%AD%BE">(一)、段落标签</h2> <p><strong>(1)、段落与文字标签</strong></p> <p style="text-align:center;">表1 段落与文字标签</p> <table> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><h1>~<h6></td> <td>header</td> <td>标题</td> </tr> <tr> <td><p></td> <td>paragraph</td> <td>段落</td> </tr> <tr> <td><br></td> <td>break</td> <td>换行</td> </tr> <tr> <td><hr></td> <td>horizontal rule</td> <td>水平线</td> </tr> <tr> <td><div></td> <td>division</td> <td>分割（块元素）</td> </tr> <tr> <td><span></td> <td>span</td> <td>区域（行内元素）</td> </tr> </tbody> </table> <p></p> <p><strong>（2)、文本格式化标签</strong></p> <p>表2 文本格式化标签</p> <table align="left" border="1" style="width:650px;"> <thead> <tr> <th>标签</th> <th>语义</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><strong><b></td> <td>strong(加强)</td> <td> <p>加粗</p> </td> </tr> <tr> <td> <p><em><i></p> </td> <td>emphasized(强调)</td> <td>斜体</td> </tr> <tr> <td><del><s></td> <td>delete(删除)</td> <td>划过</td> </tr> <tr> <td><ins><u></td> <td>下划线</td> <td>下划</td> </tr> <tr> <td><cite></td> <td>cite(引用)</td> <td>斜体</td> </tr> <tr> <td><sup></td> <td>superscripted(上标)</td> <td>上标</td> </tr> <tr> <td><sub></td> <td>subscripted(下标)</td> <td>下标</td> </tr> </tbody> </table> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <h2></h2> <h2>(二)、网页特殊符号</h2> <p><br> 网页特殊符号只需要记忆几个就行了，HTML空格   <是 <>是 >，其他的特殊符号我们不需要记忆，当我们需要的时候再回来查找一下特殊符号表就OK了。</p> <h2>(三)、自闭合标签</h2> <p><br> HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。</p> <p>一般标签可以在开始符号和结束符号之间插入其他标签或文字。</p> <p>自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。</p> <p><strong>(1)、一般标签</strong></p> <p>举例：<body></body></p> <p><strong>(2)、自闭合标签</strong></p> <p>举例：<br/>、<hr/></p> <h2>(四)、图片标签</h2> <p><br> 在HTML中，我们使用img标签来表示图片。</p> <p>img标签有两个重要属性：alt和title。</p> <p>alt属性用于图片描述，这个描述文字是给捜索引擎看的。并且当图片无法显示时，页面 会显示alt中的文字。</p> <p>title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片 上时，会显示title中的内容。</p> <p>语法：</p> <pre><code class="language-html"><img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)"></code></pre> <p style="text-align:center;">表1 img标签常用属性</p> <table> <thead> <tr> <th>属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>src</td> <td>图像的文件地址</td> </tr> <tr> <td>alt</td> <td>图片显示不出来时的提示文字</td> </tr> <tr> <td>title</td> <td>鼠标移到图片上的提示文字</td> </tr> </tbody> </table> <h2 id="(%E4%BA%8C)%E3%80%81%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E5%92%8C%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84">(五)、相对路径和绝对路径</h2> <p>相对路径，指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。</p> <p>绝对路径，指的是文件的完整路径。</p> <p>详细复习内容，请查看相对路径和绝对路径</p> <h2 id="%EF%BC%88%E5%85%AD%EF%BC%89%E3%80%81%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89">(六)、超链接标签（重点）</h2> <p>超链接使用a标签，语法如下：</p> <p><a href="链接地址" target="目标窗口的打开方式"></p> <p style="text-align:center;">表1 <a>标签target属性</p> <table> <thead> <tr> <th>target属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>_self</td> <td>默认方式，即在当前窗口打开链接</td> </tr> <tr> <td>_blank</td> <td>在一个全新的空白窗口中打开链接</td> </tr> <tr> <td>_top</td> <td>在顶层框架中打开链接</td> </tr> <tr> <td>_parent</td> <td>在当前框架的上一层里打开链接</td> </tr> </tbody> </table> <p>我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。</p> <p>超链接根据链接对象的不同分为：</p> <ol> <li>外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。</li> <li>内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。</li> <li>空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。</li> <li>下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。</li> <li>网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.</li> <li>锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.                                        </li> </ol> <p>在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a></p> <p>找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>超链接标签

1.外部链接

腾讯 target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面 传智播客

2.内部链接: 网站内部页面之间的相互链接

公司简介

3.空链接:#

公司地址

4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式

下载文件

5.网页元素的链接

(七)、列表标签

3种列表的语义记忆：

表1 3种列表记忆

标签 语义 说明
ol ordered list 有序列表
ul unordered list 无序列表
dl definition list 定义列表

HTML3种列表

列表有3种：有序列表、无序列表和定义列表。

有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。

目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。

(1)、有序列表

    
 
    
  1. 有序列表项
    2. 
 
    
  2. 有序列表项
    3. 
 
    
  3. 有序列表项
    4.
type属性值 列表项的序号类型
1 数字1、2、3……
a 小写英文字母a、b、c……
A 大写英文字母A、B、C……
i 小写罗马数字i、ii、iii……
I 大写罗马数字I、II、III……

(2)、无序列表

无序列表是三个列表中最为重要的列表。

语法：

    
 
    
  • 无序列表项
    • 
 
    
  • 无序列表项
    • 
 
    
  • 无序列表项
    •
表1 无序列表type属性
type属性值 列表项的序号类型
disc 默认值，实心圆“●”
circle 空心圆“○”
square 实心正方形“■”

(3)、自定义列表

语法：


 
    
定义名词

 
    
定义描述

 
    ……

说明：

即“definition list（定义列表）”，
即“definition term（定义名词）”，而
即“definition description（定义描述）”。

在该语法中，

标记和
标记分别定义了定义列表的开始和结束，
后面添加要解释的名词，而在
后面则添加该名词的具体解释。

(八)、表格标签

通过语义化记忆表格标签：

表1 表格基本标签
标签 语义 说明
table table（表格） 表格
tr table row（表格行） 行
td table data cell（表格单元格） 单元格
表2 表格结构标签
标签 语义 说明
thead table head 表头
tbody table body 表身
tfoot table foot 表脚
th table header 表头单元格

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。

(1)、合并行

语法：

(2)、合并列

语法：




    
    
    
    合并单元格

HTML总结_第2张图片

(3)、 单元格边距(Cell padding)

就是特殊的padding

 HTML总结_第3张图片

(4)、单元格间距(Cell spacing)

HTML总结_第4张图片

 (九)、表单标签

HTML 表单

表单是一个包含表单元素的区域。

表单标签共有4个：、