前端整体笔记（1Oct2022）

garrulousabyss

已于 2022-10-01 23:30:29 修改

阅读量106

点赞数

分类专栏：前端一条龙文章标签：前端

于 2022-10-01 22:59:27 首次发布

本文链接：https://blog.csdn.net/garrulousabyss/article/details/127138362

版权

前端一条龙专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前端整体笔记（1Oct2022）

class起名

1 传统起名法
2 BEM起名法

传统起名法

布局类，交互类，状态类，包裹类。。。。

BEM命名

[block]__[element]–[modifier]

block 我的容器是谁
Element 我是谁
Modifier 我是什么形态

表格

音视频

表单

⽤于收集⽤户输⼊并提交的数据
<input type="text" name="username" value="jirengu">
<input type="password" name="password" >

收集到的数据
{
 "username": "jirengu",
 "password": "123456",
 "sex": "male",
 "birth": "2014/11/01",
 "hobby": ["music", "footbal"]
}

表单例子1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form class="form" action="/login" method="post">
        <h1 class="form__title">login</h1>
        <div class="form__input">
            <label for="username">loginName</label>
            <input id="username" class="form__username" name="username" type="text" required placeholder="Please enter your login name">
        </div>
        <div class="form__input">
            <label for="password">passord</label>
            <input id="password" class="form__password" name="password" type="password" autofocus placeholder="please enter your password">

        </div>
    </form>
</body>
</html>

表单例子2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form class="form" action="/login" method="post">
        <div class="form__hobby">
            <input name="hobby" type="checkbox" value="music"> La musique
            <input name="hobby" type="checkbox" value="football"> Le football
        </div>

    
        <div class="form__sex">
            <input name="sex" type="radio" value="female"> female
            <input name="sex" type="radio" value="male"> male
            <input name="sex" type="radio" value="notMentioned"> Not willing to say
        </div>

        <div class="form__textarea">
            <textarea name="intro"  cols="30" rows="10" placeholder="introduce yourself"></textarea>

        </div>
    

    </form>
</body>
</html>

表单例子3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--multiple size = "2" -->
    <select name="city">
        <option value="Paris">Paris</option>
        <option value="Rome">Rome</option>
        <option value="Peru">Peru</option>
    </select>

    <input type="email" placeholder="email">

    <input type="time" >


</body>
</html>