暴风雨中的白杨
暴风雨中的白杨

HTML5基础

HTML5

文章目录

      • HTML5
        • 概述
        • 开发工具
          • 浏览器
          • 开发软件
        • Demo
        • HTML5语法
          • HTML5标签
          • HTML5标签属性
          • HTML5文档注释
        • HTML5文档结构
          • 头部内容
          • 主体内容
          • Demo
        • HTML5常见标签
          • 常见块级标签
            • 标题标签
            • 水平线标签
            • 段落标签
            • 换行标签
            • 引用标签
            • 预格式标签
            • 无序列表标签
            • 有序列表标签
            • 定义列表标签
            • 分区标签
          • 常见行级标签
            • 图片标签
            • 超链接标签
            • 其他常用的行级标签
          • 块级标签和行级标签对比
          • HTML5新增结构标签
        • HTML5表格
          • HTML5表格简介
          • 表格定义
          • 表格基本属性
            • table标签属性
            • 行和列属性
          • 表格的结构化与直列化
            • 表格的结构化
            • 表格的直列化
        • HTML5表单
          • 表单简介
          • 表单的结构
          • 表单常用属性
            • action属性
            • method属性
            • enctype属性
          • input输入框
            • input常用属性
            • text文本输入框
            • password密码输入框
            • radio 单选按钮
            • checkbox复选按钮
            • file文件上传按钮
            • submit表单提交按钮
            • reset重置按钮
            • image图形提交按钮
            • button可单击按钮
            • 其他表单元素
          • 智能表单
            • 表单分组
            • 表单新增元素
            • 表单新增属性

概述

HTML是HyperText Markup Language(超文本标记语言)的缩写，用于创建网页的标准标记语言。

HTML使用标记标签来描述网页，由浏览器来解析，即使用HTML来建立Web站点，通过Web浏览器读取HTML文档，并以网页的形式显示出来。

HTML5是HTML最新的修订版本。

任何一个网页都是由一行行的HTML代码编写而成。

HTML5除了本身的标记外，广义上还包含CSS3 与 JavaScript。

HTML5的特点

  • 头部只需要写即可

  • 新增加的标签

    、
    、
    等使得网页的可读性变得更高，也更加明确的表示出网页的结构，对于搜索引擎优化(SEO)有很大帮助

  • 新的 和 标签可以用来嵌入音频和视频文件，这些标签的使用让网页播放音频、视频

  • 标签具有绘画功能，通过与JavaScript脚本的搭配，可以在网页上绘制图像

  • HTML5废除了一些标签，大部分为网页美化标签 ,如

    <center>、<font>、<tt>、<big>、<dir>、<frame>等

开发工具

浏览器

浏览器可以显示网页服务器或者文件系统的HTML文件内容，浏览器可以解析HTML文件，不会显示HTML标签，而是使用标签来解释页面内容。

浏览器内核分为两部分:

  • 渲染引擎

    渲染引擎负责获取网页内容( HTML, XML, 图像等)、整理信息(加入CSS等)以及计算网页的显示方法，然后输出至显示器或者打印机。浏览器内核的不同对于网页的语法解释也会有不同，所以渲染的效果也不同。

  • JavaScript引擎

    JavaScript引擎负责解析和执行JavaScript来实现网页的动态效果

JavaScript引擎越来越独立，内核就倾向于指渲染引擎

常见的浏览器内核:
HTML5基础_第1张图片

开发软件

  • HBuilder

    完整的语法提示和代码输入法、代码块等，包括最全面的语法库和浏览器兼容性数据

    https://www.dcloud.io/

  • Dreamweaver

    简称DW, 集网页制作和网站管理功能于一身的所见所得网页代码编辑器

  • WebStorm

  • VsCode

Demo

建立一个基本项目

HTML5基础_第2张图片

项目结构说明:

HTML5基础_第3张图片

HTML5语法

HTML5作为一门语言，具有自己的结构和语法，主要用标签来进行组织。

HTML5由一个个标签组合而成，标签又有自己的属性和属性值。

HTML5标签

标签是HTML5最基本单位和最重要的组成。

使用< 和 > 括起来，标签是闭合的。

标签分为单标记和双标记，单标记只有起始标记而没有结束标记。

<hr/>   
<title> title>

HTML5标签有相应语义，语义是由浏览器来进行表现

部分HTML5标签

HTML5基础_第4张图片

HTML5标签属性

标签属性是标签的一部分，用于包含额外的信息。

一个标签中可以有多个属性，并且属性和属性值成对出现。

<img src="../image/a.png" width = "100" height = "100" />
HTML5文档注释

浏览器不会对注释内容进行解析并呈现到页面上，只有查看HTML5文件源代码时才会看到注释。

HTML5文档结构

HTML5文件均以标记开始，以 标记结束。

一个完整的HTML5文件包含头部和主体两个部分的内容，在头部标记 中可以定义标题，样式等，文档的主体中的内容是浏览器要显示的信息

HTML5对文档声明进行了简化

<! DOCTYPE html >

HTML5文档基本结构

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Demo title>
    head>
    <body>
        Hello world!
    body>
html>

注意: 页面中必须有文档声明，而且必须在文档页面的第一行

头部内容

标签用于表示网页的元数据，即描述网页的基本信息。主要包含以下标签

  • title: 用于定义页面的标题，成对标记

  • meta: 用于定义页面的相关信息，非成对标记, 可以描述页面的作者、摘要、关键词、版权、自动刷新等页面信息

    meta标签常用属性

    • charset： 设置文档的字符集编码格式

      <meta charset="utf-8" />

      常见的字符集编码格式包括GB2312、GBK、UTF-8等

      GB2312是国标码，简体中文。GBK是扩展的国标码。UTF-8是一种针对Unicode的可变长字符编码，也称万国码(常用)。

    • http-equiv属性: 将信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值有Content-Type (文档类型)， refresh(网页定时刷新), set-cookie(设置浏览器cookie缓存)， 需要配合content属性使用。http-equiv属性只是表示需要设置哪一部分，具体的设置要放在content属性中

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    • name属性： 将信息写给浏览器看，使用方法同http-equiv属性

      常用的属性值有author(作者)、keywords(网页关键字) 、description(网页描述)

      
<meta name="author" content="wkk"/>

<meta name="keywords" content="HTML5,网页,Web前端开发"/>

<meta name="description" content="this is the first demo by wkk" />

  • link: 可以加载一个图片作为网页图标

    link 标签有如下属性:

    • rel 属性: 声明被链接文件与当前文件的关系, 这里选icon
    • type属性: 声明被链接文件的类型,可以省略
    • href属性: 表示图片的路径地址
    <link rel="icon" type="image/x-icon" href="img/icon.jpg" />
主体内容

标记包含文档所有的内容，如文字、图像、表格、表单等元素。

使用语义化标记设计网页:

<body>
    <header>网站主题header>
    <nav>菜单nav>
    <article>
    	主内容
        <section>
        	章节段落
        section>
    article>
    <aside>侧边栏aside>
    <footer>页脚footer>
body>
Demo
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="demo,HTML5,Web,网页"/>
		<meta name="description" content="this is my first web" />
		<title>我的第一个网页title>
		<link rel="icon" href="img/icon.jpg" />
	head>
	<body>
		欢迎来到HTML5的世界!!!
	body>
html>

HTML5基础_第5张图片

HTML5常见标签

常见块级标签

块级标签，此类标签在网页中显示为块。

块级标签一般独占一行，新的块级标签将从新的一行开始排列，可以容纳内联元素和其他块级元素。

标题标签
<h1>xxxh1>
<h2>xxxh2>
<h3>xxxh3>
<h4>xxxh4>
<h5>xxxh5>
<h6>xxxh6>

标题标签的作用是设置段落标题的大小，共设置了6级，从1级到6级每级标题的字体大小依次递减。

水平线标签
<hr/>

水平线标签的作用是添加水平分割线，让页面更容易区分段落。

段落标签
<p> p>

使用段落标签可以区分段落，不同的段落间会自动增加换行符，段落上下方各会有一个空行的间隔。

换行标签
<br/>

使用换行标签可以控制段落中文字的换行显示。

一般的浏览器会根据窗口的宽度自动将文本进行换行显示。

引用标签
<blockquote cite="http://...."> 引用的文字 blockquote>

使用引用标签来表示引用的文字，同时会将标签内的文字缩进显示。

其cite属性表明引用的来源，一般表明引用网址。

预格式标签
<pre> 需要按照原格式显示的文字 pre>

预格式标签可以将文字按照原始的排列方式进行显示。

<pre>
	*
  *****
*********
pre>
无序列表标签
<ul>
    <li> li>
ul>

无序列表是将文字段落向内缩进，并在每个列表项前面加上圆形（●）、空心圆形（〇）或方形（■）等符号

无序列表没有顺序编号，而是采用项目符号的形式，所以又被称为符号列表。

ul标签的 type属性决定符号的样式: disc（●） circle（〇） square（■）

有序列表标签
<ol>
    <li> li>
ol>

有序列表是将文字以特定的顺序来进行排列，每个列表项会向内缩进，并且它们之间以编号来标记，比如1、2、3、…。

ol标签的属性:

在这里插入图片描述

编号样式的属性值:

HTML5基础_第6张图片

定义列表标签
<dl>dl>

定义列表适用于对名词、概念或主题的定义，第一部分是名词、概念或主题，并且通常只有一项，第二部分是相应的解释和描述，可以有多项。

<dl>
    <dt>  定义列表的标题 dt>
    <dd> 描述的第一项 dd>
    <dd> 描述的第二项 dd>
dl>
分区标签
<div>  div>

＜div＞标签可定义文档中的分区或节，将文档分割为独立的、不同的部分。

是可用于组合其他HTML5标签的容器

由于它属于块级标签，浏览器会在其前后换行显示。

div标签的一个常见的用途是文档布局，如果与CSS一同使用，div标签可用于对大的内容块设置样式属性。

常见行级标签

行级标签在页面中可以和其他元素在同行显示，直到一行不能放下一个完整的元素

通常行级元素内不会包含其他元素

图片标签
<img />

网页中常用的图片格式为GIF，JPG和PNG等

<img src="img/logo.png" alt="img demo" title="a logo pic" />

图片标签主要有5个属性

  • src属性

    引用图片的路径地址，三种写法:

    • 相对路径:以当前文件为准，去寻找图片地址

    • 绝对路径: file://盘符:/文件夹/图片.扩展名 --> 严禁使用

      通过绝对路径打开图片使用的是file协议，但网页中使用的是http协议，因此会出现跨域问题，造成图片无法显示。

    • 网络地址: 使用网络上的图片链接

  • height和width属性

    height和width属性分别表示图片的宽度和高度

    推荐用CSS（style=“width:100px; height: 100px;”）代替

  • title属性

    设置图片的标题，即当鼠标指在图片上后显示的文字

  • alt属性

    由于图片无法加载时显示的文字

  • align属性

    设置图片周围文字相对于图片的位置。常用属性值有top、center、bottom，推荐用CSS来控制样式

超链接标签
<a> a>

通常，一个网站是由多个页面组成的，而不同页面的跳转就需要使用链接。

＜a＞标签可以设置一个超链接，单击超链接可以跳转到新的文档或者当前文档中的某个部分。

<a href="#">这是一个超链接a>

  • href属性

    在＜a＞标签中使用href属性来描述链接的地址，这个地址可以是网络链接，也可以是本地文件。当用#时，表示这是一个空的超链接。

  • target属性

    使用target属性可以定义通过超链接打开的文档在何处显示。

    常用的两个属性值分别为_self（在与链接相同的框架中打开被链接文档）和_blank（在新窗口中打开链接），默认属性值为_self

  • 锚链接的用法

    • 本页面的锚链接

      1. 设置锚点

        <a name="top">a>

      2. 在超链接上，使用#name跳转到对应的锚点。

        <a href="#top" target="_self">这是一个超链接a>

    • 页面间锚链接

      1. 在即将跳转页面的指定位置，设置锚点

      2. 在超链接的href属性中，使用页面的地址.html#name

        <a href="t.html#weixin">跳转到新页面的指定部分a>
其他常用的行级标签
<span>span>
<em>em>
<strong>strong>
<i>i>
<b>b>

span标签常常用来组合文档中的行内元素，无实际意义，用于包裹某部分文字，修改特定样式
HTML5基础_第7张图片

块级标签和行级标签对比
  • 块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示。
  • 块级标签的宽度默认是100%；行级标签的宽度由文字内容撑开。
  • 块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性。
HTML5新增结构标签

HTML5新增了一些结构标签，使用结构标签可以提升网页文档的可读性，并且有利于搜索引擎优化。

HTML5新增的结构标签主要包括以下7个:

HTML5结构标签布局示意图

HTML5基础_第8张图片

结构标签具体含义：
HTML5基础_第9张图片

HTML5表格

表格是HTML5中的重要布局之一，相对于其他的块级标签，表格在布局上有更加强大的能力。

表格包含的内容十分广泛，几乎可以包含所有的HTML5标签，可以极大的增加表格在布局方面的能力。

HTML5表格简介

表格可以让网页以行、列的方式承载数据。

表格的基本结构由行列组成，单元格是表格的最基本的单位。

表格的基本结构示意图:

HTML5基础_第10张图片

表格定义

表格使用

标签定义，每个表格均有若干行，行由标签定义，每行被分割为若干单元格，列由
标签定义。

字母td指表格数据(table data),即数据单元格的内容。

如果表格的第一行为表头，那么

标签需要使用标签替换。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

<table>
    <tr>
    	<th>th>
        <th>th>
    tr>
    <tr>
    	<td>td>
        <td>td>
    tr>
table>
表格基本属性

表格的属性可以分为两大类，分别为作用于

标签和作用于行,列
的属性。

table标签属性

  • border 表格边框属性

    border属性定义表格边框，属性值可以接收整数类型的数字，表示设置表格边框的宽度

    <table border="1">
    
table>

    border的值增大，只有表格最外围框线增加，每个单元格上的边框并不会变化。

  • width/height 宽度和高度属性

    width属性和height属性分别定义表格宽度和高度,单位默认为px

    <table width="400" height="200">
    
table>

  • bgcolor 表格背景属性

    bgcolor属性定义表格的背景色，传入一个颜色值，可以修改表格的背景色

    <table bgcolor="red">
    
table>

  • background表格背景图属性

    background属性定义表格的背景图，需要传入一张图片的路径地址，当background背景图属性与bgcolor背景色同时存在时，背景图会覆盖掉背景色

    <table background="img/img.png">
    
table>

  • bordercolor 表格边框颜色属性

    bordercolor属性定义表格的边框颜色，接收颜色值

    <table border="1" bordercolor="blue" >
    
table>

  • cellspacing 表格单元格间距属性

    cellspacing 属性定义表格单元格与单元格之间的间距

    表格单元格与单元格之间默认存在一定的间距，使用cellspacing属性可以手动调整这个间距的大小

    cellspacing设为0时，单元格间没有间距

    <table border="1" cellspacing="10" >
    
table>

    使用cellspacing=“0” ， 设置单元格之间没有间距，并不能合并相邻边框，中间的边框是两条线的宽度，如果需要合并表格边框，需要使用css

    <table border="1" style="border-collapse: collapse;">
    
table>

    使用css语法使得边框合并后，cellspacing属性会失效。

  • cellpadding 表格单元格内边距属性

    cellpadding 属性定义单元格的内边距，即单元格中的文字与单元格边框之间的距离

    <table border="1" cellpadding="10" >
    
table>

  • align 表格对齐属性

    align属性用于调整表格在其父容器中的位置，可选值有left, center, right, 分别表示表格居左，居中，居右

    <table border="1" align="center">
    
table>

    表格的align属性不再建议使用，它的相关功能已经被css中的浮动(float)所取代

行和列属性

作用于tr 和 td的属性

  • width/height 单元格宽度/高度属性

    用于调整表格中单元格的宽和高

    <table border = "1">
    <tr>
    	<td width="100" height="50" > 第一行 td>
    tr>
table>

    当表格属性和行列属性冲突时，以行列属性为准

  • bgcolor 单元格背景色属性

    修改单元格的背景色

    <td bgcolor="#0000FF"> 第一行 td>

  • align 单元格内容水平对齐属性

    align属性控制单元格中内容的水平位置

    <td align="left"  >第一行td>
<td align="center">第二行td>
<td align="right" >第三行td>

    表格的align属性是控制表格自身在浏览器中的显示位置，而行列的align属性是控制单元格中文字在单元格中的对齐方式

    表格的align属性并不影响表格内文字的对齐方式，tr标签的align属性可以控制一行中所有单元格的水平对齐方式

  • valign 单元格内容垂直对齐属性

    valign 属性控制单元格中内容的垂直位置

    <td valign="top"   >第一行td>
<td valign="center">第二行td>
<td valign="bottom">第三行td>

    当表格属性与行列属性冲突时，以行列属性为准( 近者优先 )

  • colspan / rowspan 表格的跨列跨行

    colspan属性表示跨列，当某个格跨N列时，其右边的N-1个单元格需要删除

    rowspan属性表示跨行，当某个格跨N行时，其下方的N-1个单元格需要删除

    <tr>
	<td colspan="3">td>
tr>
<tr>
	<td rowspan="2">td>
tr>
表格的结构化与直列化

为了更好地管理以及格式化表格，更好的语义化标签。

表格的结构化

表格的结构化是将表格分为表头、表体、表尾三个部分，这样在修改其中一部分时，不会影响到其他部分，方便对表格进行操作。

一个完整的表格通常包含以下四个部分。

  • caption 表格的标题，通常出现在表格的顶部
  • thead: 定义表格表头，通常表现为标题行
  • tbody: 定义一段表格主体，一个表格可以有多个主体，可以按照行来进行分组
  • tfoot: 定义表格的脚尾，通常表现为总计行
<table width="500">
    <caption> 表格标题 caption>
    <thead>
        <tr>
        	<th> 表格头部th>
        tr>
    thead>
    <tbody>
    	<tr>
        	<td>表格主体td>
        tr>
    tbody>
    <tfoot>
    	<tr>
        	<td>表格底部td>
        tr>
    tfoot>
table>

tbody包含行的内容下载完优先显示，不必等待表格结束。

表格本来是从上向下显示，但是应用了thead, tbody,tfoot以后，就"从头到脚"显示，即不管行代码顺序如何，网页显式时，还是先thead 后tbody显示

表格的直列化

通过设置表格的直列化可以对表格进行分组，以便对其进行格式化

<table>
    
	<colgroup style="background-color:yellow;">
		<col/> 		
    	<col/>  	
	colgroup>
	<col style="background-color:blue;"/>   
    
    
table>

如需对全部列应用样式，colgroup 标签很有用，可以不需要对各个单元和各行重复应用样式。

colgroup标签只能在table中使用

HTML5表单

表单主要用于用户填写信息，并将获得的信息传递到后台服务器端，使网页具有交互功能。

HTML5中，表单增加了新元素，表单元素也增加了许多新的属性

表单简介

表单用于让用户填写信息并提交给服务器进行处理

HTML5基础_第11张图片

表单的结构

表单由许多表单控件组成，主要包括用户填写信息部分和表单提交按钮

用户填写数据完成后，单击"提交"按钮就可以发送数据到服务器

表单内容由

包裹，基本语法

<form>
    各种表单控件
form>
表单常用属性
action属性

action属性用于指定表单提交时向何处发送表单数据

基本语法

<form action="form.php">
    各种表单控件
form>
method属性

method属性用于指定表单向服务器提交数据的方法。

包含两种方法get和post， get方法是表单提交的默认方法

基本语法

<form action="form.php" method="post">
    各种表单控件
form>
enctype属性

enctype属性指定表单发送的编码方式，只有method="post"时才有效，共有三种属性值

  • application/x-www-form-urlencoded 默认值，如果enctype属性省略，则表示使用这种编码
  • multipart/form-data 不对字符编码，用于上传文件时使用
  • text/plain 将空格转换为+符号，但是不编码特殊字符，通常在将表单发送到电子邮箱时使用
input输入框

表单最重要的元素，input输入框用于收集用户信息。根据不同的type属性值，可以用多种形式输入内容。

input常用属性

  1. type属性

    表示输入框的类型，默认值是text。所有浏览器都支持type属性，但是type属性值不是所有浏览器都可以支持。

  2. name属性

    name属性表示input输入框的名称，一般必填。传递数据时，需要使用name=value的形式传递

  3. value属性

    value属性表示input输入框的默认值

    <form>
    <input name="name" type="text" value="请输入名字"/>
form>

  4. placeholder属性

    placeholder属性表示输入框中的提示信息，当输入框有value属性时，提示内容会消失，转而显示value属性的值

    <form>
    <input name="name" type="text" placeholder="请输入名字"/>
form>

  5. tabindex属性

    控制按Tab键时的跳转顺序，从最小的数值开始，逐个往大的数值跳转，依次获得焦点

  6. input元素的其他属性

    一些属性名等于属性值的特殊属性

    • checked=“checked” 默认选中

    • disabled=“disabled” 设置控件是否可用。用在按钮上效果为不能单击，用在输入框上则表示不能修改，而且输入框为disabled，则输入框中的信息不能往后台传递

    • hidden=“hidden” 设置隐藏控件

      <input type="hidden" name="username" value="1234"/>

      常用于配合disabled属性，或根据其他需要，使用隐藏域传递数据。

text文本输入框

文本输入框用于输入单行文本，默认宽度为20个字符。

<form>
    <input name="username" type="text" maxlength="10" size="5"/>
form>

最大字符长度为10， 可显示的字符数为5

password密码输入框

密码输入框中输入的内容会以小黑点的形式替换显示，小黑点的形式可以有效避免密码的泄露

<input name="pwd" type="password" maxlength="16"/>
radio 单选按钮

单选按钮用于填写表单时信息选择

<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
  • name和value属性需要同时存在，提交时，提交的是value中的属性值
  • radio凭借name属性区分是否为同一组。name相同为同一组，同组中只能选择一个
  • checked="checked"默认选中，radio只能选中一个，checkbox可以选择多个
checkbox复选按钮

复选按钮和单选按钮相同，也用于填写表单时信息选择。

<input type="checkbox" name="hobby" value="sing" checked="checked"/>唱歌
<input type="checkbox" name="hobby" value="draw" checked="checked"/>画画
<input type="checkbox" name="hobby" value="dance"/>跳舞
file文件上传按钮

文件上传按钮用于文件上传，单击选择文件按钮会弹出对话框，选择需要上传的文件

<input type="file"/>
submit表单提交按钮

表单提交按钮用于提交表单数据，单击按钮后，表单中用户填写的信息会发送到表单指定的地方进行处理。

<input type="submit" value="登录" />
reset重置按钮

重置按钮将表单数据重置为初始状态，通常是清空表单已填内容

<input type="reset"/>
image图形提交按钮

图形提交按钮需要添加src属性来设置图片的路径。功能与submit相同，可以提交表单数据。通常在美化网页时会使用图形提交按钮来代替默认的提交按钮，使页面更加美观

<input type="image" src="xxx" />
button可单击按钮

定义一个可单击的按钮，通常与javascript一起使用来启动脚本。

<input type="button" value="点我" onclick="alert('这是一个按钮!')" />
其他表单元素
  1. select下拉选择控件

在表单中通过

新增元素 描述
datalist 定义选项列表，与input元素配合使用用来定义input可能的值
keygen 规定用于表单的密钥对生成器字段
output 定义不同类型的输出，比如脚本的输出

datalist具有和autocomplete类似的自动完成功能，但是它有一个功能是autocomplete属性没有的，在使用datalist时，它可以根据用户输入的内容，在预先设置好的列表中筛选出与用户输入相关的信息作为备选。

<input type="text" list="list"/>
<datalist id="list">
	<option>123option>
    <option>456option>
datalist>
表单新增属性

  1. 表单新增属性

    属性 说明
    autocomplete 规定form表单具有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项
    novalidate 规定提交表单时不进行验证

    autocomplete属性值有on和off, novalidate属性值有true和false

  2. input标签新增属性

    属性 说明
    autocomplete 规定input标签具有自动完成功能
    autofocus 规定在页面加载时，控件自动地获得焦点(一个页面只能有一个控件使用该属性)
    required 规定输入的字段是必需的(必须填写)
    pattern 规定通过其检查输入值的正则表达式
    form overrides 规定表单重写属性
    form 规定输入域所属的一个或者多个表单

    form overrides是一个合集，实际上包含有多个属性

    • formaction: 重写表单的action属性
    • formenctype: 重写表单的enctype属性
    • formmethod：重写表单的method属性
    • formnovalidate：重写表单的novalidate属性
    • formtarget：重写表单的target属性

    表单重写属性与type="submit"配合使用，会在提交时修改表单的属性值。

    form属性，是为特定的form表单添加id,再为希望与表单一起提交的表单元素添加form属性，从而实现input无须放在form标签之中，也可以通过表单提交，使用这种方式可以在设计页面时不再局限于表单的固定位置。

    form属性demo

    <form action="form.php" method="post" id="form1">
    
form>

<input type="text" name="test" form="form1"/>

  3. input标签新增输入类型

    输入类型 浏览器支持 作用
    color Opera, Chrome 定义拾色器
    date Opera,Chrome 限制用户输入时间格式
    email IE10以上，FireFox,Opera,Chrome,Safari 限制用户输入email格式
    number IE10以上版本,Opera,Chrome,Safari 限制用户输入数字格式
    range IE10以上，Opera,Chrome,Safari 定义包含一定范围内的值的数字字段,显示为一个滑块，可以通过min和max属性设置最小最大值
    search Chrome, Safari 定义用于输入搜索字符串的文本字段，与普通文本输入框不同的是右侧会有一个x号，单击x号，可以删除用户在输入框中输入的所有内容

    这些新增输入类型在不同浏览器中显示效果会有所不同，另外在某些不支持新增输入类型的浏览器中可能功能无法使用。

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

  • 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：做与用户的交互行为文章目录前端学习路线
  • 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
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 关于旗正规则引擎规则中的上传和下载问题 何必如此 文件下载压缩jsp文件上传
    文件的上传下载都是数据流的输入输出，大致流程都是一样的。 一、文件打包下载 1.文件写入压缩包 string mainPath="D:\upload\";     下载路径 string tmpfileName=jar.zip;        &n
  • 【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析 bit1129 Stream
      以如下代码为例（SocketInputDStream）： Spark Streaming从Socket读取数据的代码是在SocketReceiver的receive方法中，撇开异常情况不谈(Receiver有重连机制，restart方法，默认情况下在Receiver挂了之后，间隔两秒钟重新建立Socket连接)，读取到的数据通过调用store(textRead)方法进行存储。数据
  • spark master web ui 端口8080被占用解决方法 daizj 8080端口占用sparkmaster web ui
    spark master web ui 默认端口为8080，当系统有其它程序也在使用该接口时，启动master时也不会报错，spark自己会改用其它端口，自动端口号加1，但为了可以控制到指定的端口，我们可以自行设置，修改方法：   1、cd SPARK_HOME/sbin   2、vi start-master.sh     3、定位到下面部分
  • oracle_执行计划_谓词信息和数据获取 周凡杨 oracle执行计划
      oracle_执行计划_谓词信息和数据获取(上) 一：简要说明 在查看执行计划的信息中，经常会看到两个谓词filter和access，它们的区别是什么，理解了这两个词对我们解读Oracle的执行计划信息会有所帮助。 简单说，执行计划如果显示是access，就表示这个谓词条件的值将会影响数据的访问路径（表还是索引），而filter表示谓词条件的值并不会影响数据访问路径，只起到
  • spring中datasource配置 g21121 dataSource
    datasource配置有很多种，我介绍的一种是采用c3p0的，它的百科地址是： http://baike.baidu.com/view/920062.htm   <!-- spring加载资源文件 --> <bean name="propertiesConfig" class="org.springframework.b
  • web报表工具FineReport使用中遇到的常见报错及解决办法（三） 老A不折腾 finereportFAQ报表软件
    这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、repeated column width is largerthan paper width： 这个看这段话应该是很好理解的。比如做的模板页面宽度只能放
  • mysql 用户管理 墙头上一根草 linuxmysqluser
    1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Password) values(‘localhost’,'jeecn’,password(‘jeecn’));//刷新系统权限表mysql>flush privileges;这样就创建了一个名为：
  • 关于使用Spring导致c3p0数据库死锁问题 aijuans springSpring 入门Spring 实例Spring3Spring 教程
    这个问题我实在是为整个 springsource 的员工蒙羞 如果大家使用 spring 控制事务，使用 Open Session In View 模式， com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.
  • 百度词库联想 annan211 百度
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title&g
  • int数据与byte之间的相互转换实现代码 百合不是茶 位移int转bytebyte转int基本数据类型的实现
    在BMP文件和文件压缩时需要用到的int与byte转换,现将理解的贴出来;   主要是要理解;位移等概念 http://baihe747.iteye.com/blog/2078029   int转byte;   byte转int;   /** * 字节转成int,int转成字节 * @author Administrator *
  • 简单模拟实现数据库连接池 bijian1013 javathreadjava多线程简单模拟实现数据库连接池
    简单模拟实现数据库连接池 实例1： package com.bijian.thread; public class DB { //private static final int MAX_COUNT = 10; private static final DB instance = new DB(); private int count = 0; private i
  • 一种基于Weblogic容器的鉴权设计 bijian1013 javaweblogic
            服务器对请求的鉴权可以在请求头中加Authorization之类的key，将用户名、密码保存到此key对应的value中，当然对于用户名、密码这种高机密的信息，应该对其进行加砂加密等，最简单的方法如下： String vuser_id = "weblogic"; String vuse
  • 【RPC框架Hessian二】Hessian 对象序列化和反序列化 bit1129 hessian
     任何一个对象从一个JVM传输到另一个JVM，都要经过序列化为二进制数据(或者字符串等其他格式，比如JSON)，然后在反序列化为Java对象，这最后都是通过二进制的数据在不同的JVM之间传输(一般是通过Socket和二进制的数据传输)，本文定义一个比较符合工作中。   1. 定义三个POJO    Person类 package com.tom.hes
  • 【Hadoop十四】Hadoop提供的脚本的功能 bit1129 hadoop
    1. hadoop-daemon.sh 1.1 启动HDFS ./hadoop-daemon.sh start namenode ./hadoop-daemon.sh start datanode  通过这种逐步启动的方式，比start-all.sh方式少了一个SecondaryNameNode进程，这不影响Hadoop的使用，其实在 Hadoop2.0中，SecondaryNa
  • 中国互联网走在“灰度”上 ronin47 管理 灰度
    中国互联网走在“灰度”上（转） 文/孕峰   第一次听说灰度这个词，是任正非说新型管理者所需要的素质。第二次听说是来自马化腾。似乎其他人包括马云也用不同的语言说过类似的意思。   灰度这个词所包含的意义和视野是广远的。要理解这个词，可能同样要用“灰度”的心态。灰度的反面，是规规矩矩，清清楚楚，泾渭分明，严谨条理，是决不妥协，不转弯，认死理。黑白分明不是灰度，像彩虹那样
  • java-51-输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 bylijinnan java
    public class PrintMatrixClockwisely { /** * Q51.输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 例如：如果输入如下矩阵： 1 2 3 4 5 6 7 8 9
  • mongoDB 用户管理 开窍的石头 mongoDB用户管理
      1:添加用户    第一次设置用户需要进入admin数据库下设置超级用户（use admin）      db.addUsr({user:'useName',pwd:'111111',roles:[readWrite,dbAdmin]});    第一个参数用户的名字    第二个参数
  • [游戏与生活]玩暗黑破坏神3的一些问题 comsci 生活
        暗黑破坏神3是有史以来最让人激动的游戏。。。。但是有几个问题需要我们注意      玩这个游戏的时间，每天不要超过一个小时，且每次玩游戏最好在白天      结束游戏之后，最好在太阳下面来晒一下身上的暗黑气息，让自己恢复人的生气   &nb
  • java 二维数组如何存入数据库 cuiyadll java
    using System; using System.Linq; using System.Text; using System.Windows.Forms; using System.Xml; using System.Xml.Serialization; using System.IO; namespace WindowsFormsApplication1 {
  • 本地事务和全局事务Local Transaction and Global Transaction(JTA) darrenzhu javaspringlocalglobaltransaction
    Configuring Spring and JTA without full Java EE http://spring.io/blog/2011/08/15/configuring-spring-and-jta-without-full-java-ee/ Spring doc -Transaction Management http://docs.spring.io/spri
  • Linux命令之alias - 设置命令的别名，让 Linux 命令更简练 dcj3sjt126com linuxalias
    用途说明 设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯，那么我们可以为它指定一个别名。虽然可以为命令建立“链接”解决长文件名的问 题，但对于带命令行参数的命令，链接就无能为力了。而指定别名则可以解决此类所有问题【1】。常用别名来简化ssh登录【见示例三】，使长命令变短，使常 用的长命令行变短，强制执行命令时询问等。   常用参数 格式：alias 格式：ali
  • yii2 restful web服务[格式响应] dcj3sjt126com PHPyii2
    响应格式 当处理一个 RESTful API 请求时， 一个应用程序通常需要如下步骤 来处理响应格式： 确定可能影响响应格式的各种因素， 例如媒介类型， 语言， 版本， 等等。 这个过程也被称为 content negotiation。 资源对象转换为数组， 如在 Resources 部分中所描述的。 通过 [[yii\rest\Serializer]]
  • MongoDB索引调优（2）——[十] eksliang mongodbMongoDB索引优化
    转载请出自出处：http://eksliang.iteye.com/blog/2178555 一、概述       上一篇文档中也说明了，MongoDB的索引几乎与关系型数据库的索引一模一样，优化关系型数据库的技巧通用适合MongoDB，所有这里只讲MongoDB需要注意的地方 二、索引内嵌文档     可以在嵌套文档的键上建立索引，方式与正常
  • 当滑动到顶部和底部时，实现Item的分离效果的ListView gundumw100 android
    拉动ListView，Item之间的间距会变大，释放后恢复原样； package cn.tangdada.tangbang.widget; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import andr
  • 程序员用HTML5制作的爱心树表白动画 ini JavaScriptjqueryWebhtml5css
    体验效果：http://keleyi.com/keleyi/phtml/html5/31.htmHTML代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <ti
  • 预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版 kakajw ThinkPad预装改装windows 7windows 8
      该教程具有普遍参考性，特别适用于联想的机器，其他品牌机器的处理过程也大同小异。 该教程是个人多次尝试和总结的结果，实用性强，推荐给需要的人！   缘由 小弟最近入手笔记本ThinkPad T440，但是特别不能习惯笔记本出厂预装的Windows 8系统，而且厂商自作聪明地预装了一堆没用的应用软件，消耗不少的系统资源（本本的内存为4G，系统启动完成时，物理内存占用比
  • Nginx学习笔记 mcj8089 nginx
    一、安装nginx             1、在nginx官方网站下载一个包，下载地址是：  http://nginx.org/download/nginx-1.4.2.tar.gz      2、WinSCP(ftp上传工
  • mongodb 聚合查询每天论坛链接点击次数 qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 18 */ { "_id" : ObjectId("5596414cbe4d73a327e50274"), "msgType" : "text", "sendTime" : ISODate("2015-07-03T08:01:16.000Z"
  • java术语（PO/POJO/VO/BO/DAO/DTO） Luob. DAOPOJODTOpoVO BO
    PO(persistant object) 持久对象 在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数据库的操作. VO(value object) 值对象 通
  • 算法复杂度 Wuaner Algorithm
    Time Complexity & Big-O： http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o http://bigocheatsheet.com/ http://www.sitepoint.com/time-complexity-algorithms/