前端与HTML | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

一、前端技术栈

• Html+Css: 构建了网页的内容和样式， Html定义了网页内容的含义和结构、Css美化了网页的样式
• JavaScript: JavaScript是一种轻量级的编程语言，控制网页的行为交互
• Vue、React、Angular等：用于构建用户界面的JavaScript框架库
• WebPack：用于现代 JavaScript 应用程序的静态模块打包工具
• Less/Sass: css的预处理器
• 包管理工具(npm/yarn): NodeJS包管理和分发工具

二、HTML

1.HTML是什么

• HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言
• 不单单是文本文字，图像、表格、音频、视频都可以表现在其中

2.HTML语法

• html的后缀名 .html .htm 都可以使用
• html的标签属性不区分大小写，后续使用的Vue、React框架中大写常用来表示组件名称，因此html原生的标签属性常用小写表示
• 当标签内没有内用时，可以使用单标签闭合,如 <input type="text"/>
• 标签属性值使用 双引号 包裹,某些属性值可以不写

三、常见的标签及属性值

(1) 链接标签 <a></a>

• 可以通过它的 href 属性创建通向其他 网页 、文件、同一页面内的位置、电子邮件地址 或任何其他 URL 的超链接
• 常见属性:
• download: 此属性指示浏览器下载 URL 而不是导航到它
• href:
  • 1.包含超链接指向的URL或URL片段
  • 2.使用哈希标记(#)标记当前文档中的内部位置(根据元素id)
• target:

  _self	当前页面加载默认
  _blank	新窗口打开
  _parent	加载响应到当前框架的 HTML4 父框架或当前的 HTML5 浏览上下文的父浏览上下文。如果没有 parent 框架或者浏览上下文，此选项的行为方式与 _self 相同
  _top	加载响应进入顶层浏览上下文。如果没有者浏览上下文，此选项的行为方式相同_self

• 无障碍建议:
  锚点标签常常通过将 href 属性设置为 "#" 或 "javascript:void(0)" 来创造一个能阻止页面刷新的伪按钮的方式被滥用。这些属性值会在拖动 / 复制链接时导致意外行为，在新窗口 / 新标签打开链接，加入书签以及 JavaScript 仍在下载时会出现错误或被禁用。这也会向辅助技术（如屏幕阅读器）传达不正确的语义。在这些情况下，推荐使用 <button> 来代替

(2) 表单 <form></form>

• <form>元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息

• 开始标签和结束标签都不能省略

• 允许用户输入的内容，常见如

  • <input>
  • <textarea>
  • <label>
  • <select>
  • <optgroup>
  • <option>

  (2).1 <input>

  • 必须有开始标签但不必有结束标签
  • 常见的type值类型

    types	描述
    button	没有默认行为的按钮
    submit	用于提交表单的按钮
    radio	单选按钮
    checkbox	复选框
    text	默认值,单行文本
    password	密码
    number	只支持数字
    range	范围组件,使用min和max控制范围
    color	激活时会打开颜色取色器
    date	年月日
    file	文件类型

  (2).2 <textarea>

  • 表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本

  (2).3 <label>

  • 表示用户界面中某个元素的说明。

  • 例如:

    <div class="preference">
    <label for="sing">你喜欢唱跳吗?</label>
    <input type="checkbox" name="sing" id="sing">
    </div>
    
    <div class="preference">
        <label for="Rap">你喜欢篮球、Rap吗?</label>
        <input type="checkbox" name="Rap" id="Rap">
    </div>
    
    

    你喜欢唱跳吗?
    你喜欢篮球、Rap吗?

  (2).4 <select>

  • 一个提供选项菜单的控件

    <label for="pet-select">选择一种宠物:</label>
    <select name="pets" id="pet-select">
      <option value="">-- -- --</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select> 
    

  • 选择一种宠物: -- -- -- Dog Cat Hamster Parrot Spider Goldfish

  (2).5 <optgroup>

  • select元素中的选项创建分组。

    <label for="select">选择一种方法:</label>
    <select id="select">
        <optgroup label="方案一">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </optgroup>
        <optgroup label="方案二">
            <option>甲</option>
            <option>乙</option>
            <option>丙</option>
        </optgroup>
    </select>
    

    选择一种方法: A B C 甲 乙 丙

  (2).6 <option>

  • <option> 用于定义在 <select>, <optgroup> 或 <datalist> 元素中包含的项
  • 用例如上

(3) 列表

• 无序列表

  <ul>
    <li>牛奶</li>
    <li>咖啡</li>
  </ul>
  

  • 牛奶
  • 咖啡

• 有序列表

  <ol>
    <li>牛奶</li>
    <li>咖啡</li>
  </ol>
  

  1. 牛奶
  2. 咖啡

• 自定义列表

  <dl>
    <dt>牛奶</dt>
    <dd> 热饮</dd>
    <dd> 冷饮</dd>
    <dt>咖啡</dt>
    <dd> 热饮</dd>
    <dd> 冷饮</dd>
  </dl>
  

  牛奶

  热饮

  冷饮

  咖啡

  热饮

  冷饮

(4) 表格

• 表格有<table>定义,<tr>每一行，<th> 表头,<td> 单元格内容

  <table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
  </table>
  

四、参考资料

• MDN文档：developer.mozilla.org/