• 前端学习笔记01

    html 标记标签通常称为 html tag

    什么是网页?

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

    HTML 的头部 

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

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

    title:

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

    收藏时候的默认标题

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

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

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

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

    1. <body>
    2.     
    3.     
    4.  
    5.     <ul type=""> 
    6.         <li>hhli>
    7.         <li>哈哈li>
    8.     ul>
    9.     
    10.     <ol type="I">
    11.         <li>项目一li>
    12.     ol>
    13.     <dl>
    14.         <dt>dt>
    15.         <dd>dd>
    16.     dl>
    17.     <table border="1" cellpadding="20" cellspacing="0">
    18.         <tr>
    19.             <td>td>
    20.             <td>td>
    21.             <td>td>
    22.             <td>td>
    23.             <td>td>
    24.             <td rowspan="2">td>
    25.         tr>
    26.         <tr>
    27.             <td colspan="5">td>
    28.         tr>
    29.  
    30.         <iframe src="" frameborder="0" width="400" >iframe>
    31.  
    32.         <form action="" method="post">
    33.             <p>
    34.                 <input type="text">
    35.             p>
    36.             <p>
    37.                 <input type="password">
    38.             p>
    39.             <p>
    40.                 <input type="radio" name="gender">男
    41.                 <input type="radio" name="gender" checked>女
    42.             p>
    43.             <p>
    44.                 地址:(下拉菜单)
    45.                 <select name="" id="" multiple>
    46.                     
    47.                     <option value="">选择省option>
    48.                     <option value="">广东option>
    49.                     <option value="">选择省option>
    50.                 select>
    51.                 <select name="" id="">
    52.                     <option value="">option>
    53.                     <option value="">option>
    54.                     <option value="">option>
    55.                 select>
    56.                 <p>
    57.                     
    58.                     <input type="checkbox" checked>
    59.                 p>
    60.                 
    61.                 <textarea name="" id="" cols="30" rows="10">textarea>
    62.                 <input type="submit">
    63.                 <input type="button" value="自定义按钮">
    64.                 <button type="submit">注册button>
    65.                 <button type="reset">重写button>
    66.                 <input type="reset">
    67.  
    68.                 
    69.             p>
    70.             
    71.             <input type="email">
    72.             
    73.             <input type="number">
    74.             
    75.             <input type="file">
    76.             
    77.             <input type="color">
    78.             
    79.             <input type="hidden">
    80.         form>
    81.     table>
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <h1>我的第一个标题h1>
    11.     <button>哈哈button>
    12.     <hr color="red">
    13.     <code>public static void main(String [] args){}code>
    14.     
    15.     <kbd>输入kbd>
    16.     
    17.     <pre>
    18.         今天是星期一,
    19.         明天是星期二
    20.     pre>
    21.     log<sub>5sub>
    22.     2<sup>3sup> = 8
    23.     <font>哈哈font>
    24.     
    25.     <a href="https://blog.csdn.net/qq_56951318?type=sub&subType=fans" target="_blank">csdna>
    26.     
    27.     <a href="https://blog.csdn.net/qq_56951318?type=sub&subType=fans">
    28.         <img src="img/iving.jpg" alt="这是欧文" title="打球" width="100">
    29.     a>
    30.     
    31.     <a href="mailto:312">站长信箱a>
    32.     
    33.     <a id="tips">a>
    34.     <a href="#tips">a>
    35.  
    36.     <img src="img/iving.jpg" alt="这是欧文" title="打球" width="100" align="top" border="">文本
    37. body>
    38. 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页面, 并且语言为英文 language = english 

    CSS :(层叠样式表)

    html 提供了布料,css 上色

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

    readonly 和 disabled 的区别?

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

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /* 类选择器 */
    10.         .fontStyle{
    11.             background-color: red;
    12.         }
    13.         .b{
    14.             color: white;
    15.         }
    16.         /* id选择器  */
    17.         #size{
    18.             font-size: 30px;
    19.         }
    20.         /* 标签选择器 */
    21.         p{
    22.             font-family: "仿宋";
    23.         }
    24.         /* 通配符 全部选择  用来页面初始化*/
    25.         *{
    26.             margin: 0;
    27.             padding: 0;
    28.         }
    29.         /* and选择器 */
    30.         h1,div{
    31.             font-size: 100px;
    32.         }
    33.         /* 后代选择器(div 里所有的p ) 也可以用id,类选择器这么写*/
    34.         div p{
    35.  
    36.         }
    37.         /* 子选择器  只能是子不能是孙子*/
    38.         div>p{
    39.  
    40.         }
    41.         /* 紧跟着div的p */
    42.         div + p{
    43.             background-color: pink;
    44.         }
    45. /* 属性选择器  选择input 标签中有name属性的 */
    46.         input[name]{
    47.  
    48.         }
    49.         /* 进一步筛选name=username的 */
    50.         input[name = username]{
    51.  
    52.         }
    53.     style>
    54. head>
    55. <body>
    56.     
    57.     <p class="fontStyle b">ddddp>
    58.     <p id="size">哈哈哈p>
    59. body>
    60. html>

         

           空格

         & &

         < 小于号

         > 大于号

         © 版权号

         

       

       

       

  • 相关阅读:
    Python函数小知识
    【数字信号去噪】小波软阈值+硬阈值+改进阈值数字信号去噪【含Matlab源码 1025期】
    redis序列化协议RESP
    【教程】利用API接口添加本站同款【每日新闻早早报】-每天自动更新，不占用文章数量
    STM32_OLED-打篮球.gif显示
    Matlab函数——mapminmax
    汽车诊断协议UDS概述
    java微信小程序 ssm电动车智能充电系统
    Java编码与解码
    java并发面试题
  • 原文地址：https://blog.csdn.net/qq_56951318/article/details/126459334