前端学习笔记01_前端‘=>’ 写法-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_56951318/article/details/126459334

html 标记标签通常称为 html tag

什么是网页?

HTML 文档描述的就是网页 (HTML 文档包含HTML的标签和纯问文本)

HTML 的头部

html head元素包含了所有的头部信息元素

script , liink,以及各种meta,title,base

title:

定义了浏览器工具栏的标题

收藏时候的默认标题

ALT + L + O : 快捷打开网页

在 html 写错的时候浏览器会进行纠偏,但纠偏能力也是有限度的

样式和结构分离,把样式写在css中

语义化标签: 对页面没有什么作用, 提升可读性

<body>
    <!-- 块级元素 : 自带换行功能 div h p form ul ol -->
    <!-- 行级元素 : 没有换行功能 span a del sub en b strong  -->

    <ul type=""> 
        <li>hh</li>
        <li>哈哈</li>
    </ul>
    <!-- 有序列表 -->
    <ol type="I">
        <li>项目一</li>
    </ol>
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>
    <table border="1" cellpadding="20" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td colspan="5"></td>
        </tr>

        <iframe src="" frameborder="0" width="400" ></iframe>

        <form action="" method="post">
            <p>
                <input type="text">
            </p>
            <p>
                <input type="password">
            </p>
            <p>
                <input type="radio" name="gender">男
                <input type="radio" name="gender" checked>女
            </p>
            <p>
                地址:(下拉菜单)
                <select name="" id="" multiple>
                    <!-- multiple 多选 -->
                    <option value="">选择省</option>
                    <option value="">广东</option>
                    <option value="">选择省</option>
                </select>
                <select name="" id="">
                    <option value=""></option>
                    <option value=""></option>
                    <option value=""></option>
                </select>
                <p>
                    <!-- 多选 -->
                    <input type="checkbox" checked>
                </p>
                <!-- 文本区 -->
                <textarea name="" id="" cols="30" rows="10"></textarea>
                <input type="submit">
                <input type="button" value="自定义按钮">
                <button type="submit">注册</button>
                <button type="reset">重写</button>
                <input type="reset">

                <!-- input 和 button用哪一个呢? 
                如果有form的话用form,否则用button
                用哪个就统一用那个,不要穿插用 -->
            </p>
            <!-- 邮箱,自带验证功能 -->
            <input type="email">
            <!-- 只能输入数字 -->
            <input type="number">
            <!--头像(文件)  -->
            <input type="file">
            <!-- 颜色 -->
            <input type="color">
            <!-- 隐藏 -->
            <input type="hidden">
        </form>
    </table>

<!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>
    <h1>我的第一个标题</h1>
    <button>哈哈</button>
    <hr color="red">
    <code>public static void main(String [] args){}</code>
    <!-- 键盘输入 -->
    <kbd>输入</kbd>
    <!-- 预格式化的文本 -->
    <pre>
        今天是星期一,
        明天是星期二
    </pre>
    log<sub>5</sub>
    2<sup>3</sup> = 8
    <font>哈哈</font>
    <!-- 普通链接 -->
    <a href="https://blog.youkuaiyun.com/qq_56951318?type=sub&subType=fans" target="_blank">csdn</a>
    <!-- 图像链接 -->
    <a href="https://blog.youkuaiyun.com/qq_56951318?type=sub&subType=fans">
        <img src="img/iving.jpg" alt="这是欧文" title="打球" width="100">
    </a>
    <!-- 邮件链接 -->
    <a href="mailto:312">站长信箱</a>
    <!-- 锚记链接 -->
    <a id="tips"></a>
    <a href="#tips"></a>

    <img src="img/iving.jpg" alt="这是欧文" title="打球" width="100" align="top" border="">文本
</body>
</html>

vscode 快捷键 :

重开一行：光标在行尾的话，回车即可；不在行尾，ctrl + enter 向下重开一行；ctrl+shift + enter 则是在上一行重开一行

删除一行：光标没有选择内容时，ctrl + x 剪切一行；ctrl +shift + k 直接删除一行

移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行

复制一行：shift + alt + ↓ 向下复制一行；shift + alt + ↑ 向上复制一行

当前的系统结构有哪些?

c/s 结构

client / server (客户端/服务器端) ,在使用的时候要安装特定的客户端软件

系统的大部分数据都集成在客户端,服务器需要发送的数据量很小,所以c/s结构的系统速度快

b/s 结构

browser / server (浏览器 / 服务器端) 在浏览器的地址栏上输入地址即可访问服务器

所有数据都是从服务器发送的,所以速度慢

c/s 结构的缺点?

1,需要安装特定的客户端软件

2,不好升级和维护

post 和 get 的区别?

method 是数据的提交方法有: get post

get : 默认值吧所有的要提交的数据拼接在地址栏长度有限制也不安全

post : 封装一个请求体 ,把数据提交给后台,不会拼接没有长度限制比较私密的数据不能显示在地址栏

使用form 表单, 99%都是用 post

a 标签也能先后台发送请求

html 5 在2012年形成稳定的版本, H5新增: 画布 , 多媒体(不需要 flash 插件),重力感应,地图

画布 : 例如刷脸的时侯把人像画下来

<html lang="en"> 是什么意思?

向搜素引擎表示这是一个HTML页面, 并且语言为英文 language = english

CSS :(层叠样式表)

html 提供了布料,css 上色

内容与表现分离(样式与结构分离) 外部样式表可以极大的提高工作效率,通常存储在css文件中

readonly 和 disabled 的区别?

1,都可以作用于input等表单元素上,使元素成为不可用的状态

2,readonly 只对非文字的表单产生作用,disabled 可以作用于所有的表单元素

3,readonly可以提交到后台,disabled是不可以提交到后台的

<!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>
    <style>
        /* 类选择器 */
        .fontStyle{
            background-color: red;
        }
        .b{
            color: white;
        }
        /* id选择器  */
        #size{
            font-size: 30px;
        }
        /* 标签选择器 */
        p{
            font-family: "仿宋";
        }
        /* 通配符 全部选择  用来页面初始化*/
        *{
            margin: 0;
            padding: 0;
        }
        /* and选择器 */
        h1,div{
            font-size: 100px;
        }
        /* 后代选择器(div 里所有的p ) 也可以用id,类选择器这么写*/
        div p{

        }
        /* 子选择器  只能是子不能是孙子*/
        div>p{

        }
        /* 紧跟着div的p */
        div + p{
            background-color: pink;
        }
/* 属性选择器  选择input 标签中有name属性的 */
        input[name]{

        }
        /* 进一步筛选name=username的 */
        input[name = username]{

        }
    </style>
</head>
<body>
    <!-- 选择多个用空格隔开 -->
    <p class="fontStyle b">dddd</p>
    <p id="size">哈哈哈</p>
</body>
</html>

<body>



  空格

& &

< 小于号

> 大于号

© 版权号



<audio src="" controls autoplay></audio>



<video src="" controls autoplay></video>

</body>