「前端与 HTML」 | 青训营笔记

江漓Jeffrey
138 阅读3分钟

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

本堂课重点内容

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML 作用解析
  4. HTML 语义化

详细知识点

  1. HTML声明

    是放在文档最前面HTML标签之前用来告知浏览器页面用了哪种HTML版本的一个声明。

    HTML5：<!doctype html>

    HTML4.01:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

    可见，h5的声明简洁太多了，它会告诉浏览器用h5的标准去解析html。

  2. DOM树

image.png DOM树很好地展现出了HTML的结构，它更是以后JS DOM等知识的一个铺垫。

3. 语法

  • 多级标题 html的标题通过h1-h6标签进行定义：

image.png

  • 有序、无序列表以及描述列表 有序列表用 <ol>标签，无序列表用 <ul>标签，里面的行都是用 <li>标签。

    描述列表用 <dl>标签表示，里面包括项目和描述，分别用 <dt>和 <dd>表示。

  • 超链接

    <a> 标签定义超链接，用于从一个页面链接到另一个页面。它的一些常见属性如下：

    属性值描述
    hrefURL指定连接的目标
    target_blank
    _parent
    _self
    _top    		新窗口打开
    在父窗口中打开链接
    默认，当前页面跳转
    在当前窗体打开链接，并替换当前的整个窗体(框架页)

  • 媒体标签

    src链接的是媒体的地址

    alt属性为图像的代替文本，主要用于图片加载不出来等情况

    controls属性为向用户显示音视频控件（比如播放/暂停按钮）

  • 输入类标签

    input标签

    属性值描述
    placeholdertext规定可描述输入 <input> 字段预期值的简短的提示信息
    typerange
    number
    date
    ...    		规定要显示的 <input> 元素的类型
    range(范围)
    number (数字，可规定max、min值)
    date  (日期)

textarea标签：定义一个文本区域，可容纳大量文本

<label> 标签：通常和 <input>标签一起使用，在单选按钮和复选按钮上经常被使用

select标签：下拉选择列表，<option>标签定义了列表中的可用选项

<datalist> 标签规定了 <input> 元素可能的选项列表

blockquote标签定义摘自另一个源的块引用，cite属性规定引用的来源

<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题

<q> 标签定义一个短的引用，浏览器经常会在这种引用的周围插入引号

<code> 标签是一个短语标签，用来定义计算机代码文本

<em> 标签，斜体，用来呈现为被强调的文本

strong标签，粗体，<strong>标签和 <em>标签一样，用于强调文本,但它强调的程度更高

  1. 内容划分

image.png

我个人认为这也是一个语义化的东西，比如我们一般会把nav作为导航div的id。
  1. 语义化
    简单来说，语义化就是元素、属性及属性值都拥有某些含义
    好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性

课后个人总结

经过本堂课的学习，我进一步地学习了前端的一些概念知识和HTML的一些基础知识。真正的了解到前端的工作是怎么样的，前端的作用是什么？HTML的知识也得到了巩固，学习到了一些没用过、不经常使用的标签。

今天是记笔记的第一天，希望自己能坚持写下去。加油！！！

参考

菜鸟HTML教程

avatar
文章
阅读
粉丝