知识点

HTML文档结构

  • HTML是超文本标记语言，超文本指超链接，标记指标签，专门用于制作网页，由一个个标签组成
  • 文件拓展名为html，或htm
  • 它可以用文本编辑器进行编辑，用浏览器打开后，浏览器会自动渲染成网页
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<!--html文档必须要申明html版本，否则会默认以最低版本进行解析-->
<html lang="en">
<!-- lang="en"：用于标记网页的语言为英文，可写可不写，一般用于统计使用-->
<head>
    <!--可以标识网页的属性信息，外部的引用信息等-->
    </head>
<body>
    <!-- 可以设置网页内容显示的信息-->
    </body>
    </html>

标题、段落、字符实体

  • 标题：

    1
    h1、h2、h3、h4、h5、h6：分别对应于标题1~6，他们都是成对的

  • 段落：

    1
    2
    3
    4
    5
    6
    7
    p：用于定义段落，默认带有样式，成对出现
    <br />：html中标识换行，单个
    &nbsp;：字符实体，标识空格
    &gt;：字符实体，标识>
    &lt;：字符实体，标识<

    # p标签中不建议再嵌套p标签，但是可以包裹span标签等

语义标签、图片

  • html块标签

    1
    2
    <div>：块元素标签，标识一块内容，没有具体语义，默认不带样式，成对出现
    <span>：行内元素标签，标识一行中的一小段内容，没有具体语义，默认不带样式，成对出现

  • 含语义的标签(自带样式)

    1
    2
    3
    4
    <em>：行内元素，表示语气中的强调词
    <i>：行内元素，表示专业词汇
    <b>：行内元素，表示文档中的关键字或者产品名
    <strong>：行内元素，表示非常重要的内容

  • 图片标签

    1
    2
    3
    4
    5
    6
    7
    # <img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
    # src属性: 定义图片的引用地址
    # alt属性: 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
    <img src="./图片路径.png" alt="图片描述" />

    # 绝对地址：相对于磁盘的位置去定位文件的地址
    # 相对地址：相对于引用文件本身去定位被引用的文件地址

链接

<a>标签：可以在网页上定义一个链接地址，它的常用属性有：

  • href属性：定义跳转的地址
    • #：当暂时不知道填写什么链接地址，或者希望链接跳转到页面顶部时，可以直接定义这个
  • title属性：定义鼠标悬停时弹出的提示文字框
  • target属性：定义链接窗口打开的位置
    • target=”_self” 缺省值，新页面替换原来的页面，在原来位置打开
    • target=”_blank” 新页面会在新开的一个浏览器窗口打开
1
2
3
<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
<a href="2.html" target="_blank">测试页面2</a>

列表

有序列表

1
2
3
4
5
6
<!--实际开发中很少-->
<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

无序列表

1
2
3
4
5
6
7
8
9
<!--
实际开发中常用，在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标。
-->

<ul>
    <li><a href="#">新闻标题一</a></li>
    <li><a href="#">新闻标题二</a></li>
    <li><a href="#">新闻标题三</a></li>
</ul>

定义列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--常用于术语的定义，<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释-->
<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>
    

</dl>

表格

  • <table>标签：声明一个表格，它的常用属性如下：
    • border：定义表格的边框，设置值是数值
    • cellpadding：定义单元格内容与边框的距离，设置值是数值
    • cellspacing：定义单元格与单元格之间的距离，设置值是数值
    • align：设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
  • <tr>标签：定义表格中的一行
  • <td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
    • align：设置单元格中内容的水平对齐方式,设置值有：left | center | right
    • valign：设置单元格中内容的垂直对齐方式 top | middle | bottom
    • colspan：设置单元格水平合并，设置值是数值
    • rowspan：设置单元格垂直合并，设置值是数值
1
2
3
4
5
6
7
8
9
10
11
12
<table border="1" cellpadding="5" cellspacing="20" align="center">
    <tr>
        <th>这里是表头1</th>
        <th>这里是表头2</th>
        <th>这里是表头3</th>
    </tr>
    <tr>
        <td align="center" valign="middle">这里是内容</td>
        <td colspan="2">这里是内容</td>
        <td>这里是内容</td>
    </tr>
</table>

总结

提供记忆脑图如下：脑图

HTML