HTML

前端的组成：

内容（HTML）+样式（css）+ 页面交互特效（js）

HTML规范：

  1. HTML 不区分大小写，标签小写
  2. 必须有根标签，根标签必须是
  3. HTML 必须关闭：
    1. 单标签：<标签名 属性名1=“val1”属性值2=“val2”/>
    2. 双标签：<标签名 属性名1=“val1”属性值2=“val2”></标签名>
  4. HTML 的标签的属性值一定要写在引号中。
  5. HTML 的标签都已经定义好了，每个标签都有特殊的含义，不能自定义。

HTML 基本结构

<html>
	<head>
        <!--声明的格式-->
        <!--页面的属性-->
    </head>
    <body>
        <!--渲染的内容-->
    </body>
</html>

HTML 头部常用的标签：

  1. 页面标题标签：<title></title>
  2. 设置页面字符编码：<meta http-equiv="charset" content="utf-8"/> 或者 <meta http-equiv="Content-Type" content="txt/html;charset=utf-8"/>
  3. 网页的描述：<meta name="description" content="描述内容"/>
  4. 设置搜索关键字：<meta name="keywords" content="搜索关键字"/>
  5. 设置当前页面经过一定事件后跳转到目标页面：<meta http-equiv="refresh" content="3;url=url_name"/>

HTML 中 body 常用的标签：

块级标签（标签要独占一行）：

  1. 标题标签：

    -

    （自动加黑加粗）

  2. 段落标签：

    标签

  3. 分割线标签：

  4. 列表：

    1. 无序列表：

      <ul type="列表项图标样式">
    <li></li>
        ...
    <li></li>
</ul>

    2. 有序列表

      <ol type="列表项数字样式">
    <li></li>
    ...
    <li></li>
</ol>

    3. 自定义列表（用于对该概念的解释说明或者图文混排）：

      <dl>
    <dt></dt>
    <dd></dd>
    ...
    <dd></dd>
</dl>

  5. 表格：

    <table>
    <!-- 行 -->
    <tr>
        <!-- 单元格 -->
        <td></td>
        ...
        <td></td>
    </tr>
    ...
     <tr>
         <!-- 列合并 -->
        <td colspan="合并列数"></td>
        ...
         <!-- 行合并 -->
        <td rowspan="合并行数"></td>
    </tr>
</table>

  6. 特殊表格(针对于公司报表)：

    <table>
    <!-- 表的标题 -->
    <caption></caption>
    <!-- 表头 -->
    <thead>
    	<tr>
        	<th></th>
            ...
            <th></th>
        </tr>
    </thead>
    <!-- 表体 -->
    <tbody>
    	<tr>
        	<td></td>
            ...
            <td></td>
        </tr>
        ...
        <tr>
        	<td></td>
            ...
            <td></td>
        </tr>
    </tbody>
    <!-- 表尾 -->
    <tfoot>
    	<tr>
        	<th></th>
            ...
            <th></th>
        </tr>
    </tfoot>
</table>

  7. 表单：

    <form action="" method="get/post">
    <!-- 文本框 -->
    <input type="text" name="" value=""/>
    <!-- 密码框 -->
    <input type="password" name="" value=""/>
    <!-- 单选按钮，同一组单选按钮的 name 属性值要相同 -->
    <input type="radio" name="" value="" checked="checked"/>
    <!-- 复选框 -->
    <input type="checkbox" name="" value=""/>
    <!-- 下拉列表 -->
    <select type="select" name="">
    	<option value=""></option>
        ...
        <option value="" selected="selected">	</option>
    </select>
    
    <!-- 文件域  -->
    <input type="file" name=""/>
    <!-- 多行文本（文本域）常用于协议 -->
    <textarea rows="6" cols="20">
    </textarea>
    <!-- 普通按钮 -->
    <input type="button" value=""/>
    <!-- 提交按钮 -->
    <input type="submit" value=""/>
    <!-- 图片按钮,也有提交功能 -->
    <input type="image" value=""/>
    <!-- 重置按钮 -->
    <input type="reset" value=""/>
</form>

    注意：form 表单属于块级元素，表单中的 input 行级标签

  8. div标签

行间(内联 )标签（内容有多大占多大的位置）：

  1. 换行标签：<br />

  2. 图片标签：<img title="" url="" alt="" />

  3. 超链接：

    1. 页面间链接：<a href="">内容</a>

    2. 锚链接：跳转到指定页面的指定位置

      • 页面内锚链接：

        在目标地方做标记：<a name="标记名">内容</a>

        在超链接跳转：<a href="#标记名"></a>

      • 页面间锚链接：

        在目标地方做标记：<a name="标记名">内容</a>

        在超链接跳转：<a href="url#标记名"></a>

    3. 功能性链接：<a href="mailTo:邮箱地址"></a>

  4. 范围标签：<sqpn></span>

框架集：（部分浏览器支持）

注意：框架集与 不能共存，页面要么不用框架集，如果用，就必须全使用框架集。

作用：用于将页面变成几个模块

优点：方便布局

缺点：加载速度慢，灵活性低

<frameset row="">
	<frameset col="">
        
    </frameset>
</framset>

内联框架：(内联标签)

<iframe src="">
</iframe>

HTML 的常用符号：

&lt 小于号 
&gt 大于号
&amp and符号
&nbsp 空格
&copy 版权
&reg 已注册