前端与HTML | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 1 天。跟随该视频课程学习了关于前端与H

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

1.前端的工作定义

解决图形界面下的人机交互问题
跨终端
Web技术栈

2.前端技术栈拆解与分析

html(内容)：负责页面结构内容
css(样式)：负责页面样式，例如位置、颜色、大小...
JavaScript(行为)：定义网页的行为，与用户的交互

3.HTML 解析

<!doctype html>HTML版本
<html>文档根标签
<head>页面需要的信息，但不呈现给用户
<body>需要呈现给用户的内容
标签和属性不区分大小写，推荐小写
空标签可以不闭合
属性应用双引号包裹
某些属性值可以省略

4.HTML语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
好处：
代码可读性、可维护性、搜索引擎优化、提升无障碍性

HTML代码学习

代码

    <h2>有序列表</h2>
    <ol>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </ol>
    <h2>无序列表</h2>
    <ul>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </ul>
    <h2>定义列表</h2>
    <dl>
        <dt>a</dt>
        <dd>b</dd>
        <dt>a</dt>
        <dd>b</dd>
        <dd>b</dd>
    </dl>

效果

代码
target页面跳转方式

    <!-- 页面直接跳转 -->
    <a href="https://www.baidu.com">百度</a>
    <!-- 新建页面跳转 -->
    <a href="https://www.baidu.com" target="_blank">百度</a>

效果

代码
control让浏览器自带控件

    <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg" alt="get fail" width="400">
    <br>
    <audio src="" controls></audio>
    <br>
    <video src="" controls></video>

效果

代码

    <input placeholder="请输入用户名">
    <input type="range">
    <input type="number" min="1" max="10">
    <input type="date" min="2018-02-10">
    <textarea> hey </textarea>

效果

代码
这里我遇到一个问题，由于由于我输入时option自动补全代码里面自带了value属性<option value="">，如果不管它就会导致input不能打开这个列表,最后把value属性去掉才可以实现以下效果。

    <label for="fav">你的最爱是</label>
    <input type="text" id="fav" name="fav" list="fav-list">
    <datalist id="fav-list">
        <option>游戏</option>
        <option>食物</option>
        <option>美女</option>
        <option>风景</option>
    </datalist>

效果

代码

    <p>
        <label for="">
            多项选择
            <input type="checkbox">a
            <input type="checkbox" checked>b<!-- 默认选择 -->
        </label>
        <label for="">
            单项选择
            <input type="radio" name="s" id="">c
            <input type="radio" name="s" id="">d
        </label>
        列表选择
        <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
        </select>
    </p>

效果

代码

     <blockquote>
        <p>
            abcd
        </p>
    </blockquote>
    <p>我最喜欢的一本书是<cite>小王子</cite>。</p>
    <p>他说<q>字符串是不可变量</q></p>
    <p><code>const</code>声明创建一个只读常量</p>
    <pre><code>
        const add = (a,b) => a+b
    </code></pre>
    <p><strong>这里</strong>需要强调</p>
    <p>cats <em>are</em> cute animals.</p>

效果

前端与HTML | 青训营笔记

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