陈莺莺呀
陈莺莺呀

HTML5基础-新增标签+新增属性+布局案例

html5中常用的结构标签

article 文章

header 头部

nav 导航

section 区域

aside 侧边栏

hgroup 区块的相关信息

figure 定义一组内容及标题

figcaption 定义figure元素的标题

footer 底部

dialog 对话框

使用习惯：

header/section/footer > aside/article/figure/hgroup/nav > div

 

 

embed可插入flash文件，但flash已经逐渐被淘汰，不建议使用

 

 

meter状态标签，可以定义电压

optimum是标准状态

low与high之间呈现绿色，其余呈现黄色

<meter value=”220” min=”20” max=”380” low=”200” high=”240” optimum=”220”>meter>

自动计算百分比

<meter value="0.75">75%meter>

有步长的进度条

<progress value="30" max="100">progress>

不断加载的进度条

<progress max="100">progress>

datalist为input定义下拉列表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>
<body>
    <input placeholder="请选择手机品牌" list="phoneList">
    <datalist id="phoneList">
        <option value="iphone">iphoneoption>
        <option value="samsung">samsungoption>
        <option value="huawei">huaweioption>
        <option value="oppo">oppooption>
        <option value="htc">htcoption>
    datalist>
body>
html>

HTML5基础-新增标签+新增属性+布局案例_第1张图片

 

 

details定义元素的详细内容，配合summary

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>
<body>
    <details>
        <summary>HTML5summary>
        <p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。 [1-2] p>
    details>
body>
html>

 

 

ruby和rt进行拼音的注释

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>
<body>
    我们来<ruby>夼<rt>kuangrt>ruby>一个话题
body>
html>

 

 

兼容浏览器的写法：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>
<body>
    我们来<ruby>夼<rp>(rp><rt>Kuangrt><rp>)rp>ruby>一个话题
body>
html>

mark黄色选中效果

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>
<body>
    <p>妈妈叫我回家的时候顺路买一盒<mark>牛奶mark>，需要很新鲜的那种。p>
body>
html>

 

 

output表单计算

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>
<body>
    <form oninput="sum.value=parseInt(num1.value)*parseInt(num2.value)">
        <input type="number" id="num1">*
        <input type="number" id="num2">=
        <output name="sum" for="num1 num2">output>
    form>
body>
html>

 

 

date pickers在移动端效果比较好

week兼容性不好

datetime兼容性不好，推荐用datetime-local

time用来设置时间（小时和分钟）；

month用来设置年和月；

date用来设置年月日；

datetime用来设置年月日和时间；

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>
<body>
    email:<input type="email" name="email"><br>
    url:<input type="url" name="url"><br>
    tel:<input type="tel" name="tel"><br>
    number:<input type="number" name="number"><br>

    date:<input type="date" name="date"><br>
    month:<input type="month" name="month"><br>
    week:<input type="week" name="week"><br>
    time:<input type="time" name="time"><br>
    datetime:<input type="datetime" name="datetime"><br>
    datetime-local:<input type="datetime-local" name="datetime-local"><br>

    range:<input type="range" name="range" min="1" max="10"><br>
    search:<input type="search" name="search"><br>
    color:<input type="color" name="color"><br>

body>
html>

HTML5基础-新增标签+新增属性+布局案例_第2张图片

 

 

autocomplete属性规定form或input域拥有自动完成功能，该属性适用于

标签和标签

autofocus自动获取焦点

multiple多选，适用于email和file，email中不同邮箱用,隔开

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
head>
<body>
    <form action="lesson2_1 autocomplete.html" autocomplete="on">
        <input type="text" name="text" autofocus="autofocus" placeholder="您好，请在这里输入您的用户名！"><br>
        <input type="email" name="email" autocomplete="off" multiple="multiple"><br>
        <input type="file" name="file" multiple="multiple"><br>
        <input type="submit">
    form>

body>
html>

HTML5基础-新增标签+新增属性+布局案例_第3张图片

 

 

标签中，sizes属性可以规定被链接资源的尺寸的大小

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
    <link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">
    <base href="http://localhost" target="_blank">
head>
<body>
body>
html>

script:

defer 页面已完成加载后再执行脚本

async 一旦脚本可用，则异步执行

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
    <script async="async" type="text/javascript" src="async.js">script>
    <script defer="defer" type="text/javascript" src="defer.js">script>
head>
<body>
body>
html>

ol有序列表倒序

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oltitle>
head>
<body>
<ol start="2" reversed="reversed">
    <li>Htmlli>
    <li>Html5li>
    <li>Cssli>
    <li>Css3li>
    <li>JavaScriptli>
ol>
body>
html>

HTML5基础-新增标签+新增属性+布局案例_第4张图片

 

 

html页面布局demo:

demo.html
----------------------------------------
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5title>
<link rel="stylesheet" href="style.css">
head>
<body>

    <header>
        <div class="container">
            <a href="index.html"><img src="images/logo.png">a>
            <nav>
                <a class="active" href="index.html">Homea>
                <a href="#">Coursea>
                <a href="#">Actuala>
                <a href="#">Plana>
                <a href="#">FAQa>
                <a href="#">Notesa>
            nav>
        div>
    header>
    <section class="banner">
        <ul>
            <li class="active"><img src="images/banner/banner1.jpg">li>
            <li class="left"><img src="images/banner/banner3.jpg">li>
            <li class="right"><img src="images/banner/banner2.jpg">li>
        ul>
    section>
    <section class="main">
        <aside>
            <h1>Recent <samp>Coursesamp>h1>
            <dl>
                <dt>Hyper Text Markup Languagedt>
                <dd><img src="images/Course/05_05.png">dd>
                <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.dd>
            dl>
            <dl>
                <dt>Cascading Style Sheetsdt>
                <dd><img src="images/Course/06_04.png">dd>
                <dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.dd>
            dl>
            <dl>
                <dt>JavaScriptdt>
                <dd><img src="images/Course/09_07.png">dd>
                <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.dd>
            dl>
            <dl>
                <dt>AngularJSdt>
                <dd><img src="images/Course/02_09.png">dd>
                <dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...dd>
            dl>
        aside>
        <article>
            <h1>Welcome to <samp>Massive Open Online Course!samp>h1>
            <p>We provide the latest knowledge to help you cope with the changing world!p>
            <img src="images/article.jpg">
            <p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.p>
            <p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.p>
        article>
    section>
    <footer>
        <div class="container">
            <p>Copyright © 2019 test.com All Rights Reserved.p>
            <span>
                <img src="images/icon/weichat.png">
                <img src="images/icon/sina.png">
                <img src="images/icon/qq.png">
            span>
        div>
    footer>
body>
html>
style.css
------------------------------------------

/* All tag */
* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }
a { text-decoration: none; }
ul { list-style: none; }

/* header */
header { position: relative; height: 80px; background: #000; }
header:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; content: ''; background: #d6d6d6; }
header > .container { position: relative; z-index: 1; width: 1200px; margin: 0 auto; }
header > .container > a { display: block; float: left; margin: 5px 25px; }
header > .container > nav { float: right; }

/* nav */
nav > a { font-size: 24px; line-height: 73px; display: block; float: left; width: 110px; height: 73px; text-align: center; color: #fff; }
nav > a:nth-child(1) { background: #433b90; }
nav > a:nth-child(2) { background: #017fcb; }
nav > a:nth-child(3) { background: #78b917; }
nav > a:nth-child(4) { background: #feb800; }
nav > a:nth-child(5) { background: #f27c01; }
nav > a:nth-child(6) { background: #d40112; }
nav > a:hover,
nav > a.active { padding-bottom: 7px; }

/* banner */
.banner { position: relative; background: #eaeaea; }
.banner:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
.banner > ul { position: relative; width: 1490px; height: 538px; margin: 0 auto; padding-top: 10px; }
.banner > ul > li { position: absolute; width: 610px; height: 300px; overflow: hidden; }
.banner > ul > li.active { z-index: 2; top: 37px; right: 0; left: 0; width: 960px; height: 460px; margin: auto; border: 1px solid #fff; box-shadow: 0 30px 140px 22px rgba(0, 0, 0, .35); }
.banner > ul > li.left { z-index: 1; top: 0; bottom: 0; left: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li.right { z-index: 1; top: 0; right: 0; bottom: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li > img { position: absolute; left: -30%; height: 100%; }

/* main */
.main { position: relative; width: 1200px; height: 473px; margin: 34px auto 0; }
.main h1 { font-size: 30px; font-weight: lighter; margin-bottom: 23px; }
.main h1 > samp { font-size: 30px; color: #7c7c7c; }
.main > aside { float: left; width: 450px; }
.main > aside > dl { position: relative; display: block; height: 74px; margin-bottom: 17px; }
.main > aside > dl > dt { position: absolute; top: -1px; left: 92px; font-size: 16px; font-weight: bold; line-height: 16px; text-decoration: underline; }
.main > aside > dl > dd:first-of-type { position: absolute; left: 0; }
.main > aside > dl > dd:last-of-type { position: absolute; top: 20px; left: 90px; }
.main > article { float: right; width: 720px; overflow: hidden; }
.main > article > p,
.main > article > img { margin-bottom: 20px; }

/* footer */
footer { position: relative; background: #000; }
footer:before { position: absolute; z-index: -1; top: -6px; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
footer > .container { width: 1200px; height: 64px; margin: 0 auto; }
footer > .container > p { line-height: 64px; float: left; color: #fff; }
footer > .container > span { float: right; margin: 14px 40px; }
footer > .container > span > img { margin-left: 4px; opacity: .7; }
footer > .container > span > img:hover { opacity: 1; cursor: pointer; }

HTML5基础-新增标签+新增属性+布局案例_第5张图片

 

 

html页面布局demo2:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htmltitle>
    <link rel="stylesheet" href="demo.css">
head>
<body>
    <table id="outer-table">
        
        <thead>
            <tr>
                <td><img src="img/logo.png" alt="logo">td>
            tr>
        thead>
        
        <tbody>
            <tr>
                <td>    
                    <table>
                        <tr>
                            
                            <td width="12%">
                                <p class="left-p">
                                    <span>商品管理span><br>
                                    <span>评价管理span><br>
                                    <span>咨询管理span><br><br><br>
                                    <span><b>全部订单b>span><br>
                                    <span>已完成订单span><br>
                                    <span>待处理订单span><br>
                                    <span>今日物流span><br><br><br>
                                    <span>月考核span><br>
                                    <span>季度考核span><br>
                                    <span>年度考核span><br>
                                p>
                            td>
                            
                            <td width="88%">
                                <table class="inner-table">
                                    <tr>
                                        <td><span>全部订单span>td>
                                    tr>
                                table>
                                <table class="inner-table">
                                    <tr>
                                        <td>
                                            <span>
                                                查询：
                                                <input type="date">至
                                                <input type="date">
                                            span>
                                        td>
                                    tr>
                                table>
                                <table id="order" class="inner-table" rules="all">
                                    <tr>
                                        <td colspan="2">宝贝信息td>
                                        <td>订单数量td>
                                        <td>单价td>
                                        <td>买家td>
                                        <td>下单时间td>
                                        <td>实付款td>
                                        <td>订单操作td>
                                    tr>
                                    <tr>
                                        <td><img src="img/txue.png">td>
                                        <td>2019新款个性男女潮牌&暮春之行文化衫td>
                                        <td>2td>
                                        <td>120td>
                                        <td>小明td>
                                        <td>2019-2-21 21:54td>
                                        <td>240td>
                                        <td>待付款td>
                                    tr>
                                    <tr>
                                        <td><img src="img/txue.png">td>
                                        <td>2019新款个性男女潮牌&暮春之行文化衫td>
                                        <td>2td>
                                        <td>120td>
                                        <td>小明td>
                                        <td>2019-2-21 21:54td>
                                        <td>240td>
                                        <td>待付款td>
                                    tr>
                                    <tr>
                                        <td><img src="img/txue.png">td>
                                        <td>2019新款个性男女潮牌&暮春之行文化衫td>
                                        <td>2td>
                                        <td>120td>
                                        <td>小明td>
                                        <td>2019-2-21 21:54td>
                                        <td>240td>
                                        <td>待付款td>
                                    tr>
                                    <tr>
                                        <td><img src="img/txue.png">td>
                                        <td>2019新款个性男女潮牌&暮春之行文化衫td>
                                        <td>2td>
                                        <td>120td>
                                        <td>小明td>
                                        <td>2019-2-21 21:54td>
                                        <td>240td>
                                        <td>待付款td>
                                    tr>
                                    <tr>
                                        <td><img src="img/txue.png">td>
                                        <td>2019新款个性男女潮牌&暮春之行文化衫td>
                                        <td>2td>
                                        <td>120td>
                                        <td>小明td>
                                        <td>2019-2-21 21:54td>
                                        <td>240td>
                                        <td>待付款td>
                                    tr>
                                    <tr>
                                        <td><img src="img/txue.png">td>
                                        <td>2019新款个性男女潮牌&暮春之行文化衫td>
                                        <td>2td>
                                        <td>120td>
                                        <td>小明td>
                                        <td>2019-2-21 21:54td>
                                        <td>240td>
                                        <td>待付款td>
                                    tr>
                                    <tr>
                                        <td><img src="img/txue.png">td>
                                        <td>2019新款个性男女潮牌&暮春之行文化衫td>
                                        <td>2td>
                                        <td>120td>
                                        <td>小明td>
                                        <td>2019-2-21 21:54td>
                                        <td>240td>
                                        <td>待付款td>
                                    tr>
                                table>
                            td>
                        tr>
                    table>
                td>
            tr>
        tbody>
        
        <tfoot>
            <tr>
                <td><span>2019-12-29 ©test.comspan>td>
            tr>
        tfoot>
    table>
body>
html>
demo.css
-----------------------------------

*{margin:0;padding:0;}
table{width:100%;background-color: #fff;}
#outer-table{background-color: #abcdef;}
#outer-table tfoot td{text-align:center;height:50px;line-height: 50px;}
#outer-table img{width: 150px;margin-left: 10px;}
.left-p{margin-left:10px;margin-top:-250px;}
.left-p span{line-height:2em;}
.inner-table{border:2px solid #ccc;}
.inner-table tr td{padding:10px;}
#order tr td{text-align:center;}
#order tr td img{width:50px;}

HTML5基础-新增标签+新增属性+布局案例_第6张图片

你可能感兴趣的:(HTML5基础-新增标签+新增属性+布局案例)

  • Golang可选参数实践 yzh_1346983557 golang可选参数
    背景：go不支持类似java的方法重载，但对于函数的可选参数和默认参数配置，通常要在不影响不破坏现有逻辑基础上进行参数的添加。实现：通过options选项，使用函数进行参数的初始化和可选值的设置。代码：packagemainimport"fmt"//go实现可选参数实践//背景：go不支持方法重载，但对于函数的可选参数和默认参数配置，通常要在不影响不破坏现有逻辑基础上进行参数的添加//实现：通过o
  • 知识图谱系列文章——文物知识图谱 weixin_43407382 知识图谱
    文章介绍背景1、文物可以提供创意，如哥窑面饰的照相机2、目前文物数字化工作非常少，没有纳入设计元素3、文物知识图谱建成后具有很多好处&#￥方法一、本体构建1、明确领域和目的——文物知识图谱&设计创意2、领域信息采集与分析——文物信息，３４０件文物实例，3、定义文物本体概念和结构层次4、定义概念属性和属性约束5、本体编码（建模语言和工具）6、本体评估——Jena的内嵌推理机，基于描述的逻辑7、本体实
  • 【MySQL基础-10】MySQL中的LENGTH()函数：用法详解与实例分析 AllenBright #MySQLmysql数据库
    在MySQL数据库中，LENGTH()函数是一个非常常用的字符串函数，用于计算字符串的字节长度。理解并掌握LENGTH()函数的用法，对于处理字符串数据、优化查询以及进行数据验证都非常有帮助。本文将详细介绍LENGTH()函数的用法，并通过实例演示其在实际中的应用。1.LENGTH()函数的基本语法LENGTH()函数的基本语法如下：LENGTH(str)str：要计算长度的字符串或字段。可以是字
  • 自动化配置管理工具 SaltStack-03 Mr.Ron linux自动化服务器运维
    一、Jinja模板应用案例1、需求描述给之前通过saltstack安装好的lamp环境的apache修改配置文件，要求每个主机监听自己ip的80端口。2、实现思路如果通过单纯的修改配置文件根本无法实现，所以我们需要用到模板，将配置文件作为模板，通过定义模板中的变量来实现，并且需要引用grians参数。#编辑state配置文件[root@server~]#vim/srv/salt/prod/apac
  • Linux进程间通信：消息队列与msgget函数使用详解 无形小手
    本文还有配套的精品资源，点击获取简介：本文深入介绍了Linux消息队列的创建和操作方法，包括msgget()、msgsnd()和msgrcv()三个核心函数。介绍了通过消息队列实现进程间通信的基础实验步骤和关键要点，如键值计算、消息发送和接收，以及进程间通信时常见的权限控制、消息顺序、类型匹配和同步问题。通过学习这些内容，开发者能够更好地理解和掌握如何在项目中实现高效的进程间通信。1.Linux消
  • 桥接模式 (Bridge Pattern) 直隶码农 二十三种设计模式桥接模式c++设计模式
    桥接模式(BridgePattern)是一种结构型设计模式，它将抽象部分与实现部分分离，使它们可以独立变化。一、基础1意图将抽象部分与实现部分分离，使它们可以独立变化。2适用场景当你不希望在抽象和实现部分之间有固定的绑定关系时。当类的抽象以及它的实现都应该可以通过生成子类的方法加以扩充时。当对一个抽象的实现部分的修改应对客户不产生影响时。当你想对客户完全隐藏抽象的实现部分时。当你有许多类要生成的类
  • 原型模式 (Prototype Pattern) 直隶码农 二十三种设计模式原型模式c++设计模式
    原型模式(PrototypePattern)是一种创建型设计模式，它通过复制现有对象来创建新对象，而不是通过实例化类。一、基础1意图通过复制现有对象来创建新对象，而不是通过实例化类。2适用场景当一个系统应该独立于它的产品创建、构成和表示时。当要实例化的类是在运行时指定时，例如通过动态装载。为了避免创建一个与产品类层次平行的工厂类层次时。当一个类的实例只能有几个不同状态组合中的一种时，建立相应数目的
  • 适配器模式 (Adapter Pattern) 直隶码农 二十三种设计模式适配器模式c++设计模式
    适配器模式(AdapterPattern)是一种结构型设计模式，它将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的类可以一起工作。在现实生活中，适配器的例子随处可见，比如电源适配器，它将不同电压的电流转换为设备所需的电压，确保设备能正常工作。在软件开发中，当我们需要复用一些现有的类，但这些类的接口与我们当前系统的接口不兼容时，适配器模式就派上用场了。一、基础1意图
  • Linux系统安全加固基础 linux言叙 Linux安全系统加固linuxcentos运维
    注：建议在修改相关配置文件时，首先对需要修改文件进行备份。1、ssh远程连接vi/etc/sshd/sshd_configPort65531#修改ssh端口，默认22ListenAddress192.168.1.X#允许ssh登录的IP地址PermitRootLoginno#禁止root通过ssh连接）[email protected].*#允许用户test从IP为192.168.1
  • 基于腾讯云大模型知识引擎与DeepSeek的沉浸式历史文化体验系统实践 lijiek 腾讯云microsoft云计算
    前言文化遗产数字化保护与传播是当今科技与人文交汇的重要领域。传统的数字化方法往往局限于静态展示，无法实现真正的互动体验。本文将探索一条创新路径：利用腾讯云大模型知识引擎(LKE)与DeepSeek模型构建沉浸式历史文化体验系统，实现与历史人物的"对话"、历史场景的"复原"，以及文化知识的智能传播。作为实践案例，我们以中国古代科技成就为切入点，打造了一个可交互的"古代科技馆"，让用户能够与张衡、祖冲
  • C++ XML文件和解析 RangoLei_Lzs C++前端服务器xmlc++
    XML（可扩展标记语言）是一种用于存储和传输数据的标记语言。它具有自描述性和平台无关性的特点。XML文档的格式主要由一组嵌套的元素和属性构成，结构清晰，易于理解和解析。XML文档的基本格式一个XML文档通常包括以下部分：XML声明：标识文档和版本信息。根元素：整个XML文档只能有一个根元素，所有其他元素必须嵌套在根元素内。元素：具有开始标签和结束标签，可以嵌套其他元素。属性：为元素提供额外的信息。
  • 第十五章:模板参数推导_《C++ Templates》notes 郭涤生 c/c++c++windows开发语言
    模板参数推导第十五章核心知识点概览多选题设计题测试用例总结第十五章核心知识点概览模板参数推导基础引用折叠与完美转发SFINAE原则C++17类模板参数推导auto和decltype(auto)的推导规则模板参数推导基础知识点：函数模板参数通过调用时的实参类型推导数组/函数类型退化为指针引用类型不触发退化默认参数不参与推导代码示例：#include#includetemplatevoiddeduce
  • 【XML协议】轻松掌握使用C++ XML解析库——pugixml XYY_CN C++入坑xmlc++
    文章介绍了xml协议的组成以及C++xml解析库pugixml的常用操作。源于开发中每次遇到xml操作时，都要回过头查看pugixml库常用操作时什么样的，能不能有个更深刻和清晰的认识呢？其实搞清楚xml结构和pugixml组织结构的对照关系，以及pugixml中节点、属性的增删改查逻辑，可以帮助我们快速回忆起这些东西。遂，本文留作查询使用。XML协议XML(ExtensibleMarkupLan
  • 一年狂揽270亿新订单，德赛西威开启「狂飙」模式 高工智能汽车 人工智能
    德赛西威在汽车智能网联产业的龙头地位还在进一步稳固，这从其刚刚公布的2024年年报中可见一斑。2024年，德赛西威实现营业收入276.18亿元，同比增长26.06%，归属于上市公司股东的净利润20.05亿元，同比增长29.62%。综合来看，德赛西威的多项核心业务在2024年均显示了强劲的增长势头，尤其是智能座舱和智能驾驶业务凭借产品迭代升级，在客户新增与市场渗透率方面持续攀升，此外海外业务成长为新
  • 零基础上手Python数据分析 (7)：Python 面向对象编程初步 kakaZhui python数据分析excel
    写在前面回顾一下，我们已经学习了Python的基本语法、数据类型、常用数据结构和文件操作、异常处理等。到目前为止，我们主要采用的是面向过程(ProceduralProgramming)的编程方式，即按照步骤一步一步地编写代码，解决问题。这种方式对于简单的任务已经足够，但当程序变得越来越复杂，代码量越来越大时，面向过程编程可能会显得力不从心，代码难以组织、复用和维护。代码复杂性带来的挑战：面向过程v
  • Git使用 从入门到入土 收藏吃灰系列 (十三) git stash、git check-pick、git tag、git diff 张时贰 Git&原理&指令学习gitgithub
    文章目录一、前言二、gitstash存储到堆栈三、Gittag标签四、gitcherry-pick挑选合并五、gitdiff本节速览gitstash堆栈gittag标签gitcherry-pick挑选合并gitdiff比较信息差异本节开始都是一些不怎么用的命令,或者一些使用技巧,了解即可一、前言参考安装Git详细安装教程参考视频B站Git最新教程通俗易懂，这个有点长，感觉讲的精华不多参考视频『Gi
  • Python 数据分析实战：跨境电商行业发展解析 萧十一郎@ pythonpython数据分析开发语言
    目录一、案例背景二、代码实现2.1数据收集2.2数据探索性分析2.3数据清洗2.4数据分析2.4.1跨境电商消费者地域分布分析2.4.2跨境电商商品销售与价格关系分析2.4.3跨境电商行业未来发展预测三、主要的代码难点解析3.1数据收集3.2数据清洗-销售数据处理3.3数据分析-跨境电商消费者地域分布分析3.4数据分析-跨境电商商品销售与价格关系分析3.5数据可视化四、可能改进的代码4.1数据收集
  • Spring Boot中定时任务Cron表达式的终极指南 智能编织者 springboot后端java
    SpringBoot中定时任务Cron表达式的终极指南一、Cron表达式基础二、SpringBoot中定时任务的实现三、Cron表达式高级用法四、调试与验证技巧五、常见问题与解决方案六、最佳实践总结定时任务是后端开发中实现周期性业务逻辑的核心技术之一。在SpringBoot生态中，结合@Scheduled注解和Quartz调度框架，开发者可以轻松实现复杂的定时任务。然而，Cron表达式作为定时任务
  • 【以太网RDMA网卡功能分析和网卡架构】 中古传奇 IC每日一题RDMA架构
    2以太网RDMA网卡功能分析和网卡架构【博客首发于微信公众号《漫谈芯片与编程》，欢迎专注一下，多谢大家】标准以太网卡只具备物理层串并转换、数据链路层以太网帧头封装和解析、DMA等功能，无法支持RDMA的通信原语和传输方式等，因此需要专用的以太网RDMA网卡在兼容标准以太网卡功能的基础上增加对RDMA功能的支持；对于RDMA通信原语，如应用程序下发的WRITE请求，网卡需要DMA从用户空间中取出要写
  • 二十二.基于国民MCU 的COMP模块的比较案例 悟空胆好小 国民MCUmcu单片机stm32
    二十二.基于国民MCU的COMP模块的比较案例文章目录二十二.基于国民MCU的COMP模块的比较案例0.总体功能概述1.相关开发环境2.比较器介绍2.1比较器应用之窗口模式2.2比较器应用之独立比较，生成打断信号生成2.3比较器应用之独立比较，BLANK特性3.COMP硬件独立比较案例3.1比较器输入VREF硬件连接3.2配置COMP4.总结5.参考5.参考0.总体功能概述2、端口配置：PB10选
  • 数据同步基本原理及工作机制 合作愉快：） 数据库网络oracle
    一、数据同步的基本原理数据同步的基本原理是将源数据和目标数据进行比较，并将差异部分进行复制或更新，以达到数据一致性的目的。这个过程通常涉及以下关键步骤：数据的识别：首先需要确定哪些数据需要进行同步，以及源数据和目标数据的对应关系。这是数据同步的起点，也是确保数据准确性和一致性的基础。数据的复制：在确定了需要同步的数据后，接下来就是将源数据复制到目标位置。这个过程中，可以使用增量复制、全量复制或增量
  • 通过Bokeh实现大规模数据可视化的最佳实践【从静态图表到实时更新】 步入烟尘 算法指南信息可视化Bokehpython
    本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以
  • 达梦数据库学习之旅 不是，哥们~ 数据库学习
    一、开篇：走进达梦数据库的世界在当今数字化浪潮汹涌澎湃的时代，数据已然成为企业乃至国家发展的核心驱动力，而数据库作为数据存储、管理与高效运用的关键基础设施，其重要性不言而喻。达梦数据库，作为国产数据库领域的璀璨明珠，正凭借其卓越性能、高度可靠性以及强大的自主可控特性，在金融、电信、政务等诸多关键行业崭露头角，逐步打破国外数据库产品长期以来的垄断格局。对于广大技术爱好者与从业者而言，深入学习达梦数据
  • 芯片的未来发展趋势 iccnewer
    2024年，该行业将专注于AI/ML、RISC-V、量子、安全等发展趋势。今年年初，大多数人从未听说过生成式人工智能。现在整个世界都在竞相利用它，而这仅仅是个开始。量子计算、6G、智能基础设施等新市场领域专用处理正在加速对更快、更高效、更多数据的需求。与每隔几年等待下一个工艺节点的日子相比，未来几年的事件将与电话或汽车的引入一样重要。但可能不会只有一种创新技术，将会有很多技术一起以一种将让科技界惊
  • 官宣 | Fluss 0.6 发布公告 Apache Flink flink大数据
    Fluss社区很高兴地宣布Fluss0.6.0版本正式发布。这一版本历时3个多月的密集开发，凝聚了全球45位贡献者的智慧与努力，累计完成200+次代码提交。衷心感谢每一位贡献者的支持！此次版本的发布带来了诸多功能亮点：列压缩：保留列裁剪性能的同时，降低6倍存储空间！MergeEngine：新增灵活的主键数据合并策略，满足不同的实时处理场景需求。PrefixLookup：DeltaJoin功能，Fl
  • Spring Boot 中的 @ConditionalOnBean 注解详解 weixin_44563169 springbootjava后端
    SpringBoot中的@ConditionalOnBean注解详解1.前言2.`@ConditionalOnBean`作用与基本用法2.1`@ConditionalOnBean`的作用2.2基本用法示例：当`DataSource`Bean存在时，才创建`MyService`Bean3.`@ConditionalOnBean`详解3.1`value`和`type`属性（指定Bean类型）3.2`n
  • 判断html标签是否存在,jquery怎么判断标签元素是否存在？ BugHunter666 判断html标签是否存在
    jquery怎么判断标签元素是否存在？下面本篇文章给大家介绍一下在jquery中判断页面标签元素是否存在的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。jquery判断页面标签元素是否存在在传统的Javascript里，当我们对某个页面元素进行某种操作前，最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。例如：document.getElementBy
  • python列表操作计算列表长度并输出,Python基础2：列表 想吃草莓干
    一、列表列表是按照特定顺序的排列组合，就像数学中的数列，列表中的元素具有⼀定的排列顺序。在Python中，列表用方括号[]来表示列表，比如：>>>a=['Python','C','Java']1、访问列表中的元素索引开始：0如果我们想要打印上述列表中Python，就需要我们访问列表中第一个元素，在Python中，列表的访问从0开始，索引数为元素的位置减去1，访问的元素位置放在方括号里面，如果我们想
  • 静态html 500错误,HTTP-500错误 金门走狗 静态html500错误
    http500内部服务器(HTTP-InternalServerError)错误说明IIS服务器无法解析ASP代码，访问一个静态页面试试是否也出现这个问题，如果访问静态页面没问题，那就要分以下几种情况来分析了：①你是否改变过计算机名称。②站点所在的文件目录是否自定义了安全属性。③安装了域控制器后是否调整了域策略。如果是其中的一种情况，请一一将改变的参数设置回来看是否解决问题。如果静态空间也无法访问
  • oracle数据库——游标 隐式游标 显式游标 带参数的游标 带锁的游标 动态游标 强类型 一JJL 数据库游标隐式游标显式游标带参数的游标带锁的游标动态游标强类型
    游标逐行提取查询结果，所以返回结果可以超过一行%NOTFOUND--如果FETCH语句失败，则该属性为"TRUE"，否则为"FALSE";%FOUND--如果FETCH语句成功，则该属性为"TRUE"，否则为"FALSE";%ROWCOUNT--返回游标当前行的行数;1.隐式游标--查看修改数据后会影响到多少行数据beginupdateempsetsal=sal+100wheredeptno=&d
  • 怎么样才能成为专业的程序员？ cocos2d-x小菜 编程PHP
      如何要想成为一名专业的程序员？仅仅会写代码是不够的。从团队合作去解决问题到版本控制，你还得具备其他关键技能的工具包。当我们询问相关的专业开发人员，那些必备的关键技能都是什么的时候，下面是我们了解到的情况。   关于如何学习代码，各种声音很多，然后很多人就被误导为成为专业开发人员懂得一门编程语言就够了？！呵呵，就像其他工作一样，光会一个技能那是远远不够的。如果你想要成为
  • java web开发 高并发处理 BreakingBad javaWeb并发开发处理高
    java处理高并发高负载类网站中数据库的设计方法（java教程,java处理大量数据，java高负载数据） 一：高并发高负载类网站关注点之数据库 没错,首先是数据库,这是大多数应用所面临的首个SPOF。尤其是Web2.0的应用，数据库的响应是首先要解决的。 一般来说MySQL是最常用的，可能最初是一个mysql主机，当数据增加到100万以上，那么，MySQL的效能急剧下降。常用的优化措施是M-S（
  • mysql批量更新 ekian mysql
    mysql更新优化： 一版的更新的话都是采用update set的方式，但是如果需要批量更新的话，只能for循环的执行更新。或者采用executeBatch的方式，执行更新。无论哪种方式，性能都不见得多好。 三千多条的更新，需要3分多钟。 查询了批量更新的优化，有说replace into的方式，即： replace into tableName(id,status) values
  • 微软BI（3） 18289753290 微软BI SSIS
    1) Q：该列违反了完整性约束错误；已获得 OLE DB 记录。源:“Microsoft SQL Server Native Client 11.0” Hresult: 0x80004005 说明:“不能将值 NULL 插入列 'FZCHID'，表 'JRB_EnterpriseCredit.dbo.QYFZCH'；列不允许有 Null 值。INSERT 失败。”。 A：一般这类问题的存在是
  • Java中的List g21121 java
            List是一个有序的 collection（也称为序列）。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引（在列表中的位置）访问元素，并搜索列表中的元素。         与 set 不同，列表通常允许重复
  • 读书笔记 永夜-极光 读书笔记
       1.  K是一家加工厂,需要采购原材料,有A,B,C,D 4家供应商,其中A给出的价格最低,性价比最高,那么假如你是这家企业的采购经理,你会如何决策?          传统决策: A:100%订单  B,C,D:0%     &nbs
  • centos 安装 Codeblocks 随便小屋 codeblocks
    1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可yum install gccyum install gcc-c++   2.安装gtk2-devel,因为默认已经安装了正式产品需要的支持库,但是没有安装开发所需要的文档.yum install gtk2* 3. 安装wxGTK    yum search w
  • 23种设计模式的形象比喻 aijuans 设计模式
    1、ABSTRACT FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 　　工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：
  • 开发管理 CheckLists aoyouzi 开发管理 CheckLists
    开发管理 CheckLists(23) -使项目组度过完整的生命周期 开发管理 CheckLists(22) -组织项目资源 开发管理 CheckLists(21) -控制项目的范围开发管理 CheckLists(20) -项目利益相关者责任开发管理 CheckLists(19) -选择合适的团队成员开发管理 CheckLists(18) -敏捷开发 Scrum Master 工作开发管理 C
  • js实现切换 百合不是茶 JavaScript栏目切换
    js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示   代码实现:   html代码: <di
  • 周鸿祎在360新员工入职培训上的讲话 bijian1013 感悟项目管理人生职场
            这篇文章也是最近偶尔看到的，考虑到原博客发布者可能将其删除等原因，也更方便个人查找，特将原文拷贝再发布的。“学东西是为自己的，不要整天以混的姿态来跟公司博弈，就算是混，我觉得你要是能在混的时间里，收获一些别的有利于人生发展的东西，也是不错的，看你怎么把握了”，看了之后，对这句话记忆犹新。  &
  • 前端Web开发的页面效果 Bill_chen htmlWebMicrosoft
    1.IE6下png图片的透明显示： <img src="图片地址" border="0" style="Filter.Alpha(Opacity)=数值(100),style=数值(3)"/> 或在<head></head>间加一段JS代码让透明png图片正常显示。 2.<li>标
  • 【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC) bit1129 垃圾回收
      CMS概述 并发标记清理垃圾回收(Concurrent Mark and Sweep GC）算法的主要目标是在GC过程中，减少暂停用户线程的次数以及在不得不暂停用户线程的请夸功能，尽可能短的暂停用户线程的时间。这对于交互式应用，比如web应用来说，是非常重要的。   CMS垃圾回收针对新生代和老年代采用不同的策略。相比同吞吐量垃圾回收，它要复杂的多。吞吐量垃圾回收在执
  • Struts2技术总结 白糖_ struts2
      必备jar文件 早在struts2.0.*的时候，struts2的必备jar包需要如下几个： commons-logging-*.jar   Apache旗下commons项目的log日志包 freemarker-*.jar          
  • Jquery easyui layout应用注意事项 bozch jquery浏览器easyuilayout
    在jquery easyui中提供了easyui-layout布局，他的布局比较局限，类似java中GUI的border布局。下面对其使用注意事项作简要介绍：      如果在现有的工程中前台界面均应用了jquery easyui，那么在布局的时候最好应用jquery eaysui的layout布局，否则在表单页面（编辑、查看、添加等等）在不同的浏览器会出
  • java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ bylijinnan java
    public class CopySpecialLinkedList { /** * 题目：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ 拷贝pNext指针非常容易，所以题目的难点是如何拷贝pRand指针。 假设原来链表为A1 -> A2 ->... -> An，新拷贝
  • color Chen.H JavaScripthtmlcss
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">    <HTML>    <HEAD>&nbs
  • [信息与战争]移动通讯与网络 comsci 网络
          两个坚持:手机的电池必须可以取下来                光纤不能够入户,只能够到楼宇       建议大家找这本书看看:<&
  • oracle flashback query(闪回查询) daizj oracleflashback queryflashback table
    在Oracle 10g中，Flash back家族分为以下成员： Flashback Database Flashback Drop Flashback Table Flashback Query(分Flashback Query,Flashback Version Query，Flashback Transaction Query) 下面介绍一下Flashback Drop 和Flas
  • zeus持久层DAO单元测试 deng520159 单元测试
    zeus代码测试正紧张进行中,但由于工作比较忙,但速度比较慢.现在已经完成读写分离单元测试了,现在把几种情况单元测试的例子发出来,希望有人能进出意见,让它走下去. 本文是zeus的dao单元测试: 1.单元测试直接上代码   package com.dengliang.zeus.webdemo.test; import org.junit.Test; import o
  • C语言学习三printf函数和scanf函数学习 dcj3sjt126com cprintfscanflanguage
    printf函数 /* 2013年3月10日20:42:32 地点：北京潘家园 功能： 目的： 测试%x %X %#x %#X的用法 */ # include <stdio.h> int main(void) { printf("哈哈！\n"); // \n表示换行 int i = 10; printf
  • 那你为什么小时候不好好读书? dcj3sjt126com life
    dady, 我今天捡到了十块钱, 不过我还给那个人了 good girl! 那个人有没有和你讲thank you啊 没有啦....他拉我的耳朵我才把钱还给他的, 他哪里会和我讲thank you   爸爸, 如果地上有一张5块一张10块你拿哪一张呢.... 当然是拿十块的咯... 爸爸你很笨的, 你不会两张都拿   爸爸为什么上个月那个人来跟你讨钱, 你告诉他没
  • iptables开放端口 Fanyucai linuxiptables端口
    1，找到配置文件 vi /etc/sysconfig/iptables   2，添加端口开放，增加一行，开放18081端口 -A INPUT -m state --state NEW -m tcp -p tcp --dport 18081 -j ACCEPT   3，保存 ESC :wq!   4，重启服务 service iptables
  • Ehcache（05）——缓存的查询 234390216 排序ehcache统计query
    缓存的查询 目录 1.    使Cache可查询 1.1     基于Xml配置 1.2     基于代码的配置 2     指定可搜索的属性 2.1     可查询属性类型 2.2 &
  • 通过hashset找到数组中重复的元素 jackyrong hashset
      如何在hashset中快速找到重复的元素呢?方法很多，下面是其中一个办法： int[] array = {1,1,2,3,4,5,6,7,8,8}; Set<Integer> set = new HashSet<Integer>(); for(int i = 0
  • 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL lanrikey history
    后退时关闭当前页面 <script type="text/javascript"> jQuery(document).ready(function ($) {         if (window.history && window.history.pushState) {
  • 应用程序的通信成本 netkiller.github.com 虚拟机应用服务器陈景峰netkillerneo
    应用程序的通信成本 什么是通信 一个程序中两个以上功能相互传递信号或数据叫做通信。 什么是成本 这是是指时间成本与空间成本。 时间就是传递数据所花费的时间。空间是指传递过程耗费容量大小。 都有哪些通信方式 全局变量 线程间通信 共享内存 共享文件 管道 Socket 硬件（串口，USB） 等等 全局变量 全局变量是成本最低通信方法，通过设置
  • 一维数组与二维数组的声明与定义 恋洁e生 二维数组一维数组定义声明初始化
    /**  *  */ package test20111005; /**  * @author FlyingFire  * @date:2011-11-18 上午04:33:36  * @author ：代码整理  * @introduce :一维数组与二维数组的初始化  *summary：  */ public c
  • Spring Mybatis独立事务配置 toknowme mybatis
    在项目中有很多地方会使用到独立事务，下面以获取主键为例   （1）修改配置文件spring-mybatis.xml  <!-- 开启事务支持 -->  <tx:annotation-driven transaction-manager="transactionManager" />   &n
  • 更新Anadroid SDK Tooks之后，Eclipse提示No update were found xp9802 eclipse
    使用Android SDK Manager 更新了Anadroid SDK Tooks 之后， 打开eclipse提示 This Android SDK requires Android Developer Toolkit version 23.0.0 or above, 点击Check for Updates  检测一会后提示 No update were found 
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他