陈莺莺呀
陈莺莺呀

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基础-新增标签+新增属性+布局案例)

  • ROS2软件架构全面解析-学习如何设计通信中间件框架 chinamaoge ROS2DDS通信中间件ROS2ROS通信中间件
    前言ROS（RobotOperatingSystem）2是一个用于开发机器人应用的软件平台，也称为机器人软件开发工具包(SDK)。ROS2是ROS1的迭代升级版本，最主要的升级点是引入DDS（DataDistributionService）为基础的底层通信系统。为解决ROS1存在主要几个缺陷：为解决一个主节点通信故障(ROSMaster)，需要对所有现有的Client库进行单独的补丁处理，并且每个
  • 【信息学奥赛一本通 C++题解】1286：怪盗基德的滑翔翼 信奥大黄 信息学奥赛一本通c++算法
    信息学奥赛一本通（C++版）在线评测系统基础算法第一节动态规划的基本模型1286：怪盗基德的滑翔翼1.理解题意同学们，我们一起来看怪盗基德遇到的这个有趣问题哦。怪盗基德成功偷到了钻石，可倒霉的是他的滑翔翼动力装置被柯南破坏了。现在他在一个城市里，这个城市有一排建筑，一共有N幢，而且每幢建筑的高度都不一样呢。基德可以从这一排建筑中的任意一幢的顶部开始他的逃跑旅程哦。不过他有两个限制条件：一是他只能朝
  • C++调用CPLEX踩过的小坑~ blackms1023 c++
    最近在使用VisualStudio2015调用CPLEX进行一些基础问题的求解，初学小白，完全没经验，遇到N多问题，踩了好多坑，在此分享一下！希望可以给后其他研究者提供一neinei学习的经验！1.关于CPLEX中默认变量的问题CPLEX中默认变量为非负值，故在实际编码过程中如若不为变量指定下界为负无穷，且变量存在负值情况，则会出现计算数据错误的情况。具体解决方法就是在初始化的过程中，为其指定一个
  • 商业计划书代写?别浪费钱 TNT_13302909089 商业计划书代写商业计划书创业计划书
    商业计划书包含的范围很广，但一般离不开以下题目：经营者的理念、市场、客户、比较优势、管理团队、财务预测、风险因素等等。对市场的分析应由大入小，从宏观到微观，以数据为基础，深刻的描述公司/项目在市场中将争取的定位。对比较优势，应在非常清楚本身强弱情况及竞争对手的战略而作分析。至于管理团队，应从各人的背景及经验分析其对公司/项目中不同岗位的作用。财务预测是关键的，应将绝大部分的假设及其所引致的财务影响
  • 学C++还是学Java？做软件研发还需掌握哪些知识和技能？_c+ 2401_84160087 程序员c++javac语言
    1.1、Java和C++都很有前途1.2、Java的应用领域与使用场景1.3、C++的应用领域与使用场景1.4、如何选择2、需要掌握的知识和技能2.1、掌握一些基础的网络知识2.2、熟悉一些常用的SQL语句2.3、了解Linux系统，掌握常用的Linux命令2.4、学习汇编语言相关的内容2.5、学习一些其他的专业课程3、最后最近和一些高校的学生朋友交流，他们打算毕业后从事软件研发的工作，但目前有些
  • html+css网页设计，我的网站 软件技术NINI html/css笔记javascripthtmlcss
    一、技术简介HTML：超文本标记语言（HyperTextMarkupLanguage），用于创建网页的基本结构和内容。CSS：层叠样式表（CascadingStyleSheets），用于设置网页的样式和布局，包括字体、颜色、边距、对齐方式等。JavaScript：一种用于创建动态和交互式网页的脚本语言。通过JavaScript，可以实现网页的动画效果、表单验证、数据交互等功能。二、创建多页网站的基
  • 沃德校园助手系统php+uniapp 狂团商城小师妹 博纳miui52086uni-app微信小程序微信公众平台
    一款基于FastAdmin+ThinkPHP+Uniapp开发的为校园团队提供全套的技术系统及运营的方案（目前仅适配微信小程序），可以更好的帮助你打造自己的线上助手平台。成本低，见效快。各种场景都可以自主选择服务。更新日志V1.2.1小程序需要更新【新增】1.默认学校排序方式（距离和时间）2.自定义服务标题和排序3.超市外卖库存和限购功能4.订单分享功能【优化】1.下单时默认手机号可修改2.下单时
  • ABB机器人的二次开发 Mountain and sea 机器人算法c语言学习自动化
    ABB机器人的二次开发可以通过多种方式实现，主要涉及编程接口、通信协议和开发工具。以下是详细的步骤和方法：1.基础准备确认RobotWare选项：确保机器人控制器安装了必要的选项，如：PCInterface（用于PCSDK通信）RobotWebServices（RESTAPI支持）Fieldbus选项（如Profinet、EtherNet/IP）权限设置：在示教器上将用户权限设置为“专家模式”或更
  • 【设计模式】 建造者模式和原型模式 wy02_ 设计模式建造者模式原型模式
    建造者模式（BuilderPattern）概述建造者模式是一种创建型设计模式，它允许逐步构建复杂对象。通过将构造过程与表示分离，使得同样的构建过程可以创建不同的表示。这种模式非常适合用于创建那些具有很多属性的对象，尤其是当有些属性是可选的时候。优点可以控制一个产品的创建过程。提供代码的复用性。支持变化：可以在不修改已有代码的情况下，对构建过程进行扩展或修改。实现示例//产品类classCar{pr
  • python程序设计案例教程胡国胜第二章答案_Python程序设计案例教程 长发在船头舞蹈
    章Python基础知识1.1Python简介1.1.1Python语言特点1.1.2Python版本1.1.3Python语言的实现1.1.4安装Python1.2Python开发环境1.2.1启动IDLE1.2.2Python代码编辑器1.2.3个小程序习题1第2章数据类型2.1数值2.1.1数值类型2.1.2变量章Python基础知识1.1Python简介1.1.1Python语言特点1.1.
  • PHP语法完全入门指南：从零开始掌握动态网页 生信天地 php开发语言
    本文专为零基础新手设计，通过5000字详细讲解带你系统学习PHP语法。包含环境搭建、基础语法、实战案例，并附20+代码示例。阅读后你将能独立开发简单动态网页！一、PHP开发环境搭建（新手必看）1.1为什么需要搭建环境？PHP是服务器端脚本语言，需要运行在服务器环境中。推荐使用集成环境一键安装：Windows用户：下载PHPStudy（文献1）Mac用户：推荐MAMP通用选择：XAMPP（文献1）安
  • PHP语法入门完全指南（2024新版） 生信天地 php开发语言
    一、开发环境搭建1.1快速启动方案本地环境：安装XAMPP（含Apache+PHP+MySQL）在线沙盒：使用PHPSandboxDocker方案（推荐）：dockerrun-it-p80:80-v$(pwd):/var/www/htmlphp:8.2-apache1.2第一个PHP程序▶️运行方式：浏览器访问http://localhost/01_hello.php二、基础语法核心2.1变量与常
  • HTML、Vue和PHP文件的区别与联系 生信天地 htmlvue.jsphp
    一、核心区别类型性质执行环境功能特点.html静态标记语言浏览器直接解析定义页面结构和内容，无逻辑处理能力.vue前端框架组件文件浏览器/构建工具整合HTML模板+JS逻辑+CSS样式，支持动态数据绑定和组件化开发.php服务器端脚本语言文件Web服务器执行动态生成HTML内容，支持数据库操作和业务逻辑处理二、联系与协作PHP与HTMLPHP文件通过标签嵌入HTML，服务器执行PHP代码后输出纯H
  • 《电磁学》第十二章 请向我看齐 电机电控电机电磁
    以下是《电磁学》第十二章的常见内容，以张三慧编著的《大学物理学电磁学（第3版）》为例：12.1电荷电荷是一种物质属性，有正、负电荷两类，同性相斥、异性相吸。起电方法包括摩擦起电，即电荷从一物体转移到另一物体；感应起电，即电荷在同一物体上移动。电荷守恒定律表明电荷不能创造，也不会自行消失，只能从一个物体转移到另一个物体，在整个过程中电荷的代数和守恒。电荷的量子化指物体带电量是基本电荷的整数倍。电荷具
  • Ajax基础学习 喜欢代码的新之助 ajax学习okhttp
    AJAX浏览器本身就具备网络通信的能力，但在早期浏览器并没有把这个能力开放给JS最早是微软在IE浏览器中把这一能力向JS开放，让JS可以在代码中实现发送请求，这项技术在2005年被正式命名为AJAX（AsynchronousJavascriptAndXML）这套API主要依靠一个构造函数完成；该构造函数的名称为XMLHttpRequest，简称为XHR由于XHRAPI有着诸多缺陷，在HTML5和E
  • 构建现代微服务安全体系：Spring Security、JWT 与 Spring Cloud Gateway 实践 wy02_ 微服务安全spring
    构建现代微服务安全体系：SpringSecurity、JWT与SpringCloudGateway实践本文将基于提供的代码示例，详细介绍如何在一个Java微服务项目中使用SpringSecurity、JWT和SpringCloudGateway来构建一个高效且安全的微服务体系，并整合性能优化措施。基础流程登录认证：客户端通过用户名和密码获取JWT流程描述：客户端发送包含用户名和密码的登录请求到身份
  • redis sentinel模式 与 redis 分片集群 配置 癸酉金鸡 redissentinel数据库
    Redis最低为5.0版本，以下为6.2.6版本信息。模式高可用性数据分片部署复杂度适用场景Sentinel模式高无中等中小规模，需要高可用性集群模式高支持复杂大规模，需要高可用性和数据分片RedisSentinel模式（在主从复制的基础上引入Sentinel实例，用于监控Redis节点的健康状态，并在主节点故障时自动进行故障转移）1.主节点redis.conf配置bind0.0.0.0port6
  • ry-ui.js 空想迷城 javascript
    调用方式$.property.function($.属性.功能)/***通用js方法封装处理*Copyright(c)2019ruoyi*///当前table相关信息vartable={config:{},//当前实例配置options:{},//设置实例配置set:function(id){if($.common.getLength(table.config)>1){vartableId=$.c
  • hive建表语句 增加字段、分区基础操作 节点。csn 数据库#hivehivehadoopbigdata
    目录hive建表内部分区表外部分区表表结构复制：hive表删除hive表重命名表修改操作增加分区修改分区删除分区新增表字段hive建表IFNOTEXISTS:表不存在才会创建分隔符：field.delim是表的两个列字段之间的文件中的字段分隔符.serialization.format是文件序列化时表中两个列字段之间的文件中的字段分隔符.分区partition:创建表时可指定分区字段，多个分区字段
  • 性能测试流程、主流性能工具 一只小H呀の jmeter
    性能测试流程性能测试流程测试测试需求分析性能测试计划和方案测什么：测试背景测试目的测试范围谁来测：进度和分工交付清单怎么测：测试策略性能测试用例设计性能测试测试执行性能分析和调优性能测试报告测试报告是对性能测试工作的总结，为软件后续验收和交付打下基础。测试报告的主要内容：测试工作的经历和回顾缺陷分析和调优风险评估性能测试结果测试工作的总结和改进主流性能测试工具loadrunnerHPLoadrun
  • POI按行读取word,并去掉属性标签内容：超链接 weixin_30535043
    publicStringreadDoc(Filefile){StringBufferbuffer=newStringBuffer();InputStreaminput=null;WordExtractorextractor=null;String[]paragraphs=null;try{input=newFileInputStream(file);extractor=newWordExtract
  • 【探索C++】友元 祐言QAQ 探索C++编程开发语言c++linuxjavahttps网络
    (꒪ꇴ꒪)，Hello我是祐言QAQ我的博客主页：C/C++语言，数据结构，Linux基础，ARM开发板，网络编程等领域UP快上，一起学习，让我们成为一个强大的攻城狮！送给自己和读者的一句鸡汤：集中起来的意志可以击穿顽石!作者水平很有限，如果发现错误，请在评论区指正，感谢在C++中，友元（friend）是一种特殊的关系，它允许一个类或函数访问另一个类的私有成员。通过友元关系，一个类可以将其他类或函
  • 图论- Dijkstra算法 左灯右行的爱情 图论算法python
    Dijkstra算法前言概念BFS基础模版DijkstraDijkstra函数签名State类distTo记录最短路径伪代码模版第一个问题解答第二个问题解答第三个问题解答前言学习这个算法之间,必须要对BFS遍历比较熟悉,它的本质就是一个特殊改造过的BFS算法.概念Dijkstra算法是一种计算图中单源最短路径算法,本质上是一个经过特殊改造的BFS算法,改造点有两个:使用优先队列,而不是普通队列进行
  • 手搓操作系统-如何创建虚拟磁盘并装载内核(超详细版） Refulic. linuxbootstrap系统架构系统安全
    写在前面：本篇是完整的在Linux环境下，创建一个虚拟磁盘，并且将内核安装到磁盘并用虚拟机运行的过程。需要对bootstrap过程有一定的基础知识。遇到不懂的概念，如MBR，Grub等请务必参考笔者的另一篇文章操作系统架构-Linux主机从按下电源键到加载内核，都经历了什么？（超详细版）此外，读者还需要对文件系统有基本的理解。1.创建磁盘镜像1）通过在Shell提示符下输入以下命令创建磁盘镜像（提
  • 操作系统架构-什么是实模式？什么是保护模式？（超详细版） Refulic. 操作系统bootstraplinux系统架构系统安全
    本文不讨论技术细节，纯粹是为了方便读者理解实模式和保护模式的具体概念，并且对具体概念建立明确的边界意识。这些概念在笔者学习过程中一度难以理解，混淆不清。希望本文可以帮助到操作系统的初学者。什么是实模式模式是指CPU的运行环境，它决定了处理器如何执行指令、管理内存以及访问硬件资源。实模式（RealMode）是x86架构的一种处理器模式，也是最基础的运行模式。在了解实模式是怎么来的之前，我们需要简单回
  • 图论---最小生成树 漫漫信奥之路 图论图论算法数据结构
    树是一种特殊的图，具有很多特殊的性质。生成树问题研究的是将图中的所有顶点保留，但只选择图中的部分边，得到一棵树（也就是图的生成树）的问题。最小生成树则是在这些生成树中，边权之和最小的生成树。可以使用prime算法或者kruskal算法求解最小生成树。生成树相关概念1、生成树定义在一个V个点的无向连通图中，取其中V-1条边，并连接所有的顶点，所得到的子图称为原图的一棵生成树2、树的属性树是图的一种特
  • Cap4J:Tree树形控件 喜只狼果冻
    class=”nui-tree”idField=id按照url异步访问后台,返回map类型数据dataField与key保持一致parentField为父节点ID属性：名称类型描述默认idFieldString值字段idtextFieldString节点文本字段texticonFieldString图标字段iconClsparentFieldString父节点字段pidcheckRecursive
  • 点云基础介绍（一）——三维点云 夜幕龙 3D视觉计算机视觉
    目录1.绪论1.1什么是三维点云1.2主要特点：1.3主要获取方式1.4应用场景：1.5处理方法（持续更新ing）：1.6主要挑战：1.7总结2.开源工具及库2.1介绍分析2.2PCL和Open3D区别3.开源资料3.1PCL3.2Open3D1.绪论1.1什么是三维点云三维点云（3DPointCloud）是一种用于表示三维空间中对象或场景的数据结构。在最基础的形式中，它是一个包含多个三维坐标点（
  • 5、pod 详解 （kubernetes） Sundayday47 k8skubernetes容器云原生harbor
    pod详解（kubernetes）Pod的基础概念pause容器Pod的分类与创建自主式Pod控制器管理的Pod静态PodPod容器的分类基础容器（infrastructurecontainer）初始化容器（initcontainers）应用容器（Maincontainer）镜像拉取策略（imagePullPolicy）k8s部署harbor创建私有项目部署harbor仓库harbor登录凭据资源
  • Qt QGroupBox 组件总结 enyp80 qt开发语言
    QtQGroupBox组件总结1.概述作用：QGroupBox是一个容器部件，用于将界面中相关的控件分组，提供逻辑上的视觉分离，通常带有标题（title）和边框。继承关系：继承自QWidget，具备所有QWidget的功能，同时支持分组布局和可选的复选框功能。2.核心特性标题（Title）：通过setTitle()设置分组框的标题，支持富文本（如HTML格式）。复选框（Checkable）：可设置
  • 怎么样才能成为专业的程序员？ 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其他