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的主要内容,如果未能解决你的问题,请参考以下文章