这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
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属性表示内容所使用的语言
-
语义化的好处
-
代码可读性
-
可维护性
-
搜索引擎优化
-
提升无障碍性