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

前端

什么是前端

1.解决GUI人机交互问题（GUI指采用图形方式显示的计算机用户操作界面）

2.跨终端：PC/移动浏览器、客户端/小程序、AR/VR等（前端应用于多种终端）

3.Web技术栈

前端技术栈

1.html:页面内容

2.css:页面内容的效果

3.javascript：控制页面的行为操作

前端应关注的方面

1.美观（所写的页面是为人所服务的，所以应吸引人来使用）

2.安全（页面会遇到种种攻击，要注意安全性）

3.兼容（要能在各种浏览器使用）

4.功能（功能完善）

5.体验（用户体验）

6.性能（网站流畅）

7.无障碍（在各种环境都可以流畅使用）

HTML

什么是HTML

HTML全称是HyperText Markup Language超文本标记语言

HyperText指图片链接等

Markup Language指<h1></h1>这种标记

HTML文档的结构

<!DOCTYPE html><!-- 声明文档类型 -->
<html>
<head> 
<meta charset="utf-8"> <!-- 指定字符类型 -->
    <title>页面标题</title> 
</head> 
<body> 
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p> 
</body> 
</html>

HTML语法

1.标签和属性不分大小写推荐小写

2.空标签可以不闭合比如input等

3.属性值推荐使用双引号包括

4.某些属性值可以省略，例如required等

HTML中的标签

<h1></h1>标题标记最高为1最低为6

<ol><li>></li></ol>有序列表

<ul><li></li></ul>无序列表

<dl><dt></dt><dd></dd></dl>描述列表<dt></dt>为所描述内容的标题

<a herf="" target=”_blank“></a>链接标签 herf中的内容为地址，target="_blank"表示在新页面打开链接

<img src=""/>图片标记

<audio src=""></audio>音频标签

<video src=""></video>视频标签

<input>输入标记 type属性值包括range滑块、number、data日期、checkbox复选框、radio点选框，属性palceholder为占位符实现输入框默认值效果

<textarea></textarea>文本输入框

<select><option></option></select>下拉菜单

<datalist><option></option>+</datalist>选项列表需要配合input标签使用

<blockquote></blockquote>引用块

<cite></cite>定义作品标题

<q></q>短引用，会为内容加上双引号

<pre><code></code></pre>预格式化和代码标签，通常pre标签与code标签搭配使用使代码文本更精确

<strong></strong>文本强调加粗

<em></em>文本斜体

语义化

在编程时我们应该做到语义化，也就是对应内容用对应标题，这会使得我们的代码更加通用，对于其他人更好理解，看到标签即能明白其意思，这样会使得代码更容易维护，无障碍性好，搜索引擎优化。

如何做到语义化

了解每个标签和属性的含义、思考什么标签适合这个内容、不使用可视化工具生成代码

前端与HTML | 青训营笔记

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

前端