06-HTML
阅读原文时间:2023年07月09日阅读:2
1. HTML基本语法
2. 特殊符号表示
3.总结

1. Hyper Text Mark Language 超文本标记语言
 * 超文本:
    * 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
    * 由标签构成的语言。<标签名称> 如 html,xml
    * 标记语言不是编程语言
2. 标签学习
    1. 文件标
        * html:html文档的根标签
        * head:头标签。用于指定html文档的一些属性。引入外部的资源
        * title:标题标签。
        * body:体标签
        * <!DOCTYPE html>:html5中定义该文档是html文档
    2. 文本标签
        * <br> 换行标签
        *  <h1> to <h6>:标题标签
        *  <hr>水平线
             * 属性:
                * color:颜色
                * width:宽度
                * size:高度
                * align:对其方式
                    * center:居中
                    * left:左对齐
                    * right:右对齐
        * <p></p>:段落标签
        * <b>:加粗标签
        * <i>:定义斜体文本。
        * <font size="3" color="red">:字体标签
        * <center>:文本居中
            * 属性:
                * color:颜色
                * size:大小
                * face:字体

        * 属性定义:
            * color:
                1. 英文单词:red,green,blue
                2. rgb(值1,值2,值3):值的范围:0~255  如  rgb(0,0,255)
                3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
            * width:
                1. 数值:width='20' ,数值的单位,默认是 px(像素)
                2. 数值%:占比相对于父元素的比例
    3. 图片标签
        * img:展示图片
            * 属性:
                * src:指定图片的位置

        * 代码:
             <!--展示一张图片 img-->

            <img src="data:image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>

            <!--
                相对路径
                    * 以.开头的路径
                        * ./:代表当前目录  ./image/1.jpg
                        * ../:代表上一级目录
             -->

            <img src="./image/jiangwai_1.jpg">

            <img src="../image/jiangwai_1.jpg">
    4. 列表标签
        * 有序列表:
            * ol:
                * li:ol的子标签
        * 无序列表:
            * ul:
                * li:ul的子标签
        * 例如:
             <ol type="1" start="5">
                <li>吃饭</li>
                <li>睡觉</li>
                <li>洗衣服</li>
                <li>做饭</li>
            </ol>
    5. 链接标签
        * <a></a>:定义一个超链接
            * 属性:
                * href:指定访问资源的URL(统一资源定位符)
                * target:指定打开资源的方式
                    * _self:默认值,在当前页面打开
                    * _blank:在空白页面打开
    6. div和span
        * div:每一个div占满一整行。块级标签
        * span:文本信息在一行展示,行内标签 内联标签
    7. 语义化标签
        1. <header>:页眉
        2. <footer>:页脚
    8. 表格标签
        * table:定义表格
            * width:宽度
            * border:边框
            * cellpadding:定义内容单元格的距离
            * cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
            * bgcolor:背景色
            * align:对齐方式
        * tr:定义行
            * bgcolor:背景色
            * align:对齐方式
        * td:定义单元格
            * colspan:合并列
            * rowspan:合并行
        * th:定义表头单元格
        * <caption>:表格标题
        * <thead>:表示表格的头部分
        * <tbody>:表示表格的体部分
        * <tfoot>:表示表格的脚部分
案例:
    1. 用table做布局
    2. 列数不好确定,就用嵌套table
        *<tr>
            <td>
             <table></table>
            </td>
        </tr>

    3.

<table align="center" width="100%">
            <!--第一行-->
        <tr>
            <td>
                <img src="../image/top_banner.jpg"  width="100%" alt="">
            </td>
        </tr>
        <!--第二行-->
        <tr>
        <td>
            <table align="center" width="100%">
                <tr>
                    <td>
                        <img src="../image/logo.jpg" alt="">
                    </td>
                    <td>
                        <img src="../image/search.png" alt="">
                    </td>
                    <td>
                        <img src="../image/hotel_tel.png" alt="">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第三行-->
    <tr>
        <td>
            <table align="center" width="100%">
               <tr bgcolor="#ff8c00" height="45" align="center">
                   <td>
                       <a href="">首页</a>
                   </td>
                   <td>
                       <a href="">门票</a>
                   </td>
                   <td>
                       <a href="">门票</a>
                   </td>
                   <td>
                       <a href="">门票</a>
                   </td>
                   <td>
                       <a href="">门票</a>
                   </td>
                   <td>
                       <a href="">门票</a>
                   </td>
                   <td>
                       <a href="">门票</a>
                   </td>
                   <td>
                       <a href="">门票</a>
                   </td>
                   <td>
                       <a href="">门票</a>
                   </td>
                   <td>
                       <a href="">门票</a>
                   </td>
               </tr>
            </table>
        </td>
    </tr>
    <!--第四行-->
    <tr>
        <td>
            <img src="../image/banner_3.jpg" width="100%">
        </td>
    </tr>
    <!--第五行-->
    <tr>
        <td>
            <img src="../image/icon_5.jpg"> 精选景点
            <hr color="#ff8c00">
        </td>
    </tr>
    <!--第六行-->
    <tr>
        <td>
            <table align="center" width="100%">
                <tr align="center">
                    <td>
                     <img src="../image/jiangxuan_1.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥888</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_1.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥888</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_1.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥888</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_1.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥888</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第七行-->
    <tr>
        <td>
            <img src="../image/icon_6.jpg"> 国内游
            <hr color="#ff8c00">
        </td>
    </tr>
    <!--第八行-->
    <tr>
        <td>
            <table align="center" width="100%">
                <tr align="center">
                <td rowspan="2">
                    <img src="../image/guonei_1.jpg">
                    <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                    <font color="red">¥888</font>
                </td>
                <td>
                    <img src="../image/jiangxuan_2.jpg">
                    <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                    <font color="red">¥888</font>
                </td>
                <td>
                    <img src="../image/jiangxuan_3.jpg">
                    <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                    <font color="red">¥888</font>
                </td>
                <td>
                    <img src="../image/jiangxuan_4.jpg">
                    <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                    <font color="red">¥800</font>
                </td>
                </tr>
                <tr align="center">
                    <td>
                        <img src="../image/jiangxuan_3.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥888</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_4.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥669</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_1.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥998</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第九行-->
    <tr>
        <td>
            <img src="../image/icon_6.jpg"> 境外游
            <hr color="#ff8c00">
        </td>
    </tr>
    <!--第十行-->
    <tr>
        <td>
            <table align="center" width="100%">
                <tr align="center">
                    <td rowspan="2">
                        <img src="../image/jiangwai_1.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥888</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_2.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥888</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_3.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥888</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_4.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥800</font>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <img src="../image/jiangxuan_3.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥888</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_4.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥669</font>
                    </td>
                    <td>
                        <img src="../image/jiangxuan_1.jpg">
                        <p>自由行,三亚五日游,暗红色的骄傲回到家</p>
                        <font color="red">¥998</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第十一行-->
    <tr>
        <td>
            <img src="../image/footer_service.png"  width="100%" alt="">
        </td>
    </tr>
    <!--第十二行-->
    <tr bgcolor="#ff8c00" height="60" align="center">
        <td>
            <font color="#a9a9a9">
                旅游网版权所有Copyright&copy 2006-2018, All Rights Reserved 苏ICP备16007882
            </font>
        </td>
    </tr>
    </table>