简单理解
用一句话解释前端工程师:“使用web技术栈解决多端图形用户界面交互问题的工程师”
前端的技术栈可分成3层:html(页面、结构、内容)→css(样式)→js(行为)
前端开发者需要关注:
页面的功能、美观、无障碍、安全、性能、兼容、体验
前端开发环境: 浏览器+编辑器
HTML
HypeText(超文本) Markup Language
<!doctype html> //标记当前使用html文件的版本
<html> //根标签
<head> //页面源数据
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body> //呈现给用户的内容
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
语法
- 标签属性不分大小写,推荐小写
- 一些空标签可以不闭合,如:input、meta
- 属性值推荐用双引号
- 某些属性值可省略,如:require、readonly
标题
h1~h6
列表
有序列表 <ol>
无序列表 <ul>
定义列表 <dl>
描述列表标题<dt>
具体内容描述<dd>
链接
a标签
<a href="...">...</a> //超链接
<a href="..." target="blank">...</a> //新窗口打开而非替换原有页面
多媒体元素
图片
<img src="..."/> //src是一个属性,“属性名”
<img src="..." alt="Metal movable type" width="400"/>
//alt是替换性文本,在图片因某些原因无法加载时会显示文字,width设置宽度
音频
<audio src="..." controls></audio> //controls默认操作控件播放
视频
<video src="..." controls></video>
表单输入
控件供用户输入或选择一些值
<input> //文本输入框
<input placeholder="请输入用户名"> //placeholder占位符
<input type="range"> //输入范围
<input type="number" min="1" max="10"> //输入1-10的数字
<input type="date" min="2018-02-10"> //输入日期
<textarea>...</textarea> //用户可输入多行内容
表单选项
用户可在已有选项中选择
<lable><input type="checkbox"/></lable> //多选
<input type="radio" name="sport"/> //单选
下拉选择
<select>
<option>...</option>
<input list="countries"/> //用户可自由输入
<datalist id="countries"> //快捷输入方式,在用户输入时可提示辅助
<option>...</option>
<option>...</option>
<option>...</option>
</datalist>
文本类标签
引用
<cite>
<blockquote cite="引用文本地址"> //长引用
<p>引用内容</p>
</blockquote>
<p>...<cite>引用内容</cite>...</p> //短引用(作品名字、章节...)
<p>...<cite>引用内容</cite>...<q>具体引用内容</q>...</p> //短引用
代码
<p><code>...</code>...</p> //短
<pre><code>...(字体会用编程/等宽字体展示)</code><pre> //多行
强调
<strong>...</strong> //强调事情的紧急/严重
<em>...</em> //语气上强调
语义化(组件库尤其需要)
元素、属性、属性值都有某些含义,应遵循语义来编写html,如有序列表用ol无序列表用ul;lang属性表示内容所使用的语言
语义化的好处
- 代码可读性、可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义——MDN,w3c
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
最后,html主要传递的是内容,而不是样式。