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 已注册