大熊软糖M

前端学习笔记 HTML5 基础内容

参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：HTML 教程 W3school

文章目录

关于HTML与HTML5
元素，标签和属性

块元素与内联元素

HTML5空文档
标签简介

h1~h6：标题
p：段落
a：锚

使用a标签做页内跳转

img：图片

a和img的嵌套使用

br：换行
span：内嵌文字
div：划分

属性简介

body标签的bgcolor属性：背景颜色
a标签的target属性：指定打开方式
align：对齐
class：类名
id：标识符
style：样式
title：额外信息

文字格式化
引入CSS样式

外部引入：link，rel、type、href
内部引入：style，type
内联引入：style属性

表格table
列表

无序列表ul
有序列表ol
嵌套列表
自定义列表：dl、dt、dd

表单form

input：文本、密码、复选框、单选框，按钮与提交等
select，option：下拉框
textarea：文本域
表单的action交互

布局

使用div布局
使用table表格布局

框架

frameset：弃用
iFrame

网页内嵌
链接target属性中_parent的取值与iframe

实体：转义字符

关于HTML与HTML5

HTML是一种标记语言，而不是编程语言。
HTML出现于1991年。
HTML5出现于2012年。
XHTML5出现于2013年。

元素，标签和属性

元素：元素指的是从开始标签到结束标签的所有代码。
标签：承载HTML的主要内容，形如<标签>。
属性：从属于标签，为可选参数，形如<标签属性 = "值">。

块元素与内联元素

块元素：通常以新行开始，如
，
，
HTML5空文档

HTML5空文档如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>

是HTML5的声明方式。
不同的HTML和XHTML版本有不同的声明方式。

html标签，定义这是一个html文档。
属性lang指定语言，如"ch"，"en"等。

闭标签，大多数标签需要使用的方式来闭合。多数IDE提供自动补全（闭合）。

head表示头部，body表示内容。

<head> <meta charset="UTF-8"> <title>Title</title> </head>

标签定义关于 HTML 文档的元信息。
charset属性用来定义字符集。
</code>标签包含的内容就是HTML文档的标题。 <h1>标签简介</h1> <h2>h1~h6：标题</h2> <pre><code class="prism language-clike"> <h1>标题</h1> <h2>标题</h2> <h3>标题</h3> <h4>标题</h4> <h5>标题</h5> <h6>标题</h6> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/2e0bfdfe98804bdca408fbe755325d36.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2e0bfdfe98804bdca408fbe755325d36.jpg" alt="前端学习笔记 HTML5 基础内容_第1张图片" width="139" height="423" style="border:1px solid black;"></a> 大小不同的6个标题。从1到6是从大到小。</li> </ul> <h2>p：段落</h2> <ul> <li>采用p标签：</li> </ul> <pre><code class="prism language-clike"> <p>段落一</p> <p>段落二</p> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/0d2a4f9edc79475294a80da3b3d3af17.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/0d2a4f9edc79475294a80da3b3d3af17.png" alt="前端学习笔记 HTML5 基础内容_第2张图片" width="123" height="148" style="border:1px solid black;"></a></li> <li>不采用p标签：</li> </ul> <pre><code class="prism language-clike"> 段落一段落二 </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/7ba3ac0bb3ff481ebb243412e0480fb3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7ba3ac0bb3ff481ebb243412e0480fb3.jpg" alt="在这里插入图片描述" width="165" height="39"></a></li> </ul> <h2>a：锚</h2> <pre><code class="prism language-clike"><a href="index.html">文字内容</a> </code></pre> 可以用来定义超链接。 <h3>使用a标签做页内跳转</h3> <pre><code class="prism language-clike"><a name="one">内容1</a> <a href="#one">跳转到内容1</a> </code></pre> 用第一个标签指定<code>name</code>，第二个a标签href连接到<code>#name</code>。 内容跨篇幅很大时可用性很高，直接在一个页面内点击跳转。 <h2>img：图片</h2> <pre><code class="prism language-clike"><img src="myjpg1.jpg" width="100px" height="100px " alt="text"> </code></pre> src指定来源，宽高属性指定大小，alt替换文本（图片显示失误时有效）。 可以用来引入图片。 需要注意的是<code><img></code>标签不需要闭合。 <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/6ec0635b1a604ed89443f9d5604afa96.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6ec0635b1a604ed89443f9d5604afa96.jpg" alt="在这里插入图片描述" width="85" height="44"></a> </li> </ul> <h3>a和img的嵌套使用</h3> 为图片加超链接 <pre><code class="prism language-clike"><a href="index.html">文字内容</a> <img src="myjpg.jpg" width="100px" height="100px> </a> </code></pre> <h2>br：换行</h2> <pre><code class="prism language-clike"><br> <br/> </code></pre> 都是换行操作。 第二种是推荐用法。更适用于当前的操作和代码环境。 <h2>span：内嵌文字</h2> <pre><code class="prism language-clike"><p>文字区域1 <span>文字区域2 </span> </p> </code></pre> 可以通过更改样式，显示出<code></code>独立于其他标签的样式结果。 <h2>div：划分</h2> <pre><code class="prism language-clike">  <style type="text/css"> #mydiv{ color: blueviolet; } </style> <div id="mydiv"> <p>内容</p> </div> </code></pre> <code><div></code>的主要作用是代码块的划分。 顺带一提，css文件中，默认标签直接用，来自属性<code>id</code>就要加<code>#</code>。 <h1>属性简介</h1> <h2>body标签的bgcolor属性：背景颜色</h2> <pre><code class="prism language-clike"><body bgcolor="#f0f8ff"> </body> </code></pre> 颜色可以自选。 <a href="http://img.e-com-net.com/image/info8/d525e4fb3c064bc899eab93ec79ed0f9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d525e4fb3c064bc899eab93ec79ed0f9.jpg" alt="前端学习笔记 HTML5 基础内容_第3张图片" width="650" height="269" style="border:1px solid black;"></a> <h2>a标签的target属性：指定打开方式</h2> <pre><code class="prism language-clike"><a href="index.html" target="_blank"> </a> </code></pre> <ul> <li>取值有多种： <a href="http://img.e-com-net.com/image/info8/8a015ab0a6844afdbc42a3e5fb81cf73.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8a015ab0a6844afdbc42a3e5fb81cf73.jpg" alt="前端学习笔记 HTML5 基础内容_第4张图片" width="417" height="156" style="border:1px solid black;"></a></li> </ul> <blockquote> <code>_blank</code>，在新窗口显示目标网页 <code>_self</code>，在当前窗口显示目标网页 <code>_parent</code>，框架网页中当前整个窗口位置显示目标网页 <code>_top</code>，框架网页中在上部窗口中显示目标网页 </blockquote> <h2>align：对齐</h2> 多数标签可用，可选<code>centor</code>等取值，指定对齐方式。 <blockquote> p标签的align属性已被弃用，HTML 4.01 Strict和XHTML 1.0 Strict DTD均不支持此属性。 请用CSS作为替代。 CSS语法：<code></code> </blockquote> <h2>class：类名</h2> 大多数标签拥有此属性，表示类名。 <pre><code class="prism language-clike"><a class="hidden"> </a> </code></pre> <h2>id：标识符</h2> 大多数标签拥有此属性，人工指定identification，后续添加css样式等。 <pre><code class="prism language-clike"><a id="xxx"> </a> </code></pre> <h2>style：样式</h2> 大多数标签拥有此属性，用来定义内联css样式。 <pre><code class="prism language-clike"><a style="target: above"> </a> </code></pre> <h2>title：额外信息</h2> 大多数标签拥有此属性，用来定义额外信息。 <pre><code class="prism language-clike"><a title="xxx"> </a> </code></pre> <h1>文字格式化</h1> <pre><code class="prism language-clike"> <b>粗体字</b> <big>大号字</big> <em>着重字</em> <strong>强调字</strong> <i>斜体字</i> <small>小号字</small> <sub>下标字</sub> <sup>上标字</sup> <ins>插入字</ins> <del>删除字</del> </code></pre> 其中<code>big</code>标签被标记为弃用。 <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/2f37b58b4b114283bcb4e3c5254fc489.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2f37b58b4b114283bcb4e3c5254fc489.jpg" alt="在这里插入图片描述" width="650" height="43"></a></li> </ul> <h1>引入CSS样式</h1> <h2>外部引入：link，rel、type、href</h2> <ol> <li>方便测试，新建一个css文件使用 创建css文件，New一个File <a href="http://img.e-com-net.com/image/info8/dce1fb72e79b4cccb4c1afc10b1eeb16.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dce1fb72e79b4cccb4c1afc10b1eeb16.jpg" alt="前端学习笔记 HTML5 基础内容_第5张图片" width="650" height="523" style="border:1px solid black;"></a></li> <li>命名为mycss.css <a href="http://img.e-com-net.com/image/info8/d8bca8b225d2443d94aa7d498c6660be.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/d8bca8b225d2443d94aa7d498c6660be.png" alt="在这里插入图片描述" width="498" height="81"></a></li> <li>随便加一点颜色设置进来：</li> </ol> <pre><code class="prism language-clike">h1{ color: #b3d4fc; } </code></pre> <ol start="4"> <li>外部引入过程：</li> </ol> <pre><code class="prism language-clike"> <link rel="stylesheet" type="text/css" href="mycss.css"> </code></pre> 其中<code>rel</code>属性为<code>"stylesheet"</code>，<code>type</code>为<code>"text/css"</code>，<code>href</code>属性指定css文件位置。 <ul> <li>测试代码：</li> </ul> <pre><code class="prism language-clike">  <h1>标题h1</h1> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/58673f93b5d3490c9c5d3ab1b3d63710.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/58673f93b5d3490c9c5d3ab1b3d63710.jpg" alt="在这里插入图片描述" width="190" height="86"></a> </li> </ul> <h2>内部引入：style，type</h2> <ul> <li>内部引入过程：</li> </ul> <pre><code class="prism language-clike"> <style type="text/css"> h2{ color: aqua; } </style> </code></pre> <ul> <li>测试：</li> </ul> <pre><code class="prism language-cpp">  <h2>标题h2</h2> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/0c01abb7554e448e83d646401a5b02cb.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/0c01abb7554e448e83d646401a5b02cb.png" alt="在这里插入图片描述" width="133" height="56"></a> </li> </ul> <h2>内联引入：style属性</h2> <ul> <li>内联引入过程：</li> </ul> <pre><code class="prism language-clike"> <h3 style="color: blueviolet"> 标题h3 </h3> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/d5507696bcb6445286ae8f74f126ac0b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d5507696bcb6445286ae8f74f126ac0b.jpg" alt="在这里插入图片描述" width="120" height="47"></a></li> </ul> <h1>表格table</h1> <pre><code class="prism language-clike"> <table border="10" cellspacing="2"> <caption>表格</caption> <tr> <th>line1</th> <th>line2</th> </tr> <tr> <td>11</td> <td>12</td> </tr> <tr> <td>21</td> <td>22</td> </tr> </table> </code></pre> 表格需要用到<code><table></code>标签。 <code>border</code>属性定义边界长度，<code>cellspacing</code>属性定义单元格间隔。 此外还有<code>bgcolor</code>可以定义填充色，<code>background</code>可以定义填充图片。（没有展示） <code><caption></code>定义了标题。 <code><tr></code>是行，<code><td></code>是列。<code><th></code>表头。 <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/1f4539ecc5fe40df9116a7193368f9e7.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/1f4539ecc5fe40df9116a7193368f9e7.png" alt="前端学习笔记 HTML5 基础内容_第6张图片" width="191" height="192" style="border:1px solid black;"></a> </li> </ul> <h1>列表</h1> <h2>无序列表ul</h2> <pre><code class="prism language-clike"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </code></pre> <code><li></code>定义列表元素 <ul> <li> 代码结果： <a href="http://img.e-com-net.com/image/info8/028919e3f834433fa76689f4219c4215.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/028919e3f834433fa76689f4219c4215.png" alt="在这里插入图片描述" width="85" height="112"></a> </li> <li> 更改图标： </li> </ul> <pre><code class="prism language-clike"> <ul type="disc"> <li>1</li> <li>2</li> <li>3</li> </ul> </code></pre> 列举<code>type</code>的可选属性（此处无法用补全）： <code>disc</code>为实心原点，<code>circle</code>为空心圆，<code>square</code>为实心方块。 <h2>有序列表ol</h2> <pre><code class="prism language-clike"> <ol type="A" start="10"> <li>1</li> <li>2</li> <li>3</li> </ol> </code></pre> <code>start</code>属性指定起始值。 <code>type</code>属性同样为指定列表标号的类型，可选值有： <code>A</code>、<code>a</code>、<code>I</code>、<code>i</code>。 可以使用CSS中的<code>list-style = "none"</code>取消端点的显示。 <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/cf48a2c27ca446c8b7221c8cbea66528.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/cf48a2c27ca446c8b7221c8cbea66528.png" alt="在这里插入图片描述" width="93" height="106"></a></li> </ul> <h2>嵌套列表</h2> <code><li></code>标签的内容同样可以是一个新的列表。 <pre><code class="prism language-clike"> <ul type="circle"> <li>1</li> <li>2</li> <li> <ol type="I" start="18"> <li>31</li> <li>32</li> </ol> </li> </ul> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/3d33834cf5e046169624c336126178e3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3d33834cf5e046169624c336126178e3.jpg" alt="前端学习笔记 HTML5 基础内容_第7张图片" width="150" height="142" style="border:1px solid black;"></a> </li> </ul> <h2>自定义列表：dl、dt、dd</h2> <pre><code class="prism language-clike"> <dl> <dt>1</dt> <dd>1d</dd> <dt>2</dt> <dd>2d</dd> </dl> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/21a93f9707f2474f80babe84e9614ba9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/21a93f9707f2474f80babe84e9614ba9.png" alt="前端学习笔记 HTML5 基础内容_第8张图片" width="120" height="129" style="border:1px solid black;"></a></li> </ul> <h1>表单form</h1> 在以前的HTML规范当中，表单必须要在<code>form</code>区域内创建。 <h2>input：文本、密码、复选框、单选框，按钮与提交等</h2> <pre><code class="prism language-clike"><form>  账号：<input type="text"><br/>  密码：<input type="password"><br/>  A：<input type="checkbox"><br/> B：<input type="checkbox"><br/> C：<input type="checkbox"><br/>   1：<input type="radio" name="1"><br/> 2：<input type="radio" name="1"><br/>   <input type="button" value="按钮"><br/>   <input type="submit" value="提交"><br/> </form> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/b258aa8ed5b7479db60e1fdff53bd51d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b258aa8ed5b7479db60e1fdff53bd51d.jpg" alt="前端学习笔记 HTML5 基础内容_第9张图片" width="344" height="317" style="border:1px solid black;"></a> 可以进行交互操作。 </li> </ul> <h2>select，option：下拉框</h2> <pre><code class="prism language-clike"><form>  <select> <option>A</option> <option>B</option> <option>C</option> </select> </form> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/5445c4be98df40f085c898362ba517b3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5445c4be98df40f085c898362ba517b3.jpg" alt="在这里插入图片描述" width="69" height="128"></a></li> </ul> <h2>textarea：文本域</h2> <pre><code class="prism language-clike"><textarea cols="30" rows="10">默认内容</textarea> </code></pre> 可以脱离<code>form</code>创建。 <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/454d1dd81c2f492eb0401a6006b6ad6f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/454d1dd81c2f492eb0401a6006b6ad6f.jpg" alt="前端学习笔记 HTML5 基础内容_第10张图片" width="344" height="258" style="border:1px solid black;"></a> 可以填充内容，拖拽大小。 </li> </ul> <h2>表单的action交互</h2> <pre><code class="prism language-clike"><form action="index.html" method="get"> 用户名：<input type="text" name="name"><br/> 密码：<input type="password" name="password"><br/> <input type="submit" value="提交"> </form> </code></pre> <ul> <li> <code>action</code>可以跳转到本地/网络页面，可以是各个类型的网页格式，例如html，php，jsp等等。 </li> <li> <code>method</code>方法有get和post两种取值，对应HTML的get和post两种方法。 <ul> <li>get请求直接将参数放在url上，post请求的参数值可以在Chrome浏览器中查看。</li> <li>get方法可以做资源定位（根据分享url快速定位到相应web区域），post方法保护隐私。 </li> </ul> </li> <li> 代码结果： <a href="http://img.e-com-net.com/image/info8/95f8cd29cf7b4af58dd44f1fb0b274d8.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/95f8cd29cf7b4af58dd44f1fb0b274d8.png" alt="前端学习笔记 HTML5 基础内容_第11张图片" width="376" height="114" style="border:1px solid black;"></a> </li> <li> 代码结果（输入内容后点击提交）： <a href="http://img.e-com-net.com/image/info8/f2ed42843b704453bed4216733474ede.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f2ed42843b704453bed4216733474ede.jpg" alt="在这里插入图片描述" width="650" height="56"></a> 可以看到网页的跳转，并且根据get请求，参数值显示在了url上。 </li> </ul> <h1>布局</h1> <h2>使用div布局</h2> <ul> <li>无格式布局：</li> </ul> <pre><code class="prism language-clike"> <div id="layout"> <div id="head">head</div> <div id="left">left</div> <div id="right">right</div> <div id="foot">foot</div> </div> </code></pre> <ul> <li> 代码结果： <a href="http://img.e-com-net.com/image/info8/dd935ca9e91046cabd6ae87a283e13f9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/dd935ca9e91046cabd6ae87a283e13f9.png" alt="在这里插入图片描述" width="77" height="134"></a> </li> <li> 加入CSS样式（内部）： </li> </ul> <pre><code class="prism language-clike"> <style type="text/css"> #layout{ width: 100%; height: 500px; background-color: blueviolet; } #head{ width: 100%; height: 20%; background-color: #b3d4fc; } #left{ width: 40%; height: 50%; background-color: aqua; /*指定浮动方式：从左到右*/ float: left; } #right{ width: 60%; height: 50%; background-color: chartreuse; /*指定浮动方式：从左到右*/ float: left; } #foot{ width: 100%; height: 30%; background-color: crimson; } </style> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/c93bd2a656574b898cb42356efc8c9d3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c93bd2a656574b898cb42356efc8c9d3.jpg" alt="前端学习笔记 HTML5 基础内容_第12张图片" width="650" height="256" style="border:1px solid black;"></a> </li> </ul> <h2>使用table表格布局</h2> <pre><code class="prism language-clike"> <table width="100%" height="500px" style="background-color: #b3d4fc"> <tr>  <td colspan="2" width="100%" height="20%" style="background-color: #888888">head</td> </tr> <tr> <td width="40%" height="50%" style="background-color: coral">left</td> <td width="60%" height="50%" style="background-color: aquamarine">right</td> </tr> <tr> <td colspan="2" width="100%" height="30%" style="background-color: blue">foot</td> </tr> </table> </code></pre> <ul> <li>代码结果： <a href="http://img.e-com-net.com/image/info8/9fd95f5f56f24285a2f6db48b1d02b42.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9fd95f5f56f24285a2f6db48b1d02b42.jpg" alt="前端学习笔记 HTML5 基础内容_第13张图片" width="650" height="259" style="border:1px solid black;"></a> </li> </ul> <h1>框架</h1> <h2>frameset：弃用</h2> <blockquote> 标签定义框架集。它用于组织多个窗口（框架）。每个框架存在一个独立的文档。在最简单的应用中，frameset 元素仅仅声明框架集中存在的列或行的数目。由于该标签对网页可用性的负面影响，在 HTML 5 中 frameset标签没有得到支持。 </blockquote> <h2>iFrame</h2> <h3>网页内嵌</h3> <ul> <li>index.html</li> </ul> <pre><code class="prism language-clike"><body>  <iframe src="a.html" frameborder="0" width="150px" height="150px"> </iframe> </body> </code></pre> <ul> <li>a.html</li> </ul> <pre><code class="prism language-clike"><body bgcolor="blue">  a <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> </body> </code></pre> <ul> <li>代码结果(index.html嵌入a.html)： <a href="http://img.e-com-net.com/image/info8/d78fad67bf604f4ea19a25ef7bbcaff8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d78fad67bf604f4ea19a25ef7bbcaff8.jpg" alt="前端学习笔记 HTML5 基础内容_第14张图片" width="245" height="242" style="border:1px solid black;"></a> 超出长度，自动加了下拉框。</li> </ul> <h3>链接target属性中_parent的取值与iframe</h3> <code>_parent</code>取值在父级页面打开。 <ul> <li>index.html</li> </ul> <pre><code class="prism language-clike"><body>  <iframe src="a.html" frameborder="0" width="450px" height="450px"> </iframe> </body> </code></pre> <ul> <li>a.html</li> </ul> <pre><code class="prism language-clike"><body bgcolor="blue">  <iframe src="b.html" frameborder="0" width="300px" height="300px"> </iframe> </body> </code></pre> <ul> <li>b.html</li> </ul> <pre><code class="prism language-clike"> <body bgcolor="#7fffd4">  <a href="https://www.baidu.com" target="_parent">链接</a> </body> </code></pre> <ul> <li> 代码结果（index包含a，a包含b，b包含链接）： <a href="http://img.e-com-net.com/image/info8/c2cf1e4eba1a4452b6198088c795af63.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c2cf1e4eba1a4452b6198088c795af63.png" alt="前端学习笔记 HTML5 基础内容_第15张图片" width="692" height="686" style="border:1px solid black;"></a> </li> <li> 代码结果（点击链接）： <a href="http://img.e-com-net.com/image/info8/3ed1431b2cc1435798cf03833121d548.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3ed1431b2cc1435798cf03833121d548.jpg" alt="前端学习笔记 HTML5 基础内容_第16张图片" width="650" height="638" style="border:1px solid black;"></a> 可以看到整个a和b都变成了链接的目标网页。 这便是<code>iframe</code>与<code>_parent</code>的结合。在直接父级页面打开。 而<code>_top</code>取值是在顶级页面打开。 </li> </ul> <h1>实体：转义字符</h1> <blockquote> 在 HTML 中，某些字符是预留的。 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 </blockquote> <blockquote> 如需显示小于号，我们必须这样写：<code><</code>或 <code><</code> 提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。 </blockquote> 参考文档：HTML 字符实体 </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1288834878183383040"></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">  <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>  <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>  <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">你可能感兴趣的:(前端学习笔记)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1756032433184063488.htm" title="人力资源智能化管理项目（day04:组织架构）" target="_blank">人力资源智能化管理项目（day04:组织架构）</a> 我是如此相信ᯤ⁶⁶ᴳ <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%8A%9B%E8%B5%84%E6%BA%90%E6%99%BA%E8%83%BD%E5%8C%96%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/1.htm">人力资源智能化管理项目</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><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> <div>学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈树组件应用depts:[{name:'传智教育',children:[{name:'总裁办'},{name:'行政部'},{name:'人事部',children:[{name:'财务核算部'},{name:</div> </li> <li><a href="/article/1756032179529334784.htm" title="人力资源智能化管理项目（day03:主页模块）" target="_blank">人力资源智能化管理项目（day03:主页模块）</a> 我是如此相信ᯤ⁶⁶ᴳ <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%8A%9B%E8%B5%84%E6%BA%90%E6%99%BA%E8%83%BD%E5%8C%96%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE/1.htm">人力资源智能化管理项目</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>学习源码可以看我的个人前端学习笔记(github.com):qdxzw/humanResourceIntelligentManagementProject觉得有帮助的同学，可以点心心支持一下哈主页权限验证(permission.js)importrouterfrom'@/router'importnprogressfrom'nprogress'//进度条import'nprogress/nprog</div> </li> <li><a href="/article/1755621366918299648.htm" title="Web前端学习笔记" target="_blank">Web前端学习笔记</a> jusw123456 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>文章目录HTML+CSS系列学习笔记①之拨云见日1、什么是HTML、CSS？2、VSCode编译器（宇宙第一编译器）3、五大浏览器4、深入了解网站开发5、web前端的三大核心技术6、HTML基本结构和属性7、HTML初始代码8、HTML注释9、标题与段落10、文本修饰标签11、引入文件的地址路径12、图片标签13、跳转链接14、跳转锚点15、特殊符号16、列表标签17、表格标签18、表格属性19、</div> </li> <li><a href="/article/1754699924143882240.htm" title="前端学习笔记day02--CSS" target="_blank">前端学习笔记day02--CSS</a> m0_38077048 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%87%AA%E7%94%A8/1.htm">学习自用</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>前端学习笔记day02–CSS一、CSS知识CSS（cascadingstylesheet）：层叠样式表（级联样式表）作用：设置html标签的字体、颜色、背景、边框、边距和宽高等，使界面美观、漂亮，从而提高用户体验。html搭起结构，CSS起美观作用，html和CSS分离、解耦，方便统一修改维护。二、CSS和html结合写法：选择器{声明；（属性名：属性值；）}1.行内样式行内样式作用域小，只作用</div> </li> <li><a href="/article/1753962196007665664.htm" title="[前端学习笔记1] 前端学习路线" target="_blank">[前端学习笔记1] 前端学习路线</a> Lumos_zbj <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>按顺序学习一、做网页HTML：定义网页结构CSS（Cascadingstylesheets层叠样式表）：对网页进行装饰JS（JavaScript）：网页与用户的交互效果，【重要】WebAPI：将HTML,CSS,JS结合在一起，通过JS可以改变HTML,CSS.JQuery：老牌框架，了解即可。Bootstrap：响应式页面，了解即可移动端开发：【重要】二、数据库和服务器数据库：mongoDB（J</div> </li> <li><a href="/article/1753961295721283584.htm" title="爬虫配套学习-前端学习笔记03" target="_blank">爬虫配套学习-前端学习笔记03</a> 丰。。 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">爬虫学习笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>插入图片水平线无月的中秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这就是月饼的来历，大家会在这一天，和嘉园也，吃月饼，赏月。®效果图像的超链接水平线无月的中秋据说每年八月十五的时候，夜空中的月亮是一年中最大，最圆，最亮，最美的月亮，中秋节的来历，这</div> </li> <li><a href="/article/1753680734431756288.htm" title="前端学习笔记 | CSS动画+移动web" target="_blank">前端学习笔记 | CSS动画+移动web</a> 简·AI <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>一、平面转换为元素添加动态效果，一般与过渡配合使用。1、设置transition给元素本身，表示过渡变换方式和时间2、在元素hover设置transform（动态效果）transform:【移动】translate(x方向，y方向)、translateX（x、translateY(y)位移【旋转】rotate(数字+deg）【缩放】scele(数字)大于1放大，小于1缩小【倾斜】skew（数字+d</div> </li> <li><a href="/article/1753680735337725952.htm" title="前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）" target="_blank">前端学习笔记 | HTML5+CSS3静态网页制作的技巧（持续更新）</a> 简·AI <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>注：本文的css样式均使用less写法1、字体居中（1）先text-align:center;行内元素水平居中（2）再line-heigh:(盒子高度);行内元素垂直居中text-align:center;line-height:(30/@vw);2、盒子居中情景1：版心居中margin:0auto;情景2：标题栏制作时让左右两个弹性盒子居中的方法（1）设置浮动（2）给父级添加行高line-hei</div> </li> <li><a href="/article/1753680733899079680.htm" title="前端学习笔记 | CSS高级技巧" target="_blank">前端学习笔记 | CSS高级技巧</a> 简·AI <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、定位注：需要同时设置定位模式和边偏移才生效。1、定位模式相对定位-position:relative特点：（1）灵活改变盒子在网页中的位置，改变位置的参照物是自己原来的位置（2）不脱标，占位（3）标签显示模式特点不变绝对定位-position:abusolute(子级绝对定位，父级相对定位-子绝父相)特点：（1）脱标，不占位（2）参照物先找祖先元素，如果祖先没有定位，则参照浏览器可视区域位置（</div> </li> <li><a href="/article/1753680347956002816.htm" title="前端学习笔记 | 响应式网页+Boostrap" target="_blank">前端学习笔记 | 响应式网页+Boostrap</a> 简·AI <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</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> <div>一、响应式网页一套代码适应多端1、媒体查询@media(条件){css}max-width小于等于max-width生效min-width【案例】左侧隐藏因为CSS的层叠性，书写顺序：max-width从大到小；min-width从小到大。【媒体查询完整写法】在html中link用于不同视口的css样式，media=""中一定要加（），否则不生效。2、BootstrapBootstrap是由Twi</div> </li> <li><a href="/article/1752411665669832704.htm" title="自学前端学习笔记html5(简称H5)" target="_blank">自学前端学习笔记html5(简称H5)</a> Informal杨 <div>image.pngimage.pngimage.pngH5在语义上的改进在此基础上，HTML5增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。我们常见的css+div布局是：image.png在html5中，我们可以这样写：image.pngH5的经典网页布局：H5中新增的语义标签表示区块表示文章。如文章、评论、帖</div> </li> <li><a href="/article/1752186248874704896.htm" title="前端自己整理的学习面试笔记" target="_blank">前端自己整理的学习面试笔记</a> 小江的博客 <a class="tag" taget="_blank" href="/search/IT%E8%B5%84%E6%BA%90/1.htm">IT资源</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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>简介以下是本人一年多整理的前端学习笔记，现汇总分享给大家，很多问题都是面试必问的更多学习资源，可以点击我获取更多1js数据类型原始类型：nullundefinednumberstringbooleanSymbolBigInt引用类型：对象2判断一个对象属性是否存在本身属性判断：obj.hasOwnProperty(key)包括了上级属性判断：keyinobjReflect.get(obj,‘key</div> </li> <li><a href="/article/1750673224204566528.htm" title="前端学习笔记一一HTML常用标签之列表标签" target="_blank">前端学习笔记一一HTML常用标签之列表标签</a> 前前前端小飞 <div>HTML常用标签之列表标签列表标签的用途，就是用于编排短语句的文字。1.无序列表在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。设置无序列表的类型—type无序列表的默认符号是圆点（●）。�元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：�disc(圆●)、circle（圆圈○）、square（方块■）定</div> </li> <li><a href="/article/1750239918862385152.htm" title="字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载" target="_blank">字节跳动内部前端学习笔记在互联网上火了，在Github标星33K+，完整版开放下载</a> 书苏 <div>一、入门前端三剑客1、HTMLhtml学起来还是挺简单的，无论你是否有编程基础，我觉得都可以快速入门，对于新手，我推荐找个入门的视频看一下，然后跟着视频打代码就可以了，入门教程随便在网上找个免费的视频就可以了，随便搜索「html入门」即可，或者看菜鸟教程的一个入门教程也行。看完视频，也可以看一下文字版的教程，不知道大家有没有看过阮一峰写过的教程，我觉得他写的教程都很棒，所以这里我也推荐下大家看一下</div> </li> <li><a href="/article/1750013266047811584.htm" title="前端学习笔记-HTML、CSS、Javascript基础知识" target="_blank">前端学习笔记-HTML、CSS、Javascript基础知识</a> m0_53527658 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</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> <div>认识web网站的开发模式采用前后端分离技术开发Web前端三个组成部分HTML：负责网页结构（页面元素的内容）CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）JavaScript：负责网页的行为（交互效果）HTML和CSSHTML：超文本标记语言：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容；HTML标签都是预定义好的。例如：使用展示超</div> </li> <li><a href="/article/1748709809311465472.htm" title="ES6前端学习笔记" target="_blank">ES6前端学习笔记</a> 已注销 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>修正ES6是ECMA为JavaScript制定的第6个标准版本，相关历史可查看此章节《ES6-ECMAScript6简介》。标准委员会最终决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript2015是在2015年6月发布ES6的第一个版本。以此类推，</div> </li> <li><a href="/article/1748701032117977088.htm" title="【前端学习笔记1】css基础" target="_blank">【前端学习笔记1】css基础</a> __dh <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>css可以使页面更漂亮，即美化网页css：层叠样式表标签选择器：类选择器：id只能单次调用，类似人的身份证css里只要是word里面有的功能，他们都有对应的，不会的时候查一下就行实现垂直居中:height等于line-height就行font-family：可以修改字体font顺序：是否倾斜字号行高字体必须严格按照这个顺序来与文本相关text-indent：文本缩进text-align：cente</div> </li> <li><a href="/article/1748700142363492352.htm" title="【前端学习笔记2】javaScript基础" target="_blank">【前端学习笔记2】javaScript基础</a> __dh <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>是什么：是一种运行在客户端（服务器的编程语言）javacript分为行内JavaScript，内部JavaScript，外部JavaScript内部JavaScript直接写在html中body里面alert（“hello，world”）我们将script放在html文件的地步附近的原因是浏览器会按照代码在文件中的顺序加载html如果先加载的JavaScript期望修改其下方的html，那么他可能</div> </li> <li><a href="/article/1747616622635401216.htm" title="自学前端学习笔记-02CSS基础样式语法" target="_blank">自学前端学习笔记-02CSS基础样式语法</a> Informal杨 <div>◆CSS三大特性1.继承性2.层叠性3.优先级继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important继承<*{css}<div{css}<.(class命名){css}<#(class命名){}<style=""<!important{权限最高,不推荐使用}image.png不需要理解,后期使用less或者sass就可以了!◆PxCook的基本使用官方网站https:</div> </li> <li><a href="/article/1746907254134685696.htm" title="【wow-ts】前端学习笔记Typescript基础语法（一）" target="_blank">【wow-ts】前端学习笔记Typescript基础语法（一）</a> miskirito <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>项目地址是https://github.com/datawhalechina/wow-ts。我选择的是ts前端课程Typescript笔记TypeScript入门介绍基础数据类型TypeScript基础数据结构TypeScript变量声明变量作用域TypeScript入门介绍第一次接触ts，先去了解了下ts的内容，复制内容如下TypeScript是JavaScript的一个超集，支持ECMAScr</div> </li> <li><a href="/article/1745473629660921856.htm" title="前端学习笔记 5：大事件" target="_blank">前端学习笔记 5：大事件</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记5：大事件本文将学习一个示例项目（大事件）的前端搭建过程。1.准备工作1.1.创建工程创建一个名称为big-event的Vue3项目，具体可以参考这篇文章。1.2.安装插件安装ElementPlus：npminstallelement-plus--save安装好后还需要在main.js中导入相关模块和样式：import'./assets/main.scss'import{createA</div> </li> <li><a href="/article/1745473499478114304.htm" title="前端学习笔记 6：Pinia" target="_blank">前端学习笔记 6：Pinia</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记6：PiniaPinia是Vue的一个官方库，用于状态管理。1.安装首先创建一个Vue3项目，具体方式可以参考这里。安装Pinia：npminstallpinia创建一个pinia实例(根store)并将其传递给应用：import'./assets/main.css'import{createApp}from'vue'import{createPinia}from'pinia'impo</div> </li> <li><a href="/article/1745377282232434688.htm" title="【前端学习笔记3——选不中按钮、全局变量、表格不显示、查看变量值】" target="_blank">【前端学习笔记3——选不中按钮、全局变量、表格不显示、查看变量值】</a> weixin_47227105 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端学习笔记三，覆盖button选不中，可能是被别的元件覆盖了，用开发者工具选择元件，可以在样式里添加z-index或者用position把相对定位变为绝对定位。.back{z-index:99999999;position:absolute;right:40px;top:95px;}el-option筛选框里不显示label，显示value，而且有的列筛选框有label有value全局变量写法，</div> </li> <li><a href="/article/1745191168452345856.htm" title="暑期字节青训营前端学习笔记——简略" target="_blank">暑期字节青训营前端学习笔记——简略</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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>文章目录前端与HTML什么是前端？前端应该关注那些方面？注意HTML标签的语义化web开发的基本情况关于前端的开发：起源、架构、变迁前端应用的领域前端应用领域---浏览器前端应用领域---服务器前端应用领域---终端和跨端语言、框架、工具浏览器、网络、服务器Web标准标准组织：HTTP协议初识HTTP协议什么是HTTP协议协议分析报文methodWeb安全攻击防御对于XSS攻击：CSRF的防御Ty</div> </li> <li><a href="/article/1743025266642403328.htm" title="【前端学习笔记】HTML5中的video和audio" target="_blank">【前端学习笔记】HTML5中的video和audio</a> 花上 <div>标签定义声音，比如音乐或者其他音频流。标签定义视频，比如电影片段或其他视频流。video和audio的优点：都不需要第三方插件就能播放音频和视频，可以直接插入，并且用同一的API接口控制。video和audio的缺点：1）暂时没有对流视频的支持和规范。流媒体分HTTP渐进式下载和实时流式传播，video和audio属于HTTP属于渐进式下载，不需要流媒体服务器，普通HTTP服务器就可以。2）播放媒</div> </li> <li><a href="/article/1742449223162413056.htm" title="前端学习笔记 3：Vue 工程" target="_blank">前端学习笔记 3：Vue 工程</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记3：Vue工程上一篇文章介绍了如何在单一Html页面中使用Vue，本文介绍如何从头开始用Vue构建一个前端工程项目。环境准备Vue框架代码的创建依赖于Node.js，因此需要先安装Node.js。创建和启动创建通过以下命令可以创建Vue的框架代码：npmcreatevue@latest该命令执行后会先检查是否安装create-vue工具，如果没有，就安装。然后再使用create-vue</div> </li> <li><a href="/article/1742449095500382208.htm" title="前端学习笔记 2：Vue" target="_blank">前端学习笔记 2：Vue</a> 魔芋红茶 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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%AD%A6%E4%B9%A0/1.htm">学习</a> <div>前端学习笔记2：VueVue是一个目前最流行的前端响应式框架，关于它的简单介绍可以观看这里。1.快速入门Vue的官网提供一个快速上手指南，有多种方式可以安装和使用Vue，这里展示一个最简单的方式——直接导入官方提供的在线的核心JS文件进行使用。这里展示的内容相当于官方快速上手指南中的使用ES模块构建版本。需要先像在之前文章中介绍的那样，在JS模块中导入Vue的createApp函数：import{</div> </li> <li><a href="/article/1742448967309869056.htm" title="前端学习笔记 1：js 导入导出" target="_blank">前端学习笔记 1：js 导入导出</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记1：js导入导出1.传统引用一般性的，用以下方式引入JS中定义的函数或对象到Html中使用：functionshowMessage(){console.log("hello");}functionshowChineseMessage(){console.log("你好");}hello按我有惊喜document.getElementById("btn").onclick=functio</div> </li> <li><a href="/article/1742448711952252928.htm" title="前端学习笔记 4：Element Plus" target="_blank">前端学习笔记 4：Element Plus</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>前端学习笔记4：ElementPlus1.准备工作在使用ElementPlus之前，需要先创建一个Vue工程，具体可以参考上一篇文章。创建好后就可以按照官方文档中的指示，在工程目录下安装Element依赖：npminstallelement-plus--save注意，Element和ElementPlus是两个不同的项目，前者适用于Vue2.X，后者适用于Vue3.X。这里使用的是后者。2.快速开</div> </li> <li><a href="/article/1740617393400463360.htm" title="2021-08-25_vue环境搭建前端学习笔记" target="_blank">2021-08-25_vue环境搭建前端学习笔记</a> kikop <div>20210825_vue环境搭建前端学习笔记1概述1.1目录结构image-20211001195604044.png1.2项目配置细节1.2.1配置拦截器//E:\workdirectory\Dev\remotestudy\technicaltools\C050myvueelementdemo\myvue_front\src\config\http.js//接口请求拦截器importVuefro</div> </li> <li><a href="/article/116.htm" title="ViewController添加button按钮解析。（翻译）" target="_blank">ViewController添加button按钮解析。（翻译）</a> 张亚雄 <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div><div class="it610-blog-content-contain" style="font-size: 14px"></div>// ViewController.m // Reservation software // // Created by 张亚雄 on 15/6/2. </div> </li> <li><a href="/article/243.htm" title="mongoDB 简单的增删改查" target="_blank">mongoDB 简单的增删改查</a> 开窍的石头 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div> 在上一篇文章中我们已经讲了mongodb怎么安装和数据库/表的创建。在这里我们讲mongoDB的数据库操作在mongo中对于不存在的表当你用db.表名他会自动统计下边用到的user是表明，db代表的是数据库添加(insert): </div> </li> <li><a href="/article/370.htm" title="log4j配置" target="_blank">log4j配置</a> 0624chenhong <a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a> <div>1) 新建java项目 2) 导入jar包，项目右击，properties—java build path—libraries—Add External jar，加入log4j.jar包。 3) 新建一个类com.hand.Log4jTest package com.hand; import org.apache.log4j.Logger; public class </div> </li> <li><a href="/article/497.htm" title="多点触摸(图片缩放为例)" target="_blank">多点触摸(图片缩放为例)</a> 不懂事的小屁孩 <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%82%B9%E8%A7%A6%E6%91%B8/1.htm">多点触摸</a> <div>多点触摸的事件跟单点是大同小异的，上个图片缩放的代码，供大家参考一下 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener</div> </li> <li><a href="/article/624.htm" title="有关浏览器窗口宽度高度几个值的解析" target="_blank">有关浏览器窗口宽度高度几个值的解析</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> <div>1 元素的 offsetWidth 包括border padding content 整体的宽度。 clientWidth 只包括内容区 padding 不包括border。 clientLeft = offsetWidth -clientWidth 即这个元素border的值 offsetLeft 若无已定位的包裹元素</div> </li> <li><a href="/article/751.htm" title="数据库产品巡礼：IBM DB2概览" target="_blank">数据库产品巡礼：IBM DB2概览</a> 蓝儿唯美 <a class="tag" taget="_blank" href="/search/db2/1.htm">db2</a> <div>IBM DB2是一个支持了NoSQL功能的关系数据库管理系统，其包含了对XML，图像存储和Java脚本对象表示（JSON）的支持。DB2可被各种类型的企业使用，它提供了一个数据平台，同时支持事务和分析操作，通过提供持续的数据流来保持事务工作流和分析操作的高效性。 DB2支持的操作系统 DB2可应用于以下三个主要的平台: 工作站，DB2可在Linus、Unix、Windo</div> </li> <li><a href="/article/878.htm" title="java笔记5" target="_blank">java笔记5</a> a-john <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>控制执行流程： 1，true和false 利用条件表达式的真或假来决定执行路径。例：（a==b）。它利用条件操作符“==”来判断a值是否等于b值，返回true或false。java不允许我们将一个数字作为布尔值使用，虽然这在C和C++里是允许的。如果想在布尔测试中使用一个非布尔值，那么首先必须用一个条件表达式将其转化成布尔值，例如if(a!=0)。 2，if-els</div> </li> <li><a href="/article/1005.htm" title="Web开发常用手册汇总" target="_blank">Web开发常用手册汇总</a> aijuans <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>一门技术，如果没有好的参考手册指导,很难普及大众。这其实就是为什么很多技术，非常好，却得不到普遍运用的原因。正如我们学习一门技术，过程大概是这个样子： ①我们日常工作中，遇到了问题，困难。寻找解决方案，即寻找新的技术； ②为什么要学习这门技术？这门技术是不是很好的解决了我们遇到的难题，困惑。这个问题，非常重要，我们不是为了学习技术而学习技术，而是为了更好的处理我们遇到的问题，才需要学习新的</div> </li> <li><a href="/article/1132.htm" title="今天帮助人解决的一个sql问题" target="_blank">今天帮助人解决的一个sql问题</a> asialee <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div> 今天有个人问了一个问题，如下： type AD value A </div> </li> <li><a href="/article/1259.htm" title="意图对象传递数据" target="_blank">意图对象传递数据</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%84%8F%E5%9B%BEIntent/1.htm">意图Intent</a><a class="tag" taget="_blank" href="/search/Bundle%E5%AF%B9%E8%B1%A1%E6%95%B0%E6%8D%AE%E7%9A%84%E4%BC%A0%E9%80%92/1.htm">Bundle对象数据的传递</a> <div>学习意图将数据传递给目标活动; 初学者需要好好研究的 1,将下面的代码添加到main.xml中 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http:/</div> </li> <li><a href="/article/1386.htm" title="oracle查询锁表解锁语句" target="_blank">oracle查询锁表解锁语句</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/object/1.htm">object</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/kill/1.htm">kill</a> <div>一.查询锁定的表如下语句，都可以查询锁定的表语句一： select a.sid, a.serial#, p.spid, c.object_name, b.session_id, b.oracle_username, b.os_user_name from v$process p, v$s</div> </li> <li><a href="/article/1513.htm" title="mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］" target="_blank">mac osx 10.10 下安装 mysql 5.6 二进制文件［tar.gz］</a> 征客丶 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/osx/1.htm">osx</a> <div>场景：在 mac osx 10.10 下安装 mysql 5.6 的二进制文件。环境：mac osx 10.10、mysql 5.6 的二进制文件步骤：[所有目录请从根“/”目录开始取，以免层级弄错导致找不到目录] 1、下载 mysql 5.6 的二进制文件，下载目录下面称之为 mysql5.6SourceDir；下载地址：http://dev.mysql.com/downl</div> </li> <li><a href="/article/1640.htm" title="分布式系统与框架" target="_blank">分布式系统与框架</a> bit1129 <a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>RPC框架 Dubbo 什么是Dubbo Dubbo是一个分布式服务框架，致力于提供高性能和透明化的RPC远程服务调用方案，以及SOA服务治理方案。其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封装，包括多种线程模型，序列化，以及“请求-响应”模式的信息交换方式。集群容错: 提供基于接</div> </li> <li><a href="/article/1767.htm" title="那些令人蛋痛的专业术语" target="_blank">那些令人蛋痛的专业术语</a> 白糖_ <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/SSO/1.htm">SSO</a><a class="tag" taget="_blank" href="/search/IOC/1.htm">IOC</a> <div> spring 【控制反转(IOC)/依赖注入(DI)】：由容器控制程序之间的关系，而非传统实现中，由程序代码直接操控。这也就是所谓“控制反转”的概念所在：控制权由应用代码中转到了外部容器，控制权的转移，是所谓反转。简单的说：对象的创建又容器(比如spring容器)来执行，程序里不直接new对象。 Web 【单点登录(SSO)】：SSO的定义是在多个应用系统中，用户</div> </li> <li><a href="/article/1894.htm" title="《给大忙人看的java8》摘抄" target="_blank">《给大忙人看的java8》摘抄</a> braveCS <a class="tag" taget="_blank" href="/search/java8/1.htm">java8</a> <div>函数式接口：只包含一个抽象方法的接口 lambda表达式：是一段可以传递的代码你最好将一个lambda表达式想象成一个函数，而不是一个对象，并记住它可以被转换为一个函数式接口。事实上，函数式接口的转换是你在Java中使用lambda表达式能做的唯一一件事。方法引用：又是要传递给其他代码的操作已经有实现的方法了，这时可以使</div> </li> <li><a href="/article/2021.htm" title="编程之美-计算字符串的相似度" target="_blank">编程之美-计算字符串的相似度</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> public class StringDistance { /** * 编程之美计算字符串的相似度 * 我们定义一套操作方法来把两个不相同的字符串变得相同，具体的操作方法为： * 1.修改一个字符（如把“a”替换为“b”）; * 2.增加一个字符（如把“abdd”变为“aebdd”）; * 3.删除一个字符（如把“travelling”变为“trav</div> </li> <li><a href="/article/2148.htm" title="上传、下载压缩图片" target="_blank">上传、下载压缩图片</a> chengxuyuancsdn <a class="tag" taget="_blank" href="/search/%E4%B8%8B%E8%BD%BD/1.htm">下载</a> <div>/** * * @param uploadImage --本地路径(tomacat路径) * @param serverDir --服务器路径 * @param imageType --文件或图片类型 * 此方法可以上传文件或图片.txt,.jpg,.gif等 */ public void upload(String uploadImage,Str</div> </li> <li><a href="/article/2275.htm" title="bellman-ford(贝尔曼-福特)算法" target="_blank">bellman-ford(贝尔曼-福特)算法</a> comsci <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/F%23/1.htm">F#</a> <div>Bellman-Ford算法(根据发明者 Richard Bellman 和 Lester Ford 命名)是求解单源最短路径问题的一种算法。单源点的最短路径问题是指：给定一个加权有向图G和源点s，对于图G中的任意一点v，求从s到v的最短路径。有时候这种算法也被称为 Moore-Bellman-Ford 算法，因为 Edward F. Moore zu 也为这个算法的发展做出了贡献。与迪科</div> </li> <li><a href="/article/2402.htm" title="oracle ASM中ASM_POWER_LIMIT参数" target="_blank">oracle ASM中ASM_POWER_LIMIT参数</a> daizj <a class="tag" taget="_blank" href="/search/ASM/1.htm">ASM</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/ASM_POWER_LIMIT/1.htm">ASM_POWER_LIMIT</a><a class="tag" taget="_blank" href="/search/%E7%A3%81%E7%9B%98%E5%B9%B3%E8%A1%A1/1.htm">磁盘平衡</a> <div>ASM_POWER_LIMIT 该初始化参数用于指定ASM例程平衡磁盘所用的最大权值，其数值范围为0~11，默认值为1。该初始化参数是动态参数，可以使用ALTER SESSION或ALTER SYSTEM命令进行修改。示例如下： SQL>ALTER SESSION SET Asm_power_limit=2; </div> </li> <li><a href="/article/2529.htm" title="高级排序:快速排序" target="_blank">高级排序:快速排序</a> dieslrae <a class="tag" taget="_blank" href="/search/%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F/1.htm">快速排序</a> <div> public void quickSort(int[] array){ this.quickSort(array, 0, array.length - 1); } public void quickSort(int[] array,int left,int right){ if(right - left <= 0</div> </li> <li><a href="/article/2656.htm" title="C语言学习六指针_何谓变量的地址一个指针变量到底占几个字节" target="_blank">C语言学习六指针_何谓变量的地址一个指针变量到底占几个字节</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div># include <stdio.h> int main(void) { /* 1、一个变量的地址只用第一个字节表示 2、虽然他只使用了第一个字节表示，但是他本身指针变量类型就可以确定出他指向的指针变量占几个字节了 3、他都只存了第一个字节地址，为什么只需要存一个字节的地址，却占了4个字节，虽然只有一个字节，但是这些字节比较多，所以编号就比较大， </div> </li> <li><a href="/article/2783.htm" title="phpize使用方法" target="_blank">phpize使用方法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>phpize是用来扩展php扩展模块的，通过phpize可以建立php的外挂模块,下面介绍一个它的使用方法,需要的朋友可以参考下安装（fastcgi模式）的时候，常常有这样一句命令：代码如下: /usr/local/webserver/php/bin/phpize 一、phpize是干嘛的？ phpize是什么？ phpize是用来扩展php扩展模块的，通过phpi</div> </li> <li><a href="/article/2910.htm" title="Java虚拟机学习 - 对象引用强度" target="_blank">Java虚拟机学习 - 对象引用强度</a> shuizhaosi888 <a class="tag" taget="_blank" href="/search/JAVA%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">JAVA虚拟机</a> <div> 本文原文链接：http://blog.csdn.net/java2000_wl/article/details/8090276 转载请注明出处！无论是通过计数算法判断对象的引用数量，还是通过根搜索算法判断对象引用链是否可达，判定对象是否存活都与“引用”相关。引用主要分为：强引用(Strong Reference)、软引用(Soft Reference)、弱引用(Wea</div> </li> <li><a href="/article/3037.htm" title=".NET Framework 3.5 Service Pack 1（完整软件包）下载地址" target="_blank">.NET Framework 3.5 Service Pack 1（完整软件包）下载地址</a> happyqing <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/%E4%B8%8B%E8%BD%BD/1.htm">下载</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a> <div> Microsoft .NET Framework 3.5 Service Pack 1（完整软件包） http://www.microsoft.com/zh-cn/download/details.aspx?id=25150 Microsoft .NET Framework 3.5 Service Pack 1 是一个累积更新，包含很多基于 .NET Framewo</div> </li> <li><a href="/article/3164.htm" title="JAVA定时器的使用" target="_blank">JAVA定时器的使用</a> jingjing0907 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a> <div>1、在应用开发中，经常需要一些周期性的操作，比如每5分钟执行某一操作等。对于这样的操作最方便、高效的实现方式就是使用java.util.Timer工具类。 privatejava.util.Timer timer; timer = newTimer(true); timer.schedule( newjava.util.TimerTask() { public void run() </div> </li> <li><a href="/article/3291.htm" title="Webbench" target="_blank">Webbench</a> 流浪鱼 <a class="tag" taget="_blank" href="/search/webbench/1.htm">webbench</a> <div>首页下载地址 http://home.tiscali.cz/~cz210552/webbench.html Webbench是知名的网站压力测试工具，它是由Lionbridge公司（http://www.lionbridge.com）开发。 Webbench能测试处在相同硬件上，不同服务的性能以及不同硬件上同一个服务的运行状况。webbench的标准测试可以向我们展示服务器的两项内容：每秒钟相</div> </li> <li><a href="/article/3418.htm" title="第11章动画效果（中）" target="_blank">第11章动画效果（中）</a> onestopweb <a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/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/3545.htm" title="windows下制作bat启动脚本." target="_blank">windows下制作bat启动脚本.</a> sanyecao2314 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a><a class="tag" taget="_blank" href="/search/bat/1.htm">bat</a> <div>java -classpath C:\dwjj\commons-dbcp.jar;C:\dwjj\commons-pool.jar;C:\dwjj\log4j-1.2.16.jar;C:\dwjj\poi-3.9-20121203.jar;C:\dwjj\sqljdbc4.jar;C:\dwjj\voucherimp.jar com.citsamex.core.startup.MainStart </div> </li> <li><a href="/article/3672.htm" title="Java进行RSA加解密的例子" target="_blank">Java进行RSA加解密的例子</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>加密是保证数据安全的手段之一。加密是将纯文本数据转换为难以理解的密文；解密是将密文转换回纯文本。　　数据的加解密属于密码学的范畴。通常，加密和解密都需要使用一些秘密信息，这些秘密信息叫做密钥，将纯文本转为密文或者转回的时候都要用到这些密钥。　　对称加密指的是发送者和接收者共用同一个密钥的加解密方法。　　非对称加密(又称公钥加密)指的是需要一个私有密钥一个公开密钥，两个不同的密钥的</div> </li> <li><a href="/article/3799.htm" title="Android_ViewStub" target="_blank">Android_ViewStub</a> 阿尔萨斯 <a class="tag" taget="_blank" href="/search/ViewStub/1.htm">ViewStub</a> <div>public final class ViewStub extends View java.lang.Object android.view.View android.view.ViewStub 类摘要： ViewStub 是一个隐藏的，不占用内存空间的视图对象，它可以在运行时延迟加载布局资源文件。当 ViewSt</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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.  </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>

前端学习笔记 HTML5 基础内容

文章目录

关于HTML与HTML5

元素，标签和属性

块元素与内联元素

HTML5空文档