06-HTML

Posted rqy0526

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了06-HTML相关的知识，希望对你有一定的参考价值。

今日知识

1. html基本语法
2. 特殊符号表示
3.总结

HTML

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="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>

以上是关于06-HTML的主要内容，如果未能解决你的问题，请参考以下文章