前端与HTML | 青训营笔记这是我参与「第五届青训营」伴学笔记的第一天，fighting！ 1.什么是前端前端用

这是我参与「第五届青训营」伴学笔记的第一天，fighting！

一、前端概况

1.什么是前端

前端用于使用web技术栈解决多端（pc/移动浏览器，客户端/小程序，VR/AR）图形界面人机交互问题

2.前端的边界

前端发展到现在已经不仅仅是可以实现页面的效果，例如：

nodejs开发服务器端的应用
ELECTRON || React Native开发客户端的应用
WebRTC实现P2P的在线传输
WebGL开发3D游戏
WebASSEMBLY可以将java中的语言可以在浏览器中运行

3.开发环境

浏览器：IE/Edge Chrome Firefox Safari
编译器：VSCode Vim WebStorm

4.前端的技术栈

html(内容),css(样式),JavaScript(行为)

这三个是运行在浏览器中的，通过http协议与服务器端进行通信。

5.前端的关注点

功能，美观，无障碍，安全，性能，兼容性，体验

二、HTML

1.HTML简介

HTML的英文全称是HyperText Markup Language超文本的标记语言
超文本指的是不仅仅局限于文本还可以有图片、标题、链接、表格
当浏览器拿到了html以后可以把它解析成DOM树，每一个节点称为DOM节点

2.HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input,meta
属性值推荐用双引号
某些属性可以忽略，如：required,readonly

3.常用标签

段落标签p

<p>Hello Word</p>

标题标签h1~h6

<h1>hello word</h1>
<h2>hello word</h2>
<h3>hello word</h3>
<h4>hello word</h4>
<h5>hello word</h5>
<h6>hello word</h6>

列表标签

<!-- 有序列表 -->
    <ol>
        <li>有序</li>
        <li>有序</li>
        <li>有序</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>无序</li>
        <li>无序</li>
        <li>无序</li>
    </ul>
    <!-- tvalue形式 -->
    <dl>
        <dt>演员</dt>
        <dd>XXX</dd>
        <dd>XXX</dd>
    </dl>

链接标签

 <a href="https://www.bytedance.com" target="_blank">链接，新打开一个界面</a>

图片标签

<img src="http://photo.jpg" alt="Metal movable type" width="400px" />

注：alt是当图片加载不出来时的提示文字,通过width,height标签可以控制图片大小

音频标签

  <audio src="/music.ogg" controls></audio>

注：controls是在浏览器显示播放控件

视频标签

 <video src="/video.mp4" controls></video>

表单（用户输入）

    <!-- 文本输入框 -->
    <input placeholder="请输入用户名">
    <!-- 让用户输入一个范围 -->
    <input type="range">
    <!-- 让用户输入一个数字 -->
    <input type="number" min="1" max="10">
    <!-- 让用户输入一个日期 -->
    <input type="date" min="2023-01-01">
    <!-- 让用户输入多行文字 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>

    <!-- 复选框□ checked默认选择-->
    <label><input type="checkbox">苹果</label>
    <label><input type="checkbox" checked>香蕉</label>
    <!-- 多选一○ 从name相同的里面选择一个-->
    <label><input type="radio" name="sport">足球</label>
    <label><input type="radio" name="sport">篮球</label>
    <!-- 下拉选择 -->
    <select name="" id="">
        <option value="">红色</option>
        <option value="">黄色</option>
        <option value="">绿色</option>
        <option value="">蓝色</option>
    </select>
    <!-- 给用户快捷输入提示 -->

    <input list="countries" />
    <datalist id="countries">
        <option value="greece"></option>
        <option value="United Kingdom"></option>
        <option value="United States"></option>
    </datalist>

显示效果如下，需根据需要灵活选择相应的输入文本框，方便用户体验。

引用

 <!-- 长引用blockquote -->
    <blockquote cite="http://t.cn/RfjKO0F">
        <p>泥土和天才比，當然是不足齒數的，然而不是堅苦卓絕者，也怕不容易做；不過事在人為，比空等天賦的天才有把握。這一點，是泥土的偉大的地方，也是反有大希望的地方。而且也有報酬，譬如好花從泥土裏出來，看的人固然欣然的賞鑑，泥土也可以欣然的賞鑑，正不必花卉自身，這纔心曠神怡的——假如當作泥土也有靈魂的說
        </p>
    </blockquote>
    <!-- 短引用 cite引用书的名字或章节 q引用的是具体的内容会带"" -->
    <p>My pavourite book is <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>

三、结尾

第一次写笔记，要学习的东西还有很多，学海无涯贵在坚持，打卡第一天，一起加油吧！