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

前端

前端工程师，使用Web技术栈来解决多端图形用户交互问题的工程师。

三件套（html内容、css样式、JavaScript行为）都是运行在浏览器中，通过HTTP网络协议与服务器端进行联系。以上构成一个前端的简易技术栈。

前端关注点：

美观、功能、无障碍、安全、性能、兼容性、用户体验

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

语义化的好处：

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

前端的技术：

nodejs开发服务端的应用
election开发客户端应用
React native 在线传输
web RTC 网页即时通讯，被称为点对点技术（ P2P）。建立连接之后，浏览器可以直接点对点通信，而 Web 服务器不会接触这些消息
WebGL 3D游戏开发
WebAssembly 将C, Rust, Go, Typescript, C#等语言，编译生成wasm在浏览器上运行

DOM树

标签语义

1、标题

h1 - h6

p -> 段落

2、列表

有序号列表 ol - li
无序号列表 ul - li
定义列表 dl - dt - dd

3、链接

href放跳转链接，标签属性使用 target="_blank"会新建窗口跳转，而不是默认的当前页面跳转。

4、图片

img

常用alt属性设置默认提示信息，src引用链接

5、音频、视频

audio

video

6、输入input

input标签

input标签对于不同的输入类型，value 属性的用法也不同：

type="button按钮", "reset重置", "submit提交" - 定义按钮上的显示的文本
type="text文本输入框", "password密码点", "hidden用户不可见的默认值" - 即是初始值，也是提交给服务器的值
type="checkbox方形选择器","radio圆形选择器" - 提交给服务器的值，若未选中，则服务器不会收到数据
type="image" - 用户点击位置相对于图像左上角的x y坐标提交给服务器

注释： <input type="checkbox"> 和 <input type="radio"> 中必须设置 input标签中的value 属性。

注释： value 属性无法与 <input type="file"> 一同使用。

<form action="#">
    <fieldset>
        <legend>value的值是按钮上的文本</legend>
        <input type="button" value="按钮"> <br>
        <input type="reset" value="重置"> <br>
        <input type="submit" value="提交"> <br>
    </fieldset>
    <br><br>
    <fieldset>
        <legend>value的值是输入框中的初始值</legend>
        <input type="text" value="我的type属性值是text"> <br>
        <input type="password" value="我的type属性值是password"> <br>
        <!--
定义隐藏字段，隐藏字段对于用户是不可见的
隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改
-->
        <input type="hidden" value="我的type属性值是hidden"> <br>
    </fieldset>
    <br><br>
    <fieldset>
        <legend>value的值在提交表单时会发送给服务器</legend>
        <input type="checkbox" value="v1"> <br>
        <input type="radio" value="v2"> <br>
       <!--image型input标签生成的按钮显示为一幅图像，点击它可以提交表单，alt属性为无法查看图像的说明文字-->
        <input type="image" src="xxx.png" alt="Submit"> <br>
        <input type="image" src="xxx.png"> <br>
    </fieldset>
</form>

vue - input值绑定

动态绑定value，一般情况input的值不是写死的，可能从网络获取或者定义在data中的，所以使用 v-bind:value动态给value绑定值。其他会变化的数据也是使用v-bind。

<div id="app">
        <!-- 循环things，将for渲染会变化的数据都使用v-bind -->   
    <label v-for="item in things" :for="item">
        <!-- 利用thing来存储选中的内容 -->
        <input type="checkbox" :value="item" :id="item" v-model="thing">{{item}}
    </label>
    <h3>{{thing}}</h3>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',//用于挂在要管理的元素
        data: {
            thing : [],
            things : ["aa","bb","cc"]
        },
        methods: {

        }
    })
</script>

7、单选、多选

单选使用 name属性来达到互斥效果，多选使用 type="checkout" 属性

外套一个label标签，点击内容也可选中，扩大用户点击范围。

8、下拉框

select / option

9、有提示的输入框

input与datalist标签通过 id - > list对应，用户输入字符会使用datalist的内容进行提示。

10、文本标签

①blockquoto 引用另一个源的文本

使用cite属性引入来源，浏览器通常会对 <blockquote> 元素进行缩进。

②cite 斜体标注

③q 双引号引用

④code 代码块格式

⑤pre保留文本格式，不会取消换行空格

⑥strong 加粗字体

⑦em 斜体重读

<blockquote cite="http://t.cn/RfjKO0F">
  <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>

<p>我最喜欢的一本书是<cite>小王子</cite>。</p>

<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

<p><code>const</code>声明创建一个只读的常量。</p>

<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>

<p>在投资之前，<strong>一定要做风险评估</strong>。</p>

<p>Cats <em>are</em> cute animals.</p>

内容划分

header 顶部内容，导航放在nav

main 主体内容

article 单个的内容，可忽略

aside 侧面无关内容

footer 版权信息等

HTML5规范

前端与HTML ｜ 青训营笔记

前端