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

什么是前端

解决GUI人机交互问题（图形界面下的人机交互问题）跨终端 PC 移动浏览器 app VR/AR

前端开发环境

浏览器如Edge,Chrome,Firefox,Safari 编辑器如VSCode,Vim,Webstorm

前端关注方面

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

用户的感受很取决于前端技术栈 HTML CSS JavaScript 使用Web技术栈不要可视化生成 HTML,CSS,JavaScript都是运行在浏览器里面的浏览器通过http协议和服务器通信这就是最基础的技术栈一些开发 node.js Electron WebRTC WebGL React Native WebASSEMPLY

HTML是什么

Hyper Text Markup Language 超文本标记语言超文本（Hyper Text）：图片标题表格链接标记语言(Markup Language)：比如要表示一个一级标题

这是一级标题

这个就是一个标签而我们可以在标签上设置属性如： `img src="thisispicture.jpg` 其中src是属性名 thisispicture.jpg是属性值 img标签里面不需要别的内容了所以我们不用后面再写一个只需要我们在写完src后面加个/就好了，这是一种简写

最后MDN,w3c有非常多的东西，值得我们去看看。

一个非常非常简单的看一些input之类的网页

<body>
    <p>图片引用</p>
    <img src="./pics/image-20230119133204641.png"/>
    <p>src是属性名</p>
    <p>img是标签</p>
    <p>src里面的内容是属性值</p>
    <p>标题有h1,h2,h3,h4,h5,h6</p>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <h1>例子</h1>
    <h2>世界电影票房排行榜</h2>
    <ol>
        <li>我不是尧舜</li>
        <li>helloworld</li>
        <li>hello</li>
    </ol>
    <h2>购物清单</h2>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
    <h2>表格</h2>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>女</td>
        </tr>
    </table>
    <h2>熊出没</h2>
    <dl>
    <dt>熊大：</dt>
    <dd>熊大是熊出没中的主角</dd>
    <dt>熊二：</dt>
    <dd>熊二是熊出没中的主角</dd>
    <dt>光头强：</dt>
    <dd>光头强是熊出没中的主角</dd>
    </dl>
    <h2>超链接</h2>

    <h2>多媒体</h2>
    <h3>视频</h3>
    <video src="./video/1.mp4" controls="controls" width="500" height="300"></video>
    <h3>图片</h3>
    <img src="./pics/QQ图片20221007220535.jpg"/>
    <h3>音频</h3>
    <audio src="./audio/1.mp3" controls="controls"></audio>
    <h2>输入</h2>、
    <h3>input</h3>
    <input type="text" placeholder="请输入用户名"/>
    <input placeholder="请输入密码" type="password"/>
    <input type="range">
    <input type="color">
    <input type="date">
    <input type="datetime-local">
    <input type="email">
    <input type="file">
    <input type="month">
    <input type="number">
    <input type="search">
    <input type="time">
    <input type="radio">
    <h3>textarea</h3>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <h3>select</h3>
    <select name="" id="">
        <option value="">请选择</option>
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
    </select>
    <h3>button</h3>
    <button>按钮</button>
    <h3>label</h3>
    <label for="username">用户名</label>
    <input type="text" id="username"/>
    <h3>fieldset</h3>
    <fieldset>
        <legend>个人信息</legend>
        <label for="username">用户名</label>
        <input type="text" id="username"/>
    </fieldset>
    <h2>表单</h2>
    <form action="">
        <label for="username">用户名</label>
        <input type="text" id="username"/>
        <label for="password">密码</label>
        <input type="password" id="password"/>
        <input type="submit" value="提交"/>
    </form>
    <h2>div</h2>
    <div class="box"></div>
    <h2>span</h2>
    <span>span</span>
    <h2>iframe</h2>
</body>
</html>

探索前端与HTML|青训营笔记