[前端与 HTML | 青训营笔记]

22 阅读2分钟

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

maiami.jpg

1.HTML是什么?

html是超文本标记语言,是用来描述web文档的一种标记语言,使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。

2.前端是什么?

前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。

什么是前端工程师?

用一句话总结就是:前端工程师是使用web技术栈解决多端图形用户页面交互问题的工程师。

3.HTML的语法

标签和属性值不区分大小写,推荐小写。 空标签可以不闭合,比如input。 属性值推荐用双引号包裹,一些属性可以忽略。

4.HTML的结构

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>    
</body>
</html> 

其中DOCTYPE是告诉浏览器,当前当前的文本是HTML5。html标签 是HTML的开头和结尾标签,lang="en"表示语言是英文,也可以lang="zh"中文,也可以不写,不影响。 head是HTML的头部标签,里面可以写标题以及编码等,body则是HTML的主体内容。

5.HTML中的常用标签

  • 标题标签 从h1到h6,逐次重要性降低的双标签。
  • 列表标签 有序ol,无序ul,均包裹li标签,自定义列表dl,其中dt标签是标题,dd是子内容。
  • 链接标签 < a href="#">百度</ a>
  • 多媒体标签 可以引入图片音频和视频。
  • 输入标签 input

内联元素

  • 无法修改元素的宽高
  • 只能容纳文本和其他内联元素 常见的内联元素有:<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>

块级元素

  • 宽度为父级的宽度,从新的一行开始
  • 能容纳其他块级元素或内联元素
  • 可以控制宽高 常用的块级元素:<div> <p> <h1>-<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>

行内块元素

  • 元素在行内排列,不会独占一行
  • 可以设置宽高 常见的行内块元素:<img> <input> <td>

6.语义化是什么

  • HTML中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

    • 有序列表用ol;无序列表用ul

    • lang属性表示内容所使用的语言

语义化的好处

  • 代码可读性

  • 可维护性

  • 搜索引擎优化

  • 提升无障碍性