HTML 学习笔记

1 Web 标准

  • Web 标准的构成：
    • 结构：HTML
    • 表现：CSS
    • 行为：JS

2 HTML

2.1 HTML 标签

  1. 基本结构标签：

    标签名 定义 说明
    <html></html> HTML 标签 最大的标签，根标签
    <head></head> 文档头部 head 标签中必须设置 title 标签
    <title></title> 文档标题 网页标题
    <body></body> 文档主体 页面内容

  2. 基本框架：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

  3. 文档类型声明标签：告诉浏览器 HTML 版本

    <!DOCTYPE html>

  4. lang 语言种类：当前文档显示的语言，对搜索引擎等有提示作用

    <html lang="en">
    • en：英文
    • zh-CN：中文

  5. 字符集：字符编码，一般使用 UTF-8

    <meta charset="UTF-8">

  6. HTML 常用标签：

    • 标题标签：<h1></h1>~<h6></h6> 共 6 个等级的网页标题。独占一行

    • 段落标签：<p></p>

    • 换行标签：<br /> 或 <br>，注意格式是单标签

    • 文本格式化标签：

      • 加粗：<strong></strong> 或 <b></b>，推荐使用前者
      • 倾斜：<em></em> 或 <i></i>，推荐使用前者
      • 删除线：<del></del> 或 <s></s>，推荐使用前者
      • 下划线：<ins></ins> 或 <u></u>，推荐使用前者

    • <div></div>：没有语义。大盒子，用来装内容。独占一行

    • <span></span>：没有语义。小盒子，用来装内容。

    • 图像标签：<img src="" />

      属性 属性值 说明
      src 路径 文件路径。必须属性
      alt 文本 替换文本。当图像不能显示时提供的文字
      title 文本 提示文本。鼠标放到图像上时，显示的文字
      width 像素 宽度
      height 像素 高度
      border 像素 边框粗细。可以通过 css 设置

    • 超链接标签：<a> href="", target=""</a>

      属性 作用
      href 目标地址，空链接使用 #
      target 链接页面的打开方式，_self 为默认值，_blank 为新窗口打开

    • 注释标签：<!-- 注释 -->

    • 特殊字符：

      特殊字符 描述 代码
      空格符 &nbsp;
      < 小于号 &lt
      > 大于号 &gt
      & 和号 &amp
      ¥ 人民币 &yen
      © 版权 &copy
      ® 注册商标 &reg
      ° 摄氏度 &deg
      ∓ 正负号 &plusmn
      × 乘号 &times
      ÷ 除号 &divide
      ² 平方2 &sup2
      ³ 立方3 &sup3

    • 表格标签：

      <table align="">
    <thead>
        <tr>
            <th>
                表头单元格内容
            </th>
        </tr>
    </thead>
    <tbody>
    	<tr>
            <td>
                单元格内容
            </td>
        </tr>
    </tbody>
</table>

      • <table></table>：表格

      • <tr></tr>：行

      • <th></th>：表头单元格，加粗居中

      • <td></td>：单元格

      • 属性名 属性值 描述
        align left、center、right 表格相对其他元素的对齐方式
        border 1 或空 是否有边框
        cellpadding 像素值 单元边沿与其内容之间的空白，默认为 1 像素
        cellspacing 像素值 单元格之间的空白，默认为 2 像素
        width 像素值或百分比 表格宽度

      • 表格结构标签：<thead></thead> 与 <tbody></tbody>

      • 合并单元格：

        • 跨行合并：写在上侧单元格中，<td rowspan="2"></td>
        • 跨列合并：写在左侧单元格中，<td colspan="2"></td>

    • 列表标签：

      • 无序列表：

        <ul>
    <li>列表项</li>
</ul>

        <ul>标签里只能放 <li> 标签，但是 <li> 标签内可以放其他标签

      • 有序列表：

        <ol>
    <li>列表项</li>
</ol>

        <ol>标签里只能放 <li> 标签，但是 <li> 标签内可以放其他标签

      • 自定义列表：

        <dl>
    <dt>术语</dt>
    <dd>描述项1</dd>
    <dd>描述项2</dd>
</dl>

        <dl>标签里只能放 <dt> 与 <dd> 标签，<dt> 与 <dd> 个数没有限制，且内部可以放其他标签

    • 表单标签：

      • 表单构成：

        • 表单域
        • 表单控件
        • 提示信息

      • 表单域：将范围内的信息提交给服务器

        <form action="" method="" name="">
    表单控件
</form>
        属性 属性值 作用
        action url 地址 接受并处理表单数据的服务器地址
        method get/post 表单数据提交方式
        name 名称 表单名称

      • 表单控件：

        • <input>： 输入表单元素

          <input type="" name="" checked="" maxlength=""/>
          type 属性值 描述
          button 可点击按钮
          checkbox 复选框
          file 输入字段和“浏览”按钮
          hidden 隐藏的输入字段
          image 图像形式的提交按钮
          password 密码字段
          radio 单选字段
          reset 重置按钮，点击清除表单所有数据
          submit 提交按钮，点击发送数据到服务器
          text 单行输入字段，默认为 20 字符
          属性 属性值 描述
          name 用户自定义 名称
          value 用户自定义 值
          checked checked 或 true 首次加载时的选中状态
          maxlength 正整数 输入字段最大长度

        • <label>：input 元素定义标注标签

          <label for="sex">男</label>
<input type="radio" name="sex" id="sex">

        • <select>：下拉表单元素

          <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

          <!-- selected 设置默认选择 -->
<option selected="selected"></option>

        • textarea 文本域元素

          <textarea rows="" cols="">
	文本内容
</textarea>
          属性 说明
          rows 显示行数
          cols 显示行内字符

2.2 HTML5 新特性

新增的语义化标签

  • <header>：头部标签
  • <nav>：导航标签
  • <article>：内容标签
  • <section>：定义文档某个区域
  • <aside>：侧边栏标签
  • <footer>：尾部标签

新增的多媒体标签

  • <audio>：音频。尽量使用 mp3 模式

    <audio src="" controls="controls"></audio>

  • video：视频。尽量使用 mp4 模式

    <video src="" controls="controls"></video>

    如果要考虑兼容性：

    <video src="" controls="controls">
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
	您的浏览器不支持 video 标签
</video>
    属性 值 描述
    autoplay autoplay 自动播放
    controls controls 显示播放控件
    width pixels 设置播放器宽度
    height pixels 设置播放器高度
    loop loop 是否循环播放
    preload auto none
    src url 视频地址
    poster imgurl 加载等待的画面图片
    muted muted 静音播放

新增的 input 类型

  • 属性值 说明
    email Email 类型
    url URL 类型
    date 日期类型
    time 时间类型
    month 月类型
    week 周类型
    number 数字类型
    tel 手机号码
    search 搜索框
    color 生成一个颜色选择表单

新增的表单属性

  • 属 值 说明
    required required 内容不能为空，必填
    placeholder 提示文本 提示信息
    autofocus autofocus 自动聚焦
    autocomplete off on
    multiple multiple 多选文件提交

2.3 移动端

meta 视口标签

  • <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 属性 解释说明
    width 设置 viewport 宽度，特殊值 device-width
    initial-scale 初始缩放比
    maximum-scale 最大缩放比
    minimum-scale 最小缩放比
    user-scalable 用户是否可以缩放。yes
目录

ConnectC Is All You Need.