HTML+CSS基础知识2

1.嵌套列表

列表之间可以互相嵌套形成多层级列表
eg.

<ul>
    <li>江苏省
        <ul>
        <li>南京市li>
        <li>扬州市li>
    li>
    <li>安徽省
        <li>合肥市li>
        <li>黄山市li>
    ul>
    li>
ul>

  <dl>
        <dt>中国dt>
        <dd>
            <dl>
                <dt>江苏省dt>
                <dd>扬州市dd>
                <dd>南京市dd>
            dl>
            <dl>
                <dt>安徽省dt>
                <dd>合肥市dd>
                <dd>黄山市dd>
            dl>
        dd>   
dl>

<dl>
        <dt><strong>好美味小吃strong>dt>
        <dd>
            <ul>
                <li>小吃类
                    <ul>
                        <li>煮面干li>
                        <li>蛋炒饭li>
                    ul>
                    ​    li>
​                <li>卤味类
​                    <ul>
​                        <li>鸭肠li>
​                        <li>鱿鱼li>
​                    ul>                                      
​                li>
​              <li>套餐类
​                <ul>
​                    <li>猪肉拌饭li>
​                    <li>猪脚拌饭li>

​                ul>
​              li>
​              <li>炖罐类
​                <ul>
​                    <li>羊肉枸杞li>
​                    <li>猪心莲子li>
​                ul>
​              li>
​                
​            ul>
dl>

（嵌套列表必须要嵌套完整，内部依旧使用完整的结构体系）

2.表格标签

:表格的最外层容器

：定义表格行

````

注：在一个table中，

只能出现一次，可以出现多次

 <table>
        <caption>天气预报caption>
     <tHead>
        <tr>
            <th>日期th>
            <th>天气情况th>
            <th>出行情况th>
        tr> 
     <tHead/>  
     <tBody>    
        <tr>
            <td>2020.01.02td>
            <td>晴td>
            <td>适合出行td>
        tr>
        <tr>
            <td>2020.01.03td>
            <td>雨td>
            <td>不宜出行td>
        tr>
     <tBody/>    
    table>

3.表格属性

border:表格边框

cellpadding:单元格内的空间

cellspacing:单元格之间的空间

colspan合并列

rowspan:合并行

align:左右对齐方式（left、center、right）

valign:上下对齐方式（top、middle、bottom）

 <table border="2">

<table border="2" cellpadding="25">

<table border="2" cellpadding="25" cellspacing="12">

colspan和rowspan

<table border="2" cellpadding="25" cellspacing="12">
        <caption>天气预报caption>
        <tr>
            <th>日期th>
            <th>日期th>
            <th>天气情况th>
            <th>出行情况th>
        tr> 
        <tr>
            <td>2020.01.02td>
            <td>白天td>
            <td>晴td>
            <td>适合出行td>
        tr>
        <tr>
            <td>2020.01.03td>
            <td>白天td>
            <td>雨td>
            <td>不宜出行td>
        tr>
    table>

利用colspan后

 <th colspan="2">日期th>

<table border="2" cellpadding="25" cellspacing="12">
        <caption>天气预报caption>
        <tr>
            <th colspan="2">日期th>
            <th>天气情况th>
            <th>出行情况th>
        tr> 
        <tr>
            <td>2020.01.02td>
            <td>白天td>
            <td>晴td>
            <td>适合出行td>
        tr>
        <tr>
            <td>2020.01.02td>
            <td>夜晚td>
            <td>晴td>
            <td>适合出行td>
        tr>
        <tr>
            <td>2020.01.03td>
            <td>白天td>
            <td>雨td>
            <td>不宜出行td>
        tr>
        <tr>
            <td>2020.01.03td>
            <td>夜晚td>
            <td>雨td>
            <td>不宜出行td>
        tr>
    table>

利用rowspan后

<tr>
            <td rowspan="2">2020.01.02td>
            <td>白天td>
            <td>晴td>
            <td>适合出行td>
        tr>
         <tr>
            <td>夜晚td>
            <td>晴td>
            <td>适合出行td>
        tr>
        <tr>
            <td rowspan="2">2020.01.03td>
            <td>白天td>
            <td>雨td>
            <td>不宜出行td>
        tr>

使用rowspan

align/valign

<table align="right">

练习：

<table border="3" cellpadding="5">
        <tr>
            <th>班次名称th>
            <th>科目th>
            <th>授课内容th>
            <th>增值服务th>
            <th>课时th>
            <th>价格th>
        tr>
        <tr valign="middle">
            <td rowspan="3">真题解析班td>
            <td>行测+申论td>
            <td>全科历年真题td>
            <td rowspan="3">课后模拟案卷td>
            <td>48td>
            <td>1280td>
        tr>
        <tr>
          <td>行测td>
          <td>行测真题td>
          <td>32td>
          <td>1520td>
        tr>
        <tr>
            <td>申论td>
            <td>申论真题td>
            <td>25td>
            <td>3620td>
        tr>
        <tr valign="midddle">
            <td rowspan="3">高分技巧班td>
            <td>行测+申论td>
            <td>全技巧td>
            <td rowspan="3">入学测评td>
            <td>48td>
            <td>1235td>
        tr>
        <tr>
            <td>行测td>
            <td>技巧强化td>
            <td>20td>
            <td>5210td>
        tr>
        <tr>
            <td>申论td>
            <td>理论强化td>
            <td>62td>
            <td>3620td>
        tr>
    table>

4.表单标签

:表单的最外层容器

• （单标签）:标签用于手机用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框…（无嵌套规范）
  

<form action="./html/list.html">
    /*action作为下述文件的上传地址,提供了一个地址的作用*/
    <h2>输入框h2>
    <input type="text">
    <h2>密码框h2>
    <input type="password">
    <h2>复选框h2>
    <input type="checkbox">苹果
    <input type="checkbox">香蕉
    <input type="checkbox">葡萄
    <h2>单选框h2>
    <input type="radio" name="gender">是
    <input type="radio" name="gender">否
    /*利用name来告诉系统这两者是一个属性*/
    <h2>上传文件h2>
    <input type="file">
    <h2>提交和重置按钮h2>
    <input type="submit">
    <input type="reset">
  form>

• textarea:多行文本框

 <h2>多行文本框h2>
    <textarea cols="20" rows="20">textarea>

• /:下拉菜单

  <select>
      <option selected disabled>请选择option>
      <option>巧克力option>
      <option>菠萝蜜option>
      <option>苹果派option>
  select>
  <select size="2">
      <option>巧克力option>
      <option>菠萝蜜option>
      <option>苹果派option>
  select>
  <select multiple>
      <option>巧克力option>
      <option>菠萝蜜option>
      <option>苹果派option>
  select>
  

  

  • :辅助表单

  <h2>单选框h2>
  <input type="radio" name="gender" id="yes"><label for="yes">是label>
  
    <input type="radio" name="gender" id="no"><label for="no">否label>
  

  
  练习：

  <h4>设置密码：h4> <input type="password">
  <h4>真实姓名：h4><input type="text">
  <h4>性别：h4> 
  <input type="radio" name="gender">男
  <input type="radio" name="gender">女
  <h4>生日：h4>
  <select>
      <option selected disabled>请选择option>年
      <option>2020.01.23option>
  select>
  <select>
      <option selected disabled>--option>月
  select>
  <select>
      <option selected disabled>--option>日
  select>
  <h4>我现在：h4>
  <select>
      <option selected disabled>请选择身份option>(非常重要)
  select>
  <h4>验证码：h4> <input type="text">
  

  

  5.表格与表单的组合

  示例：

  <form action="">
          <table border="2" cellpadding="5">
              <tr>
                  <td rowspan="4">总体信息td>
                  <td colspan="2" align="center">用户注册td>
              tr>
              <tr>
                  <td>用户名：td>
                  <td>
                      <input type="text" placeholder="请输入用户名">
                  td>
              tr>
              <tr>
                  <td>密码：td>
                  <td>
                      <input type="password" placeholder="请输入密码">
                  td>
              tr>
              <tr>
                  <td align="center" colspan="2">
                      <input type="submit">
                      <input type="reset">
                  td>
                    
              tr>
          table>
      form>
  

  
  (表格一般写在表单内部，因为表单无嵌套要求，但表格有)

  6.

  与

  • （块）
    div全称为division，用来划分区域，类似于一个盒子，可以装段落、标题、图像等各种构成网页的元素。HTML中多数标签都可以嵌套在div中，div也可以嵌套多层div，将网页分割为不同的规划布局
  • (内联)
    用来修饰文字，
    和都是没有默认样式的，需要css配合才行
    

  <div>
          <h2> <a href="#">HTML 教程a>h2>
          <a href="#"><img src="images/1.png.PNG" alt="" weight="80" height="80">a>
           <p>
              现在开始学习 HTML!HTML 实例 学习100 个实例!使用我们的编辑器,HTML 测验!HTML...
          p>
          <a href="#">www.w3school.com.cn/html/ind.....a>
  
      div>
  

  

  7.css的基础语法

  格式：div{属性1：值1；属性2：值2} span{属性1：值1；属性2：值2}
  同时对多个不同块进行不同的样式修饰可以利用id属性

  单位：px–像素pixel、%–百分比（外容器–600px 当前容器50%–300px）

  基本样式：width、height、background-color

  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>Documenttitle>
      <style>
          div{width: 50px;height: 90px;background-color: rgb(174, 174, 227);}
          span{background: rgb(55, 225, 152);}
      style>
  head>
  <body>
      <div>俄罗斯方块div>
      <span>乐高玩具span>
  body>
  html>
  

  
  

  8.css样式的引入方式

  1. 内联（行间、行内）样式：在html标签上添加

     

     9.css中的颜色表示法

     • 单词表示法：red、blue
     • 十六进制表示法：#00000
     • rgb表示法：rgb（255,255,255）
       取值范围0~255
       获取颜色的工具：

     ​ 提取颜色的下载地址：https：//www.baidufe.com/fehelper

     ​ photoshop工具

     10.css背景样式

     ：背景颜色

     ：背景图片（css作用的区域的背景图，出了css作用区域则不显示）
     （背景默认地址）
     默认都会水平垂直均铺满
     ：背景图片的平铺方式
     repeat-x x轴平铺
     repeat-y y轴平铺
     no-repeat 不平铺
     repeat （默认值，全都平铺）

     ：背景图片的位置
     x y：number（px、%）
     单词： x：left、center、right
     y：top、center、bottom

     ：背景图随滚动条的移动方式
     scroll：默认值（背景位置按照当前元素进行偏移）背景动
     fiexd：背景位置按照浏览器进行偏移，（覆盖）背景不动

     
     
     
     

     视觉差的实现:通过background-attachment来实现

     scroll图片跟随滚动条滚动
     fixed图片不动

     11.css背景样式

     ：边框样式
     solid：实线
     dashed：虚线
     dotted：点线
     ：边框粗细
     px…
     ：边框颜色
     red、#0000…
     边框也可以针对某一条边特定设置：border-left/right/top/bottom-

     
     利用border属性实现三角形

     

     12.css文字样式

     ：字体类型
     英文字体：Arial，‘Time New Roman’
     中文字体：微软雅黑，宋体

     中文字体的英文名称：微软雅黑’Microsoft YaHei’
     宋体：SimSun
     英文字体只针对英文，但中文样式可以中英文字体两者都对应
     衬线体、非衬线体
     (设置多个字体：防止计算机没有部分字体;
     字体中出现空格时要用’'单引号引起来)

      <style>
             #div1{font-family: Arial;}
             #div2{font-family: 'Times New Roman';}
         style>
     head>
     <body>
         <div id="div1">我爱阅读div>
         <p>我爱阅读p>
         <div id="div1">I like readingdiv>
         <p>I like readingp>
         <div id="div2">我爱阅读div>
         <p>我爱阅读p>
         <div id="div2">I like readingdiv>
         <p>I like readingp>
     body>
     

     
     ：字体大小
     默认写法：px

     单词写法：
     注：字体大小一般为偶数
     ：字体粗细

     模式：正常–normal

     ​ 加粗–bold

     ​ 利用number（px）100_{500都是普通，600}900加粗

     ：字体样式

     正常：normal

     斜体：italic带有倾斜属性的字体可以设置

     ​ oblique没有倾斜属性的也可以设置倾斜操作

     color：字体颜色

     示例：

     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>Documenttitle>
         <style>
             #div1{font-family: 宋体;font-weight: 700;font-size: 18px;color: brown;}
             #div2{font-size: 16px;color: blueviolet;font-style: italic;}
             #div3{font-weight: bold;color: aqua;}
         style>
     head>
     <body>
         <div id="div1">
             <h1>喜羊羊与灰太狼h1>
         div>
         <div id="div2">
             <h2>主题介绍h2>
             <p>《喜羊羊与灰太狼》是由广东原创动力文化传播有限公司制作的原创动画系列作品，
                 以友情、搞笑、童话为主题。该动画以羊和狼两大族群间妙趣横生的故事为主线，
                 讲述了羊狼凭借友谊和热爱，共同保卫家园、完成梦想的励志故事。p>
         div>
         <div id="div3">
             <h2>内容梗概h2>
             <p>
             截至2022年7月,《喜羊羊与灰太狼》共播出作品37部2719集主线25部2042集、
             网络短剧12部677集、电影10部、舞台剧5部p>
         div>
     
     body>
     html>
     

     

     13.css段落样式

     ：文本装饰

     • 取值：下划线underline、删除线line-through、上划线overline、不添加任何装饰none
     • 添加多个：通过空格添加

     ：文本大小写（仅针对英文）

     • 取值：小写lowercase、大写uppercase、只针对首字母大写capitalize

     ：文本缩进

     • 首行缩进
     • em单位：相对单位

     ：文本对齐方式

     • left、right、center、justify（两端点对齐）

     ：定义行高
     

     • 定义：一行文字的高度，上边距和下边距相等
     • 默认：默认行高不是固定值，根据当前字体大小不断变化
     • 取值：number（px）|比例值跟文字大小成比例

     ：字之间的间距

     ：词之间的间距（针对英文）

     强行折行：针对英文和数字
     （非常强烈的折行）
     （没有那么强烈的折行，会产生一些空白区域）

     eg.

     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>Documenttitle>
         <style>
             h2{font-size: 20px;font-weight: bold;color: brown;text-align: center;}
             #div1{font-size: 18px;color: aqua;font-style: italic;text-indent: 2em;}
             #p1{color: blueviolet;text-align: justify;text-indent: 2em;line-height: 10px;}
             #p2{color: blue;text-decoration: underline;text-transform: capitalize;text-align: center;}
             #p3{text-indent:1em;text-align: left;text-transform: lowercase;
                 color: rgb(236, 142, 27);text-decoration: line-through;}
             #div2{width: 200px;px;height: 200px; word-break:break-all;
                 border-color: brown;border-width: 5px;border-style: solid;}
     
         style>
     head>
     <body>
         <h2>海蒂与爷爷h2>
         <div id="div1">基本信息div>
         <p id="p1">《海蒂和爷爷》是映欧嘉纳影业公司出品德国剧情电影，由阿兰·葛斯彭纳执导，
             佩特拉·比翁迪娜·沃尔普编剧，阿努克·斯特芬、伊莎贝尔·奥特曼、安娜·申斯等主演，
             该片于2015年12月10日在德国上映于2019年5月16日在中国内地上映
         p>
         <div id="div1">角色介绍div>
         <p id="p2">
             海蒂是个聪明伶俐，且具有乐观开朗的性情，心地善良的孩子。一岁时即失去双亲，
             因此到五岁之前都是由姨母照顾。由于姨母必须出外工作，
             便把她带至居于阿尔卑斯山的爷爷那里。
             在山上的生活让海蒂自由奔放的性格彻底散发，并和牧羊少年成了好朋友
         p>
         <div>影片评价div>
         <p id="p3">影片《海蒂和爷爷》中的故事在不同的空间场景中上演，
             阿尔卑斯山和法兰克福这两座不同的城市，分割成主人公所经历的两段不同的故事，
             而每一阶段发生的故事对应了年复一年的时光。
             空间与时间的循环不仅仅是小海蒂成长的标志，
          p>
          <div id="div2">
             aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
          div>
         body>
     html>
     

     

     14.css复合样式

     一个css属性只控制一种样式----单一样式

     一个css属性控制多种样式----复合样式

     （注意两者尽量不要混写，如果非要混写，一定要先写复合样式再写单一样式）

     复合写法是通过空格实现的，有的无关顺序，如background、border；有的有关顺序，如font（至少要有两个值size family ，顺序不可调换）

     size family必须按顺序放在最后

     weight style size family √

     style weight size family √

     weight style/line-height family √

     

     15.css选择器

     • idx选择器

     css：#elem{} ---- html：id=“elem”

     注：一个页面中，id值是唯一的；
     
     命名规范：字母 _ - 数字（命名的第一位不能是数字）

     "word">  (√)
     "wor_d"> (√)
     "wor-d"> (√)
     "word1"> (√)
     "2word"> (×)
     

     写法：

     驼峰写法：searchButton(小驼峰) SerchButton(大驼峰)searchSmallButton

     短线写法：search-small-button

     下划线写法：search_smaal_button

     • class选择器

       css: .elem{}----html: class=“elem”

     注：1.claas选择器可以复用

     ​ 2.可以添加多个class样式

     ​ 3. 多个样式的时候，样式的优先根据css中的顺序决定，而不是class属性中的顺序

     ​ 4.标签+类的写法等

  你可能感兴趣的:(前端,html,css,前端)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • ubuntu安装opencv最快的方法 Derek重名了
    最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • Java开发中，spring mvc 的线程怎么调用？ 小麦麦子 springmvc
    今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。 问题：     在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局
  • maven依赖范围 bitcarter maven
    1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包 2.compile 只有编译和打包时才会依赖 3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包 4.runtime 运行时依赖，编译不依赖 5.默认compile 依赖范围compile是支持传递的，test不支持传递 1.传递的意思是项目A，引用
  • Jaxb org.xml.sax.saxparseexception : premature end of file darrenzhu xmlprematureJAXB
    如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误： org.xml.sax.saxparseexception : premature end of file 很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In
  • CSS Specificity 周凡杨 html权重Specificitycss
      有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。     规则：   HTML标签的权重是1 Class 的权重是10 Id 的权重是100
  • java与servlet g21121 servlet
    servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。 下面是java官方网站上对servlet的介绍： java官网对于servlet的解释 写道 Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha
  • eclipse中安装maven插件 510888780 eclipsemaven
    1.首先去官网下载 Maven： http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 下载完成之后将其解压， 我将解压后的文件夹：apache-maven-3.2.3， 并将它放在 D:\tools目录下， 即 maven 最终的路径是：D:\tools\apache-mave
  • jpa@OneToOne关联关系 布衣凌宇 jpa
    Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。 Nruser实体类 //***************************************************************** @Entity @Table(name="nruser") @DynamicInsert @Dynam
  • 我的spring学习笔记11-Spring中关于声明式事务的配置 aijuans spring事务配置
    这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中
  • java 动态代理简单实现 antlove javahandlerproxydynamicservice
    dynamicproxy.service.HelloService package dynamicproxy.service; public interface HelloService { public void sayHello(); }   dynamicproxy.service.impl.HelloServiceImpl package dynamicp
  • JDBC连接数据库 百合不是茶 JDBC编程JAVA操作oracle数据库
             如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;   JDBC链接数据库的代码和固定写法;     1,加载oracle数据库的驱动;     &nb
  • 单例模式中的多线程分析 bijian1013 javathread多线程java多线程
    谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。 饿汉式： package com.bijian.study; public class Singleton { private Singleton() { } // 注意这是private 只供内部调用 private static
  • javascript读取和修改原型特别需要注意原型的读写不具有对等性 bijian1013 JavaScriptprototype
            对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有
  • 【持久化框架MyBatis3六】MyBatis3集成第三方DataSource bit1129 dataSource
    MyBatis内置了数据源的支持，如：   <environments default="development"> <environment id="development"> <transactionManager type="JDBC" /> <data
  • 我程序中用到的urldecode和base64decode,MD5 bitcarter cMD5base64decodeurldecode
    这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码： string Base64Decode(const char* Data,int DataByte,int& OutByte) { //解码表 const char DecodeTable[] = { 0, 0, 0, 0, 0, 0
  • 腾讯资深运维专家周小军：QQ与微信架构的惊天秘密 ronin47
    社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心
  • java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素 bylijinnan java
    public class MinOfShiftedArray { /** * Q69 旋转数组的最小元素 * 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。 */ publ
  • 看博客，应该是有方向的 Cb123456 反省看博客
    看博客，应该是有方向的:  我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.  我刚突然想到的:  1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。  2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.    为什么要写
  • [开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖 comsci 开源项目
         为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。       所以，为避免这种不确定性风险，我
  • 一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ） cwqcwqmax9 sql
    见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 Web翻页优化实例 提交时间: 2004-6-18 15:37:49      回复    发消息  环境： Linux ve
  • Hibernat and Ibatis dashuaifu Hibernateibatis
    Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi
  • 备份MYSQL脚本 dcj3sjt126com mysql
    #!/bin/sh # this shell to backup mysql #[email protected] (QQ:1413161683 DuChengJiu) _dbDir=/var/lib/mysql/ _today=`date +%w` _bakDir=/usr/backup/$_today [ ! -d $_bakDir ] && mkdir -p
  • iOS第三方开源库的吐槽和备忘 dcj3sjt126com ios
    转自 ibireme的博客   做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。   目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。   首先整理了一份 Github上排名靠
  • html wlwmanifest.xml eoems htmlxml
    所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。 步骤： 加入到function.php remove_action('wp_head', 'wp_generator'); //wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog remov
  • 浅谈Java定时器发展 hacksin java并发timer定时器
    java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。 Timer与ScheduleThreadPoolExecutor对比： 1.    Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列
  • 移动端页面侧边导航滑入效果 ini jqueryWebhtml5cssjavascirpt
    效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码： <!DOCTYPE html> <h
  • AspectJ+Javasist记录日志 kane_xie aspectjjavasist
    在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。   @Override public String get(String key) { // long start = System.currentTimeMillis(); // System.out.println("Be
  • redis学习笔记 MJC410621 redisNoSQL
    1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。 1，处理超大量的数据 2，运行在便宜的PC服务器集群上， 3，击碎了性能瓶颈。 1)对数据高并发读写。 2)对海量数据的高效率存储和访问。 3)对数据的高扩展性和高可用性。 redis支持的类型： Sring 类型 set name lijie get name lijie set na
  • 使用redis实现分布式锁 qifeifei
    在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：   public Long setnx(final byte[] key, final byte[] value) { checkIsInMulti(); client.setnx(key, value); ret
  • BI并非万能，中层业务管理报表要另辟蹊径 张老师的菜 大数据BI商业智能信息化
           BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。        BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有
  • 安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题 wudixiaotie function
    1.在~/.bashrc最后加入 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  2.重新启动terminal输入：   rvm use ruby-2.2.1 --default  把当前安装的ruby版本设为默
  按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
  首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

  版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

：定义表格标题

语义化标签:

：定义表头	：定义表格单元