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

前端的基础知识

Q:首先什么是前端
A:要点GUI人机交互、跨终端、web技术栈

Q:前端技术是怎样的呢
A:HTML(内容)、CSS(样式)、JavaScript(行为)和服务端进行网络协议

HTML:标记对网页中的文本、图片、声音等内容进行描述
CSS:字色、排版、修饰
JavaScript:脚本语言、静态网页变动态网页

Q:前端应该关注哪些方面
A:美观、功能、无障碍、安全、体验、兼容、性能

Q:开发环境
A:浏览器：chrome、edge、Firefox等
编辑器：VSCode、WebStorm、Vim、简单的前端页面就记事本也可编写

HTML基础(HyperText Markup Language) 传达内容不传达样式

HTML语法:

标记和属性不区分大小写(推荐小写)
允许属性值不使用引号(推荐双引号包裹)
允许部分属性值的属性省略
空标签可以不闭合等

标签介绍

<!DOCTYPE htmL>当前HTML文件所用的版本
<html>根标记</html> 根标记到最后结束
<head>头标记</head>头标记网页标题和所用的编码只能写一对
<meta charset="UTF-8">所用编码UTF-8
<title>我的第一个网页</title>网页标题
<body>主体标记</body>主体标记文档所显示的东西只能一对与head并列
<h1>文章标题</h1>~<h6>文章标题</h6>表示的是文章的一级标题到六级标题
<p>段落</p>段落标记单标记

示例 1.1

示例 1.2

<ol>有序列表</ol>有序列表
<ul>无序列表</ul>无序列表
<dl>定义列表</dl>定义列表
<li>列表项</li>列表项

示例 1.3

<a href="https://www.bytedance.com/>链接:字节跳动官网</a>链接标签 target="blank"新窗口打开
<br>换行

示例 1.4

<img src="photo.jpg"/>显示的是photo.jpg图片属性名="属性值"
<audio src="/ll/音频.ogg" controls></audio>显示音频链接 <video src="/ll/video.mp4" controls></video>显示视频链接

示例 1.5

<textarea></textarea>多行输入框
<input>的属性
-placeholder="请输入用户名"输入框中无输入内容时的占位符
-type="range"输入范围
-type="number" min="1" max="10"输入数字指定最小最大值
-type="date" min="1992-01-11"日期选择框

示例 1.6

<label><input type="checkbox"/>A</label>多选
<label><input type="radio" name="sport"/>A</label>单选
<select> <option>A</option> ... </select>选项列表
<input list="countries"><datalist id="countries"><option>zhang</option>...<datalist>选项提示列表

示例 1.7

<blockquote cite="http://t.cn/RfjKO0F"><p></p></blockquote>快捷引用来源于cite后面的链接
<cite></cite>短引用作品名章节
<q></q>标签短引用内容
<code></code>将代码引起来可长可短多行外面套<pre></pre>标签等宽编程字体展示
<strong></strong>重要的事加粗
<em></em> 重读

示例 1.8

内容划分

<header>页头头部信息 <nav>导航 </nav> </header>
<main>主体一个页面只有一个main 重点 <article>正文可有可无可多个 </article> </main>
<aside>与内容相关不直接属于页面内容 </aside>
<footer> </footer>

示例 1.9

示例 1.10

语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
-有序列表用ol；无序列表用ul
-lang属性表示内容所使用的语言

谁在使用我们写的HTML

开发者：修改、维护页面
浏览器：展示页面
搜索引擎：提取关键词、排序
屏幕阅读器：给盲人读页面内容

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

前端与HTML | 青训营笔记