HTML与CSS-ZhiMap思维导图

HTML与CSS
进入思维导图模式
- HTML页面的基本构成
  - HTML（Hypertext Markup Language，超文本标记语言或超文本链接语言）:
    目前网络上应用最为广泛的标记语言，也是构成网页文档的主要语言
    一种用来制作超文本文档的简单标记语言
    不是一种真正的编程语言，只是一种标记符
    通过一些约定的标签符号对文件的内容进行标注，指出内容的输出格式，用户浏览WWW信息时，浏览器会自动解释这些标签的含义，并按照一定的格式在屏幕上显示这些被标记的信息
    HTML文档：
    用HTML编写的超文本文档
    一个放置了标签的文本文件
    文件扩展名为“.html”或“.htm”
    是能独立于操作系统平台的、可供浏览器解释浏览的网页文件
    - HTML语言不区分大小写。如<BR>和<br>都表示换行
      使用HTML标签时不可以交错，即标签需正确进行嵌套。如：
      <body><form></body></form>
      应改为：
      <body><form></form></body>。
  - 1. 页面结构标签
    通过例子可以看出，HTML文档分为文档头和文档体两部分：
    在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示在网页中的各种正文信息
    通常由3对标签来构成一个HTML文档的框架：
    （1）<html></html>
    这个标签告诉浏览器这个文件是HTML文档。<html>放在HTML文档的最前边，用来标识HTML文档的开始，</html>放在HTML文档的最后边，用来标识HTML文档的结束。
    （2）<head></head>
    这个标签中的内容是文档的头部信息，说明一些文档的基本情况，如文档的标题等，其内容不会显示在网页中
    在此标签之间可使用<title></title>、<meta>、<script></script >等描述HTML文档相关信息的标签对。
    <meta>标签用来描述HTML网页文档的属性，如日期和时间、网页描述、关键词、页面刷新等。例如：
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    属性http-equiv用于向浏览器提供一些说明信息，从而可以根据这些说明做出相应处理。http-equiv其实并不仅仅只有说明网页的字符编码这一个作用，常用的http-equiv类型还包括：网页到期时间、默认的脚本语言、网页自动刷新时间等。
    属性charset，其作用是指定当前文档所使用的字符编码为UTF-8，也就是支持中文简体字符。根据这一行代码，浏览器就可以识别出网页中的中文字符。
    （3）<body></body>
    这个标签中的内容是HTML文档的主体部分
    可包含<p></p>、<h1></h1>、<br>、<hr>等标签，它们所定义的文本、图像等将会在网页中显示出来。
  - 2. 页头标签
    <title></title>标签对：
    用来设定网页标题
    浏览器通常会将标题显示在浏览器窗口的标题栏左边
    <title></title>标签对只能放在<head></head>标签对之间
  - 3. 标题标签
    <hX></hX>标签：
    定义不同显示效果的标题
    X表示标题的级数，取值范围为1~6，X越小，标题字号越大
    属性align，用于设置标题文字的对齐方式，其取值如下：
    left：左对齐。
    right：右对齐。
    center：居中对齐。
  - 4. 格式排版标签
    （1）<br>
    该标签强制文本换行，但不会在行与行之间留下空行
    如果把<br>加在<p></p>标签对的外边，将创建一个大的回车换行，即<br>前边和后边的文本的行与行之间的距离比较大
    若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小。
    （2）<hr>
    该标签在网页中加入一条横跨网页的水平线
    具有多种属性用于设置水平线的宽度、长度及显示效果等：
    size属性：设置水平线的粗细，默认单位是像素。
    width属性：设置水平线的宽度，默认单位是像素，也可以使用对屏幕的百分比表示。
    noshade属性：该属性不用赋值，而是直接加入标签即可使用，它用来取消水平线的阴影（不加入此属性水平线默认有阴影）。
    align属性：设置水平线的对齐方式。
    color属性：设置水平线的颜色。
    例如：
    <hr align="center" width ="600" size ="9" color ="blue">
  - 5. 文字格式标签
    <font></font>标签对通过设置<font>属性来控制文字的字体、大小、样式和颜色，各属性功能如下：
    face属性：设置字体样式。
    size属性：设置字体大小，值为整数，分为7个级别，默认字体大小为3。
    color属性：设置字体颜色。
  - 6. 段落标签
    <p></p>标签用来创建一个新的段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上
    <p>标签可以有多种属性，例如align属性控制其内容的对齐方式；clear属性控制图文混排方式，其取值如下：
    left：下一段显示在左边界处的空白区域。
    right：下一段显示在右边界处的空白区域。
    center：下一段的左右两边都不许有其它内容。
    为了防止文档出错，尽量不要省略结尾标记</p>。
  - 7. 预定格式标签
    在编辑文档时，如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，可以使用<pre></pre>标签对
    默认字体为10磅
  - 8. 注释标签
    在编写HTML文件时，为提高文件的可读性，可以使用标签对编写注释文字，其语法如下：
    
    注释内容不会在浏览器中显示，即不会在页面中显示。
- HTML常用标签
  - 列表是一种规定格式的文字排列方式，用于列举内容
    常用的列表分为：
    有序列表
    无序列表
    自定义列表。
    - 1. 有序列表
      各列表项按一定的编号顺序显示
      用<ol>开始，以</ol>结束
      每一个列表项用<li></li>标签定义
      语法：
      <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      ……
      </ol>
      - 1. 有序列表
        在<ol>中可以使用type、start属性。type属性用于设置编号的种类，其取值如下：
        l：编号为数字，默认值。例如：1，2，3，……
        A：编号为大写英文字母。例如：A，B，C，……
        a：编号为小写英文字母。例如：a，b，c，……
        I：编号为大写罗马字符。例如：Ⅰ，Ⅱ，Ⅲ，……
        i：编号为小写罗马字符。例如：ⅰ，ⅱ，ⅲ，……
    - 2. 无序列表
      各列表项之间没有顺序关系列表项显示时前面有一个项目符号用<ul>开始，以</ul>结束，每一个列表项同样也用<li></li>标签定义
      语法：
      <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      ……
      </ul>
      在<ul>、<li>中都可以使用type属性。
      type属性取值如下：
      disc：实心圆点，默认值。
      circle：空心圆点。
      square：实心正方形。
    - 3. 自定义列表
      实现一种分两层的项目清单
      语法：
      <dl>
      <dt>第一个列表项</dt>
      <dd>对第一个列表项的说明</dd>
      <dt>第二个列表项</dt>
      <dd>对第二个列表项的说明</dd>
      ……
      </dl>
      用<dl>开始，以</dl>结束，给每一个列表项加上了一段说明性文字，说明性文字独立于列表项另起一行显示
      <dt></dt>标签用来定义列表项
      <dd></dd>标签用来对列表项进行说明
  - 多媒体和超链接标签
    - 多媒体和超链接在网页中起着非常重要的作用
      多媒体有图像、视频、背景音乐等多种形式，可以使网页更加丰富多彩
      超链接可以使包含不同信息的网页连接在一起
      - 1. 插入图像
        使用<img>标签可以为网页添加.gif、.jpg、.png等格式的图像
        格式：
        <img scr=“ ” 属性=“ ” ….>主要属性如下：
        src：指定图像的源文件路径，可以使用相对路径、绝对路径或URL。
        width：指定图像的宽度，单位为像素。
        height：指定图像的高度，单位为像素。
        hspace：指定图像水平方向的边沿空白，以免文字或其他图片过于贴近，单位为像素。
        vspace：指定图像垂直方向的边沿空白，单位为像素。
        border：指定图像边框厚度。
        align：当文字与图像并排放置时，指定图像与文本行的对齐方式，其属性值可取top（与文本行顶部对齐）、center（水平居中对齐）、middle（垂直居中对齐）、bottom（底部对齐，默认值）、left（图像左对齐）、right（图像右对齐）。
        alt：这是用以描述该图像的文字，图像不能显示时将显示该属性值；当鼠标移至图像上时，将该属性值作为提示信息显示。
      - 2. 插入背景音乐
        使用<bgsound>标签可以在网页中添加.wav、.mid、.mp3等格式的背景音乐，主要属性如下：
        balance：指定音乐的左右均衡。
        delay：指定播放延时。
        loop：指定音乐循环播放次数。值为-1或infinite时，表示无限次循环播放。
        src：指定音乐源文件的路径。
        volume：指定音量。
      - 3. 插入超链接
        创建超链接是在当前页面与其它页面间建立链接，使用户可以从一个页面直接跳转到其它的页面、图像或服务器
        格式：
        <a href="资源地址" target="目标窗口">超链接文本及图像</a>
        其中，<a></a>标签对用来创建超链接
        <a>的主要属性有：
        href：指定链接地址。若是链接到网站外部，必须为URL地址；若是链接到网站内部页面，只需指明该页面的绝对路径或相对路径。
        target：指定显示链接目标的窗口，其值可取：
        _blank（浏览器总在一个新打开、未命名的窗口中载入目标文档）
        _parent（目标文档载入当前窗口的父窗口中）
        _self（默认值，目标文档载入并显示在当前窗口中）
        _top（清除当前窗口所有被包含的框架并将目标文档载入整个浏览器窗口）
  - 表格标签
    - 一种能够有效地描述信息的组织方式
      由行、列、单元格组成可以很好地控制页面布局，在网页中应用非常广泛
      许多网站都用多重表格来构建网站的总体布局，固定文本或图像的输出，还可以任意进行背景和前景颜色的设置
      - 语法：
        <table>
        <tr>
        <th> 表格第一列的标题</th>
        <th> 表格第二列的标题</th>
        …
        </tr>
        <tr>
        <td> 表格第一行的第一个单元格内容</td>
        <td> 表格第一行的第二个单元格内容</td>
        …
        </tr>
        <tr>
        <td> 表格第二行的第一个单元格内容</td>
        <td> 表格第二行的第二个单元格内容</td>
        …
        </tr>
        …
        </table>
        <table>常用属性
        border：设置表格边框的宽度，若为0表示边框不可见，单位为像素。
        cellspacing：设置单元格边框到表格边框的距离，单位为像素。
        cellpadding：设置单元格内文字到单元格边框的距离，单位为像素。
        width：设置表格宽度。其值可为整数，单位为像素，如：100表示100像素；也可以是相对页面宽度的相对值，如：20%表示表格宽度为整个页面宽度的20%。
        height：设置表格高度，取值方式与width一致。
        bgcolor：设置表格背景色。可以是十六进制代码，也可以是英文字母，
        bordercolor：设置表格边框颜色。
        align：设置表格在水平方向的对齐方式，其值可为left、right、center。
        valign：设置表格在垂直方向的对齐方式，其值可为top、middle、baseline。
        <tr>常用属性
        bordercolor：设置该行的外边框颜色。
        bgcolor：设置该行单元格的背景颜色。
        height：设置该行的高度。
        align：设置该行各单元格的内容在水平方向的对齐方式，其值可为left、right、center。
        valin：设置该行各单元格的内容在垂直方向的对齐方式，其值可为top、middle、bottom。
        <td>常用属性
        colspan：设置单元格所占的列数，默认值为1。
        rowspan：设置单元格所占的行数，默认值为1。
        background：设置单元格背景图像。
        width：设置单元格宽度。
        <th></th>定义的列标题的文字以粗体方式显示，其属性使用与<td>一致，在表格的定义语法中，也可以不使用<th>定义标题单元格。
  - 表单标签
    - 表单在网页中用来供用户填写信息，以实现服务器获得用户信息，使网页具有交互功能。
      - 语法：
        <form action="url" method="get|post" name="value" onsubmit ="function" onreset="function" target="window"></form>
        action属性：
        设置服务器上用来处理表单数据的处理程序地址，处理程序可以是JSP程序、CGI（Common Gateway Interface，通用网关接口）程序、ASP.NET程序等，该属性值可以是URL地址也可以是电子邮件地址。例如：
        action=http://localhost/sample/ShopCart.jsp
        表示当用户提交表单后，将调用服务器上的JSP页面ShopCart.jsp来处理用户的输入。
        采用电子邮件地址的格式：
        action="mailto:接收用户输入信息的邮件地址"。
        例如：
        action=mailto:youremail@zzuli.edu.cn
        表示把用户输入信息发送到youremail@zzuli.edu.cn。
        method属性
        设置处理程序从表单中获得信息的方式，取值可为get或post。
        get方法：
        将表单中的输入信息作为查询字符串附加在action指定的地址后（中间用“？”隔开）传送到服务器
        查询字符串使用key="value"的形式定义，如果有多个域，中间用“&”隔开，如：
        http://localhost/sample/ShopCart.jsp？flowerid="0169"&count="16"，
        问号后面的即为查询字符串
        get方法在浏览器的地址栏中以明文形式显示表单中各个表单域的值，对数据的长度有限制。
        post方法：
        将表单中用户输入的数据进行包装，按照HTTP传输协议中的post方式传送到服务器
        对数据的长度基本没有限制
        目前大都采用此方式
        name属性：设置表单的名字。
        onsubmit、onreset属性：设置在单击了“submit”或“reset”按钮后要执行的脚本函数名。
        target属性：设置显示表单内容的窗口名。
        HTML对表单的数量没有限制，但一个页面中如果有太多的表单不易于阅读，因此需合理设置。
      - 表单域：
        （1）单行输入域：
        <input>标签，用户可在其中输入单行信息。主要属性：
        type属性：设置输入域的类型，取值如下：
        name属性：设置输入域的名字。
        value属性：设置输入域的默认值。
        align属性：设置输入域位置，可取值：
        left（靠左）
        right（靠右）
        middle（居中）
        top（靠上）
        bottom（靠底）
        onclick属性：设置按下按钮后执行的脚本函数名。
        （2）多行输入域
        <textarea></textarea>标签对，定义多行文本输入域，主要属性如下：
        name属性：设置输入域名字。
        rows属性：设置输入域的行数。
        cols属性：设置输入域的列数。
        wrap属性：设置是否自动换行，属性值可取：
        off：不自动换行
        hard：自动硬回车换行，换行标记一同被传送到服务器
        soft：自动软回车换行，换行标记不会被传送到服务器
        （3）选择域
        <select></select>标签对用来建立一个下拉列表，<option>标签用来定义下拉列表中的一个选项，用户可以从列表中选择一项或多项。
        ①<select></select>主要属性：
        name属性：设置下拉列表的名字。
        size属性：设置下拉列表中选项个数，默认值为1。
        multiple属性：表示下拉列表支持多选。
        ②<option>主要属性：
        selected属性：表示当前选项被默认选中。
        value：设置当前选项的值，在该项被选中之后，该项的值将被送到服务器。
      - 表单按钮
        <button></button>标签对用于定义提交表单内容给服务器的按钮，主要属性：
        type属性：设置按钮类型，属性值可取：
        button（一般按钮）
        reset（复位按钮）
        submit（提交按钮）
        与<input>中同名的属性具有相同的功能
        accesskey属性：设置按钮热键，即按下Alt键的同时按下该属性值所对应得键便可以快速定位到该按钮。
  - 框架标签
    - 在进行网站整体结构布局时，框架也是经常被使用的一种标签
      主要用来分割窗口和插入浮动窗口，使同一个浏览器窗口同时显示多个网页，如果能有效的运用将有助于提高网页的浏览效率。
      - 语法：
        <html>
        <head>
        <title>…</title>
        </head>
        <frameset>
        <frame src="url">
        …
        <frameset>
        <frame src="url">
        …
        </frameset>
        <noframes>
        ...
        </noframes>
        </frameset>
        </html>
    - 基本标签
      - （1）<noframes></noframes>
        该标签对中的内容显示在不支持框架的浏览器窗口中
        标签对中的内容可以是浏览器太旧，无法显示Frame功能的提示性语句，也可以是没有Frame语法的普通版本的HTML文档。这样，不支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。
        在此标签对之间应先紧跟<body></body>标签对，然后才可以使用其它没有Frame语法的普通标签。
      - （2）<frameset></frameset>
        该标签对用来定义一个框架结构容器
        用来定义网页被分割成几个子窗口，各个子窗口是如何排列的
        该标签对放在HTML文档的<body></body>标签对的外边，也可以嵌套在其他<frameset></frameset>标签对中实现网页多重框架结构。
    - 常见属性
      - <frameset>常用属性：
        rows：
        在垂直方向将浏览器窗口分割成多个子窗口，即浏览器中所有子窗口从上到下排列，同时设置每个子窗口所占的高度
        属性值可以是百分数（子窗口高度相对页面高度的相对值）、整数（绝对像素值）或星号(“*”)，其中星号代表那些未说明高度的空间，如果同一个属性中出现多个星号则将剩下的未被说明高度的空间平均分配
        各个子窗口高度之间用逗号分隔。
        cols：
        在水平方向将浏览器窗口分割成多个子窗口，即浏览器中所有子窗口从左到右排列，同时设置每个子窗口所占的宽度
        属性取值方式与rows一致。
        border：设置子窗口边框宽度。
        frameborder：设置子窗口是否显示边框。
        onload：设置框架被载入时引发的事件。
        onunload：设置框架被卸载时引发的事件。
        <frame>标签放在<frameset></frameset>之间，用来定义框架结构中某一个具体的子窗口。常用属性如下：
        src：设置该子窗口中将要显示的HTML文件地址，取值可以是url地址，也可以是相对路径或绝对路径。
        name：设置子窗口的名字。
        scrolling：指定子窗口是否显示滚动条，取值可以是“yes”（显示）、“no”（不显示）或“auto”（根据窗口内容自动决定是否显示滚动条）。
        noresize：指定窗口不能调整大小，该属性直接加入标签中即可使用，不需赋值。
        src和name这两个属性必须赋值。
      - target属性
        在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网页显示的位置由target属性指定，若没有指定则在当前子窗口打开。
        target属性常用格式如下：
        <a href="目标网页地址" target="显示目标网页的子窗口名字">超链接文字</a>
        例如：框架中定义了一个子窗口main，在main中显示jc.htm网页，则代码为：
        <frame src="jc.htm" name="main">，
        若jc.htm中有一个超链接，在点击该链接后，网页new.htm将要显示在名为main的子窗口中，则代码为：
        <a href="new.htm" target="main">需要链接的文本</a>。
- 本章主要内容：
  （1）HTML。
  （2）CSS。
- CSS基础知识
  - CSS样式表定义
    - 定义样式表的方法主要有三种：
      1. 通过HTML标签定义样式表
      2. 使用id定义样式表
      3. 使用class定义样式表
      - 1. 通过HTML标签定义样式表
        CSS样式表定义的基本语法：
        引用样式的对象{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}
        “标签属性：属性值”：一一对应，每个属性与属性值对之间用分号隔开
        背景颜色属性background-color；在脚本中对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词第三个单词首字母也要大写
        注意：在Javascript中是严格区分大小写的
        例如：
        h1,h2{text-align:center;color:blue}
      - 2. 使用id定义样式表
        在HTML页面中id选择符用来对某个单一元素定义单独的样式
        定义id选择符要在id名称前加上一个“#”号
        使用id定义样式表的基本语法如下：
        #id名称{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}
        例如：
        #sample{font-family:宋体;font-size:60pt}，
        <p id=sample>段落文本</p>。
      - 3. 使用class定义样式表
        （1）标签名.类名{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}
        例如：
        h1.center{text-align:center}
        该center类的样式只能用在<h1>标签上。
        （2）.类名{标签属性:属性值；标签属性:属性值；标签属性:属性值；……}
        例如：
        .text {font-family: 宋体;color: red;}
        <p class ="text">段落文本</p>，
  - HTML中加入CSS的方法
    - 在HTML中加入CSS的方法主要有三种：
      嵌入式样式表
      内联式样式表
      外联式样式表
      - 1. 嵌入式样式表
        例如：
        <p style=“color:red;font-size:10pt”>我爱我的祖国</p>
        这个样式表只是让当前的<p></p>标签对中的文字为红色，字体大小为10pt。
      - 2. 内联式样式表
        内联式样式表利用<style></style>标签对将样式表定义在HTML文档的<head></head>标签对之间
        内联式样式表的作用范围是本HTML文档。
      - 3. 外联式样式表
        外联式样式表是将定义好的CSS单独放到一个以.css为扩展名的纯文本文件中，再使用<link>标签链接到网页中。
  - CSS的优先级
    - CSS是级联样式表，级联是指继承性，即在标签中嵌套的标签继承外层标签的样式。
      级联的优先级顺序是：
      嵌入式样式表（优先级最高）
      内联式样式表
      外联式样式表
      浏览器默认（优先级最低）。
      当样式表继承遇到冲突时，总是以最后定义的样式为准。
      - 例如：
        <div style="color:blue;font-size:20pt">
        <p style="font-size:25pt ">段落文本</p>
        </div>
  - CSS基本属性
    - 1. 字体属性：
    - 2. 颜色和背景属性：
    - 3. 文本属性：
    - 4. 分级属性：实现“项目符号和编号”功能：
    - 5. 鼠标属性
      通过改变“cursor”属性，可以使鼠标移动到不同的元素对象上时显示不同的形状：
- 课外阅读
  - XHTML简介
    - 可扩展超文本标记语言（英语：eXtensible Hyper Text Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用标记语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言（XML），XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
      XHTML1.1为XHTML最后的独立标准，2.0止于草案阶段。XHTML5则是属于HTML5标准的一部分，且名称已改为“以XML序列化的HTML5”，而非“可扩展的HTML”。在今日(2017年)，XHTML5比起HTML5仍远远并非主流。
  - XML简介
    - XML，Extensible Markup Language，扩展性标识语言。文件的后缀名为：.xml。就像HTML的作用是显示数据，XML的作用是传输和存储数据。
      XML 指可扩展标记语言（eXtensible Markup Language），被设计用来传输和存储数据。是各种应用程序之间进行数据传输的最常用的工具。
      XML提供了一套夸平台，跨网络，跨应用程序的语言的描述方式。使用XML可以方便的实现数据交换，系统配置，内容管理等。
      可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。
      在电子计算机中，标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种的信息比如文章等。它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。
      XML标记描述的是文档的结构和意义。它不描述页面元素的格式化。可用样式单为文档增加格式化信息。文档本身只说明文档包括什么标记，而不是说明文档看起来是什么样的。

HTML与CSS

​ HTML页面的基本构成

​HTML语言不区分大小写。如<BR>和<br>都表示换行使用HTML标签时不可以交错，即标签需正确进行嵌套。如：<body><form></body></form>应改为：<body><form></form></body>。

​2. 页头标签<title></title>标签对：用来设定网页标题浏览器通常会将标题显示在浏览器窗口的标题栏左边<title></title>标签对只能放在<head></head>标签对之间

​3. 标题标签<hX></hX>标签：定义不同显示效果的标题X表示标题的级数，取值范围为1~6，X越小，标题字号越大属性align，用于设置标题文字的对齐方式，其取值如下：left：左对齐。right：右对齐。center：居中对齐。

​7. 预定格式标签在编辑文档时，如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，可以使用<pre></pre>标签对默认字体为10磅

​8. 注释标签在编写HTML文件时，为提高文件的可读性，可以使用标签对编写注释文字，其语法如下：注释内容不会在浏览器中显示，即不会在页面中显示。

​ HTML常用标签

​列表是一种规定格式的文字排列方式，用于列举内容常用的列表分为：有序列表无序列表自定义列表。

​1. 有序列表各列表项按一定的编号顺序显示用<ol>开始，以</ol>结束每一个列表项用<li></li>标签定义语法：<ol> <li>列表项1</li> <li>列表项2</li> ……</ol>

​多媒体和超链接标签

​多媒体和超链接在网页中起着非常重要的作用多媒体有图像、视频、背景音乐等多种形式，可以使网页更加丰富多彩超链接可以使包含不同信息的网页连接在一起

​表格标签

​一种能够有效地描述信息的组织方式由行、列、单元格组成可以很好地控制页面布局，在网页中应用非常广泛许多网站都用多重表格来构建网站的总体布局，固定文本或图像的输出，还可以任意进行背景和前景颜色的设置

​表单标签

​表单在网页中用来供用户填写信息，以实现服务器获得用户信息，使网页具有交互功能。

​语法：<form action="url" method="get|post" name="value" onsubmit ="function" onreset="function" target="window"></form>

​表单域：

​（1）单行输入域：<input>标签，用户可在其中输入单行信息。主要属性：type属性：设置输入域的类型，取值如下：

​name属性：设置输入域的名字。value属性：设置输入域的默认值。align属性：设置输入域位置，可取值：left（靠左）right（靠右）middle（居中）top（靠上）bottom（靠底）onclick属性：设置按下按钮后执行的脚本函数名。

​表单按钮

​框架标签

​在进行网站整体结构布局时，框架也是经常被使用的一种标签主要用来分割窗口和插入浮动窗口，使同一个浏览器窗口同时显示多个网页，如果能有效的运用将有助于提高网页的浏览效率。

语法：​<html> <head> <title>…</title> </head> <frameset> <frame src="url"> … <frameset> <frame src="url"> … </frameset> <noframes> ... </noframes> </frameset></html>

​基本标签

​常见属性

​本章主要内容：（1）HTML。（2）CSS。

​ CSS基础知识

​ CSS样式表定义

​定义样式表的方法主要有三种：1. 通过HTML标签定义样式表2. 使用id定义样式表3. 使用class定义样式表

​1. 通过HTML标签定义样式表

​2. 使用id定义样式表

​3. 使用class定义样式表

HTML中加入CSS的方法

​在HTML中加入CSS的方法主要有三种：嵌入式样式表内联式样式表外联式样式表

​1. 嵌入式样式表

​例如： <p style=“color:red;font-size:10pt”>我爱我的祖国</p>这个样式表只是让当前的<p></p>标签对中的文字为红色，字体大小为10pt。

​2. 内联式样式表

内联式样式表利用<style></style>标签对将样式表定义在HTML文档的<head></head>标签对之间内联式样式表的作用范围是本HTML文档。​

​3. 外联式样式表

​外联式样式表是将定义好的CSS单独放到一个以.css为扩展名的纯文本文件中，再使用<link>标签链接到网页中。

CSS的优先级

​例如：<div style="color:blue;font-size:20pt"><p style="font-size:25pt ">段落文本</p></div>

CSS基本属性

​1. 字体属性：

2. 颜色和背景属性：​

​3. 文本属性：

​4. 分级属性：实现“项目符号和编号”功能：

​5. 鼠标属性 通过改变“cursor”属性，可以使鼠标移动到不同的元素对象上时显示不同的形状：

​ 课外阅读

​XHTML简介

​XML简介

HTML页面的基本构成

HTML语言不区分大小写。如<BR>和<br>都表示换行
使用HTML标签时不可以交错，即标签需正确进行嵌套。如：
<body><form></body></form>
应改为：
<body><form></form></body>。

2. 页头标签
<title></title>标签对：
用来设定网页标题
浏览器通常会将标题显示在浏览器窗口的标题栏左边
<title></title>标签对只能放在<head></head>标签对之间

3. 标题标签
<hX></hX>标签：
定义不同显示效果的标题
X表示标题的级数，取值范围为1~6，X越小，标题字号越大
属性align，用于设置标题文字的对齐方式，其取值如下：
left：左对齐。
right：右对齐。
center：居中对齐。

7. 预定格式标签
在编辑文档时，如果希望将来浏览网页时仍能保留在编辑工具中已经排好的形式显示内容，可以使用<pre></pre>标签对
默认字体为10磅

8. 注释标签
在编写HTML文件时，为提高文件的可读性，可以使用标签对编写注释文字，其语法如下：

注释内容不会在浏览器中显示，即不会在页面中显示。

HTML常用标签

列表是一种规定格式的文字排列方式，用于列举内容
常用的列表分为：
有序列表
无序列表
自定义列表。

1. 有序列表
各列表项按一定的编号顺序显示
用<ol>开始，以</ol>结束
每一个列表项用<li></li>标签定义
语法：
<ol>
<li>列表项1</li>
<li>列表项2</li>
……
</ol>

多媒体和超链接标签

多媒体和超链接在网页中起着非常重要的作用
多媒体有图像、视频、背景音乐等多种形式，可以使网页更加丰富多彩
超链接可以使包含不同信息的网页连接在一起

表格标签

一种能够有效地描述信息的组织方式
由行、列、单元格组成可以很好地控制页面布局，在网页中应用非常广泛
许多网站都用多重表格来构建网站的总体布局，固定文本或图像的输出，还可以任意进行背景和前景颜色的设置

表单标签

表单在网页中用来供用户填写信息，以实现服务器获得用户信息，使网页具有交互功能。

语法：
<form action="url" method="get|post" name="value" onsubmit ="function" onreset="function" target="window"></form>

表单域：

（1）单行输入域：
<input>标签，用户可在其中输入单行信息。主要属性：
type属性：设置输入域的类型，取值如下：

name属性：设置输入域的名字。
value属性：设置输入域的默认值。
align属性：设置输入域位置，可取值：
left（靠左）
right（靠右）
middle（居中）
top（靠上）
bottom（靠底）
onclick属性：设置按下按钮后执行的脚本函数名。

表单按钮

框架标签

在进行网站整体结构布局时，框架也是经常被使用的一种标签
主要用来分割窗口和插入浮动窗口，使同一个浏览器窗口同时显示多个网页，如果能有效的运用将有助于提高网页的浏览效率。

语法：
<html>
<head>
<title>…</title>
</head>
<frameset>
<frame src="url">
…
<frameset>
<frame src="url">
…
</frameset>
<noframes>
...
</noframes>
</frameset>
</html>

基本标签

常见属性

本章主要内容：
（1）HTML。
（2）CSS。

CSS基础知识

CSS样式表定义

定义样式表的方法主要有三种：
1. 通过HTML标签定义样式表
2. 使用id定义样式表
3. 使用class定义样式表

1. 通过HTML标签定义样式表

2. 使用id定义样式表

3. 使用class定义样式表

在HTML中加入CSS的方法主要有三种：
嵌入式样式表
内联式样式表
外联式样式表

1. 嵌入式样式表

例如：
<p style=“color:red;font-size:10pt”>我爱我的祖国</p>
这个样式表只是让当前的<p></p>标签对中的文字为红色，字体大小为10pt。

2. 内联式样式表

内联式样式表利用<style></style>标签对将样式表定义在HTML文档的<head></head>标签对之间
内联式样式表的作用范围是本HTML文档。

3. 外联式样式表

外联式样式表是将定义好的CSS单独放到一个以.css为扩展名的纯文本文件中，再使用<link>标签链接到网页中。

例如：
<div style="color:blue;font-size:20pt">
<p style="font-size:25pt ">段落文本</p>
</div>

1. 字体属性：

2. 颜色和背景属性：

3. 文本属性：

4. 分级属性：实现“项目符号和编号”功能：

5. 鼠标属性
通过改变“cursor”属性，可以使鼠标移动到不同的元素对象上时显示不同的形状：

课外阅读

XHTML简介

XML简介