HTML简介

html常用标签

基本结构标签

html标签为网页中最大的标签。

head标签为文档的头部。

title标签为文档标题让页面有个属于自己的网页标题。

body标签为文档主体元素包含文档的所有内容，页面内容那个基本都是放到body里的。

文本格式化标签

<strong>加粗</strong>                                                        <em>倾斜</em>

<ins>下划线</ins>                                                                <del>删除线</del>

段落标签、换行标签与标题标签

<p>为段落标签           例如：<p>This is a paragraph.</p>                      

<br/>为换行标签

<h>为标题标签          例如：   <h1>This is a heading</h1>             <h3>This is a heading</h3>

其中<h1>----<h6>标题逐渐变小

水平线标签

<hr/>

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

效果展示： 

图像标签

HTML 图像是通过 <img> 标签进行定义的。

例如：

<img src="baidu.jpg" width="104" height="142" border="1" />

 src为图片路径必须属性。

 alt替换文本图像不能显示的文字。

 title提示文本。

 width设置图像宽度。

 height设置图像高度。

 border设置图像边框粗细。

图像标签及路径

相对路径:

1.同一级路径：图像文件位于html文件同一级。如<img src="baidu.gif"/>
2.下一级路径：图像文件位于html文件下一级。如<img src="images/baidu.gif"/>
3.上一级路径：图像文件位于html文件上一级。如<img src="../baidu.gif"/>

绝对路径:

绝对路径指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的。
     如    <img src="D:\\web\\images\\baidu.gif"/>

超链接标签

外部链接:

如：<a href="https://www.qq.com"   target="_blank">腾讯</a>
target为打开窗口的方式:
_blank为新窗口打开
 _self为默认当前窗口打开

<a> </a>中间的内容为在网页中链接的名称 如：腾讯

内部链接:网站内部页面之间的相互连接。

如：​​​​

 空链接:#

如：<a href="#">html地址</a>

下载链接：地址链接的是文件.exe或zip等压缩包形式.

如<a href="img.zip">下载文件</a>

网页元素链接：在网页中的各个网页元素如图片、文本、表格、音频等都可以添加超链接。

如：<a href="http://www.baidu.com"><img src="img.jpg"/></a>

锚点链接：快速定位到页面某位置.

特殊符号

表格标签

作用：显示、展示数据。

 表头单元格：

 表格属性：

 <!-- 这些标签要写到table标签中去 -->

合并单元格

 如下为合并单元格代码

<table  cellpadding="0" cellspacing="0" width="600" height="400">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td colspan="2"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td rowspan="2"></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table><br>

                                                                  呈现效果

 

列表标签

无序列表:<br>
        你喜欢的食物:<br>
        <ul>
            <li>榴莲</li>
            <li>臭豆腐</li>
            <li>鲱鱼罐头</li>
        </ul>
        <!--ul标签中只能放li,但li里可以放任何标签 --><br>
        有序列表:<br>
        粉丝排行:
        <ol>
            <li>刘德华 10000</li>
            <li>刘若英 1000</li>
            <li>pink 1</li>
        </ol>
        自定义列表:<br>
        <!-- 小弟和大哥 -->
        <dl>
            <dt>关注我们</dt><!-- 大哥 -->
            <dd>新浪微博</dd>
            <!--小弟-->
            <dd>官方微信</dd>
            <dd>联系我们</dd>
        </dl>
        <!-- dl里只能有dt dd -->

  呈现效果：

列表总结：

 表单标签

表单域：实现用户信息收集和传递

表单元素：

 

 表格：

呈现效果：