Web前端之HTML

大家好,我是ChrisChenJL·宸叡,一个立志奔向Java的自由少年。

博主萌新一枚,理解浅显,不足之处望各位大佬多多指教,谢谢大家 ᕦ(・ㅂ・)ᕤ

Web前端之HTML

  • 一、HTML简介
  • 二、主流浏览器
  • 三、HTML小零碎
    • 1、注解
    • 2、特殊字符
    • 3、预格式化标签
    • 4、路径
      • 1)绝对路径
      • 2)相对路径
  • 四、HTML标签
    • 1、标签的种类
      • 1)单标签
      • 2)双标签
    • 2、HTML基本标签
      • 1)标题字标签
      • 2)换行标签
      • 3)段落标签
      • 4)水平线标签
      • 5)居中标签
      • 6)滚动标签
    • 3、HTML超链接
      • 1)跳转链接(页面跳转)
      • 2)锚链接
      • 3)功能性链接(用途相对较少)
    • 4、HTML图像
      • 1)3种图像格式
      • 2)定义一个图像
    • 5、HTML文本格式化
      • 1)字体加粗
      • 2)字体强调
      • 3)下划线
      • 4)字体倾斜
      • 5)小号字体
      • 6)下标字
      • 7)上标字
      • 8)删除字体
  • 五、HTML列表
    • 1、有序列表
    • 2、无序列表
    • 3、自定义列表
  • 六、HTML表格
    • 1、表格标签
    • 2、表格行标签
    • 3、表格单元格标签
    • 4、列标题单元格标签
    • 5、TABLE中的合并单元格
  • 七、HTML表单
    • 1、表单的定义
    • 2、表单控件
      • 1)input输入标签
      • 2)select下拉框标签
      • 3)textarea文本域标签
      • 4)label标记标签
    • 3、控件的只读/禁用
      • 1)只读属性
      • 2)禁用属性
  • 八、HTML速查列表
  • 九、总结

一、HTML简介

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言,用于描述网页中存在哪些网页元素。

  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chris·宸叡(ChrisChenJL)title>
head>
<body>
    <h1>Web前端之HTMLh1>
    
    <p>Web前端第一弹:HTMLp>
body>
html>

实例解析:
声明为 HTML5 文档
元素是 HTML 页面的根元素,用于标识当前是一个html文档,是一切内容的开头和结束,任何html网页中的内容都包括在这组标签中;并没有实际意义,但却是每个html文档中不可缺少的一个部分。
元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8。即非网页中显示的内容部分,放在这组标签中。
</code> 元素描述了文档的标题<br> <code><body></code> 元素包含了可见的页面内容。即所有网页中显示的内容部分,都放在这组标签中。<br> <code><h1></code> 元素定义一个大标题<br> <code><p></code> 元素定义一个段落</p> </blockquote> <h1>二、主流浏览器</h1> <table> <thead> <tr> <th align="center">浏览器的名称</th> <th align="center">内核</th> <th align="center">浏览器的由来</th> <th align="center">浏览器的性能</th> <th align="center">兼容性</th> </tr> </thead> <tbody> <tr> <td align="center">谷歌(chrome)</td> <td align="center">Webkit Chrome 28以上为Blink内核</td> <td align="center">Google公司旗下浏览器</td> <td align="center">快速、安全、搜索引擎好、速度最快的浏览器</td> <td align="center">-webkit-</td> </tr> <tr> <td align="center">火狐(Firefox)</td> <td align="center">Gecko</td> <td align="center">mozilla公司旗下浏览器 简称:FF</td> <td align="center">安全性高,速度中等</td> <td align="center">-moz-</td> </tr> <tr> <td align="center">IE浏览器</td> <td align="center">Trident</td> <td align="center">微软公司在Mosaic代码的基础之上修改而来的浏览器</td> <td align="center">速度慢,安全性中等</td> <td align="center">-ms-</td> </tr> <tr> <td align="center">Safari</td> <td align="center">Webkit</td> <td align="center">苹果公司旗下浏览器</td> <td align="center">在苹果系统下是很优秀的浏览器</td> <td align="center">-webkit-</td> </tr> <tr> <td align="center">欧朋(Opera)</td> <td align="center">Presto Opera 15 版本以上是Blink内核</td> <td align="center">是挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器</td> <td align="center">速度快,浏览器界面简洁</td> <td align="center"></td> </tr> </tbody> </table> <p><strong>那到底要使用哪个呢?</strong></p> <ul> <li>如果你日后是一个前端开发人员,那么你大概需要IE/Edge/火狐/Chrome等多个浏览器,至少市场上主流的浏览器内核中,每个你都需要一个对应的浏览器。以便开发测试效果。</li> <li>如果你日后是一个程序开发人员,你只需要配合前端开发人员编写极少的前端部分内容,基本上你只需要一个IE/Chrome基本上就够了。</li> <li>对于日常用户,看个人喜好即可,大多数都用360/QQ等IE内核的浏览器。</li> </ul> <h1>三、HTML小零碎</h1> <h2>1、注解</h2> <p><strong>注释的作用:</strong></p> <p>在html中,注释完全是给人看的,也就是给开发者;通常开发着会对自己编写的代码进行一定的文字说明,以便进行工作交接等。在html中写注释的方法是:</p> <pre><code class="prism language-html">你好,<span class="token comment"><!-- 注释中的内容 --></span>我是小白。 </code></pre> <p><strong>如上这种写法被叫做“html注释”,具备以下特点:</strong></p> <ul> <li>加载到客户端,会在一定程度上影响网页的打开速度,当然对于至今电脑的性能,这一点可以在一定程度上忽略不计。</li> <li>不会被执行,不会影响内容加载之后的执行速度。</li> <li>HTML、CSS、JS的注释可以被第三方工具删除。</li> </ul> <h2>2、特殊字符</h2> <table> <thead> <tr> <th align="center">HTML源代码</th> <th align="center">显示结果</th> <th align="center">说明</th> </tr> </thead> <tbody> <tr> <td align="center"><;</td> <td align="center"><</td> <td align="center">小于号或显示标记</td> </tr> <tr> <td align="center">>;</td> <td align="center">></td> <td align="center">大于号或显示标记</td> </tr> <tr> <td align="center">&;</td> <td align="center">&</td> <td align="center">可用于显示其他特殊字符</td> </tr> <tr> <td align="center">";</td> <td align="center">"</td> <td align="center">引号</td> </tr> <tr> <td align="center">®;</td> <td align="center">®</td> <td align="center">已注册</td> </tr> <tr> <td align="center">©;</td> <td align="center">©</td> <td align="center">版权</td> </tr> <tr> <td align="center">&trade;</td> <td align="center">™</td> <td align="center">商标</td> </tr> <tr> <td align="center">&ensp;</td> <td align="center"></td> <td align="center">半个空白位置</td> </tr> <tr> <td align="center">&emsp;</td> <td align="center"></td> <td align="center">一个空白位置</td> </tr> <tr> <td align="center"> ;</td> <td align="center"></td> <td align="center">一个不断行的空白位置</td> </tr> </tbody> </table> <h2>3、预格式化标签</h2> <p><strong>预格式化的作用</strong><br> <code><pre></pre></code>:规定一个范围,在此范围内的内容都会直接遵从HTML代码中书写时候的样式,而不被html预定义的样式所约束。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> 2020年1月11日 预格式化, Chris。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/781021f44a6b4998b28d557a71e20315.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/781021f44a6b4998b28d557a71e20315.png" alt="预格式化标签" width="149" height="87"></a></p> <h2>4、路径</h2> <p>路径就是需要引用资源的引用地址,分为绝对路径和相对路径。</p> <h3>1)绝对路径</h3> <p>绝对路径可以说是一个完整的地址,根据这个地址,可以完全确定的找到一个资源。与你当前在哪里和任何参照物都无关。</p> <h3>2)相对路径</h3> <p>选定一个参照物,根据这个参照物找到具体的资源确切地址。</p> <blockquote> <p><code>/</code> :代表根目录<br> <code>.</code> :代表当前所在目录(可以省略)<br> <code>..</code> :代表上一层目录</p> </blockquote> <h1>四、HTML标签</h1> <h2>1、标签的种类</h2> <h3>1)单标签</h3> <p>以“<”开头,中间包含指定意义的字符,然后以“/>”结尾<br> 例如:<code><br/></code></p> <h3>2)双标签</h3> <p><mark>起始标签</mark><br> 以“<”开头,中间包含指定意义的字符,然后以“>”结尾。</p> <p><mark>终止标签</mark><br> 以“<”开头,中间包含指定意义的字符,然后以“/>”结尾。<br> 要求起始标签和终止标签中的字符必须完全一样<br> 例如:<code><em></em></code></p> <blockquote> <p>单标签和双标签在意义上是完全相同的,只是因为标识的内容范围不同,所以在写法上有所不同,所以说单标签和双标签的区分是格式上的区分。<br> 事实上很多时候,单标签可以写成双标签,而双标签也可以写成单标签。</p> </blockquote> <h2>2、HTML基本标签</h2> <h3>1)标题字标签</h3> <ul> <li><code><h1></h1></code>一级标题</li> <li><code><h2></h2></code>二级标题</li> <li><code><h3></h3></code>三级标题</li> <li><code><h4></h4></code>四级标题</li> <li><code><h5></h5></code>五级标题</li> <li><code><h6></h6></code>六级标题</li> </ul> <p>被标题标签所约束的内容,其字体大小会有所改变。其中h1为最大,h6为最小。</p> <blockquote> <p><strong>align属性</strong>:用于改变标题文字的对齐方式<br> - <strong>left</strong>:向左对齐<br> - <strong>right</strong>:向右对齐<br> - <strong>center</strong> :居中对齐</p> </blockquote> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>标题11<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>h2</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>标题12<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 attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>标题13<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>h2</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>标题2<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>标题3<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>标题4<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>标题5<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>标题6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span> </code></pre> <h3>2)换行标签</h3> <p><code><br/></code>单标签,用于将内容换行使用,相当于文档编辑中回车键的作用。</p> <pre><code class="prism language-html"> ChrisChenJL·宸叡<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> </code></pre> <h3>3)段落标签</h3> <p><code><p></p></code>段落标签,类似于一个自然段,段落标签中包裹的内容可以视为一个段落,段落标签会在包裹的内容上下各加一个空行。而对于段落标签内部的内容并不受到任何影响。</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>ChrisChenJL·宸叡<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <h3>4)水平线标签</h3> <p><code><hr/></code>横线标签,用于在网页页面上对应部位输出一条横线。</p> <pre><code class="prism language-html"> ChrisChenJL·宸叡 <span class="token comment"><!--横线标签--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10px<span class="token punctuation">"</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pink<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> </code></pre> <h3>5)居中标签</h3> <p><code><center></center></code>居中标签,将包裹的内容相对于页面居中显示。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>center</span><span class="token punctuation">></span></span> ChrisChenJL·宸叡 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>center</span><span class="token punctuation">></span></span> </code></pre> <h3>6)滚动标签</h3> <p><code><marquee><marquee></code>滚动标签,将包裹的内容在页面中滚动。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>marquee</span><span class="token punctuation">></span></span> ChrisChenJL·宸叡 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>marquee</span><span class="token punctuation">></span></span> </code></pre> <h2>3、HTML超链接</h2> <h3>1)跳转链接(页面跳转)</h3> <p>通常上网的时候你应该无数次的接触过超链接,例如某些文字和图片可以被鼠标点击,大多数时候点击这些图片或者文字之后浏览器的页面会打开与此图片或者文字内容相关的另一个页面。这种打开页面的行为,我们称之为“<strong>跳转</strong>”。而用于点击响应不同功能的内容,我们称之为“<strong>超链接</strong>”。</p> <blockquote> <p><code><a></a></code>:超链接标签,用于定义一个超链接。</p> <ul> <li>href属性:指定点击当前超链接后,页面所跳转到的地址。</li> <li>target属性:指定打开新页面的方式 <ul> <li>_slef:在当前浏览器正在浏览的页面中打开新的页面。</li> <li>_blank:另起一个新的页面,打开想要访问的内容。</li> </ul> </li> </ul> </blockquote> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 超链接标签:a href : 连接目标地址 target : 设定超链接的打开方式 _self(默认,不创建新的窗口) _blank(创建新的窗口) title : 对当前超链接的描述 |--指向下一级 |--下级路径/文件名称 |--指向当前级 |--./ |--什么都不加 |--指向上一级 |--../ --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.biqu6.com/19_19126/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<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 punctuation">></span></span>点我观看伏天氏<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</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 attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>pm_2_Test.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>a/b/c/test.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<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> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <h3>2)锚链接</h3> <p>你虚拟上网的时候通常会看到“到结尾”,“到开头”这种字样的超链接,点击之后并不会跳转到其他网页,而是到当前网页中的某个位置。这种超链接叫做“锚链接”,用于将当前网页浏览位置跳转到其他位置。当然仅仅是本页面,也可以打开一个新的页面,同时跳转到指定的位置。</p> <blockquote> <p>href属性:属性值以#开头,后面加上要跳转到的位置的内容控件id属性值即可,这种写法叫做“锚点”。<br> 例如:</p> <ul> <li>点击跳转到当前页面中的某个位置<code><a href="#b">点击跳转到</a></code>,这个#b即是锚点。</li> <li>点击跳转到另一个页面的指定位置<code><a href="d.html#b">点击跳转到</a></code>,d.html是要跳转到的页面,#b是存在于b.html页面的一个指定的锚点位置。</li> </ul> </blockquote> <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">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#last<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>first<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> <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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>id2<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>h2</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>id3<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>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>pean</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>id4<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>pean</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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#first<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>last<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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#id2<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> <h3>3)功能性链接(用途相对较少)</h3> <p>这种超链接使用场景并不多,一般用于点击后触发某些功能,用途是链接到第三方资源。</p> <blockquote> <p>如下例举一些功能性链接:</p> <ul> <li>触发发送电子邮件:<code><a href="mailto:chrischenjl@163.com">给我发邮件</a></code></li> <li>触发拨打电话:<code><a href="tel:18888888888">给我打电话</a></code></li> <li>触发发送短信:<code><a href="sms:18888888888">给我发短信</a></code></li> <li>触发内容播放:<code><a href="a.mp4">播放视频</a></code><br> 这种超链接使用场景并不多,一般用于点击后触发某些功能,用途是链接到第三方资源;如下例举一些功能性链接。</li> </ul> </blockquote> <h2>4、HTML图像</h2> <h3>1)3种图像格式</h3> <ul> <li><strong>GIF格式</strong>:支持256种颜色,最适合显示色调不连续或者具有大面积单一颜色的图像,例如导航条、按钮、图标等一些内容。GIF格式最大的优点是可以制作动态的图像,像是小视频一样的效果。</li> <li><strong>JPEG格式</strong>:一种图像压缩格式,而且压缩得非常紧凑。专用于不含有大色块的元素,这个格式有一定的失真度,但是在正常情况下一般根本无法被肉眼所识别。不支持透明色,如果图像需要全色彩模式才能表现效果,那么JPEG就是最佳的选择。</li> <li><strong>PNG格式</strong>:一种非破坏性的网页图像文件格式,不仅具备了GIF图像格式大部分的优点,还支持48位色彩。</li> </ul> <h3>2)定义一个图像</h3> <blockquote> <p><code><img/></code>:用于定义一个图片</p> <ul> <li><strong>title属性</strong>:定义鼠标悬停时候提示文字的内容</li> <li><strong>alt属性</strong>:对照片的描述,当图片资源无法找到时,或当路径出现问题时,或还没有加载出来的时候展示的替换文字。</li> <li><strong>src属性</strong>:指定图片资源所在的位置,可以是绝对路径或者相对路径</li> <li><strong>width属性</strong>:宽度设置</li> <li><strong>height属性</strong>:高度设置</li> <li><strong>border属性</strong>:增加边框</li> </ul> </blockquote> <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>chris.jpg<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>ChrisChenJL·宸叡<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>ChrisChenJL<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>600px<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>750px<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>5px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <h2>5、HTML文本格式化</h2> <h3>1)字体加粗</h3> <p><code><b></b></code>:字体加粗标签,包裹在这组标签中的内容中,文字部分都会加粗显示,相当于world文档中的加粗选项。</p> <h3>2)字体强调</h3> <p><code><strong></strong></code>:用于强调一段内容,实际上就是字体加粗显示,与字体加粗标签的功能差不多。</p> <h3>3)下划线</h3> <p><code><u></u></code>:放在这组标签中的内容会显示下方有一条下划线。<br> <code><ins></ins></code>:着重意思为 定义插入字。</p> <h3>4)字体倾斜</h3> <p><code><em></em></code>:用于设置字体倾斜,报国的内容中文字部分会斜体展示。</p> <p><code><i></i></code>:<code><i></code> 标签和基于内容的样式标签 <code><em></code> 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。</p> <h3>5)小号字体</h3> <p><code><small></small></code>:放在这组标签中的内容会比正常字体小上一些。</p> <h3>6)下标字</h3> <p><code><sub></sub></code>:放在这组标签中的内容会变成 下标字 形态。</p> <h3>7)上标字</h3> <p><code><sup></sup></code>:放在这组标签中的内容会变成 上标字 形态。</p> <h3>8)删除字体</h3> <p><code><del></del></code>:放在这组标签中的内容会在字中间有条删除线。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 字体加粗:<b></b> 字体强调(相当于加粗):<strong></strong> 字体倾斜:<em></em> 字体下划线:<u></u> --></span> 青州学宫,<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>,<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>青州城豪门贵族<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span>以及<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>u</span><span class="token punctuation">></span></span>宗门世家<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>u</span><span class="token punctuation">></span></span>内<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>半数以上<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span>的强者,都从<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>青州<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sup</span><span class="token punctuation">></span></span>学宫<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sup</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>del</span><span class="token punctuation">></span></span>因而<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>del</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>青州城之人皆以能够入学宫中修行为荣,<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>br</span><span class="token punctuation">/></span></span> <span class="token comment"><!--下面文字,既能加粗又能加下划线,也能倾斜--></span> <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>u</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>旦有机会踏入学宫,必刻苦求学。<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>u</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> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/c5bac403c33d4f8eab2549d1cc3a0390.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c5bac403c33d4f8eab2549d1cc3a0390.jpg" alt="HTML文本格式化" width="650" height="91"></a></p> <h1>五、HTML列表</h1> <h2>1、有序列表</h2> <p>有序列表是一列项目,默认展示效果上每个列表项都有一个序号。 有序列表始于 <code><ol></code>标签。每个列表项始于 <code><li></code> 标签。<br> 例如:</p> <ol> <li>第一个列表项</li> <li>第二个列表项</li> <li>第三个列表项</li> </ol> <blockquote> <p><code><ol></ol></code>:用于定义一组有序列表<br> <strong>type属性</strong>:用于设置当前有序列表的展示效果</p> <ul> <li>type=“1”:使用数字进行编号</li> <li>type=“A”:使用大写字母进行编号</li> <li>type=“a”:使用小写字母进行编号</li> <li>type=“I”:使用大写罗马数字方式进行编号</li> <li>type=“i”:是用小写罗马数字方式进行编号</li> </ul> <p><strong>start属性</strong>:规定有序列表的编号起始值,填写一个值,从指定的值开始标号。设置的是一个数字,不需要跟随type属性,更改起始值的内容<br> <strong>reversed属性</strong>:规定有序列表的标号排序方式为“降序”</p> <ul> <li>reversed=“reversed”</li> </ul> </blockquote> <p><strong>有序列表的嵌套</strong><br> 有序列表同样支持直接嵌套,但是需要注意。<code><ol></code>标签中只能直接包含<code><li></code>标签,而后在需要放置二级内容的<code><li></code>标签后继续添加<code><ol></code>标签。即<code><ol></code>标签不能直接包含<code><ol></code>标签。</p> <p>对于<code><ol></code>标签所定义的type属性之对于当前的<code><ol></code>起作用,对后续嵌套的内容不会有所影响。</p> <pre><code class="prism language-html"><span class="token comment"><!--有序列表--></span> <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>Chris<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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Chris<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> <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> <h2>2、无序列表</h2> <p>无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <code><ul></code>标签。每个列表项始于 <code><li></code> 标签。</p> <blockquote> <p><code><ul></ul></code>:用于定义一组无序列表。<br> <strong>type属性</strong>:设置当前无序列表的展示样式</p> <ul> <li>type=“disc”:默认列表项以小黑点开头的样式</li> <li>type=“circle”:列表项以空心小圆圈开头</li> <li>type=“square”:列表项以实心方块开头</li> </ul> <p><code><li></li></code>:列表项标签,用于规划列表中展示的每一项内容。</p> </blockquote> <p><strong>无序列表的嵌套</strong><br> 无序列表可以进行嵌套分级内容的展示,但是需要注意。<code><ul></code>标签中只能直接包含<code><li></code>标签,而后在需要放置二级内容的<code><li></code>标签中继续添加<code><ul></code>标签。即<code><ul></code>标签不能直接包含<code><ul></code>标签。</p> <p>对于<code><ul></code>标签所定义的type属性之对于当前的<code><ul></code>起作用,对后续嵌套的内容不会有所影响。</p> <pre><code class="prism language-html"><span class="token comment"><!--无序列表--></span> <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>Chris<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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Chris<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> <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> <h2>3、自定义列表</h2> <p>自定义列表不仅仅是一列项目,而是项目及其注释的组合。</p> <p>自定义列表以 <code><dl></code> 标签开始。每个自定义列表项以 <code><dt></code> 开始。每个自定义列表项的定义以 <code><dd></code> 开始。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>ChrisChenJL·宸叡<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>做一个立志奔向Java的自由少年。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> </code></pre> <h1>六、HTML表格</h1> <h2>1、表格标签</h2> <p><code><table></table></code>表格标签,类似于excel中,将内容以划分为表格的方式展示。单独使用此标签没有实质性的效果,需要配合下方的行标签和单元格标签一起使用。</p> <blockquote> <p><strong>border属性</strong>:设置表格的边框大小,如果针对于这个属性进行设置只会影响表格四周边框的大小,并不会影响到表格的单元格边框粗细。<br> <strong>bordercolor属性</strong>:设置表格的边框颜色。(不是所有的浏览器都可以正常展示)<br> <strong>cellspacing属性</strong>:内框宽度值,用于设置表格内部每个单元格之间的间距。值为数字其单位为像素。<br> <strong>cellpadding属性</strong>:表格与内容的内边框距离,默认情况下单元格的内容会紧贴着单元格的边框,可以使用cellpadding来设置单元格与单元格中的内容之间的距离。值为数字,单位为像素。<br> <strong>bgcolor属性</strong>:设置整个表格的背景颜色,取值为颜色值。<br> <strong>background属性</strong>:设置整个表格的背景图像,取值为图像文件的绝对目录或者相对目录</p> </blockquote> <h2>2、表格行标签</h2> <p><code><tr></tr></code>表格行标签,需要放在表格标签中使用才有效果,用于划分出单独一行存放单元格。</p> <blockquote> <p><strong>height属性</strong>:控制行的高度,值为一个数字,单位为像素。<br> <strong>bordercolor属性</strong>:控制行的边框颜色,值为颜色取值。(不是所有浏览器都可以正常展示)<br> <strong>bgcolor属性</strong>:设置当前行的背景颜色,取值为颜色值。<br> <strong>background属性</strong>:设置当前行所采用的背景图片,值为图片文件所在的绝对或者相对路径。<br> <strong>align属性</strong>:设置当前行内容的水平对齐方式,不受表格的整体对齐方式影响,却可以被单元格中所定义的对齐方式覆盖。</p> <ul> <li>left:靠左对齐(默认)</li> <li>right:靠右对齐</li> <li>middle:居中对齐</li> </ul> <p><strong>valign属性</strong>:设置当前行内容的垂直对齐方式,不受表格整体对齐方式影响,却可以被单元格中所定义的对齐方式覆盖。</p> <ul> <li>top:靠上对齐</li> <li>middle:居中对齐(默认)</li> <li>botton:靠下对齐</li> </ul> </blockquote> <h2>3、表格单元格标签</h2> <p><code><td></td></code>表格单元格标签:放在单元格行标签内,用于展示一个单一的单元格。单元格内可以包含任何你需要包含的内容。</p> <p><font color="#999AAA">默认情况下,单元格的宽度和高度会随着内容的大小自动调整,但是我们也可通过width属性和height属性进行干预。但是如果我们设置了表格的高和宽,这将会覆盖tr和table中已经定义的样式。</font></p> <blockquote> <p><strong>width属性</strong>:设置单元格的宽度,值位数字,单位为像素。<br> <strong>height属性</strong>:设置单元格的高度,职位数字,单位为像素。<br> <strong>bgcolor属性</strong>:设置单元格的背景颜色,值为颜色取值。<br> <strong>background属性</strong>:设置单元格的背景图片,值为图片文件的绝对路径或者相对路径。<br> <strong>align</strong>:设置单元格内容的水平对齐方式。<br> <strong>valign</strong>:设置单元格内容的垂直对齐方式。</p> </blockquote> <h2>4、列标题单元格标签</h2> <p><code><th></th></code>列标题单元格标签,与单元格标签类似,只是会针对于单元格内的内容进行加测和居中显示,更加美观,所以适合作为列标题使用。当然,也比更不是只能加在第一行,这个标签这是提供了格式和样式,位置随意,没有硬性规定。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</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 attr-name">border</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<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>tr</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>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>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 tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>22<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>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 tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>21<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>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 tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>20<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> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/342a1f2f830c433b81eadeb237840b63.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/342a1f2f830c433b81eadeb237840b63.png" alt="Web前端之HTML_第1张图片" width="120" height="163" style="border:1px solid black;"></a></p> <h2>5、TABLE中的合并单元格</h2> <p>可以联想一下Excel中针对于单元格的合并,无非两种方式:横向合并、纵向合并。</p> <blockquote> <p><strong>rowspan属性</strong>:跨行合并单元格(纵向合并)<br> <strong>colspan属性</strong>:跨列合并单元格(横向合并)<br> 合并后的单元格归属原则都是左上原则,即下归上,右归左,越往左上角越优先</p> </blockquote> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<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>300<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>200px<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>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 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>td</span> <span class="token attr-name">rowspan</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>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>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>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>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>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">rowspan</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>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>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>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>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 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><a href="http://img.e-com-net.com/image/info8/f8e9ef13cb394c8cb9146b6c1def8644.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f8e9ef13cb394c8cb9146b6c1def8644.jpg" alt="Web前端之HTML_第2张图片" width="382" height="260" style="border:1px solid black;"></a></p> <h1>七、HTML表单</h1> <h2>1、表单的定义</h2> <p><code><form></form></code>:定义一个表单。如果希望一个控件有效使用,那么必须将空间放在表单标签中。</p> <blockquote> <p>• <strong>action属性</strong>:表单提交到的目标地址<br> • <strong>name属性</strong>:给表单一个命名,通常来说这个属性在大多数情况下不是必须的。但是为了防止表单提交到后台之后程序处理出现混乱,也有时候会给表单一个命名。表单 名称中不可以包含特殊字符和空格。<br> • <strong>mehtod属性</strong>:采取的提交方式<br> • <strong>enctype属性</strong>:提交编码方式<br> • <strong>target属性</strong>:用于指定目标窗口的打开方式,同超链接中的使用方法完全一致。</p> </blockquote> <h2>2、表单控件</h2> <h3>1)input输入标签</h3> <p><code><input /></code>:大多数的表单控件标签,都是input标签。</p> <p>输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:</p> <blockquote> <p><strong>type属性</strong>:指定当前控件的类别</p> <ul> <li> <p><strong>type=“text”:文本框(供用户输入内容使用)</strong></p> <ul> <li><strong>name属性</strong>:文字字段的名称,用于和页面中其他控件加以区别,名称由英文、字母、下划线区分,但是区分大小写。</li> <li><strong>size属性</strong>:文本框在网页上展示的长度,值为数字,以字符为单位。最小值为1,最大值取决于浏览器的宽度。</li> <li><strong>maxlength属性</strong>:用来设置文本框中最多可以输入的字符个数。</li> <li><strong>value属性</strong>:文字字段的默认取值</li> <li><strong>placeholder属性</strong>:提示文字的内容(老版本的浏览器可能不支持)</li> </ul> </li> <li> <p><strong>type=“password”:密码框(供用户输入内容使用,不现实实际内容。)</strong></p> <ul> <li><strong>name属性</strong>:文字字段的名称,用于和页面中其他控件加以区别,名称由英文、字母、下划线区分,但是区分大小写。</li> <li><strong>size属性</strong>:密码框在网页上展示的长度,值为数字,以字符为单位。最小值为1,最大值取决于浏览器的宽度。</li> <li><strong>maxlength属性</strong>:用来设置密码框中最多可以输入的字符个数。</li> <li><strong>value属性</strong>:密码字段的默认取值</li> <li><strong>placeholder属性</strong>:提示文字的内容(老版本的浏览器可能不支持)</li> </ul> </li> <li> <p><strong>type=“radio”:单选框(多个选项只允许同时有效选择其中一项使用。)</strong></p> <ul> <li><strong>name属性</strong>:同上。</li> <li><strong>value属性</strong>:当前单选框的实际值</li> <li><strong>checked属性</strong>:用于让当前单选框默认处于选中状态:当设置 checked=“checked” 时,该选项被默认选中</li> <li><strong>注意</strong>:同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。</li> </ul> </li> <li> <p><strong>type=“hidden”:隐藏域(一种看不到的控件,可以保存一个值。后续有场景会使用到。经常在需要在页面元素中保存一个内容的时候使用。)</strong></p> <ul> <li><strong>name属性</strong>:同上</li> <li><strong>value属性</strong>:同上</li> </ul> </li> <li> <p><strong>type=“file”:文件选择框(可供用户点击后选择本地计算机上的文件)</strong></p> <ul> <li><strong>size属性</strong>:设置文件选择框的宽度,以字符为单位。</li> <li><strong>name属性</strong>:同上。</li> <li><strong>value属性</strong>:同上</li> </ul> </li> <li> <p><strong>type=“checkbox”:复选框(多个选项可以同时有效选中其中多项使用。)</strong></p> <ul> <li><strong>name属性</strong>:同上。</li> <li><strong>value属性</strong>:同上</li> <li><strong>checked属性</strong>:用于让当前单选框默认处于选中状态,当设置 checked=“checked” 时,该选项被默认选中</li> </ul> </li> <li> <p><strong>type=“button”:按钮控件(用于各类综合场景使用,最普通的按钮。)</strong></p> <ul> <li><strong>name属性</strong>:同上。</li> <li><strong>value属性</strong>:可以设定按钮上所展示的文字。</li> </ul> </li> <li> <p><strong>type=“image”:图片按钮(与普通的按钮功能相同,只是按钮上支持放图片,也有其他方式实现同样的按钮图片效果。)</strong></p> <ul> <li><strong>name属性</strong>:同上。</li> <li><strong>value属性</strong>:可以设定按钮上所展示的文字,但是如果设定了图片,则文字不可见。</li> <li><strong>src属性</strong>:引用图片的地址(绝对目录或相对目录)</li> </ul> </li> <li> <p><strong>type=“submit”:提交按钮控件(用于表单提交数据的时候使用)</strong></p> <ul> <li><strong>name属性</strong>:同上。</li> <li><strong>value属性</strong>:可以设定按钮上所展示的文字,不影响提交功能。</li> </ul> </li> <li> <p><strong>type=“reset”:重置按钮控件(用于表单内容重置的时候使用)</strong></p> <ul> <li><strong>name属性</strong>:同上。</li> <li><strong>value属性</strong>:可以设定按钮上所展示的文字,不影响提交功能。</li> </ul> </li> </ul> </blockquote> <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 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">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</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>br</span><span class="token punctuation">/></span></span> 密 <span class="token entity"> </span><span class="token entity"> </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>password<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</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>br</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 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">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>br</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">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>br</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 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> <h3>2)select下拉框标签</h3> <p><code><select></select></code>下拉框标签:用于在表单中定义一个下拉框控件。</p> <blockquote> <p>• <strong>size属性</strong>:规定下拉框显示选项的数量;<br> 例:size=“4”<br> • <strong>multipe属性</strong>:规定下拉框可以同时有效选中多个选项;<br> 例:multiple="multiple"或者multiple</p> </blockquote> <p><code><option><option></code>下拉框选项标签:用于在下拉框中定义具体的选项。</p> <pre><code class="prism language-html"><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 entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<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>option</span><span class="token punctuation">></span></span>无经验<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>1年<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>3年<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>5年<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</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> </code></pre> <h3>3)textarea文本域标签</h3> <p><code><textarea></textarea></code>:相当于一个比较大的文本框,供用户输入大量文字内容的时候使用。</p> <blockquote> <p>• <strong>cols属性</strong>:规定文本区内可见的宽度<br> • <strong>rows属性</strong>:规定文本区内可见的行数<br> • <strong>maxlength属性</strong>:文本输入的最大字符数量</p> </blockquote> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>包括cols,rows,maxlength等属性<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <h3>4)label标记标签</h3> <p><code><label></label></code>:标记标签本身没有比较特殊的作用,主要用于代替标签本身对于用户的操作做出一定而响应。</p> <p>例如单选框选中文字实现单选框的选中。</p> <pre><code class="prism language-html"><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">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>send<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>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>send<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>label</span><span class="token punctuation">></span></span> </code></pre> <h2>3、控件的只读/禁用</h2> <h3>1)只读属性</h3> <p><code>readonly="readonly"</code>:这个属性的作用是只读,设定之后,空间的外观不会有任何变化(主流浏览器中是这样,不绝对。)但是无法针对于空间中的内容进行任何更改。</p> <blockquote> <p>这个属性仅针对于三个控件有效:</p> <ul> <li>文本框</li> <li>密码框</li> <li>文本域</li> </ul> </blockquote> <h3>2)禁用属性</h3> <p><code>disable="disable"</code>:禁用属性用于标识一个控件禁止被使用,也就是不能进行有效的操作,设定这个属性之后,空间的外观会有所改变。在主流的浏览器中会变成灰色,这个时候你无法针对于当前空间进行任何形式的操作。</p> <blockquote> <p>这个属性针对于所有的表单控件都有效。</p> </blockquote> <h1>八、HTML速查列表</h1> <p>HTML 速查列表,可以打印出来备用噢~<br> 来源于: 菜鸟教程·HTML速查列表.</p> <h1>九、总结</h1> <p>本系列博文主要用于博主本人日常的复习,既可以作为笔记保存,又可以随时翻看进行复盘使用。也希望在未来的某一刻可以帮得上大家~</p> <p>不足之处还请各位大佬多多指教~嘻嘻</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1348816029303779328"></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">你可能感兴趣的:(Web前端,日常笔记,html,java)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1892562803177353216.htm" title="前端:纯前端快速实现html导出word和pdf" target="_blank">前端:纯前端快速实现html导出word和pdf</a> <span class="text-muted">m0_74823715</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/word/1.htm">word</a> <div>实现html导出word,需要使用两个库。html-docx-js和file-saver导出word的js方法>npminstallhtml-docx-js>npminstallfile-saverjs引入importFileSaverfrom“file-saver”;importhtmlDocxfrom“html-docx-js/dist/html-docx”;/**导出word方法*/expo</div> </li> <li><a href="/article/1892553091874615296.htm" title="Spring Bean 生命周期的执行流程" target="_blank">Spring Bean 生命周期的执行流程</a> <span class="text-muted">涛粒子</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1.Bean定义阶段在Spring应用启动时,会读取配置文件(如XML配置、Java注解配置等)或者扫描带有特定注解(如@Component、@Service、@Repository等)的类,将这些Bean的定义信息加载到Spring的BeanFactory或ApplicationContext中。这些定义信息包括Bean的类名、作用域、依赖关系等。2.Bean实例化阶段调用构造函数:Spring</div> </li> <li><a href="/article/1892550192041881600.htm" title="Spring Bean 生命周期的执行流程" target="_blank">Spring Bean 生命周期的执行流程</a> <span class="text-muted">涛粒子</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>1.Bean定义阶段解析配置元数据:Spring容器会读取配置信息,这些配置信息可以是XML文件、Java注解或者Java配置类。容器根据这些配置信息解析出Bean的定义,包括Bean的类名、作用域、依赖关系等。注册Bean定义:解析完成后,Spring会将Bean定义信息注册到BeanDefinitionRegistry中,BeanDefinitionRegistry是一个存储Bean定义的注册</div> </li> <li><a href="/article/1892545777100713984.htm" title="使用Druid连接池优化Spring Boot应用中的数据库连接" target="_blank">使用Druid连接池优化Spring Boot应用中的数据库连接</a> <span class="text-muted">和烨</span> <a class="tag" taget="_blank" href="/search/%E5%85%B6%E5%AE%83/1.htm">其它</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>使用Druid连接池优化SpringBoot应用中的数据库连接使用Druid连接池优化SpringBoot应用中的数据库连接1.什么是Druid连接池?2.在SpringBoot中配置Druid连接池2.1添加依赖2.2配置Druid连接池2.3配置参数详解3.启用Druid监控4.总结使用Druid连接池优化SpringBoot应用中的数据库连接在现代的Java应用中,数据库连接管理是一个非常重</div> </li> <li><a href="/article/1892544893620908032.htm" title="纯前端导入导出txt文件" target="_blank">纯前端导入导出txt文件</a> <span class="text-muted">今天吃了嘛o</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BAtxt%E6%96%87%E4%BB%B6/1.htm">前端导入导出txt文件</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/html5/1.htm">html5</a> <div>1.html部分导入导出{{alone}}2.js部分导出的时候我尝试了很多次改变编码格式为gb2312的,但是无果,所以我再读取的时候先读取文件判断了文件编码格式,然后再去根据编码格式读取文件并展示页面。exportdefault{data(){return{works:[],};},methods:{handleBeforeUpload(file){this.fileList=[file];c</div> </li> <li><a href="/article/1892544513289809920.htm" title="jvm虚拟机详解(一)-----jvm概述" target="_blank">jvm虚拟机详解(一)-----jvm概述</a> <span class="text-muted">Mir Su</span> <a class="tag" taget="_blank" href="/search/JVM%E7%94%B1%E6%B5%85%E8%87%B3%E6%B7%B1/1.htm">JVM由浅至深</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>写在前面本篇文章是再下人生中的第一次发布关于技术相关的文章。从事开发工作这么多年来,也算是对自己过往的工作的一个总结,对人生的一次重装再出发。从jvm谈起,然后是关于mysql、redis、消息中间件、微服务等最后在归纳一些常见的java面试方面的高频问题。这是开始我的一个写博计划,希望感兴趣的朋友加个关注一起探讨,有什么不做的地方也请欢迎指教。为什么要先说jvm呢?因为jvm是java程序蜕变的</div> </li> <li><a href="/article/1892542748079222784.htm" title="java新技术" target="_blank">java新技术</a> <span class="text-muted">计算机毕业设计系统</span> <div>转载:http://lj6684.iteye.com/blog/895010最近在网上查资料碰到好多没接触过的技术,先汇总在这里备用,以后慢慢吸收1.JNAJNI的替代品,调用方式比JNI更直接,不再需要JNI那层中间接口,几乎达到Java直接调用动态库2.SmallSQL基于JDBC3.0转为Desktop应用设计的嵌入式数据库,纯Java,本地访问,不支持网络但目前好像不太活跃,最新版本是0.</div> </li> <li><a href="/article/1892540094556991488.htm" title="Java 与设计模式(15):模板方法模式" target="_blank">Java 与设计模式(15):模板方法模式</a> <span class="text-muted">暗星涌动</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><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><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%9D%BF%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F/1.htm">模板方法模式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>一、定义模板方法模式是一种行为设计模式,它定义了一个操作中的算法的骨架(也就是大致的步骤和流程),而将一些具体步骤的实现延迟到子类中。这样,子类可以不改变算法的结构即可重新定义算法的某些特定步骤。二、Java示例举个简单的例子:假设我们要泡一杯茶和一杯咖啡,这两者的制作过程有一些共同的步骤,比如烧水、倒水、搅拌等,但也有不同的地方,比如茶需要放茶叶,而咖啡需要放咖啡粉。泡茶的过程:烧水、放茶叶、倒</div> </li> <li><a href="/article/1892539841762095104.htm" title="js的垃圾回收机制" target="_blank">js的垃圾回收机制</a> <span class="text-muted">www.www</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E7%9B%B8%E5%85%B3/1.htm">相关</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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>js中的垃圾回收机制JavaScript作为一种高级语言,开发者不需要手动管理内存的分配和释放。垃圾回收机制是JavaScript引擎中的一部分,负责自动回收那些不再被使用的内存,确保内存资源得到有效利用,避免内存泄漏。垃圾回收机制主要有两种算法:引用计数和标记清除引用计数基本原理:每个对象都有一个引用计数器,当有一个引用指向该对象时,计数器+1,当一个引用不再指向该对象时,计数器-1。如果某个对</div> </li> <li><a href="/article/1892538707169308672.htm" title="若依前后端分离集成CAS详细教程" target="_blank">若依前后端分离集成CAS详细教程</a> <span class="text-muted">Roc-xb</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/1.htm">单点登录</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/1.htm">前后端分离</a><a class="tag" taget="_blank" href="/search/CAS/1.htm">CAS</a> <div>目录一、后端配置1、添加cas依赖2、修改配置文件3、修改LoginUser.java4、修改Constants.java5、添加CasProperties.java6、添加CasUserDetailsService.java7、添加CasAuthenticationSuccessHandler.java8、修改SecurityConfig9、启动后端二、前端配置1、修改settings.js2、</div> </li> <li><a href="/article/1892538578999767040.htm" title="基于Transformer的YOLOv8检测头架构改进:提升目标检测精度的全新突破(YOLOv8)" target="_blank">基于Transformer的YOLOv8检测头架构改进:提升目标检测精度的全新突破(YOLOv8)</a> <span class="text-muted">步入烟尘</span> <a class="tag" taget="_blank" href="/search/transformer/1.htm">transformer</a><a class="tag" taget="_blank" href="/search/YOLO/1.htm">YOLO</a><a class="tag" taget="_blank" href="/search/%E7%9B%AE%E6%A0%87%E6%A3%80%E6%B5%8B/1.htm">目标检测</a> <div>本专栏专为AI视觉领域的爱好者和从业者打造。涵盖分类、检测、分割、追踪等多项技术,带你从入门到精通!后续更有实战项目,助你轻松应对面试挑战!立即订阅,开启你的YOLOv8之旅!专栏订阅地址:https://blog.csdn.net/mrdeam/category_12804295.html文章目录基于Transformer的YOLOv8检测头架构改进:提升目标检测精度的全新突破什么是DAtten</div> </li> <li><a href="/article/1892536436008218624.htm" title="图片粘贴上传实现" target="_blank">图片粘贴上传实现</a> <span class="text-muted">SarinaDu</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>图片上传htmldemo直接粘贴本地运行查看效果即可,有看不懂的直接喂给deepseek会解释的很清晰粘贴图片上传示例-使用场景,粘贴桌面图片上传、粘贴word文档中图片上传、直接截图上传等body{font-family:Arial,sans-serif;padding:20px;}.upload-area{width:100%;height:200px;border:2pxdashed#ccc</div> </li> <li><a href="/article/1892536182668062720.htm" title="前后端分离跨域问题解决方案" target="_blank">前后端分离跨域问题解决方案</a> <span class="text-muted">慕容屠苏</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%8D%E7%AB%AF%E7%88%AC%E5%9D%91%E4%B9%8B%E8%B7%AF/1.htm">大前端爬坑之路</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/1.htm">前后端分离</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">跨域问题解决方案</a> <div>前后端分离跨域问题解决方案现在的web开发中经常会用到前后分离技术,前后端分解技术,都会涉及到跨域问题。解决跨域问题的方法:第一种解决方案jsonp(不推荐使用)这种方案其实我是不赞同的,第一,在编码上jsonp会单独因为回调的关系,在传入传出还有定义回调函数上都会有编码的”不整洁”.简单阐述jsonp能够跨域是因为javascript的script标签,通过服务器返回script标签的code,</div> </li> <li><a href="/article/1892535930091270144.htm" title="lombok 不生效" target="_blank">lombok 不生效</a> <span class="text-muted">howeres</span> <a class="tag" taget="_blank" href="/search/Maven/1.htm">Maven</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>Lombok不生效0现象在build/rebuild时,提示Lombok不生效:java:Youaren’tusingacompilersupportedbylombok,solombokwillnotworkandhasbeendisabled.或java:JPSincrementalannotationprocessingisdisabled.Compilationresultsonparti</div> </li> <li><a href="/article/1892532653761032192.htm" title="CSS flex布局 列表单个元素点击 本行下插入详情独占一行" target="_blank">CSS flex布局 列表单个元素点击 本行下插入详情独占一行</a> <span class="text-muted">Cxiaomu</span> <a class="tag" taget="_blank" href="/search/CSS3/1.htm">CSS3</a><a class="tag" taget="_blank" href="/search/UI%E8%AE%BE%E8%AE%A1/1.htm">UI设计</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> <div>技术栈:Vue2+javaScript简介在实际开发过程中有遇到一个场景:一个list,每行个数固定,点击单个元素后,在当前行与下一行之间插入一行元素详情,便于更直观的查看到对应的数据详情。这种情形,在移动端比较常见,比如用户列表,点击单个列表展示详情,可以考虑flex布局+positionrelative定位。实现思路对于需求重点和实现拆解列表元素:for遍历每行固定(3)个元素:flex布局、</div> </li> <li><a href="/article/1892531897473495040.htm" title="20个高级Java开发面试题及答案!" target="_blank">20个高级Java开发面试题及答案!</a> <span class="text-muted">Java进阶八股文</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>1、java中都有哪些引用类型?(1)强引用Java中默认声明的就是强引用,比如:Objectobj=newObject();obj=null;只要强引用存在,垃圾回收器将永远不会回收被引用的对象。如果想被回收,可以将对象置为null;(2)软引用(SoftReference)在内存足够的时候,软引用不会被回收,只有在内存不足时,系统才会回收软引用对象,如果回收了软引用对象之后仍然没有足够的内存,</div> </li> <li><a href="/article/1892531391170670592.htm" title="同城拼车打车约车系统:Java源码全开源构建与优化" target="_blank">同城拼车打车约车系统:Java源码全开源构建与优化</a> <span class="text-muted">狂团商城小师妹</span> <a class="tag" taget="_blank" href="/search/%E5%8D%9A%E7%BA%B3miui52086/1.htm">博纳miui52086</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%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/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%B9%B3%E5%8F%B0/1.htm">微信公众平台</a> <div>同城拼车系统是一个复杂且功能全面的软件系统,它巧妙地运用互联网技术,将具有相同出行需求的乘客与车主进行精准匹配,旨在实现资源的最大化共享、显著降低出行成本、有效缓解交通拥堵问题,并大幅提升出行效率。Java,作为一种功能强大、应用广泛的编程语言,凭借其出色的跨平台性、丰富的API库以及强大的性能,成为开发此类系统的理想选择。一、Java源码构建系统架构MVC架构:同城拼车系统采用MVC(Model</div> </li> <li><a href="/article/1892531392466710528.htm" title="活动报名系统源码:JAVA同城服务系统活动报名同城圈子商家商城城市代理躲猫猫" target="_blank">活动报名系统源码:JAVA同城服务系统活动报名同城圈子商家商城城市代理躲猫猫</a> <span class="text-muted">狂团商城小师妹</span> <a class="tag" taget="_blank" href="/search/%E5%8D%9A%E7%BA%B3miui52086/1.htm">博纳miui52086</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%B9%B3%E5%8F%B0/1.htm">微信公众平台</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a> <div>JAVA同城服务系统:打造多元化社交与娱乐新体验在数字化时代,同城服务系统已成为连接城市生活的重要桥梁。我们精心打造的JAVA同城服务系统,不仅融合了活动报名、同城圈子、商家商城、城市代理等多重功能,还特别加入了创新的“躲猫猫”游戏模块,旨在为用户提供一个集社交、娱乐、消费于一体的综合性平台。以下是对该系统功能的详细介绍及技术栈分析。功能介绍活动报名用户可以通过系统轻松浏览并参与同城各类精彩活动,</div> </li> <li><a href="/article/1892530756757024768.htm" title="Java如何调用构造函数和方法以及使用" target="_blank">Java如何调用构造函数和方法以及使用</a> <span class="text-muted">WZMeiei</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>调用构造函数的格式构造函数在创建新对象时被调用。调用格式如下:ClassNameobjectName=newClassName(parameters);ClassName:你需要创建其实例的类的名称。objectName:你将创建的对象的名称。parameters:如果你使用的是带有参数的构造函数,这里需要传递相应的参数。示例:Personperson=newPerson("John",25);调</div> </li> <li><a href="/article/1892530757285507072.htm" title="Java中的static关键字" target="_blank">Java中的static关键字</a> <span class="text-muted">WZMeiei</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>static是Java中的一个关键字,主要用于修饰类成员(变量和方法),以表示这个成员属于类本身,而不是类的实例1.静态变量(StaticVariables)类级属性:静态变量也称为类变量或静态属性,它们在类加载时初始化,并且只有一份拷贝,被所有该类的对象共享。这意味着无论创建多少个对象,静态变量的内存空间只有一处。生命周期长:静态变量的生命周期与类相同,只要应用运行,它们就存在。访问方式:可以直</div> </li> <li><a href="/article/1892529999513186304.htm" title="AJAX使用和固定格式" target="_blank">AJAX使用和固定格式</a> <span class="text-muted">乐多_L</span> <a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</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>ajax的全称AsynchronousJavaScriptandXML(异步JavaScript和XML)。ajax是一种创建交互式网页应用的网页开发技术。其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新的情况下和服务器进行交互。方法描述newXMLHttpRequest()生成一个XMLHttpRequ</div> </li> <li><a href="/article/1892530000586928128.htm" title="JavaScript的内置对象有哪些?" target="_blank">JavaScript的内置对象有哪些?</a> <span class="text-muted">乐多_L</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>一、内置对象1、概念JavaScript中的对象共分为3种:自定义对象、浏览器对象和内置对象。之前我们自己创建的对象都属于自定义对象,而内置对象又称为API,是指JavaScript语言自己封装的一些对象,用来提供一些常用的基本功能,来帮助我们提高开发速度,例如:数学-Math、日期-Date、数组-Array、字符串-String等等。JavaScript的内置对象很多,我们不可能都记住,所以我</div> </li> <li><a href="/article/1892529746508574720.htm" title="基于java新闻管理系统,推荐一款开源cms内容管理系统ruoyi-fast-cms" target="_blank">基于java新闻管理系统,推荐一款开源cms内容管理系统ruoyi-fast-cms</a> <span class="text-muted">xnqys</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/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>一、项目概述1.1项目背景在信息高速流通的当下,新闻媒体行业每天都要处理和传播海量信息。传统的新闻管理模式依赖人工操作,在新闻采集、编辑、发布以及后续管理等环节中,不仅效率低下,而且容易出现人为失误。同时,面对用户日益多样化的信息获取需求,传统方式也难以实现个性化、精准化的内容推送。而Java语言凭借其跨平台性、安全性、稳定性以及丰富的类库和强大的开发框架,成为开发新闻管理系统的理想选择。通过基于</div> </li> <li><a href="/article/1892528737774268416.htm" title="lombok在高版本idea中注解不生效的解决" target="_blank">lombok在高版本idea中注解不生效的解决</a> <span class="text-muted">L_!!!</span> <a class="tag" taget="_blank" href="/search/springboot/1.htm">springboot</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>环境:IntelliJIDEA2024.3.1.1+SpringBoot+Maven问题描述使用@AllArgsConstructor注解一个用户类,然后调用全参构造方法创建对象,出现错误:java:无法将类com.itheima.pojo.User中的构造器User应用到给定类型; 需要:没有参数 找到:  java.lang.Integer,java.lang.String,java.lang</div> </li> <li><a href="/article/1892528359695511552.htm" title="详细介绍:封装简易的 Axios 函数获取省份列表" target="_blank">详细介绍:封装简易的 Axios 函数获取省份列表</a> <span class="text-muted">还是鼠鼠</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>目录关键步骤:完整代码(html):代码解析:程序运行结果:本示例展示了如何通过封装一个简易的myAxios函数来模拟axios的功能,使用原生的XMLHttpRequest(XHR)对象来发起HTTP请求。我们将实现一个简单的功能,通过该封装函数从服务器获取省份列表数据,并在网页上显示这些省份。关键步骤:封装myAxios函数:myAxios函数接收一个配置对象(如请求的URL和方法),并返回一</div> </li> <li><a href="/article/1892526340897304576.htm" title="《JavaScript高级程序设计》——第四章:变量、作用域与内存管理" target="_blank">《JavaScript高级程序设计》——第四章:变量、作用域与内存管理</a> <span class="text-muted">dorabighead</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>《JavaScript高级程序设计》——第四章:变量、作用域与内存管理大家好!我是小哆啦,欢迎回到《JavaScript高级程序设计》的读书笔记大本营!在这章中,我们要聊的是两个让人头疼又迷人的话题——变量、作用域与内存管理。有些人一提到这些,就会感到一阵头晕目眩,恍若置身一场JavaScript版的迷宫大冒险!但今天,小哆啦会带你们轻松过关,深入了解这些概念,并且保持足够的幽默感,让你既能笑着学</div> </li> <li><a href="/article/1892524071963389952.htm" title="Java——列表(List)" target="_blank">Java——列表(List)</a> <span class="text-muted">不会Hello World的小苗</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>概述在Java中,列表(List)是一种有序的集合,它允许元素重复,并且每个元素都有一个对应的索引值。Java提供了List接口及其实现类,用于表示和操作列表数据。常用的实现类包括ArrayList、LinkedList和Vector。1、List接口概述List是Java集合框架中的一种接口,继承自Collection接口。它定义了许多常见的操作,如:添加元素:add(Ee)、add(intin</div> </li> <li><a href="/article/1892523567237623808.htm" title="Java 中的包(Package)与导入(Import)详解" target="_blank">Java 中的包(Package)与导入(Import)详解</a> <span class="text-muted">小刘|</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>目录一、引言二、包的概念(一)包的定义与作用(二)JDK中主要的包三、导入的概念(一)导入的目的与用法(二)特殊情况的导入四、补充知识点(一)静态导入(二)包的访问权限(三)包的命名规范五、总结一、引言在Java编程中,包(Package)和导入(Import)是非常重要的概念。它们帮助我们更好地组织代码、管理项目结构、解决命名冲突以及控制访问权限。本文将详细介绍Java中的包和导入的相关知识,通</div> </li> <li><a href="/article/1892512472749895680.htm" title="基于JavaSpringboot+Vue实现前后端分离房屋租赁系统" target="_blank">基于JavaSpringboot+Vue实现前后端分离房屋租赁系统</a> <span class="text-muted">网顺技术团队</span> <a class="tag" taget="_blank" href="/search/%E6%88%90%E5%93%81%E7%A8%8B%E5%BA%8F%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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>基于JavaSpringboot+Vue实现前后端分离房屋租赁系统作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助更多的人文章目录基于JavaSpringboot+</div> </li> <li><a href="/article/1892510471286747136.htm" title="【OpenTiny调研征集】共创技术未来,分享您的声音!" target="_blank">【OpenTiny调研征集】共创技术未来,分享您的声音!</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFvue.js%E5%BC%80%E6%BA%90/1.htm">前端vue.js开源</a> <div>欢迎参与2025年OpenTiny开源社区用户调研征集调研背景随着OpenTiny开源项目的不断发展,我们一直致力于为开发者提供高质量的Web前端开发解决方案。为了更好地满足用户需求,提升项目的实用性和易用性,我们决定发起一项用户调研活动,诚挚邀请您参与。调研目的了解用户需求:收集您在使用OpenTiny开源项目过程中的需求、问题和建议,以便我们更好地改进和优化。提升用户体验:通过您的反馈,我们将</div> </li> <li><a href="/article/38.htm" title="ASM系列六 利用TreeApi 添加和移除类成员" target="_blank">ASM系列六 利用TreeApi 添加和移除类成员</a> <span class="text-muted">lijingyao8206</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E4%BB%A3%E7%90%86/1.htm">动态代理</a><a class="tag" taget="_blank" href="/search/ASM/1.htm">ASM</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81%E6%8A%80%E6%9C%AF/1.htm">字节码技术</a><a class="tag" taget="_blank" href="/search/TreeAPI/1.htm">TreeAPI</a> <div>    同生成的做法一样,添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子,下面这个Task类,我们来移除isNeedRemove方法,并且添加一个int 类型的addedField属性。   package asm.core; /** * Created by yunshen.ljy on 2015/6/</div> </li> <li><a href="/article/165.htm" title="Springmvc-权限设计" target="_blank">Springmvc-权限设计</a> <span class="text-muted">bee1314</span> <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/jsp/1.htm">jsp</a> <div> 万丈高楼平地起。 权限管理对于管理系统而言已经是标配中的标配了吧,对于我等俗人更是不能免俗。同时就目前的项目状况而言,我们还不需要那么高大上的开源的解决方案,如Spring Security,Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 目标: 1.实现权限的管理(CRUD) 2.实现部门管理 (CRUD) 3.实现人员的管理 (CRUD) 4.实现部门和权限</div> </li> <li><a href="/article/292.htm" title="算法竞赛入门经典(第二版)第2章习题" target="_blank">算法竞赛入门经典(第二版)第2章习题</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>2.4.1 输出技巧 #include <stdio.h> int main() { int i, n; scanf("%d", &n); for (i = 1; i <= n; i++) printf("%d\n", i); return 0; } 习题2-2 水仙花数(daffodil</div> </li> <li><a href="/article/419.htm" title="struts2中jsp自动跳转到Action" target="_blank">struts2中jsp自动跳转到Action</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/webxml/1.htm">webxml</a><a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E8%B7%B3%E8%BD%AC/1.htm">自动跳转</a> <div>1、在struts2的开发中,经常需要用户点击网页后就直接跳转到一个Action,执行Action里面的方法,利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action(不是专业人士)   2、<jsp:forward page="xxx.action" /> ,这个标签可以实现跳转,page的路径是相对地址,不同与jsp和j</div> </li> <li><a href="/article/546.htm" title="php 操作webservice实例" target="_blank">php 操作webservice实例</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div>首先大家要简单了解了何谓webservice,接下来就做两个非常简单的例子,webservice还是逃不开server端与client端。我测试的环境为:apache2.2.11 php5.2.10做这个测试之前,要确认你的php配置文件中已经将soap扩展打开,即extension=php_soap.dll; OK 现在我们来体验webservice //server端 serve</div> </li> <li><a href="/article/673.htm" title="Windows下使用Vagrant安装linux系统" target="_blank">Windows下使用Vagrant安装linux系统</a> <span class="text-muted">_wy_</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/vagrant/1.htm">vagrant</a> <div>准备工作: 下载安装 VirtualBox :https://www.virtualbox.org/ 下载安装 Vagrant :http://www.vagrantup.com/ 下载需要使用的 box : 官方提供的范例:http://files.vagrantup.com/precise32.box 还可以在 http://www.vagrantbox.es/ </div> </li> <li><a href="/article/800.htm" title="更改linux的文件拥有者及用户组(chown和chgrp)" target="_blank">更改linux的文件拥有者及用户组(chown和chgrp)</a> <span class="text-muted">无量</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/chgrp/1.htm">chgrp</a><a class="tag" taget="_blank" href="/search/chown/1.htm">chown</a> <div>本文(转) http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/ http://ydlmlh.iteye.com/blog/1435157 一、基本使用: 使用chown命令可以修改文件或目录所属的用户:        命令</div> </li> <li><a href="/article/927.htm" title="linux下抓包工具" target="_blank">linux下抓包工具</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>原文地址: http://blog.chinaunix.net/uid-23670869-id-2610683.html tcpdump -nn -vv -X udp port 8888 上面命令是抓取udp包、端口为8888 netstat -tln 命令是用来查看linux的端口使用情况 13 . 列出所有的网络连接 lsof -i 14. 列出所有tcp 网络连接信息 l</div> </li> <li><a href="/article/1054.htm" title="我觉得mybatis是垃圾!:“每一个用mybatis的男纸,你伤不起”" target="_blank">我觉得mybatis是垃圾!:“每一个用mybatis的男纸,你伤不起”</a> <span class="text-muted">alafqq</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>最近看了  每一个用mybatis的男纸,你伤不起 原文地址 :http://www.iteye.com/topic/1073938 发表一下个人看法。欢迎大神拍砖; 个人一直使用的是Ibatis框架,公司对其进行过小小的改良; 最近换了公司,要使用新的框架。听说mybatis不错;就对其进行了部分的研究; 发现多了一个mapper层;个人感觉就是个dao; </div> </li> <li><a href="/article/1181.htm" title="解决java数据交换之谜" target="_blank">解决java数据交换之谜</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BA%A4%E6%8D%A2/1.htm">数据交换</a> <div>交换两个数字的方法有以下三种 ,其中第一种最常用   /* 输出最小的一个数 */ public class jiaohuan1 { public static void main(String[] args) { int a =4; int b = 3; if(a<b){ // 第一种交换方式 int tmep =</div> </li> <li><a href="/article/1308.htm" title="渐变显示" target="_blank">渐变显示</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div><style type="text/css"> #wxf { FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98); height: 25px; } </style></div> </li> <li><a href="/article/1435.htm" title="探索JUnit4扩展:断言语法assertThat" target="_blank">探索JUnit4扩展:断言语法assertThat</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/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/assertThat/1.htm">assertThat</a> <div>一.概述         JUnit 设计的目的就是有效地抓住编程人员写代码的意图,然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今,版本不停的翻新,但是所有版本都一致致力于解决一个问题,那就是如何发现编程人员的代码意图,并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够</div> </li> <li><a href="/article/1562.htm" title="【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}}" target="_blank">【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}}</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a> <div>  如何把如下简单的JSON字符串反序列化为Java的POJO对象? {"data":{"IM":["MSN","QQ","Gtalk"]}}   下面的POJO类Model无法完成正确的解析:   import com.google.gson.Gson;</div> </li> <li><a href="/article/1689.htm" title="【Kafka九】Kafka High Level API vs. Low Level API" target="_blank">【Kafka九】Kafka High Level API vs. Low Level API</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>1. Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API,实际上非常复杂) 在选用哪种Consumer API时,首先要弄清楚这两种API的工作原理,能做什么不能做什么,能做的话怎么做的以及用的时候,有哪些可能的问题  </div> </li> <li><a href="/article/1816.htm" title="在nginx中集成lua脚本:添加自定义Http头,封IP等" target="_blank">在nginx中集成lua脚本:添加自定义Http头,封IP等</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx+lua/1.htm">nginx lua</a> <div>Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言,从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器,但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站,我们不希望爬虫抓取子域名的页面,降低我们的Page rank。 location /{</div> </li> <li><a href="/article/1943.htm" title="java-归并排序" target="_blank">java-归并排序</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Arrays; public class MergeSort { public static void main(String[] args) { int[] a={20,1,3,8,5,9,4,25}; mergeSort(a,0,a.length-1); System.out.println(Arrays.to</div> </li> <li><a href="/article/2070.htm" title="Netty源码学习-CompositeChannelBuffer" target="_blank">Netty源码学习-CompositeChannelBuffer</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/netty/1.htm">netty</a> <div>CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 查看API( http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description) 可以看到,所谓“Transparent Zero Copy”是通</div> </li> <li><a href="/article/2197.htm" title="Android中给Activity添加返回键" target="_blank">Android中给Activity添加返回键</a> <span class="text-muted">hotsunshine</span> <a class="tag" taget="_blank" href="/search/Activity/1.htm">Activity</a> <div> // this need android:minSdkVersion="11" getActionBar().setDisplayHomeAsUpEnabled(true); @Override public boolean onOptionsItemSelected(MenuItem item) { </div> </li> <li><a href="/article/2324.htm" title="静态页面传参" target="_blank">静态页面传参</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/%E9%9D%99%E6%80%81/1.htm">静态</a> <div> $(document).ready(function () { var request = { QueryString : function (val) { var uri = window.location.search; var re = new RegExp("" + val + "=([^&?]*)", &</div> </li> <li><a href="/article/2451.htm" title="Windows中查找某个目录下的所有文件中包含某个字符串的命令" target="_blank">Windows中查找某个目录下的所有文件中包含某个字符串的命令</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E6%89%BE%E6%9F%90%E4%B8%AA%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%89%80%E6%9C%89%E6%96%87%E4%BB%B6/1.htm">查找某个目录下的所有文件</a><a class="tag" taget="_blank" href="/search/%E5%8C%85%E5%90%AB%E6%9F%90%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">包含某个字符串</a> <div>findstr可以完成这个工作。   [html]  view plain copy   >findstr /s /i "string" *.*   上面的命令表示,当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu</div> </li> <li><a href="/article/2578.htm" title="改善程序代码质量的一些技巧" target="_blank">改善程序代码质量的一些技巧</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a> <div>有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点,程序你只写一次,但以后会无数次的阅读。当你第二天回头来看你的代码 时,你就要开始阅读它了。当你把代码拿给其他人看时,他必须阅读你的代码。因此,在编写时多花一点时间,你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧:    尽量保持方法简短    尽管很多人都遵</div> </li> <li><a href="/article/2705.htm" title="SharedPreferences对数据的存储" target="_blank">SharedPreferences对数据的存储</a> <span class="text-muted">dcj3sjt126com</span> <div>SharedPreferences简介:                                                   &nbs</div> </li> <li><a href="/article/2832.htm" title="linux复习笔记之bash shell (2) bash基础" target="_blank">linux复习笔记之bash shell (2) bash基础</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/bash+shell/1.htm">bash shell</a> <div>转载请出自出处: http://eksliang.iteye.com/blog/2104329 1.影响显示结果的语系变量(locale)  1.1locale这个命令就是查看当前系统支持多少种语系,命令使用如下: [root@localhost shell]# locale LANG=en_US.UTF-8 LC_CTYPE="en_US.UTF-8" </div> </li> <li><a href="/article/2959.htm" title="Android零碎知识总结" target="_blank">Android零碎知识总结</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 所以最后得出结论:CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里,比如缓存。发生修改时候做copy,新老版本分离,保证读的高</div> </li> <li><a href="/article/3086.htm" title="HoverTree.Model.ArticleSelect类的作用" target="_blank">HoverTree.Model.ArticleSelect类的作用</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a> <div>ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类,用于存放查询文章时的条件,例如HvtId就是文章的id。HvtIsShow就是文章的显示属性,当为-1是,该条件不产生作用,当为0时,查询不公开显示的文章,当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放,开发环境为Visual Studio 2013</div> </li> <li><a href="/article/3213.htm" title="PHP 判断是否使用代理 PHP Proxy Detector" target="_blank">PHP 判断是否使用代理 PHP Proxy Detector</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/proxy/1.htm">proxy</a> <div>1. php 类 I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to </div> </li> <li><a href="/article/3340.htm" title="apache的math库中的回归——regression(翻译)" target="_blank">apache的math库中的回归——regression(翻译)</a> <span class="text-muted">lvdccyb</span> <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>这个Math库,虽然不向weka那样专业的ML库,但是用户友好,易用。 多元线性回归,协方差和相关性(皮尔逊和斯皮尔曼),分布测试(假设检验,t,卡方,G),统计。   数学库中还包含,Cholesky,LU,SVD,QR,特征根分解,真不错。   基本覆盖了:线代,统计,矩阵, 最优化理论 曲线拟合 常微分方程 遗传算法(GA), 还有3维的运算。。。 </div> </li> <li><a href="/article/3467.htm" title="基础数据结构和算法十三:Undirected Graphs (2)" target="_blank">基础数据结构和算法十三:Undirected Graphs (2)</a> <span class="text-muted">sunwinner</span> <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>  Design pattern for graph processing. Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation</div> </li> <li><a href="/article/3594.htm" title="云计算平台最重要的五项技术" target="_blank">云计算平台最重要的五项技术</a> <span class="text-muted">sumapp</span> <a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%B9%B3%E5%8F%B0/1.htm">云平台</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E5%9F%8E%E4%BA%91/1.htm">智城云</a> <div>云计算平台最重要的五项技术 1、云服务器 云服务器提供简单高效,处理能力可弹性伸缩的计算服务,支持国内领先的云计算技术和大规模分布存储技术,使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 特性 机型丰富 通过高性能服务器虚拟化为云服务器,提供丰富配置类型虚拟机,极大简化数据存储、数据库搭建、web服务器搭建等工作; 仅需要几分钟,根据CP</div> </li> <li><a href="/article/3721.htm" title="《京东技术解密》有奖试读获奖名单公布" target="_blank">《京东技术解密》有奖试读获奖名单公布</a> <span class="text-muted">ITeye管理员</span> <a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a> <div>ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束,非常感谢广大用户对本次活动的关注与参与。  12月试读活动回顾: http://webmaster.iteye.com/blog/2164754 本次技术图书试读活动获奖名单及相应作品如下: 一等奖(两名) Microhardest:http://microhardest.ite</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>