HTML5

HTML5

一、HTML5是什么

HTML语言又称为超文本标记语言;HTML语言是用来描述网页的一种语言,HTML语言不是一种编程语言,而是一种标记语言;既然HTML是标记语言,那么HTML由一套标记标签组成,在制作网页时,HTML使用标记标签来描述网页。

二、HTML5基础

一、HTML的优势

1、世界知名浏览器厂商对HTML5的支持;例如:Internet Explorer 、Google、Firefox 、Safari、Opera等主要的Web浏览器都是支持的。

2、市场的需求

3、跨平台

二、W3C标准

1、HTML遵守W3C的原因

万维网联盟(World Wide Web Consortium ,W3C)是Web技术领域最权威和具有影响力的国际中立性技术标准结构;W3C标准的诞生确保多个浏览器都兼容,HTML内容结构都是语义化的。

2、W3C标准的介绍

W3C标准不是某一个标准,而是一系列的标准集合,一个网页主要由三个部分组成:结构、表现和行为。

W3C标准包括结构化标准语言(HTML、XML)、表现标准语言(CSS)、行为标准(DOM、ECMAScript)。

三、HTML5文件的基本框架

HTML5最基本的语法就是<标记>内容

标记在有的地方也称为标签或元素,标签都是成对出现的,有开始标记也有对应的结束标记,以"<>“开始,以”"结束,要求成对出现;标签之间要有缩进,体现出层次感,以方便阅读程序和修改程序;

1、HTML5的基本结构

<html>
	<head>
        <title>这是头部名称title>
    head>    
    
    <body>
        这是主体部分
    body>
    
html>

HTML5的基本结构分为两个部分:头部部分(head)和主体部分(body);头部部分包括网页标题(title)等信息;主体部分包括网页内容信息。

2、网页的基本信息

1、DOCTYPE声明

DOCTYPE是用来声明文档类型的声明,是用来告诉浏览器用哪种规范来解释这文档中的代码的;DOCTYPE语句必须在文档的第一行。HTML5文档中可以不使用DOCTYPE,浏览器也可以勉强识别;但是建议要有DOCTYPE语句。

2、标签</p> <pre><code class="prism language-HTML"><title> 标题标签

标签是用来描述网页标题的,在浏览器中显示的位置是在浏览器窗口的标题栏上的网页标题。</p> <p>3、<mate>标签</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mate</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span></code></pre> <p><mate>是用来描述网页的摘要信息的,摘要内容包括:文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等,但是<mate>标签描述的内容不显示。</p> <p><mate>的属性:</p> <p>1、gb3212:简体中文</p> <p>2、IOS—885901:纯英文</p> <p>3、big5:繁体</p> <p>4、UTF-8:国际性通用的字符编码</p> <p>注意:在保存文件时编码方式一定要和HTML5页面中的<mate>的编码保持一致,否则会出现乱码现象。</p> <h3>四、网页的基本标签</h3> <h4>1、标题标签</h4> <p>标题标签使用来表示一段文字的标题或主题,支持多层次的内容结构</p> <p>标题标签的语法是:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>这是一级标题 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token comment"><!--<h1>的字体是最大的--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>这是二级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>这是三级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>这是四级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>这是五级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>这是六级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span> <span class="token comment"><!--<h6>的字体是最小的--></span></code></pre> <p>在HTML5中提供了上面六种标题标签,其中<h1>标签是字号最大的,<h6> 是字号最小的;运用标签后标题字体会加粗,并且会有一定的外观。</p> <h4>2、段落标签和换行标签</h4> <p>段落标签的语法:</p> <pre><code class="prism language-HTML"><p> 这是一个段落标签 </p> <p> 这也是一个段落标签 我是一个人才 </p> <!--结果是: 这是一个段落标签 这也是一个段落标签我是一个人才 --> </code></pre> <p><p> 标签用来表示一个段落,一个段落中可以包含多行文字,文字内容将随浏览器窗口的大小自动换行。</p> <p>换行标签语法:</p> <pre><code class="prism language-HTML"><p> 这个组员有点难搞哦<br/> 就算是个人才也搞不定啊<br/> </p> <!--结果是: 这个组员有点难搞哦 就算是个人才也搞不定啊 --> </code></pre> <p>换行标签< br/> 表示的是强制换行,这个标签有点特殊,没有结束标签,直接使用标签表示开始和结束;</p> <p>注意:这种标签也叫单标签;有开始和结束标签的叫双标签。</p> <h4>3、水平线标签</h4> <p>水平线的语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 人才 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 个个是人才<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> 好好学习<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> 天天向上<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token comment"><!--结果是: 人才 ———————————————————————————————————————————————————————————————————————————————————————————————————— 个个是人才 好好学习 天天向上 --></span></code></pre> <p>水平线标签和换行标签一样的特殊,水平线标签也是单标签。</p> <h4>4、字体样式标签</h4> <p>加粗语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>我是最棒的<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span></code></pre> <p><strong> 标签可以让字体变粗;<strong>还是一个带有语义化的标签,有强调、加强语气的作用。</p> <p>倾斜语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>好好学习<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span></code></pre> <p><em>标签可以让字体倾斜。</p> <h4>5、注释和特殊符号</h4> <p>注释的语法:</p> <pre><code class="prism language-html"><span class="token comment"><!-- 这是一条注释 --></span></code></pre> <p>注释就是用来 解释文档的,当浏览器遇到注释的时候会自动忽略注释内容。</p> <p>特殊符号表</p> <table> <thead> <tr> <th align="center">特殊字符</th> <th align="center">字符实体</th> </tr> </thead> <tbody> <tr> <td align="center">空格</td> <td align="center"> ;</td> </tr> <tr> <td align="center">大于号(>)</td> <td align="center">>;</td> </tr> <tr> <td align="center">小于号(<)</td> <td align="center"><;</td> </tr> <tr> <td align="center">引号(")</td> <td align="center">";</td> </tr> <tr> <td align="center">版权符号(©)</td> <td align="center">©;</td> </tr> </tbody> </table> <h4>6、图像标签</h4> <p>1、常见的图像格式:JPG格式、GIF格式、BMP格式、PNG格式</p> <p>2、图片标签的基本语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>图片地址<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>图片的替代文字<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>鼠标悬停提示文字<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>图片宽度<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>图片高度<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span></code></pre> <p><img>是图片标签;src属性表示图片路径; alt属性指定的替代文本,在图片无法显示的时候,替代显示的文本;title属性可以提供额外的提示或帮助信息,当鼠标放在图片上时显示提示信息;width属性和height属性分别表示宽度和高度,如果要改变图片原始的大小,就可以用width属性和height属性设置。</p> <h4>7、超链接标签</h4> <p>1、超链接的基本语法:</p> <pre><code class="prism language-HTML"><a href="链接地址" target="目标窗口位置">链接文本或图片</a> <a href="#"></a> <!--空链接--> </code></pre> <p>href:表示链接地址的路径;当超链接路径为"#"时,表示空链接。</p> <p>target:指定链接在哪个窗口打开,常用的取值有 _self(自身窗口) , _blank(新建窗口)。</p> <p>2、路径</p> <p>相对路径:相对于当前页面的路径,一般指向本站点的文件,所以一般不需要一个完整的url地址的形式。</p> <p>绝对路径:指向目标地址完整描述,一般指向本站点外的文件。绝对路径是从盘符出发的。</p> <p>相对路径中可能会用到的特殊符号:" …/ “表示当前目录的上一级目录,” …/…/ "表示当前目录的上上级目录。</p> <p>3、页面间链接</p> <p>页面间链接就从一个页面链接到另一个页面。</p> <p>4、锚链接</p> <p>语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>marker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>目标位置乙<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre> <p>name为 <a> 标签的属性,marker为标记名;注:如果没有name属性可以用id属性来做标记,效果是一样的,但是兼容性更好。</p> <pre><code class="prism language-HTML"><a href="#marke">当前位置甲</a> </code></pre> <p>设置甲位置链接路径href属性值为"#标记名"。</p> <p>5、功能性链接</p> <p>功能性链接比较特殊,当单击该链接时不是打开某个网页,而是启动本机自带的某个应用程序。</p> <h4>8、行内元素和块元素</h4> <p>块元素特性:无论内容多少,该元素独占一行。</p> <p>行内元素特性:内容撑开宽度,左右都是行内元素的可以排在一起。</p> <h2>三、列表、表格和媒体元素</h2> <h3>一、列表</h3> <p>列表是信息资源的一种展示形式。列表分为三种类型:无序列表、有序列表、定义列表;</p> <h4>1、无序列表</h4> <p>语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第一项<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第二项<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第三项<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre> <p>无序列表由 <ul> 标签和 <li> 标签组成,<ul>标签是无序列表的声明,<li> 标签作为每个列表项的起始。</p> <p>注意:</p> <p>1、<ul> 标签里面只能嵌套 <li> 标签,不能嵌套其他标签。</p> <p>2、<li> 标签里面可以嵌套任何标签。</p> <p>无序列表的特征:</p> <p>1、没有顺序,每个<li> 标签独占一行(块元素)</p> <p>2、默认的<li> 标签项前面有个实心小圆点。</p> <p>3、一般用于无序类型的列表。</p> <h4>2、有序列表</h4> <p>语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第一项<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第二项<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>第三项<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre> <p>有序列表用 <ol> 标签和 <li>标签组成,<ol> 是用来声明有序列表的,<li>是每个列表项的起始。</p> <p>有序列表的特征:</p> <p>1、有顺序,每个 <li> 标签独占一行(块元素)。</p> <p>2、默认< li>标签项前面有顺序标记。</p> <p>3、一般用于排序类型的列表。</p> <h4>3、定义列表</h4> <p>语法:</p> <pre><code class="prism language-HTML"><dl> <dt>标题一</dt> <dd>第一项</dd> <dd>第二项</dd> <dt>标题二</dt> <dd>第一项</dd> <dd>第二项</dd> </dl> </code></pre> <p>定义列表是标题及列表项的结合,定义列表是用 <dl> 来声明的,用 <dt> 来表示每个列表项的起始,用 <dd> 来表示每个列表项的定义。</p> <p>定义列表的特性:</p> <p>1、没有顺序,每个 <dt>标签、<dd> 标签都是独占一行的。</p> <p>2、没有默认标记。</p> <p>3、一般用于一个标题下有一个或多个列表项的情况。</p> <h4>4、使用场合和注意事项</h4> <p>1、无序列表中的每一项都是平级的,没有级别之分;有序列表会依据列表项的顺序来进行显示。</p> <p>2、在实际的网页应用中,无序列表比有序列表应用更广泛。</p> <p>3、定义列表一般适用于带标题和标题解释性内容的场合。</p> <h3>二、表格</h3> <h4>1、使用表格的好处</h4> <h4>2、表格的基本结构和基本语法</h4> <p>基本结构:</p> <p>1、单元格:单元格是表格的最小单位,一个或多个单元格纵横排列组成了表格</p> <p>2、行:一个或多个的单元格横向堆叠形成了行</p> <p>3、列:因为表格单元格的宽度必须一致,所以单元格纵向排列形成了列</p> <p>基本语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token comment"><!--tr是开辟一行--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>第一个单元格的内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token comment"><!--th是使文字加粗变行头并居中--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>第二个单元格的内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>第一个单元格的内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token comment"><!--td是开辟一列--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>第二个单元格的内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre> <p>使用 <table> 标签来创建表格,在< table> 中使用 <tr>来创建行,可以有多行,在 <tr> 中用 <th> 来创建表格标题,在 <tr> 中使用 <td> 来创建单元格,可以有多个单元格; <th> 和 <td> 是同级。</p> <p><table>标签有一个常用属性:border(边框),单位是px(像素)。</p> <h4>3、表格的跨行和跨列</h4> <p>跨列的语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>所跨的列数<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>单元格内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre> <p>col为colum(列)的缩写,span为跨度,使用colspan的意思是跨列。</p> <p>跨行的语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">rowlspan</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>所跨的行数<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>单元格内容<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre> <p>row是行的意思,所以rowspan是跨行。</p> <p>跨行和跨列后,并不会改变表格的特点,同行的总高度一致,同列的总宽度一致,单元格的宽度或高度互相影响,所以结构是相对稳定的。</p> <h3>三、媒体元素</h3> <h4>1、视频元素</h4> <p><video>元素是用来播放视频文件的,支持Ogg(Ogg Vorbis的简写)、MPEG4、WebM等视频格式。</p> <p>语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>视频路径<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>controls<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></code></pre> <p>src是用来指定播放视频的路径的,controls是用来提供播放、暂停和音量控件;除此之外,还可以用width和height来设置视频的宽度和高度。</p> <p>如果浏览器不能识别<video>元素,可以在<video>元素中间插入一段文字提示,如:</p> <pre><code class="prism language-HTML"><video src="视频路径" controls="controls">你的浏览器不能识别video标签</video> </code></pre> <p>在video中虽然可以使用src属性链接视频路径,但是只能链接一种格式的视频;为解决这一问题出现了source元素。source元素嵌套在video里面,并且可以出现多次。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>video.webm<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>video.mp4<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span></code></pre> <p>当属性和属性值相同时,可以省略属性值。</p> <p>注意:controls是必须要有的,不能省略不写。</p> <h4>2、音频元素</h4> <p><audio>元素是用来播放音频文件的,支持Ogg、MP3、WAV等音频格式。</p> <p>语法:</p> <pre><code class="prism language-HTML"><audio src="音频路径" controls="controls"></audio> </code></pre> <p>src是用来指定播放音频的路径的,controls是用来提供播放、暂停和音量控件;除此之外,还可以用width和height来设置音频的宽度和高度。</p> <p>如果浏览器不能识别<audio>元素,可以在<audio>元素中间插入一段文字提示,如:</p> <pre><code class="prism language-HTML"><audio src="音频路径" controls="controls">你的浏览器不支持audio标签</audio> </code></pre> <p>音频和视频是差不多的同样是用<source/>元素来提供多路径的播放源。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>video.webm<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>video.mp4<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span></code></pre> <p>当属性和属性值相同时,可以省略属性值。</p> <p>注意:controls是必须要有的,不能省略不写。</p> <p>还有一个autoplay属性,该属性是指不需要与用户进行任何交流,直接播放。该属性是视频和音频通用的。</p> <h3>四、结构元素</h3> <p>结构元素表</p> <table> <thead> <tr> <th align="center">元素名</th> <th align="center">描述</th> </tr> </thead> <tbody> <tr> <td align="center">header</td> <td align="center">标题头部区域的内容(用于页面或页面中的一块区域)</td> </tr> <tr> <td align="center">footer</td> <td align="center">标记脚部区域内容(用于整个页面或页面的一块区域)</td> </tr> <tr> <td align="center">section</td> <td align="center">Web页面中的一块独立区域</td> </tr> <tr> <td align="center">article</td> <td align="center">独立的文字内容</td> </tr> <tr> <td align="center">aside</td> <td align="center">相关内容或应用(常用于侧边栏)</td> </tr> <tr> <td align="center">nav</td> <td align="center">导航类辅助内容</td> </tr> </tbody> </table> <p>实例:</p> <pre><code class="prism language-HTML"><body> <headre> <h2>网页头部</h2> </headre> <section> <h2>网页主体部分</h2> </section> <footer> <h2>网页底部</h2> </footer> </body> </code></pre> <h3>五、iframe框架</h3> <h4>1、使用<iframe></h4> <p>语法:</p> <pre><code class="prism language-html"><iframe src="引用网页地址" name="框架标识名"......><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span></code></pre> <p><iframe>内联框架的常用属性包括name 、width 、height。</p> <h2>四、表单</h2> <h3>一、表单概述</h3> <h4>1、表单的属性和标签</h4> <p>在HTML5中,用<form>标签来实现表单的创建,<form>标签是属于容器标签,<form>标签有两个常用属性:action属性和method属性。</p> <p>简单来说 action 属性就是提交的地址,method 属性就是发送的方式。</p> <p>两个属性的语法是:</p> <pre><code class="prism language-HTML"><form action="URL" method="get/post"> </form> </code></pre> <p>RUL:网址;</p> <p>get:提交时,网页中的地址栏状态会发生变化,表单数据会在RUL信息中显示;</p> <p>post:提交时,网页中的地址栏状态不会发生变化,表单数据不会被显示;</p> <p>post方法要比get方法的安全性要高,建议多使用post方法。</p> <h4>2、表单元素及格式</h4> <p>在表单中常用的标签有< input>、<textarea>、<select> …,目前主要学习前三个标签。</p> <table> <thead> <tr> <th align="center">属性</th> <th align="center">说明</th> </tr> </thead> <tbody> <tr> <td align="center">type</td> <td align="center">用来指定表单元素的类型,可以用的类型有:text、checkbox、image、radio、password、submit、reset、button、file、email、url、hidden、number。默认为text。</td> </tr> <tr> <td align="center">name</td> <td align="center">指定表单元素的名称</td> </tr> <tr> <td align="center">value</td> <td align="center">该属性是可选的,指定表单元素的初始值,如果value为radio类型,则必须指定一个值</td> </tr> <tr> <td align="center">size</td> <td align="center">指定表单元素的初始宽度,如果type为text或password类型,则单位为字符;如果type为其他类型,则单位为像素。</td> </tr> <tr> <td align="center">maxlength</td> <td align="center">指定可在text或password元素中输入最大字符数,默认是无限大的</td> </tr> <tr> <td align="center">checked</td> <td align="center">指定按钮是否被选中,也就是默认选中</td> </tr> </tbody> </table> <p>1、文本框</p> <p>在表单中最常用的表单元素就文本框,它用于输入单行文本信息 type的类型为text。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 名字:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre> <p>2、密码框</p> <p>密码框与文本框类似,区别在于 type的类型为password;并且密码框输入的字符全部都是以黑色实心的圆点来显示。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> 密码:<input type="password" name="pass"/> </form> </code></pre> <p>3、单选按钮</p> <p>单选按钮控件用于一组互排互斥的值,一组中的单选按钮控件是有一个相同的名字的,用户只能选中一个单选按钮。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 性别: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>男<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>男 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>女<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>女 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre> <p>4、复选框</p> <p>复选框和单选按钮是类似,只不过复选框可以给用户选择多个选项。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> 爱好: <input type="checkbox" name="aihao" value="sports"/>运动 <input type="checkbox" name="aihao" value="talk"/>聊天 <input type="checkbox" name="aihao" value="play"/>玩游戏 </form> </code></pre> <p>注:复选框和单选按钮都可以 设置默认选项;设置默认选项可以使用 checked 属性。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 性别: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>男<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/></span></span>男 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>女<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>女 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 爱好: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aihao<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sports<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">/></span></span>运动 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aihao<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>talk<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>聊天 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>aihao<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>play<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>玩游戏 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre> <p>上面的是默认选中 性别:男 爱好:运动;</p> <p>5、下拉框</p> <p>下拉框是用<select>标签和<option>标签来实现的。</p> <p>语法:</p> <pre><code class="prism language-HTML"> <form action="#" method="post"> <select name="指定列表名称" size="行数"> <option value="可选项的值" selected="selectde">.......</option> <option value="可选项的值">.......</option> </select> </form> </code></pre> <p>size:确定列表中可同时看到的行数;</p> <p>selected:表示默认选中,该标签目前只在select中可用;</p> <p>6、按钮</p> <p>按钮分为四种:submit(提交按钮)、reset(重置按钮)、button(普通按钮)、image(图片按钮)</p> <p>语法:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 提交按钮:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 重置按钮:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 普通按钮:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>普通<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> 图片按钮:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Image<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>图片<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre> <p>reset按钮:用户单击该按钮后,表单中的元素会被重置到最初的状态。</p> <p>submit按钮:用户单击该按钮后,表单将会提交到action属性指定的URL,并传递表单中的数据。</p> <p>button按钮:属于普通按钮,需要与事件关联使用(onclick事件是表单元素被单击时所触发的事件)。</p> <p>image按钮:属于图片按钮,用户单击该按钮后,表单将会提交到action属性指定的URL,并传递表单中的数据。</p> <p>7、多行文本域</p> <p>显示两行及以上的文本时可以用到多行文本域</p> <pre><code class="prism language-HTML"><form action="#" method="post"> <textarea name="textarea" cols="显示的列数" rows="显示的行数"> 文本内容 </textarea> </form> </code></pre> <p>cols:用来指定多行文本域的列的宽度</p> <p>rows:用来指定多行文本域的行数。</p> <p>注:在<textarea>标签中绝对不能用value属性来赋初始值。</p> <p>8、文本域</p> <p>文本域用来实现文件的选择,在type属性设置为file就可以了。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> <p> <input type="file" name="File"/> </p> </form> </code></pre> <p>9、邮件</p> <p>email类型的<input >元素是一种专门用于输入Email地址的文本框,email文本框会自动验证用户输入的地址是否有@符号如果没有不允许提交。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Email<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre> <p>10、网址</p> <p>url类型的input元素提供用于输入的url地址这类特殊文本框;url也会自动验证url文本框的内容是不是url的地址格式,如果不是不允许提交。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> <input type="url" name="URL"/> </form> </code></pre> <p>11、数字</p> <p>number类型的<input>元素提供输入数字的文本框。number类型可以限制最大值和最小值、合法的数字间隔或默认值等,如果输入的数字不在限制的范围内就会报错。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> <input type="number" name="num" min="0" max="10" step="2"/> </form> </code></pre> <p>min:表示最小值</p> <p>max:表示最大值</p> <p>step:表示数字间隔</p> <p>value:表示默认值</p> <p>12、滑块</p> <p>range类型的<input>元素提供用于输入包括一定范围内的数字值得文本框,在页面中显示为滑块条。range类型可以限制最大值和最小值、合法的数字间隔或默认值等,如果输入的数字不在限制的范围内就会报错。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">ation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Range<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre> <p>max:表示最大值</p> <p>min:表示最小值</p> <p>step:表示数字间隔</p> <p>value:表示默认值</p> <p>13、搜索框</p> <p>search类型的<input>元素提供用于输入搜索关键词的文本框。search可以在任意页面使用。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sousuo<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre> <p>在<input>元素中email类型、url类型、number类型有自动验证输入是否合格的功能。</p> <h3>二、表单的高级应用</h3> <p>1、表单的隐藏域</p> <p>在提交时把部分信息隐藏起来,不显示在网页上。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userid<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>666<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre> <p>将表单的提交方式改成get方法,单击"提交"按钮,就可以查看地址栏中被隐藏的数据。</p> <p>2、表单的只读与禁用</p> <p>只读场景:网站服务器不希望用户修改的数据,这写数据在表单元素中显示。</p> <p>禁用场景:只有满足某个条件后,才能选用某项功能。</p> <p>只读和禁用效果分别通过设置readonly属性和disabled属性来实现。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> <p> <input type="text" name="name" value="张三" readonly/> </p> <!--只读--> <p><input type="submit" value="修改" disabled/> </p> <!--禁用--> </form> </code></pre> <p>只读和禁用的相同点和不同点</p> <p>相同点:文本框都不能输入。</p> <p>不同点:disabled的表单元素不能提交到另一个页面;disabled的颜色为灰色。</p> <p>通常只读属性用于不希望用户对数据进行修改的场合,禁用属性则可以配合其他控件使用。</p> <p>3、表单元素的标注</p> <p>标注的目的就是为了增强鼠标的可用性,当用户使用鼠标单击标注的文本内容是,浏览器会自动将焦点转移到与该标注相关的表单元素上。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> 请选择性别: <label for="male">男</label> <input type="radio" name="sex" id="male"/> <label for="famale">女</label> <input type="radio" name="sex" id="famale"/> </form> </code></pre> <p>在<label>标签中name属性和id属性是不可以少的。name属性由表单负责处理,id属性是用来关联的。</p> <h3>三、表单的初级验证</h3> <p>1、初级验证的好处</p> <p>减轻了服务器的压力;</p> <p>保证数据的可行性和安全性。</p> <p>2、初级验证的方法</p> <p>1、placeholder</p> <p>placeholder属性是input类型文本框提供一种提示(hint),是用来输入提示语的,当输入框为空时显示,当输入框有输入内容时会自动消失。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> <input type="search" name="sousuo" placeholder="请输入要搜索的关键词"/> <input type="sbumit" name="Sub" value="Go"/> </form> </code></pre> <p>2、required</p> <p>required属性用于规定文本框填写内容不能为空,否则不允许用户提交表单,就是非空验证。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> 用户名:<input type="text" name="username" required/> <input type="submit" value="提交"/> </form> </code></pre> <p>3、pattern</p> <p>pattern属性用于验证input类型的文本框中用户输入的内容是否与自定义的正则表达式相匹配。</p> <pre><code class="prism language-HTML"><form action="#" method="post"> <p> 电话号码: <input type="text" name="tel" required pattern="^1[358\d{9}]" /> *以13、15、18开头的11位数字 <br /> <input type="submit" value="提交" /> </p> </form> </code></pre> <p>\w:表示任意一个a-z;A-Z;0-9的字符;</p> <p>[]:表述当前位可以从[]中取任意一个;</p> <p>{}:表示位数。</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1280292909811253248"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(HTML5)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> <span class="text-muted">红匣子实力推荐</span> <div>随着科技的不断发展,移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下,H5小游戏应运而生,为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式,正逐渐受到市场的关注和青睐。那么,什么是H5小游戏定制开发呢?它又具有哪些特点和优势呢?让我们一起来深入了解一下。首先,我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏,可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835123524155568128.htm" title="HTML5概述" target="_blank">HTML5概述</a> <span class="text-muted">WFIT~SKY</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>1.HTML概述1.1HTML定义HTML超文本标记语言,其中超文本是链接,标记也叫标签(即带尖括号的文本)。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html:整个网页head:网页头部,存放给浏览器看的代码,例如CSSbody:网页主体,存放给用户看的代码,例如文字、图片title:网页标题1.3HTML关系父子关系(嵌套)兄弟关系(并列)2.HTML开发环境2.1</div> </li> <li><a href="/article/1835111175398977536.htm" title="HTML添加文字" target="_blank">HTML添加文字</a> <span class="text-muted">若无心_.</span> <a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一、创建HTML5文档基本标签//定义文档类型//定义HTML文档//定义关于文档的信息文档标题//定义文档的标题//定义文档的字符编码//定义文档的主体二、文字相关标签1.标题文字-标签可定义标题。定义最大的标题。定义最小的标题。Document这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.文本段落Document这次会晤的主题是“金砖国家在非洲:在第四次工业革命中共谋包容增长</div> </li> <li><a href="/article/1835082840174325760.htm" title="【拖拽】自定义拖拽图标" target="_blank">【拖拽】自定义拖拽图标</a> <span class="text-muted">风露_</span> <div>一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法:voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点:Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed</div> </li> <li><a href="/article/1834814025607770112.htm" title="Cocos2d、Cocos2dx、Cocos Creator、Cocos Studio的区别" target="_blank">Cocos2d、Cocos2dx、Cocos Creator、Cocos Studio的区别</a> <span class="text-muted">Thomas游戏圈</span> <div>一、Cocos2d和Cocos2dx的区别【开发语言】:Cocos2d是Object-C写的,Cocos2dx是C++写的,支持使用C++、Lua或Java进行开发。【运行平台】:Cocos2d只能在IOS下运行,Cocos2dx是跨平台的,适配iOS、Android、HTML5、Windows和Mac系统,功能侧重于原生移动平台。点击链接加入群聊【Unity/Cocos交流群】【国籍】:Coco</div> </li> <li><a href="/article/1834645992071327744.htm" title="web前端达到什么水平,才能找到工作?" target="_blank">web前端达到什么水平,才能找到工作?</a> <span class="text-muted">cj瑾瑜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>一、前端是什么?前端即网站前台部分,也叫前端开发,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。(核心技术:HTML、CSS、JavaScript)核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时,HTML将元素进行定义</div> </li> <li><a href="/article/1834504328082190336.htm" title="HTML5(六)canvas 矩形、路径、画板功能" target="_blank">HTML5(六)canvas 矩形、路径、画板功能</a> <span class="text-muted">祝名</span> <div>一.绘制矩形1.什么是canvascanvas标签相当于一个画板;canvas的宽高不要用css去定义,直接在标签中用属性写;2.obj=c.getContext('2d');获得2d绘画环境(相当于铺了一层画布)绘画图像的操作都会在obj这个绘画环境中存储;3.绘画方法及样式x,y为坐标样例:二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功</div> </li> <li><a href="/article/1834414460463312896.htm" title="HTML5中的数据存储sessionStorage、localStorage" target="_blank">HTML5中的数据存储sessionStorage、localStorage</a> <span class="text-muted">阿立聊代码</span> <a class="tag" taget="_blank" href="/search/HTML%E5%AE%9E%E6%88%98/1.htm">HTML实战</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>第8章HTML5中的数据存储之前通常使用Cookie存储机制将数据保存在用户的客户端。H5增加了两种全新的数据存储方式:WebStroage和WebSQLDatabase.前者用于临时或永久保存客户端少量数据,后者是客户端本地化的一套数据库系统。8.1WebStorage存储简介WebStorageAPI分为会话数据和长期数据,相应的API分为两类:sessionStorage(保存会话数据)lo</div> </li> <li><a href="/article/1834156411374891008.htm" title="html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法" target="_blank">html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法</a> <span class="text-muted">RemusrickCat</span> <div>本文实例为大家全面的解析了Bootstrap中Carousel的使用方法,供大家参考,具体内容如下源码文件:Carousel.scssCarousel.js实现原理:隐藏所有要显示的元素,然后指定当前要显示的为block,宽、高自适应源码分析:1、Html结构:主要分为以四个部分1.1、容器:最外层div,需要一个data-ride=”carousel”来指定为轮播放插件,并且提供一个Id,方便圆</div> </li> <li><a href="/article/1834155529212096512.htm" title="【Web前端技术 02】深入探索HTML5:标签全解析与案例演示!" target="_blank">【Web前端技术 02】深入探索HTML5:标签全解析与案例演示!</a> <span class="text-muted">wcyd</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">Web前端技术</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>深入探索HTML5:标签全解析与案例演示!大家好!在上一篇文章中,我们对HTML5有了一个基本的了解。今天,我们将更深入地探索HTML5,全面介绍各种标签及其应用。从基础标签到新增标签,从文档结构到格式标签,我们将一一解析,并提供丰富的案例演示。准备好了吗?让我们开始吧!️HTML5基础结构首先,让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图,指导我们如何构建网页。下面</div> </li> <li><a href="/article/1834148472605995008.htm" title="HTML5中`<span>`标签深入解析" target="_blank">HTML5中`<span>`标签深入解析</a> <span class="text-muted">软考鸭</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>引言在HTML5中,标签是一个行内元素,用于对文档中的一小部分文本或内容进行分组,以便于应用CSS样式或JavaScript脚本。与块级元素(如)不同,不会打断文本的流动,而是与其内容一起在同一行内显示。本文将深入解析标签的定义、用法、属性以及在实际开发中的应用。定义与用法标签是一个无语义的行内容器,用于包裹文档中的一部分内容,而不改变文档的结构。它通常与CSS和JavaScript结合使用,以实</div> </li> <li><a href="/article/1833664744578445312.htm" title="HTML5 `<button>` 标签深入全面解析" target="_blank">HTML5 `<button>` 标签深入全面解析</a> <span class="text-muted">软考鸭</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>引言在HTML5中,标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一。与相比,标签提供了更多的灵活性和样式化的可能性。本文将深入解析HTML5中的标签,详细介绍其属性、样式以及实际应用。标签的基本用法标签内部可以放置内容,如文本、图像或其他HTML元素。这使得标签比更加灵活。点击我在这个简单的例子中,我们创建了一个普通的按钮,其上的文本是“点击我”。标签的属性标签支持多种属性,用于定</div> </li> <li><a href="/article/1833662348959772672.htm" title="HTML5之基础、元信息标签" target="_blank">HTML5之基础、元信息标签</a> <span class="text-muted">Programmer.杨</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF-HTML/1.htm">前端技术-HTML</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/meta/1.htm">meta</a><a class="tag" taget="_blank" href="/search/head/1.htm">head</a><a class="tag" taget="_blank" href="/search/title/1.htm">title</a><a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%AD%BE/1.htm">标签</a> <div>标签声明位于文档中最前面的位置,处于标签之前。声明不是一个HTML标签,它是告知Web浏览器该页面使用了哪种HTML版本(规范),浏览器用此版本(规范)对该文档进行解析,渲染。可声明的DTD有三种:分别是严格版本(strict)、过渡版本(transitional)、以及基于框架的版本(frameset),若文档不遵循其DTD规范,则此文档中的代码不但不能通过代码校验,并且有可能无法正常显示。文档</div> </li> <li><a href="/article/1833656803154554880.htm" title="HTML5中`<ul>`标签深入全面解析" target="_blank">HTML5中`<ul>`标签深入全面解析</a> <span class="text-muted">软考鸭</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>在HTML5的广阔天地里,标签作为无序列表的代言人,扮演着举足轻重的角色。它不仅能够整洁地罗列信息,还通过丰富的属性和样式选项,为网页设计师提供了无限的创意空间。本文将深入剖析标签的内核,详细解读其属性与样式,助力你打造更加精致、功能强大的网页。一、标签基础概览,即UnorderedList(无序列表)的缩写,用于在网页中展示一系列无特定顺序的项目。每个项目由(ListItem,列表项)标签包裹,</div> </li> <li><a href="/article/1833656298739167232.htm" title="HTML5全面知识点" target="_blank">HTML5全面知识点</a> <span class="text-muted">A_cot</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML(HyperTextMarkupLanguage)是构建网页的基础语言。以下是全面的HTML知识点:一、HTML基础概念定义:HTML是一种用于描述网页结构的标记语言,通过各种标签来定义网页的内容和布局。版本历史:从HTML的早期版本发展到现在的HTML5,功能不断增强,支持更多的多媒体和交互特性。二、HTML文档结构声明:用于告诉浏览器文档类型是HTML5。标签:整个HTML文档的根元素</div> </li> <li><a href="/article/1833513837786132480.htm" title="python提取数据库数据到前端html5显示_python html提取数据库数据" target="_blank">python提取数据库数据到前端html5显示_python html提取数据库数据</a> <span class="text-muted">weixin_39878745</span> <div>python开源工具列表【持续更新】以下是个人在工作中整理的一些pythonwheel,供参考。这个列表包含与网页抓取和数据处理的Python库网络通用urllib-网络库(stdlib)。requests-网络库。grab–网络库(基于pycurl)。pycurl–网络库(绑定libcurl)。urllib3–...文章武耀文2018-04-253128浏览量8个用于业余项目的优秀Python库</div> </li> <li><a href="/article/1833445106376601600.htm" title="掌财社:在html5中使用video进行全屏播放与自动播放的代码方法总结!" target="_blank">掌财社:在html5中使用video进行全屏播放与自动播放的代码方法总结!</a> <span class="text-muted">weixin_45378258</span> <a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a> <div>今天由于在之前小编在项目中遇到的有关于:“在html5中使用video进行全屏播放与自动播放的代码方法总结!”这方面的内容,所以今天就来和大家分享有关于这方面的相关内容!近期开始开发公司新版官网,首页顶部(header)是一个全屏播放的小视频,现简单总结如下:页面代码:其中php简单判断了一下是否是移动设备,移动设备不展示视频(如果移动端展示的话,需要解决iOS上无法自动播放的问题):ps:如果H</div> </li> <li><a href="/article/1833356121453195264.htm" title="Vue中使用pdfJs预览PDF、图片" target="_blank">Vue中使用pdfJs预览PDF、图片</a> <span class="text-muted">viceen</span> <a class="tag" taget="_blank" href="/search/vue3%2Bts-%E8%BF%90%E7%BB%B4/1.htm">vue3+ts-运维</a><a class="tag" taget="_blank" href="/search/vue%E9%A1%B9%E7%9B%AE-%E8%BF%90%E7%BB%B4/1.htm">vue项目-运维</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>Vue中使用pdfJs预览PDF、图片pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能。实现步骤如下:1.下载pdfJs到本地(官网下载地址),放到项目根目录下的静态资源目录static文件夹内,将文件命名为pdfJs。如下图使用iframe打开或者需要注意的是:file参数中默认只允许传简单路径比如:http://www</div> </li> <li><a href="/article/1833255014102036480.htm" title="【WebKit深度解析】HTML5支持全景与实践指南" target="_blank">【WebKit深度解析】HTML5支持全景与实践指南</a> <span class="text-muted">2401_85812026</span> <a class="tag" taget="_blank" href="/search/webkit/1.htm">webkit</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>标题:【WebKit深度解析】HTML5支持全景与实践指南WebKit作为许多现代浏览器的核心技术,对HTML5的支持程度直接关系到Web应用的性能和体验。HTML5是构建现代Web应用的基石,提供了丰富的特性和API。本文将深入探讨WebKit对HTML5的支持程度,并通过实际代码示例,展示如何在WebKit浏览器上充分利用HTML5的强大功能。1.WebKit与HTML5概述WebKit是一个</div> </li> <li><a href="/article/1832853070820765696.htm" title="HTML5 <video>常用属性、时间、方法及基础使用说明" target="_blank">HTML5 <video>常用属性、时间、方法及基础使用说明</a> <span class="text-muted">Wu Youlu</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>简介HTML元素用于在文档中嵌入媒体播放器,用于支持文档内的视频播放。标签也可用于播放音频,但播放音频用更加适合。元素支持三种视频格式:MP4,WebM,和Ogg:MP4=带有H.264视频编码和AAC音频编码的MPEG4文件WebM=带有VP8视频编码和Vorbis音频编码的WebM文件Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件基础写法Yourbrowserdoesnot</div> </li> <li><a href="/article/1832736711709388800.htm" title="WebAPI DOM文档对象模型" target="_blank">WebAPI DOM文档对象模型</a> <span class="text-muted">znhyXYG</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>DOM(文档对象模型)是一个可以改变网页内容、结构、样式的处理可扩展标记语言的接口一、获取元素方法:1、根据ID获取2、根据标签名获取3、根据类名获取(html5新增)4、querySelector获取(html5新增)5、querySelectorAll获取(html5新增)6、获取特殊元素(body、html)ID获取方法:document.getElementById(); 2019-9-9</div> </li> <li><a href="/article/1832675190677532672.htm" title="使用fabric.js简简单单实现一个画板" target="_blank">使用fabric.js简简单单实现一个画板</a> <span class="text-muted">小草先森tyro</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>什么是fabricfabric是一个功能强大的JavaScript库,运行在HTML5canvas上。fabric为canvas提供了一个交互式对象模型,以及一个svg-to-canvas解析器。与canvas的区别来一个简单的例子来说明一下fabric与canvas的区别,假设我们想在一个画布上画一个红色的矩形://原生canvasapi//有一个id是c的canvas元素varcanvasEl</div> </li> <li><a href="/article/1832670899594162176.htm" title="探索 Fabric.js:前端开发的轻量级图形编辑框架" target="_blank">探索 Fabric.js:前端开发的轻量级图形编辑框架</a> <span class="text-muted">滑辰煦Marc</span> <div>探索Fabric.js:前端开发的轻量级图形编辑框架是一个强大的、基于WebGL和SVG的JavaScript图形库,专为构建交互式图形界面而设计。它提供了一种简单的方式来在网页上创建和操纵矢量对象,包括文本、形状、图像等,并且具有丰富的可定制性和性能优化。项目简介Fabric.js提供了一个统一的对象模型,使得处理HTML5canvas上的元素变得异常简单。无论是创建复杂的绘图应用,还是实现动态</div> </li> <li><a href="/article/1832626394996240384.htm" title="用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码" target="_blank">用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码</a> <span class="text-muted">天眼查</span> <a class="tag" taget="_blank" href="/search/%E7%94%A8html%E5%86%99%E5%87%BA%E7%94%9F%E6%97%A5%E8%9B%8B%E7%B3%95/1.htm">用html写出生日蛋糕</a> <div>.birthday.container{width:600px;height:600px;margin:0pxauto;background:#fafafa;border-radius:5px;position:relative;}/****顶层的**/.birthday.top-one{position:absolute;width:280px;height:280px;bottom:200px</div> </li> <li><a href="/article/1832621857744973824.htm" title="HTML5生日祝福蛋糕页面(生日蛋糕树) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心" target="_blank">HTML5生日祝福蛋糕页面(生日蛋糕树) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心</a> <span class="text-muted">@秋天的笔记</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%97%A5%E7%A5%9D%E7%A6%8F%E7%BD%91%E9%A1%B5html/1.htm">生日祝福网页html</a><a class="tag" taget="_blank" href="/search/520%E6%83%85%E4%BA%BA%E8%8A%82%E5%91%8A%E7%99%BD%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C/1.htm">520情人节告白网页制作</a><a class="tag" taget="_blank" href="/search/%E4%B8%83%E5%A4%95%E6%83%85%E4%BA%BA%E8%8A%82%E8%A1%A8%E7%99%BD%E7%BD%91%E9%A1%B5%E6%BA%90%E4%BB%A3%E7%A0%81/1.htm">七夕情人节表白网页源代码</a><a class="tag" taget="_blank" href="/search/HTML5%E4%B8%83%E5%A4%95%E6%83%85%E4%BA%BA%E8%8A%82%E5%8A%A8%E7%94%BB%E7%BD%91%E9%A1%B5/1.htm">HTML5七夕情人节动画网页</a><a class="tag" taget="_blank" href="/search/HTML%E7%94%9F%E6%97%A5%E5%BF%AB%E4%B9%90%E4%BB%A3%E7%A0%81/1.htm">HTML生日快乐代码</a><a class="tag" taget="_blank" href="/search/3D%E6%97%8B%E8%BD%AC%E7%94%B5%E5%AD%90%E7%9B%B8%E5%86%8C/1.htm">3D旋转电子相册</a> <div>HTML5七夕情人节表白网页❤生日蛋糕(蛋糕树)❤HTML+CSS+JS求婚html生日快乐祝福代码网页520情人节告白代码程序员表白源码抖音3D旋转相册js烟花代码css爱心表白这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站,可以任意修改和使用,源码已上传,演示网址如下。文章末尾-已经附上源码下载地址作者主页-更多源码1</div> </li> <li><a href="/article/1832514192314298368.htm" title="记录-小程序720°VR(跳转H5页面实现)" target="_blank">记录-小程序720°VR(跳转H5页面实现)</a> <span class="text-muted">久违的小技巧</span> <a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/vr/1.htm">vr</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>全景浏览提前准备1拍照支架/照片合成软件(KolorAutopanoGiga4.0)或者全景相机2pannellum(pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建,没有插件。)3H5页面引入pannellum.js/css文件,swiper/jquery文件(因为需要在全景图底部显示可切换图片,与dom操作/ajax</div> </li> <li><a href="/article/1832468553052286976.htm" title="HTML5与CSS3" target="_blank">HTML5与CSS3</a> <span class="text-muted">Mousse.-</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>HTML部分##什么是网页:1.网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。2.网页是网站中的一“页”,通常是HTML格式的文件,它要通过浏览器来阅读。##网页的组成:1.网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。##什么是HTML:1</div> </li> <li><a href="/article/123.htm" title="js动画html标签(持续更新中)" target="_blank">js动画html标签(持续更新中)</a> <span class="text-muted">843977358</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/1.htm">动画</a><a class="tag" taget="_blank" href="/search/media/1.htm">media</a><a class="tag" taget="_blank" href="/search/opacity/1.htm">opacity</a> <div>1.jQuery 效果 - animate() 方法    改变 "div" 元素的高度:    $(".btn1").click(function(){      $("#box").animate({height:"300px</div> </li> <li><a href="/article/250.htm" title="springMVC学习笔记" target="_blank">springMVC学习笔记</a> <span class="text-muted">caoyong</span> <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>1、搭建开发环境    a>、添加jar文件,在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar    b>、在web.xml中配置前端控制器       <servlet>     &nbs</div> </li> <li><a href="/article/377.htm" title="POI中设置Excel单元格格式" target="_blank">POI中设置Excel单元格格式</a> <span class="text-muted">107x</span> <a class="tag" taget="_blank" href="/search/poi/1.htm">poi</a><a class="tag" taget="_blank" href="/search/style/1.htm">style</a><a class="tag" taget="_blank" href="/search/%E5%88%97%E5%AE%BD/1.htm">列宽</a><a class="tag" taget="_blank" href="/search/%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC/1.htm">合并单元格</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C/1.htm">自动换行</a> <div>引用:http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结: 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); HSSFCellStyle setBorder = wb.</div> </li> <li><a href="/article/504.htm" title="jquery 获取A href 触发js方法的this参数 无效的情况" target="_blank">jquery 获取A href 触发js方法的this参数 无效的情况</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>html如下:  <td class=\"bord-r-n bord-l-n c-333\"> <a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a> </td>"   j</div> </li> <li><a href="/article/631.htm" title="md5" target="_blank">md5</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/MD5/1.htm">MD5</a> <div> import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MDFive { public static void main(String[] args) { String md5Str = "cq</div> </li> <li><a href="/article/758.htm" title="完全卸载干净Oracle11g" target="_blank">完全卸载干净Oracle11g</a> <span class="text-muted">sophia天雪</span> <a class="tag" taget="_blank" href="/search/orale%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">orale数据库</a><a class="tag" taget="_blank" href="/search/%E5%8D%B8%E8%BD%BD%E5%B9%B2%E5%87%80/1.htm">卸载干净</a><a class="tag" taget="_blank" href="/search/%E6%B8%85%E7%90%86%E6%B3%A8%E5%86%8C%E8%A1%A8/1.htm">清理注册表</a> <div>完全卸载干净Oracle11g A、存在OUI卸载工具的情况下:     第一步:停用所有Oracle相关的已启动的服务;     第二步:找到OUI卸载工具:在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中         &</div> </li> <li><a href="/article/885.htm" title="apache 的access.log 日志文件太大如何解决" target="_blank">apache 的access.log 日志文件太大如何解决</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>CustomLog logs/access.log common  此写法导致日志数据一致自增变大。 直接注释上面的语法 #CustomLog logs/access.log common 增加: CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log </div> </li> <li><a href="/article/1012.htm" title="Hadoop单机模式环境搭建关键步骤" target="_blank">Hadoop单机模式环境搭建关键步骤</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>        Hadoop环境需要sshd服务一直开启,故,在服务器上需要按照ssh服务,以Ubuntu Linux为例,按照ssh服务如下: sudo apt-get install ssh sudo apt-get install rsync 编辑HADOOP_HOME/conf/hadoop-env.sh文件,将JAVA_HOME设置为Java</div> </li> <li><a href="/article/1139.htm" title="PL/SQL DEVELOPER 使用的一些技巧" target="_blank">PL/SQL DEVELOPER 使用的一些技巧</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>1 记住密码 这是个有争议的功能,因为记住密码会给带来数据安全的问题。 但假如是开发用的库,密码甚至可以和用户名相同,每次输入密码实在没什么意义,可以考虑让PLSQL Developer记住密码。 位置:Tools菜单--Preferences--Oracle--Logon HIstory--Store with password 2 特殊Copy 在SQL Window</div> </li> <li><a href="/article/1266.htm" title="PHP:在对象上动态添加一个新的方法" target="_blank">PHP:在对象上动态添加一个新的方法</a> <span class="text-muted">bardo</span> <a class="tag" taget="_blank" href="/search/%E6%96%B9%E6%B3%95/1.htm">方法</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E6%B7%BB%E5%8A%A0/1.htm">动态添加</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a> <div>有关在一个对象上动态添加方法,如果你来自Ruby语言或您熟悉这门语言,你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象,并给这个对象添加一个额外的方法。   好!不说Ruby了,让我们来谈谈PHP   PHP未提供一个“标准的方式”做这样的事情,这也是没有核心的一部分...   但无论如何,它并没有说我们不能做这样</div> </li> <li><a href="/article/1393.htm" title="ThreadLocal与线程安全" target="_blank">ThreadLocal与线程安全</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/threadLocal/1.htm">threadLocal</a> <div>首先来看一下线程安全问题产生的两个前提条件:  1.数据共享,多个线程访问同样的数据。  2.共享数据是可变的,多个线程对访问的共享数据作出了修改。    实例:         定义一个共享数据: public static int a = 0;         </div> </li> <li><a href="/article/1520.htm" title="Tomcat 架包冲突解决" target="_blank">Tomcat 架包冲突解决</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>环境: Tomcat 7.0.6 win7 x64 错误表象:【我的冲突的架包是:catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突,不知道其他架包冲突时是不是也报这个错误】 严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.dep</div> </li> <li><a href="/article/1647.htm" title="【Scala三】分析Spark源代码总结的Scala语法一" target="_blank">【Scala三】分析Spark源代码总结的Scala语法一</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>Scala语法 1. classOf运算符 Scala中的classOf[T]是一个class对象,等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class    2. 方法默认值 defaultMinPartitions就是一个默认值,类似C++的方法默认值     </div> </li> <li><a href="/article/1774.htm" title="java 线程池管理机制" target="_blank">java 线程池管理机制</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/java%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">java线程池</a><a class="tag" taget="_blank" href="/search/%E7%AE%A1%E7%90%86%E6%9C%BA%E5%88%B6/1.htm">管理机制</a> <div>编辑 Add Tools   jdk线程池   一、引言 第一:降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二:提高响应速度。当任务到达时,任务可以不需要等到线程创建就能立即执行。第三:提高线程的可管理性。线程是稀缺资源,如果无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,使用线程池可以进行统一的分配,调优和监控。   </div> </li> <li><a href="/article/1901.htm" title="关于hql中使用本地sql函数的问题(问-答)" target="_blank">关于hql中使用本地sql函数的问题(问-答)</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/HQL/1.htm">HQL</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E5%87%BD%E6%95%B0/1.htm">存储函数</a> <div>转自于:http://www.iteye.com/problems/23775 问: 我在开发过程中,使用hql进行查询(mysql5)使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好,但是我直接把它写在hql语句里面(from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f</div> </li> <li><a href="/article/2028.htm" title="读《研磨设计模式》-代码笔记-迭代器模式-Iterator" target="_blank">读《研磨设计模式》-代码笔记-迭代器模式-Iterator</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.Arrays; import java.util.List; /** * Iterator模式提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象内部表示 * * 个人觉得,为了不暴露该</div> </li> <li><a href="/article/2155.htm" title="常用SQL" target="_blank">常用SQL</a> <span class="text-muted">chenjunt3</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div> --NC建库 CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ; CREATE TABLESPA</div> </li> <li><a href="/article/2282.htm" title="数学是科学技术的语言" target="_blank">数学是科学技术的语言</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a><a class="tag" taget="_blank" href="/search/%E9%A2%86%E5%9F%9F%E6%A8%A1%E5%9E%8B/1.htm">领域模型</a> <div>  从小学到大学都在学习数学,从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学,看起来好像掌握了这些数学知识,但是在工作中却很少真正用到这些知识,为什么?    最近在研究一种开源软件-CARROT2的源代码的时候,又一次感觉到数学在计算机技术中的不可动摇的基础作用,CARROT2是一种用于自动语言分类(聚类)的工具性软件,用JAVA语言编写,它</div> </li> <li><a href="/article/2409.htm" title="Linux系统手动安装rzsz 软件包" target="_blank">Linux系统手动安装rzsz 软件包</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/sz/1.htm">sz</a><a class="tag" taget="_blank" href="/search/rz/1.htm">rz</a> <div>1、下载软件 rzsz-3.34.tar.gz。登录linux,用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。 2、解压 tar zxvf  rzsz-3.34.tar.gz 3、安装  cd rzsz-3.34 ; make posix 。注意:这个软件安装与常规的GNU软件不</div> </li> <li><a href="/article/2536.htm" title="读源码之:ArrayBlockingQueue" target="_blank">读源码之:ArrayBlockingQueue</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>    ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过 takeIndex和 putIndex来分别记录出队列和入队列的下标,以保证在出队列时 不进行元素移动. //在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数</div> </li> <li><a href="/article/2663.htm" title="C语言学习九枚举的定义和应用" target="_blank">C语言学习九枚举的定义和应用</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>枚举的定义 # include <stdio.h> enum WeekDay { MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay }; int main(void) { //int day; //day定义成int类型不合适 enum WeekDay day = Wedne</div> </li> <li><a href="/article/2790.htm" title="Vagrant 三种网络配置详解" target="_blank">Vagrant 三种网络配置详解</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/vagrant/1.htm">vagrant</a> <div> Forwarded port Private network Public network Vagrant 中一共有三种网络配置,下面我们将会详解三种网络配置各自优缺点。 端口映射(Forwarded port),顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上,访问宿主计算机端口时,请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为: c</div> </li> <li><a href="/article/2917.htm" title="16.性能优化-完结" target="_blank">16.性能优化-完结</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>性能调优是一个宏大的工程,需要从宏观架构(比如拆分,冗余,读写分离,集群,缓存等), 软件设计(比如多线程并行化,选择合适的数据结构), 数据库设计层面(合理的表设计,汇总表,索引,分区,拆分,冗余等) 以及微观(软件的配置,SQL语句的编写,操作系统配置等)根据软件的应用场景做综合的考虑和权衡,并经验实际测试验证才能达到最优。 性能水很深, 笔者经验尚浅 ,赶脚也就了解了点皮毛而已,我觉得</div> </li> <li><a href="/article/3044.htm" title="Word Search" target="_blank">Word Search</a> <span class="text-muted">hcx2013</span> <a class="tag" taget="_blank" href="/search/search/1.htm">search</a> <div>Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve</div> </li> <li><a href="/article/3171.htm" title="Spring4新特性——Web开发的增强" target="_blank">Spring4新特性——Web开发的增强</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a><a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新</div> </li> <li><a href="/article/3298.htm" title="CentOS安装配置tengine并设置开机启动" target="_blank">CentOS安装配置tengine并设置开机启动</a> <span class="text-muted">liuxingguome</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>yum install gcc-c++  yum install pcre pcre-devel  yum install zlib zlib-devel  yum install openssl openssl-devel Ubuntu上可以这样安装 sudo aptitude install libdmalloc-dev libcurl4-opens</div> </li> <li><a href="/article/3425.htm" title="第14章 工具函数(上)" target="_blank">第14章 工具函数(上)</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3552.htm" title="Xelsius 2008 and SAP BW at a glance" target="_blank">Xelsius 2008 and SAP BW at a glance</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a><a class="tag" taget="_blank" href="/search/Xelsius/1.htm">Xelsius</a> <div>Xelsius提供了丰富多样的数据连接方式,其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢? 以下Wiki文章应该提供了全面的概览。   http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co</div> </li> <li><a href="/article/3679.htm" title="oracle表空间相关" target="_blank">oracle表空间相关</a> <span class="text-muted">tongsh6</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>在oracle数据库中,一个用户对应一个表空间,当表空间不足时,可以采用增加表空间的数据文件容量,也可以增加数据文件,方法有如下几种: 1.给表空间增加数据文件    ALTER TABLESPACE "表空间的名字" ADD DATAFILE    '表空间的数据文件路径' SIZE 50M;   &nb</div> </li> <li><a href="/article/3806.htm" title=".Net framework4.0安装失败" target="_blank">.Net framework4.0安装失败</a> <span class="text-muted">yangjuanjava</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>上午的.net framework 4.0,各种失败,查了好多答案,各种不靠谱,最后终于找到答案了 和Windows Update有关系,给目录名重命名一下再次安装,即安装成功了! 下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=17113 方法: 1.运行cmd,输入net stop WuAuServ 2.点击开</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>