html常用标签

1. 标题标签

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
   

2. 段落标签

    <p>这是一个段落</p>
   

3. 换行标签

    <br />
   

4. 空格实体

     
   

5. 大于小于实体

    <  小于
    >  大于
   

6. html块标签

    1、<div> 标签 块元素，表示一块内容，没有具体的语义。
    2、<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
   

7. 含样式和语义的标签

    1、<em> 标签 行内元素，表示语气中的强调词
    2、<i> 标签 行内元素，表示专业词汇
    3、<b> 标签 行内元素，表示文档中的关键字或者产品名
    4、<strong> 标签 行内元素，表示非常重要的内容
   

8. 语义化的标签

    语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
   

9. 图像标签

    <img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
    src属性 定义图片的引用地址
    alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
    <img src="images/pic.jpg" alt="产品图片" /> 
   

10. html链接标签

    <a>标签可以在网页上定义一个链接地址，它的常用属性有：
    
    href属性 定义跳转的地址
    title属性 定义鼠标悬停时弹出的提示文字框
    target属性 定义链接窗口打开的位置
    target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
    target="_blank" 新页面会在新开的一个浏览器窗口打开
    <a href="#"></a> <!--  # 表示链接到页面顶部   -->
    <a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
    <a href="2.html" target="_blank">测试页面2</a>
    

11. 列表标签

    1. 有序列表

        在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：
        
        <ol>
            <li>列表文字一</li>
            <li>列表文字二</li>
            <li>列表文字三</li>
        </ol>
        在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
       

    2. 无序列表

        在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：
        
        <ul>
            <li><a href="#">新闻标题一</a></li>
            <li><a href="#">新闻标题二</a></li>
            <li><a href="#">新闻标题三</a></li>
        </ul>
        在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
       

       实际应用实例：
       

    3. 定义列表

        定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
        
        <h3>前端三大块</h3>
        <dl>
            <dt>html</dt>
            <dd>负责页面的结构</dd>
        
            <dt>css</dt>
            <dd>负责页面的表现</dd>
        
            <dt>javascript</dt>
            <dd>负责页面的行为</dd>
        
        </dl>
       

12. 表单

    表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
    
    1、<form>标签 定义整体的表单区域
    
    action属性 定义表单数据提交地址
    method属性 定义表单提交的方式，一般有“get”方式和“post”方式
    2、<label>标签 为表单元素定义文字标注
    
    3、<input>标签 定义通用的表单元素
    
    type属性
    type="text" 定义单行文本输入框
    type="password" 定义密码输入框
    type="radio" 定义单选框
    type="checkbox" 定义复选框
    type="file" 定义上传文件
    type="submit" 定义提交按钮
    type="reset" 定义重置按钮
    type="button" 定义一个普通按钮
    type="image" 定义图片作为提交按钮，用src属性定义图片地址
    type="hidden" 定义一个隐藏的表单域，用来存储值
    value属性 定义表单元素的值
    name属性 定义表单元素的名称，此名称是提交数据时的键名
    4、<textarea>标签 定义多行文本输入框
    
    5、<select>标签 定义下拉表单元素
    
    6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项
    
    注册表单实例：
    
    <form action="http://www..." method="get">
    <p>
    <label>姓名：</label><input type="text" name="username" />
    </p>
    <p>
    <label>密码：</label><input type="password" name="password" />
    </p>
    <p>
    <label>性别：</label>
    <input type="radio" name="gender" value="0" /> 男
    <input type="radio" name="gender" value="1" /> 女
    </p>
    <p>
    <label>爱好：</label>
    <input type="checkbox" name="like" value="sing" /> 唱歌
    <input type="checkbox" name="like" value="run" /> 跑步
    <input type="checkbox" name="like" value="swiming" /> 游泳
    </p>
    <p>
    <label>照片：</label>
    <input type="file" name="person_pic">
    </p>
    <p>
    <label>个人描述：</label>
    <textarea name="about"></textarea>
    </p>
    <p>
    <label>籍贯：</label>
    <select name="site">
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
    </select>
    </p>
    <p>
    <input type="submit" name="" value="提交">
    <!-- input类型为submit定义提交按钮  
         还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
         <input type="image" src="xxx.gif">
    -->
    <input type="reset" name="" value="重置">
    </p>
    </form>
    

13. 表格

    table常用标签
    1、table标签：声明一个表格
    
    2、tr标签：定义表格中的一行
    
    3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
    
    table常用属性：
    1、border 定义表格的边框
    
    2、cellpadding 定义单元格内内容与边框的距离
    
    3、cellspacing 定义单元格与单元格之间的距离
    
    4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
    
    5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
    
    6、colspan 设置单元格水平合并
    
    7、rowspan 设置单元格垂直合并
    

14. 内嵌框架

    html内嵌框架
    <iframe>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条，代码如下：
    
    <iframe src="http://www..." frameborder="0" scrolling="no"></iframe>
    内嵌框架与a标签配合使用
    a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中，代码如下：
    
    <a href="01.html" target="myframe">页面一</a>
    <a href="02.html" target="myframe">页面二</a>
    <a href="03.html" target="myframe">页面三</a>
    <iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>