前端学习随笔2 在线简历

一 心得体会

今天的任务是利用HTML制作一份在线简历,先不考虑样式,只从结构和语义化方面着手。对于已经有了前端b编程经验的我来说挺简单的,但是我还是当作我是一个刚入门的菜鸟,在学习过程中发现其实还有很多基础知识被我忽略了,例如meta的强大功能,HTML5表单新增的输入类型,列表标签dl、dt、dd等,这提醒这我不要眼高手低,要潜心学习,稳固基础。

二 相关知识点

问题1 HTML是什么,HTML5是什么?

  1. HTML是一个超文本标记语言(Hyper Text Markup Language),其有一套标记标签,使用这些标记标签来描述网页。
  2. HTML5是最新的HTML标准,新增了一些元素,API,同时也删除了部分旧元素,具体可以看相关文档。相较于 HTML4来说,HTML5最大的改进就是新增了强大的图像支持(),多媒体支持()和API,使得其能独自完成以前需要其他语言辅助的工作。

问题2 HTML文档是什么?

HTML文档其实就是我们看到的网页,其包含HTML标签和纯文本。

问题3 HTML元素、标签、属性都是什么概念?

  1. HTML标签是由尖括号包围的关键词,表示其在HTML文档中的含义。元素标签通常成对出现(

    ),也有单独出现();成对出现的标签第一个为开始标签(或开放标签),第二个为结束标签(或闭合标签),结束标签多了一个/
  2. HTML元素是指从开始标签到结束标签的所有代码(

    包含标签和此文本

    )。注意:如果元素内没有文本,可以直接在开始标签进行关闭(

  3. HTML属性相当于HTML元素的修饰符,为该元素提供相应的特性。属性通常以键值对的形式出现(name="value"),并且都是出现在开始标签中。

问题4 文档类型是什么概念,起什么作用?

HTML经历过多个版本的更新,每个版本中元素不尽相同,那么我们如何才能使计算机准确知道当前的版本并正确显示HTML页面呢?为了解决这个问题,引进了文档类型的概念。在HTML文档首行使用来声明该HTML文档的版本,如果版本为HTML5,那么声明代码为;如果为HTML4,那么声明代码为。目前创建新网页都尽量使用HTML5的文档类型,维护旧网页可以沿用旧网页的文档类型。

问题5 meta标签都用来做什么的?

meta标签位于HTML头部,携带元信息,不显示在页面上,对于计算机是可读的。其主要作用有以下几点:

  1. 声明当前文档所使用的字符编码


注意:鼓励使用UTF-8字符编码,不使用不兼容ASCII的编码规范,必须禁用CESU-8, UTF-7, BOCU-1SCSU这些字符,因为其被证实存在跨站脚本攻击(XSS)的风险。

  1. 携带相关信息关联到HTTP头部
    此处需要用到http-equivcontent属性
属性 描述
content some_tex 定义与 http-equiv 或 name 属性相关的元信息
http-equiv content-security-policy/ default-style/ refresh 把 content 属性关联到 HTTP 头部

注:http-equiv的属性值content-language, content-type, set-cookie已经弃用,请查看最新文档使用替代方案
示意代码如下:


< Meta HTTP-EQUIV="refresh" content="6; url=地址" >
  1. 使用name属性携带相关信息
属性 描述
name author/ description/ keywords/ generator/ revised/others 把 content 属性关联到一个名称

示意代码如下:



< Meta name="author" content="前端唠唠嗑" >

< Meta name="keyword" content="关键字" >

< Meta name="descript" content="描述内容" >

问题6 Web语义化是什么,是为了解决什么问题

我理解的语义化有两方面:1. 便于计算机识别HTML内容,降低其处理难度,提高效率,与此同时还能搜索程序更好更快的搜索到此文档;2. 便于程序员理解代码以及后期维护——结构良好,语义明确的代码利于阅读和维护。

问题7 链接是什么概念,对应什么标签?

超链接的含义是一个点击跳转相应文档的字,词或者图像。对应的为标签。其使用方式如下。

  1. 通过href属性跳转到另一个HTML文档
跳转到相应的地址
  1. 跳转文档内的锚点(书签)

设定的锚点

跳转锚点

注意:创建锚点时可以用id来替代name属性,也可以用其他元素标签替代a标签。

  1. 跳转另一个文档的锚点
另一个文档的锚点

问题8 常用标签都有哪些,都适合用在什么场景?

  1. 块级元素:
    ——外框,

    ——段落,

    ——标题,
      ——列表, ——表格
    • 行内元素:——提示性文字,——链接, ——加粗, ——图像,
    • ——表格单元

      问题9 表单标签都有哪些,对应着什么功能,都有哪些属性?

      表单一般包裹在

      标签下,主要用于用户输入,获取用户输入的信息并传输给服务器。其输入类型有以下几种:

      1. 文本
        • 单行文本输入
        • 多行文本输入

      2.密码(输入的字符会做掩码处理)

      1. 单选
      Male
      Female
      

      注:当input的type为radio时,该输入框为单选框,若单选框的name值相同,那么他们是同一组选项,不能同时选取到。

      1. 多选
      I have a bike
      I have a car 
      

      注:当input的type为checkbox时,该输入框为单选框,若单选框的name值相同,那么他们是同一组选项,可以同时选取到。

      1. 按钮
      
      

      注:点击可以执行相关操作

      1. submit
      
      

      此输入类型用于提交表单到服务器

      1. HTML5新增输入类型(
      • color
      • date
      • datetime
      • datetime-local
      • email
      • month
      • number
      • range
      • search
      • tel
      • time
      • url
      • week

      注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。

      问题10 ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方,举个例子

      标签 描述
        定义有序列表。
          定义无序列表。
        • 定义列表项。
          定义定义列表。
          定义定义项目。
          定义定义的描述。

          ol搭配li构建有序列表,ul搭配li构建无序列表,dl,dd,dt不常用,看了一下介绍dl类似于ol和ul,属于最外层标签;dd类似于li,表示项目内容;而dt类似于序号,只不过内容可以自定义。由以上可以看出dl,dd,dt挺适合做菜单类列表,dt表示菜名,dd表示相应菜品的介绍。

          你可能感兴趣的:(前端学习随笔2 在线简历)