HTML

基本知识

  • 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器，浏览器只能解析静态资源。
  • HTML (Hyper Text Markup Language)：超文本标记语言
    • 超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
    • 标记：由标签构成的语言。

标签

1. 文件标签
  • 文件标签：构成 HTML 最基本的标签。
  • <meta>：头标签。用于指定 HTML 文档的一些属性。引入外部的资源。
    • charset 属性：指定文档的字符编码。
  • <!DOCTYPE html>：html5 中定义该文档是 HTML 文档。
  • <html lang="ch">：定义页面语言，en 为英文，ch 为中文。
2. 文本标签
  • 注释：<!-- 注释内容 -->
  • <b>：字体加粗
  • <i>：字体斜体
  • <small> ：small 标签中的内容会比他的父元素中的文字要小一些，在 h5 中使用 sma11 标签来表示一些细则一类的内容。
  • <cite>：表引用，加书名号用 cite，表现为斜体
  • <blockquote>：表示长引用（块级引用）
  • <sup>和<sub>：表示上下标
  • <del>：删除线
  • <ins>：下划线
  • <code>：语义化标签，表示代码，不会保留格式
  • <pre>：预格式标签，代码中的格式保存，不会忽略多个空格
  • <q>：表示行内引用，自动加引号，引用一句话
  • <hr>：展示一条水平线
    • color：颜色
    • width：宽度
    • size：高度
    • align：对齐方式
3. 列表标签
  • 有序列表：<ol> 嵌套 <li>，li 代表其中的每一项。
    • type 属性：序号的样式
    • start 属性：起始位置
  • 无序列表：<ul> 嵌套 <li>
  • 自定义列表：<dl> <dt> <dd> dt定义项目名
4. 链接标签

  • <a>：超链接

    • target 属性：超链接打开方式，_blank 为新标签打开

  • 关于 <a> 标签添加点击事件：
    超链接有两个功能：

    • 可以被点击（因为有 href）
    • 跳转到 href 指定 的 url

    当超链接中 href="" 的时候，虽然会执行点击事件，但是会立马刷新此界面，当 href="#" 的时候，会触发点击事件，并且返回到页面顶部，但不会刷新界面。
    可以通过 href="javascript:void(0);" 的方法来让 a 标签仅仅保留点击事件而不进行跳转。

5. 语义化标签
  • <header>：页眉
  • <footer>：页脚
6. 表格标签
  • <table>：
    • width 属性：宽带
    • border 属性：边框
    • cellpadding：定义单元格中的内容和单元格之间的距离
    • cellspacing：定义单元格之间的距离，设置为 0，单元格的线会合为一条
  • <td>：rowspan 合并行，colspan 合并列
  • <caption>：表格标题，定义在 table 标签中
  • <thead>：表示表格的头部分，没有样式
  • <tbody>：表示表格的体部分
  • <tfoot>：表示表格的脚部分
7. 表单标签
  • <form>：
    • 表单中的 input ，必须有 name 属性才能被提交。
    • get 方式：
      • 请求参数显示在地址栏中，会封装在请求行中。
      • 请求参数大小有限制。
      • 不安全。
    • post 方式：
      • 提交方式会将请求参数封装在请求体中。
      • 请求参数没有大小限制。
      • 安全。
  • <input>:
    • type 属性
      • radio：单选框
        • 单选框的 name 值一样实现单选
        • value 表示所提交的值
        • checked 属性，指定默认值
      • checkbox：复选框
      • file：文件选择框
      • hidden：隐藏域，看不到，可以用 value 指定值，会被提交，隐藏域不影响布局。
      • button：普通按钮
      • image：图片按钮，可以提交表单，src 指定路径
      • date：年月日
      • datetime-local：年月日时分
      • number：只能输入数字
    • placeholder：提示信息
  • <label>：for 的值为 input 中的 id。
  • <select>：下拉列表，option 定义选项，加 name 才会被提交，value 指定值，selected 设置默认。
  • <textarea>：文本域，cols 指定列数，rows 指定行数
8. 其他标签
  • <nav>：定义导航链接的部分