【JavaWeb学习-第一章】HTML & CSS

文章目录

  • 前言
  • 1. HTML快速入门
    • 1.1. 操作
  • 2. 基础标签 & 样式
    • 2.1. 标题实现
      • 2.1.1. 标题排版
        • 2.1.1.1. 标签
        • 2.1.1.2. 实现
      • 2.1.2. 标题样式
        • 2.1.2.1. CSS引入方式
        • 2.1.2.2. 颜色表示
        • 2.1.2.3. 实现1
        • 2.1.2.4. CSS选择器
        • 2.1.2.5. 实现2
      • 2.1.3. 超链接
        • 2.1.3.1. 标签介绍
        • 2.1.3.2 实现
    • 2.2. 新浪新闻-正文实现
      • 2.2.1. 正文排版
      • 2.2.2. 相关标签
      • 2.2.3. 实现1
      • 2.2.4. 页面布局
        • 2.2.4.1. 盒子模型
          • 2.2.4.1.1. 布局标签
          • 2.2.4.1.2. 盒子模型代码
        • 2.2.4.2. 布局实现
  • 3. 表格标签
  • 4. 表单标签
    • 4.1. 表单
      • 4.1.1. 介绍
      • 4.1.2. 实现
    • 4.2. 表单项
      • 4.2.1. 介绍
      • 4.2.2. 实现
  • 附录. 文档查阅


前言

  1. 什么是HTML ?

    HTML:HyperText Markup Language,超文本标记语言。
    超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
    标记语言:由标签构成的语言
    HTML标签都是预定义好的。下面展示的是一段html代码经过浏览器解析,呈现的效果如右图所示:

【JavaWeb学习-第一章】HTML & CSS_第1张图片

  1. 什么是CSS ?

CSS: Cascading Style Sheet,层叠样式表,用于控制页面的样式(表现)。

下面展示的是一段 html代码 及 CSS样式 经过浏览器解析,呈现的效果如右图所示:
【JavaWeb学习-第一章】HTML & CSS_第2张图片

1. HTML快速入门

创建一个简单的HTML项目,需要准备一张图片。

1.1. 操作

第一步:创建一个名为HTML的文件夹作为你的工程文件夹,然后将一张图片文件放到该目录下。

第二步:创建一个文本文件,然后修改文件名为hello.html,注意文件的后缀是.html。如下图所示

【JavaWeb学习-第一章】HTML & CSS_第3张图片
第三步:选中文件,鼠标右击,选择使用记事本打开文件,并且编写前端代码


<html>

<head>
	<title>HTML 快速入门title>
head>

<body>
	<h1>Hello HTMLh1>
	<img src="1.jpg" />
body>

html>

    其中,是根标签,是子标签,中的字标签</code>是用来定义网页的标题的,里面定义的内容会显示在浏览器网页的标题位置。而 <code><body></code> 中编写的内容,就网页中显示的核心内容。</p> </blockquote> <p>第四步:然后选中文件,鼠标右击,选择使用浏览器打开文件,浏览器呈现效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/16a6edec49084807aa0a107771ac76b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/16a6edec49084807aa0a107771ac76b7.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第4张图片" width="650" height="442" style="border:1px solid black;"></a></p> <blockquote> <p><strong>小结:</strong><br> 1.HTML页面的基础结构标签</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <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>html</span><span class="token punctuation">></span></span> </code></pre> <p>其中:<code><title></code>中定义标题:显示在浏览器的标题位置,<br>       <code><body></code>中定义内容:会呈现在浏览器的内容区域</p> <p>2.HTML中的标签特点:<br>     HTML标签<strong>不区分大小写</strong><br>     HTML标签的<strong>属性值</strong>,采用<strong>单引号、双引号都可以</strong><br>     HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)</p> </blockquote> <blockquote> <p>    通过上面案例,发现由记事本文件开发html是非常不方便的,所以接下来需要学习一款前端专业的开发工具VSCode。<br>     Visual Studio Code(简称 VS Code )是Microsoft 于2015年4月发布的一款代码编辑器。VS Code对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、Java、Python、PHP、Go等)。VS Code提供了非常强大的插件库,大大提高了开发效率。<br> 官网: https://code.visualstudio.com</p> </blockquote> <h2>2. 基础标签 & 样式</h2> <p>    下面讲解HTML的常见<strong>基础标签</strong> 及 <strong>CSS的基本样式</strong>,以 <strong>新浪新闻页面</strong> 为例,来进行讲解,这样大家不仅能够知道 常见标签及样式的作用,还能够知道具体的应用场景。</p> <p>新浪新闻的具体页面效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/466f1a469abf4b00b1d5be7d6f8fcd11.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/466f1a469abf4b00b1d5be7d6f8fcd11.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第5张图片" width="650" height="350" style="border:1px solid black;"></a></p> <p>而对于这个新浪新闻的页面来说,核心内容分为两个部分,如下:</p> <ul> <li>新浪新闻-<strong>标题部分</strong>(图中绿色部分)</li> <li>新浪新闻-<strong>正文部分</strong>(图中黄色部分)<a href="http://img.e-com-net.com/image/info8/afb73a82338441bca51de05b997f1cb9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/afb73a82338441bca51de05b997f1cb9.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第6张图片" width="650" height="641" style="border:1px solid black;"></a></li> </ul> <h3>2.1. 标题实现</h3> <h4>2.1.1. 标题排版</h4> <p><strong>分析:</strong><br> <a href="http://img.e-com-net.com/image/info8/56a5fccb6f234475a6ed8e72909f07ce.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/56a5fccb6f234475a6ed8e72909f07ce.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第7张图片" width="650" height="184" style="border:1px solid black;"></a></p> <ol> <li>第一部分,是一张图片,需要用到HTML中的<strong>图片标签</strong> 来实现。</li> <li>第二部分,是一个标题,需要用到HTML中的<strong>标题标签</strong>来实现。</li> <li>第三部分,有两条水平分割线,需要用到HTML中的<strong>标签来定义水平分割线</strong>。</li> </ol> <h5>2.1.1.1. 标签</h5> <p><strong>1.图片标签</strong></p> <p>    A. 标签: <code><img></code></p> <p>    B. 常见属性:<br>         <code>src</code>: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)<br>         <code>width</code>: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)<br>         <code>height</code>: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)</p> <blockquote> <p>备注: 一般<code>width</code> 和 <code>height</code> 只会指定一个,另外一个会自动的等比例缩放。</p> </blockquote> <p>    C. 路径书写方式:<br>          (1)绝对路径:<br>                   ①<code>绝对磁盘路径</code>:<br>                         C:\Users\Administrator\Desktop\HTML\img\news_logo.png<br>                         <strong><img</strong> src=“C:\Users\Administrator\Desktop\HTML\img\news_logo.png”<strong>></strong></p> <p>                   ②<code>绝对网络路径</code>:<br>                         https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png<br>                         <strong><img</strong> src=“https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png”<strong>></strong></p> <p>        (2)相对路径:<br>                           <code>./</code> :当前目录 , <code>./</code> 可以省略的<br>                           <code>../</code>:上一级目录</p> <p><strong>2.标题标签</strong></p> <p>    A. 标签: <h1> - <h6></p> <h2>一级标题</h2> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>一级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> </code></pre> <h3>二级标题</h3> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>二级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> </code></pre> <h4>三级标题</h4> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>三级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> </code></pre> <h5>四级标题</h5> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>四级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> </code></pre> <h6>五级标题</h6> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>五级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> </code></pre> <h6>六级标题</h6> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>六级标题<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span> </code></pre> <p>    B. 效果:h1为一级标题,字体也是最大的 ; h6为六级标题,字体是最小的。</p> <p><strong>3.水平分页线标签</strong></p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> 2023年03月02日 21:50 央视网 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> </code></pre> <h5>2.1.1.2. 实现</h5> <ol> <li>打开VsCode,选择左侧最底部的 “资源管理器”,然后选择打开的<strong>项目文件夹</strong>,项目文件夹的目录结构如下:</li> </ol> <p><a href="http://img.e-com-net.com/image/info8/cc6fbedcf7ee41a3a1b47679ff6e32cf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc6fbedcf7ee41a3a1b47679ff6e32cf.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第8张图片" width="496" height="127" style="border:1px solid black;"></a></p> <ol start="2"> <li>在VsCode中创建一个新的 html 文件,文件的后缀名设置为 .html</li> </ol> <p><a href="http://img.e-com-net.com/image/info8/92781af2e57847ada979214e45d450f9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/92781af2e57847ada979214e45d450f9.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第9张图片" width="650" height="136" style="border:1px solid black;"></a></p> <ol start="3"> <li>html 文件创建好之后,在其中输入 <code>!</code>,然后直接<code>回车</code>,就可以生成 HTML 的<strong>基础结构标签</strong></li> </ol> <p><a href="http://img.e-com-net.com/image/info8/112341c7c71b4fc7a20183f3f11a3006.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/112341c7c71b4fc7a20183f3f11a3006.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第10张图片" width="650" height="225" style="border:1px solid black;"></a></p> <ol start="4"> <li>编写标题排版的核心代码</li> </ol> <pre><code class="prism language-html"><span class="token comment"><!-- 文档类型为HTML --></span> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 字符集为UTF-8 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>焦点访谈:China底气 new思想夯实大country粮仓<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <span class="token comment"><!-- img标签: src: 图片资源路径 width: 宽度(px, 像素 ; % , 相对于父元素的百分比) height: 高度(px, 像素 ; % , 相对于父元素的百分比) <img src="img/news_logo.png" width="80%" > 路径书写方式: 绝对路径: 1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png <img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png"> 2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 相对路径: ./ : 当前目录 , ./ 可以省略的 ../: 上一级目录 --></span> <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 attr-equals">=</span><span class="token punctuation">"</span>img/news_logo.png<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>h1</span><span class="token punctuation">></span></span>焦点访谈:China底气 新思想夯实大country粮仓<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>hr</span><span class="token punctuation">></span></span> 2023年03月02日 21:50 xx网 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/f8ee98db278f461eb1b0480b59ede434.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f8ee98db278f461eb1b0480b59ede434.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第11张图片" width="650" height="127" style="border:1px solid black;"></a></p> <h4>2.1.2. 标题样式</h4> <p>    新浪新闻的标题部分的基本排版,前面已经完成了,然后大家会看到,我们编写的一级标题,默认字体颜色为纯黑色。 而原始的新浪新闻页面的新闻标题字体,并不是纯黑色,而是灰黑色, 那接下来,我们就要来设置这个字体的颜色。 而要设置这个字体的颜色,我们就需要通过<code>CSS样式</code>来控制 。</p> <p>    那在HTML的文件中,如何来编写CSS样式呢,此时就涉及到CSS的三种引入方式。</p> <h5>2.1.2.1. CSS引入方式</h5> <p>具体有3种引入方式,语法如下表格所示:</p> <table> <thead> <tr> <th>名称</th> <th>语法描述</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td>行内样式</td> <td>在标签内使用style属性,属性值是css属性键值对</td> <td><h1 style=“xxx:xxx;”>中国新闻网</h1></td> </tr> <tr> <td>内嵌样式</td> <td>定义<style>标签,在标签内部定义css样式</td> <td><style> h1 {…} </style></td> </tr> <tr> <td>外联样式</td> <td>定义<link>标签,通过href属性引入外部css文件</td> <td><link rel=“stylesheet” href=“css/news.css”></td> </tr> </tbody> </table> <p>对于上述3种引入方式,企业开发的使用情况如下:<br>     ① <strong>行内样式</strong>:会出现大量的代码冗余,不方便后期的维护,所以不常用。<br>     ② <strong>内嵌样式</strong>:通过定义css选择器,让样式作用于当前页面的指定的标签上。<br>     ③ <strong>外联样式</strong>:html和css实现了完全的分离,企业开发常用方式。</p> <h5>2.1.2.2. 颜色表示</h5> <table> <thead> <tr> <th>表示方式</th> <th>表示含义</th> <th>取值</th> </tr> </thead> <tbody> <tr> <td>关键字</td> <td>预定义的颜色名</td> <td>red、green、blue、…</td> </tr> <tr> <td>rgb表示</td> <td>红绿蓝三原色,每项取值范围:0-255</td> <td>rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)</td> </tr> <tr> <td>十六进制表示法</td> <td>#开头,将数字转换成十六进制表示</td> <td>#000000、#ff0000、#cccccc、… <br> 简写:#000、#f00、#ccc、…</td> </tr> </tbody> </table> <h5>2.1.2.3. 实现1</h5> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>焦点访谈:china底气 新思想夯实大country粮仓<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</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>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token comment">/* color: red; */</span> <span class="token comment">/* color: rgb(0, 0, 255); */</span> <span class="token property">color</span><span class="token punctuation">:</span> #4D4F53<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 方式三: 外联样式 --></span> <span class="token comment"><!-- <link rel="stylesheet" href="css/news.css"> --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <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 attr-equals">=</span><span class="token punctuation">"</span>img/news_logo.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> xxxx > 正文 <span class="token comment"><!-- 方式一: 行内样式 --></span> <span class="token comment"><!-- <h1 style="color: red;">焦点访谈:中国底气 新思想夯实大国粮仓 </h1> --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>焦点访谈:xx底气 新思想夯实大x粮仓<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>hr</span><span class="token punctuation">></span></span> 2023年03月02日 21:50 xx网 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/55d2d89dd9004ee5b1d0b96ab8ba236f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/55d2d89dd9004ee5b1d0b96ab8ba236f.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第12张图片" width="650" height="173" style="border:1px solid black;"></a></p> <blockquote> <p>备注: 要想拾取某一个网页中的颜色,我们可以借助于浏览器的拾色器插件来完成。【拾色器插件的安装,参照黑马程序资料中提供的文档即可】</p> </blockquote> <h5>2.1.2.4. CSS选择器</h5> <p>    顾名思义,<strong>选择器是选取需设置样式的元素(标签)</strong>,但是我们根据业务场景不同,选择的标签的需求也是多种多样的,所以选择器有很多种,因为我们是做后台开发的,所以对于css选择器,我们只学习最基本的3种。</p> <p>选择器通用语法如下:</p> <pre><code class="prism language-html">选择器名 { css样式名:css样式值; css样式名:css样式值; } </code></pre> <p>我们需要学习的3种选择器是<strong>元素选择器</strong>,<strong>class选择器</strong>,<strong>id选择器</strong>,语法以及作用如下:</p> <p><strong>1.元素(标签)选择器</strong><br>     选择器的名字必须是标签的名字<br>     作用:选择器中的样式会作用于所有同名的标签上</p> <pre><code class="prism language-html">元素名称 { css样式名:css样式值; } </code></pre> <p>例子如下:</p> <pre><code class="prism language-html">div{ color: red; } </code></pre> <p>2.类选择器:<br>     选择器的名字前面需要加上 .<br>     作用:选择器中的样式会作用于所有class的属性值和该名字一样的标签上,可以是多个</p> <pre><code class="prism language-html">.class属性值 { css样式名:css样式值; } </code></pre> <p>例子如下:</p> <pre><code class="prism language-html">.cls{ color: green; } </code></pre> <p>3.id选择器</p> <p>    选择器的名字前面需要加上#<br>     作用:选择器中的样式会作用于指定id的标签上,而且有且只有一个标签(由于id是唯一的)</p> <pre><code class="prism language-html">#id属性值 { css样式名:css样式值; } </code></pre> <p>例子如下:</p> <pre><code class="prism language-html">#did { color: blue; } </code></pre> <h5>2.1.2.5. 实现2</h5> <p>修改发布时间字体颜色</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>焦点访谈:xx底气 新思想夯实大x粮仓<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #4D4F53<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* 元素选择器 */</span> <span class="token comment">/* span { color: red; } */</span> <span class="token comment">/* 类选择器 */</span> <span class="token comment">/* .cls { color: green; } */</span> <span class="token comment">/* ID选择器 */</span> <span class="token selector">#time</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #968D92<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token comment">/* 设置字体大小 */</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <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 attr-equals">=</span><span class="token punctuation">"</span>img/news_logo.png<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>h1</span><span class="token punctuation">></span></span>焦点访谈:xx底气 新思想夯实大x粮仓<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>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cls<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2023年03月02日 21:50<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cls<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>xx网<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/0fde895137504b289484bbf8d7b8dac1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0fde895137504b289484bbf8d7b8dac1.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第13张图片" width="650" height="205" style="border:1px solid black;"></a></p> <blockquote> <p>上述我们还使用了一个css的属性 <code>font-size</code> , 用来设置字体的大小。 但是需要注意,在设置字体的大小时,单位<code>px</code>不能省略,否则不生效</p> </blockquote> <h4>2.1.3. 超链接</h4> <p>    在新浪新闻的标题部分,当我们点击顶部的 “新浪xx”,浏览器将自动在当前窗口访问新浪政务首页这个资源(http://gov.sina.com.cn/)<br>     当我们点击新闻发布时间之后的 “yangshi网”,浏览器将会自动打开一个新的标签页,然后在新的标签页中访问yangshi网中的该新闻资源 (https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml)</p> <p>    接下来,就来完善新闻标题部分的这个功能,那此时呢,就需要用到HTML中的<strong>超链接的标签</strong></p> <h5>2.1.3.1. 标签介绍</h5> <p><strong>标签:</strong><br>     <code><a href="..." target="..."></code>央视网</p> <p><strong>属性:</strong><br>     <code>href</code>:指定资源访问的url</p> <p>    <code>target</code>:指定在何处打开资源链接<br>             ① _self:默认值,在当前页面打开<br>             ② _blank:在空白页面打开</p> <h5>2.1.3.2 实现</h5> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>焦点访谈:xx底气 新思想夯实大x粮仓<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #4D4F53<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#time</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #968D92<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token comment">/* 设置字体大小 */</span> <span class="token punctuation">}</span> <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/* 设置文本为一个标准的文本 , 去除掉 超链接 下面默认的下划线 */</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <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 attr-equals">=</span><span class="token punctuation">"</span>img/news_logo.png<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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://gov.sina.com.cn/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_self<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>新浪xx<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>h1</span><span class="token punctuation">></span></span>焦点访谈:xx底气 新思想夯实大x粮仓<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>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2023年03月02日 21:50<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>xx网<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>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h3>2.2. 新浪新闻-正文实现</h3> <h4>2.2.1. 正文排版</h4> <p><strong>分析:</strong></p> <p><a href="http://img.e-com-net.com/image/info8/291cb38969d44b8fb240213d143e5172.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/291cb38969d44b8fb240213d143e5172.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第14张图片" width="644" height="763" style="border:1px solid black;"></a></p> <p>整个正文部分的排版,主要分为这么四个部分:<br>     ① 视频 (当前这种新闻页面,可能也会存在音频)<br>     ② 文字段落<br>     ③ 字体加粗<br>     ④ 图片</p> <h4>2.2.2. 相关标签</h4> <p><strong>1. 视频、音频标签</strong></p> <p>视频标签: <code><video></code><br> 属性:<br>     <code>src</code>: 规定视频的url<br>     <code>controls</code>: 显示播放控件<br>     <code>width</code>: 播放器的宽度<br>     <code>height</code>: 播放器的高度</p> <p>音频标签: <code><audio></code><br> 属性:<br>     <code>src</code>: 规定音频的url<br>     <code>controls</code>: 显示播放控件</p> <p><strong>2. 段落标签</strong></p> <p>①换行标签: <code><br></code><br>     注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过<code><br></code>标签。</p> <p>②段落标签: <code><p></code><br>     如: <p> 这是一个段落 </p></p> <p><strong>3. 文本格式标签</strong></p> <table> <thead> <tr> <th>效果</th> <th>标签</th> <th>标签(强调)</th> </tr> </thead> <tbody> <tr> <td>加粗</td> <td>b</td> <td>strong</td> </tr> <tr> <td>倾斜</td> <td>i</td> <td>em</td> </tr> <tr> <td>下划线</td> <td>u</td> <td>ins</td> </tr> <tr> <td>删除线</td> <td>s</td> <td>del</td> </tr> </tbody> </table> <p>    前面的标签 <code>b</code>、<code>i</code>、<code>u</code>、<code>s</code> 就仅仅是实现加粗、倾斜、下划线、删除线的效果,是没有强调语义的。 而后面的<code>strong</code>、<code>em</code>、<code>ins</code>、<code>del</code>在实现加粗、倾斜、下划线、删除线的效果的同时,还带有<strong>强调语义</strong>(授课老师并没有讲到两者的具体区别)。</p> <h4>2.2.3. 实现1</h4> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>焦点访谈:xx底气 新思想夯实大x粮仓<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #4D4F53<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#time</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #968D92<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token comment">/* 设置字体大小 */</span> <span class="token punctuation">}</span> <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/* 设置文本为一个标准的文本 */</span> <span class="token punctuation">}</span> <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">text-indent</span><span class="token punctuation">:</span> 35px<span class="token punctuation">;</span> <span class="token comment">/* 设置首行缩进 */</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token comment">/* 设置行高 */</span> <span class="token punctuation">}</span> <span class="token selector">#plast</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token comment">/* 对齐方式 */</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <span class="token comment"><!-- 标题 --></span> <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 attr-equals">=</span><span class="token punctuation">"</span>img/news_logo.png<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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://gov.sina.com.cn/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_self<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>新浪xx<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>h1</span><span class="token punctuation">></span></span>焦点访谈:xx底气 新思想夯实大x粮仓<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>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2023年03月02日 21:50<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>xx网<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>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 正文 --></span> <span class="token comment"><!-- 视频 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/1.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>950px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 音频 --></span> <span class="token comment"><!-- <audio src="audio/1.mp3" controls></audio> --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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> (焦点访谈):xxxxx以来,以xxx同志 为xxxxxxxxxx始终把解决xxx问题作为xxxx的头等大事,xxxx一系列x x举措有力有效,xxxx产量站稳1.3万亿斤台阶,实现谷物基本自给、口粮绝对安 全。我们把饭碗牢牢端在自己手中,为保障经济社会发展提供了坚实支撑,为应对各种 风险挑战赢得了主动。连续八年1.3万亿斤,这个沉甸甸的数据是如何取得的呢? <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 人勤春来早,春耕农事忙。立春之后,由南到北,xx春耕春管工作陆续展开,春 天的田野处处生机盎然。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img/1.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 今年,xx启动了新一轮千亿斤粮食产能提升行动,这是一个新的起点。 2015年以来,xx粮食产量连续8年稳定在1.3万亿斤以上,人均粮食占有量始终稳稳 高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿 斤,粮食产量提高了1500亿斤。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img/2.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> xxx现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产 的发展,意味着我们要立足xx,解决14亿多人吃饭的问题。仓廪实,天下安。保障粮 食安全是一个永恒的课题,任何时候都不能放松。在以xxx同志为核心的xxxxxxxxx 下,亿万xx人民辛勤耕耘、不懈奋斗,我们就一定能够牢牢守住粮食安全这 一“xxxx”,把中国人的饭碗牢牢端在自己手中,夯实xxxxx基础。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plast<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 责任编辑:xxx SN242 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/408773582fb0481bbe16d4049cabaa4d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/408773582fb0481bbe16d4049cabaa4d.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第15张图片" width="650" height="303" style="border:1px solid black;"></a></p> <p>在上述的正文排版实现中,还用到了几个CSS属性:<br>     <code>text-indent</code>: 设置段落的首行缩进<br>     <code>line-height</code>: 设置行高<br>     <code>text-align</code>: 设置对齐方式, 可取值为 left / center / right</p> <blockquote> <p>注意事项:<br>     在HTML页面中无论输入了多少个空格, 最多只会显示一个。<br>     可以使用空格占位符( ;)来生成空格,如果需要多个空格,就使用多次占位符。</p> </blockquote> <p>    那在HTML中,除了空格占位符以外,还有一些其他的占位符(了解, 只需要知道空格的占位 符写法即可),如下:</p> <table> <thead> <tr> <th>占位符</th> <th>描述</th> <th>显示结果</th> </tr> </thead> <tbody> <tr> <td> </td> <td>空格</td> <td> </td> </tr> <tr> <td><</td> <td>小于号</td> <td><</td> </tr> <tr> <td>></td> <td>大于号</td> <td>></td> </tr> <tr> <td>&</td> <td>和号</td> <td>&</td> </tr> <tr> <td>"</td> <td>引号</td> <td>"</td> </tr> <tr> <td>'</td> <td>撇号</td> <td>'</td> </tr> </tbody> </table> <h4>2.2.4. 页面布局</h4> <p>    目前,新闻页面的基本排版,我们都已经完成了,但是,大家会看到,无论是标题部分,还是正文部分,都是铺满了整个浏览器。 而我们再来看看新浪新闻的原始页面,我们会看到新闻网页内容都是居中展示的,左边、右边都是一定的边距的。</p> <p><a href="http://img.e-com-net.com/image/info8/8bd09ef27e544ab3a1111d69045cb7b9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8bd09ef27e544ab3a1111d69045cb7b9.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第16张图片" width="650" height="533" style="border:1px solid black;"></a></p> <p>    那接下来呢,我们就需要按照这个效果,来完成页面布局。 而要想完成这样一个页面布局,我们就需要介绍一下CSS中的盒子模型 。</p> <h5>2.2.4.1. 盒子模型</h5> <p>    <strong>盒子</strong>:页面中所有的元素(标签),都可以看做是一个 盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局。<br>     盒子模型组成:<strong>内容区域</strong>(content)、<strong>内边距区域</strong>(padding)、<strong>边框区域</strong>(border)、<strong>外边距区域</strong>(margin)</p> <p><a href="http://img.e-com-net.com/image/info8/cc92d6bc61c4495cbd1f123edad22822.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc92d6bc61c4495cbd1f123edad22822.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第17张图片" width="632" height="390" style="border:1px solid black;"></a></p> <p>CSS盒子模型,其实和日常生活中的包装盒是非常类似的,就比如:</p> <p><a href="http://img.e-com-net.com/image/info8/76a66323aef94e7f9b07f8fe6cab78d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/76a66323aef94e7f9b07f8fe6cab78d6.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第18张图片" width="650" height="406" style="border:1px solid black;"></a></p> <p>盒子的大小,其实就包括三个部分: border、padding、content,而margin外边距是不包括在盒子之内的。</p> <h6>2.2.4.1.1. 布局标签</h6> <p>布局标签:实际开发网页中,会大量频繁的使用 <code>div</code> 和 <code>span</code> 这两个<strong>没有语义</strong>的布局标签。</p> <p><code>div</code>标签:<br>     一行只显示一个(独占一行)<br>     宽度默认是父元素的宽度,高度默认由内容撑开<br>     可以设置宽高(width、height)<br> <code>span</code>标签:<br>     一行可以显示多个<br>     宽度和高度默认由内容撑开<br>     不可以设置宽高(width、height)</p> <h6>2.2.4.1.2. 盒子模型代码</h6> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>盒子模型<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">div</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token comment">/* 宽度 */</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token comment">/* 高度 */</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token comment">/* 指定width height为盒子的高宽 */</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aquamarine<span class="token punctuation">;</span> <span class="token comment">/* 背景色 */</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px 20px 20px 20px<span class="token punctuation">;</span> <span class="token comment">/* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/</span> <span class="token property">border</span><span class="token punctuation">:</span> 10px solid red<span class="token punctuation">;</span> <span class="token comment">/* 边框, 宽度 线条类型 颜色 */</span> <span class="token property">margin</span><span class="token punctuation">:</span> 30px 30px 30px 30px <span class="token punctuation">;</span> <span class="token comment">/* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>    代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子各个组成部分(内容、内边距、边框、外边距):</p> <p><a href="http://img.e-com-net.com/image/info8/0fae5dc2ee6741d6afe43a9ae0501af9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0fae5dc2ee6741d6afe43a9ae0501af9.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第19张图片" width="650" height="294" style="border:1px solid black;"></a></p> <p>也可以,通过浏览器的开发者工具,清晰的看到这个盒子,以及每一个部分的大小:</p> <p><a href="http://img.e-com-net.com/image/info8/6f5c4ee6d96f4cbeb4d28ce98272d5ba.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6f5c4ee6d96f4cbeb4d28ce98272d5ba.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第20张图片" width="650" height="244" style="border:1px solid black;"></a></p> <h5>2.2.4.2. 布局实现</h5> <p>在实现新闻页面的布局时,我们需要做两部操作:<br>     第一步:需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来,方便通过css设置内容占用的宽度,比如:65%。<br>     第二步:通过css为该div设置外边距,左右的外边距分别为:17.5%,上下外边距靠边展示即可,为:0%。</p> <p>具体的代码实现如下:</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>焦点访谈:中国底气 新思想夯实大国粮仓<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #4D4F53<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#time</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #968D92<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token comment">/* 设置字体大小 */</span> <span class="token punctuation">}</span> <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/* 设置文本为一个标准的文本 */</span> <span class="token punctuation">}</span> <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">text-indent</span><span class="token punctuation">:</span> 35px<span class="token punctuation">;</span> <span class="token comment">/* 设置首行缩进 */</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token comment">/* 设置行高 */</span> <span class="token punctuation">}</span> <span class="token selector">#plast</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token comment">/* 对齐方式 */</span> <span class="token punctuation">}</span> <span class="token selector">#center</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 65%<span class="token punctuation">;</span> <span class="token comment">/* margin: 0% 17.5% 0% 17.5% ; */</span> <span class="token comment">/* 外边距, 上 右 下 左 */</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img/news_logo.png<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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://gov.sina.com.cn/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_self<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>新浪xx<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>h1</span><span class="token punctuation">></span></span>焦点访谈:xx底气 新思想夯实大x粮仓<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>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2023年03月02日 21:50<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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 attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>xx网<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>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 正文 --></span> <span class="token comment"><!-- 视频 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/1.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>950px<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 音频 --></span> <span class="token comment"><!-- <audio src="audio/1.mp3" controls></audio> --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>xx网消息<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> (xx访谈):xxxxx以来,以xxx同志 为xxxxxxxxxx始终把解决xxx问题作为xxxx的头等大事,xxxx一系列x x举措有力有效,xxxx产量站稳1.3万亿斤台阶,实现谷物基本自给、口粮绝对安 全。我们把饭碗牢牢端在自己手中,为保障经济社会发展提供了坚实支撑,为应对各种 风险挑战赢得了主动。连续八年1.3万亿斤,这个沉甸甸的数据是如何取得的呢? <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 人勤春来早,春耕农事忙。立春之后,由南到北,xx春耕春管工作陆续展 开,春天的田野处处生机盎然。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img/1.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 今年,xx启动了新一轮千亿斤粮食产能提升行动,这是一个新的起点。 2015年以来,xx粮食产量连续8年稳定在1.3万亿斤以上,人均粮食占有量始终稳稳 高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿 斤,粮食产量提高了1500亿斤。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img/2.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> xxx现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产 的发展,意味着我们要立足xx,解决14亿多人吃饭的问题。仓廪实,天下安。保障粮 食安全是一个永恒的课题,任何时候都不能放松。在以xxx同志为核心的xxxxxxxxx 下,亿万xx人民辛勤耕耘、不懈奋斗,我们就一定能够牢牢守住粮食安全这 一“xxxx”,把中国人的饭碗牢牢端在自己手中,夯实xxxxx基础。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plast<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 责任编辑:xxx SN242 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>浏览器打开此页面,最终效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/3ed80664f5b84601a6ab97a86c255be8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3ed80664f5b84601a6ab97a86c255be8.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第21张图片" width="650" height="348" style="border:1px solid black;"></a></p> <h2>3. 表格标签</h2> <p>    场景:在网页中<strong>以表格(行、列)形式整齐展示数据</strong>,我们在一些管理类的系统中,会看到数据通常都是以表格的形式呈现出来的,比如:班级表、学生表、课程表、成绩表等等。</p> <p><a href="http://img.e-com-net.com/image/info8/7d4f58aacd194d86b0ddc8140ad1e0ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7d4f58aacd194d86b0ddc8140ad1e0ed.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第22张图片" width="650" height="281" style="border:1px solid black;"></a></p> <p><strong>标签:</strong><br> <code><table></code> :用于定义整个表格, 可以包裹多个 <code><tr></code>, 常用属性如下:<br>         <code>border</code>:规定表格边框的宽度<br>         <code>width</code>:规定表格的宽度<br>         <code>cellspacing</code>: 规定单元之间的空间</p> <p><code><tr></code> : 表格的行,可以包裹多个 <code><td></code></p> <p><code><td></code> : 表格单元格(普通),可以包裹内容 , 如果是表头单元格,可以替换为 <code><th></code></p> <p>演示:<br> 代码如下:</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>HTML-表格<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">td</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* 单元格内容居中展示 */</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <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 attr-equals">=</span><span class="token punctuation">"</span>1px<span class="token punctuation">"</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>600px<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>品牌Logo<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>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>1<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img/huawei.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100px<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>2<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>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img/alibaba.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100px<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>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> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>打开浏览器,效果如下图所示:</p> <p><a href="http://img.e-com-net.com/image/info8/66d818bea7fa4dc18cb4c36d10bef544.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/66d818bea7fa4dc18cb4c36d10bef544.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第23张图片" width="650" height="305" style="border:1px solid black;"></a></p> <p>    整合表格使用 <code>table标签</code>包裹 , 其中的每一行数据都是一个 <code>tr</code> , 每一行中的每一个单元格都是一个 <code>td</code> , 而如果是表头单元格, 可以使用 <code>th</code> (具有加粗居中展示的效果)。</p> <h2>4. 表单标签</h2> <h3>4.1. 表单</h3> <h4>4.1.1. 介绍</h4> <p>    <strong>表单</strong>在我们日常的上网的过程中,基本上每天都会遇到。比如,我们经常在访问网站时,出现的登录页面、注册页面、个人信息提交页面,其实都是一个一个的表单 。 当我们在这些表单中录入数据之后,一点击 “提交”,就会将表单中我们填写的数据采集到,并提交, 那其实这个数据呢,一般会提交到服务端,最终保存在数据库中 。</p> <p><a href="http://img.e-com-net.com/image/info8/4801c1d6bd354814b1bdd99388c6b045.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4801c1d6bd354814b1bdd99388c6b045.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第24张图片" width="441" height="332" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/3eee996f89dd47b8889ddb9c99158a3f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3eee996f89dd47b8889ddb9c99158a3f.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第25张图片" width="541" height="584" style="border:1px solid black;"></a></p> <p>其实,上述的整个窗口是一个表单,而<strong>表单是一项一项的</strong>,这个我们称为 <strong>表单项</strong> 或 <strong>表单元素</strong>。</p> <p><strong>表单场景</strong>: 表单就是在网页中负责数据采集功能的,如:注册、登录的表单。</p> <p><strong>表单标签</strong>: <code><form></code><br> <strong>表单属性</strong>:<br>     <code>action</code>:规定表单提交时,向何处发送表单数据,表单提交的URL。</p> <p>    <code>method</code>:规定用于发送表单数据的方式,常见为: GET、POST。</p> <p>    <code>GET</code>:表单数据是拼接在<strong>url后面</strong>的,<br>           如: xxxxxxxxxxx?username=Jack&age=12,url中能携带的表单数据大小<strong>是有限制的</strong>。</p> <p>    <code>POST</code>: 表单数据是在请求体(消息体)中携带的,<strong>大小没有限制</strong>。</p> <p><strong>表单项标签</strong>:不同类型的input元素、下拉列表、文本域等。<br>     <code>input</code>: 定义表单项,通过type属性控制输入形式</p> <p>    <code>select</code>:定义下拉列表</p> <p>    <code>textarea</code>:定义文本域</p> <h4>4.1.2. 实现</h4> <ol> <li>GET方式提交的表单</li> </ol> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>HTML-表单<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <span class="token comment"><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面 method: 表单的提交方式 . get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值 post: 在消息体(请求体)中传递的, 参数大小无限制的. --></span> <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 attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<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 attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<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 attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>age<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 attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <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>html</span><span class="token punctuation">></span></span> </code></pre> <p>    表单编写完毕之后,通过浏览器打开此表单,然后再表单项中录入值之后,点击提交,我们会看到表单的数据在url后面提交到服务端,格式为:?username=Tom&age=12。</p> <p><a href="http://img.e-com-net.com/image/info8/40713588eb5f49f0a6caad7dbfcd0729.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/40713588eb5f49f0a6caad7dbfcd0729.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第26张图片" width="650" height="166" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/764c23eadc624aceaaac817a8c223d52.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/764c23eadc624aceaaac817a8c223d52.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第27张图片" width="650" height="140" style="border:1px solid black;"></a></p> <ol start="2"> <li>POST方式提交表单</li> </ol> <p>将上述的表单提交方式由get,改为post</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>HTML-表单<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <span class="token comment"><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面 method: 表单的提交方式 . get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值 post: 在消息体(请求体)中传递的, 参数大小无限制的. --></span> <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 attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 用户名: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<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 attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>age<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 attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>提交<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <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>html</span><span class="token punctuation">></span></span> </code></pre> <p>    表单编写完毕之后,通过浏览器打开此表单,然后再表单项中录入值之后,点击提交,我们会看到表单的数据在url后面提交到服务端,格式为:?username=Tom&age=12。</p> <p><a href="http://img.e-com-net.com/image/info8/4fefb8a211154b7bb5f248878b328abd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4fefb8a211154b7bb5f248878b328abd.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第28张图片" width="650" height="280" style="border:1px solid black;"></a></p> <blockquote> <p>注意事项:<br>     表单中的<strong>所有表单项</strong>,要想能够正常的采集数据,在提交的时候能提交到服务端,表单项<strong>必须指定name属性</strong>。 否则,无法提交该表单项。 如:用户名: <input type=“text” name=“username”></p> </blockquote> <h3>4.2. 表单项</h3> <h4>4.2.1. 介绍</h4> <p>在一个<strong>表单中</strong>,可以存在很多的<strong>表单项</strong>,而虽然表单项的形式各式各样,但是表单项的标签其实就只有三个,分别是:</p> <p><code><input></code>:表单项,通过<code>type属性</code>控制输入形式。type可取得值如下表所示:</p> <table> <thead> <tr> <th>type取值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>text</td> <td>默认值,定义单行的输入字段</td> </tr> <tr> <td>password</td> <td>定义密码字段</td> </tr> <tr> <td>radio</td> <td>定义单选按钮</td> </tr> <tr> <td>checkbox</td> <td>定义复选框</td> </tr> <tr> <td>file</td> <td>定义文件上传按钮</td> </tr> <tr> <td>date/time/datetime-local</td> <td>定义日期/时间/日期时间</td> </tr> <tr> <td>number</td> <td>定义数字输入框</td> </tr> <tr> <td>email</td> <td>定义邮件输入框</td> </tr> <tr> <td>hidden</td> <td>定义隐藏域</td> </tr> <tr> <td>submit/reset/button</td> <td>定义提交按钮 / 重置按钮 / 可点击按钮</td> </tr> </tbody> </table> <p><code><select></code>:定义下拉列表, <code><option></code> 定义列表项</p> <p><code><textarea></code>:文本域</p> <h4>4.2.2. 实现</h4> <p>创建一个新的表单项的html文件,具体内容如下:</p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<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>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initialscale=1.0<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>title</span><span class="token punctuation">></span></span>HTML-表单项标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</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> <span class="token comment"><!-- value: 表单项提交的值 --></span> <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 attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 姓名: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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>label</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 attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gender<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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>label</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>label</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 attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobby<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>java<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> java <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</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><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 attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobby<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>game<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> game <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</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><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 attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hobby<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> sing <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>birthday<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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>time<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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datetime<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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>age<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>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>degree<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 attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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>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 attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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 attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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>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 attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<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 attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<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>select</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>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<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>textarea</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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></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>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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 attr-equals">=</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 attr-equals">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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 attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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>form</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> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>通过浏览器打开上述的表单项html文件,最终展示出的表单信息如下:</p> <p><a href="http://img.e-com-net.com/image/info8/85de4f264b0643ccbcae8853280027e8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/85de4f264b0643ccbcae8853280027e8.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第29张图片" width="650" height="578" style="border:1px solid black;"></a></p> <p>而对于<code>input type="hidden"</code>,是一个隐藏域,在表单中并不会显示出来,但是在提交表单的时候,是会提交到服务端的。 接下来,我们就点击提交按钮,来提交当前表单,看看提交的数据(按F12):</p> <p><a href="http://img.e-com-net.com/image/info8/e71a0f570831443da5482717f56ac7fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e71a0f570831443da5482717f56ac7fa.jpg" alt="【JavaWeb学习-第一章】HTML & CSS_第30张图片" width="650" height="297" style="border:1px solid black;"></a></p> <h2>附录. 文档查阅</h2> <p>文档地址: https://www.w3school.com.cn/index.html</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1737568627017703424"></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">你可能感兴趣的:(JavaWeb学习,学习,html,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1891210036970057728.htm" title="Bootstrap4 信息提示框" target="_blank">Bootstrap4 信息提示框</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Bootstrap4信息提示框Bootstrap是一个流行的前端框架,它提供了一系列的工具和组件来帮助开发者快速搭建响应式网站。在Bootstrap4中,信息提示框(Tooltip)是一个非常有用的组件,它可以帮助用户更好地理解页面上的元素。本文将详细介绍Bootstrap4的信息提示框组件,包括其基本用法、配置选项以及与实际应用的结合。一、基本用法1.1HTML结构要使用Bootstrap4的信</div> </li> <li><a href="/article/1891209910713118720.htm" title="Qt中多ui使用及简单布局实现交互界面" target="_blank">Qt中多ui使用及简单布局实现交互界面</a> <span class="text-muted">liangyunshan123</span> <a class="tag" taget="_blank" href="/search/Qt%E5%BC%80%E5%8F%91%E6%8A%80%E5%B7%A7/1.htm">Qt开发技巧</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>系列文章目录第一章Qt中C++代码搭配UI文件实现交互界面第二章Qt中多ui使用及简单布局实现交互界面文章目录前言一、新增两个新UI文件二、使用这两个新增的UI及简单布局三.添加简单联动逻辑四.编译运行及动态效果展示总结前言前一段时间,写了一篇关于Qt中C++代码搭配UI文件实现简单的交互界面的文章,当时是计划作为一个系列来写的,希望交流一下循序渐进的学习和使用Qt心得。前几天评论中有人催更了,所</div> </li> <li><a href="/article/1891202501131169792.htm" title="《Operating System Concepts》阅读笔记:p17-p25" target="_blank">《Operating System Concepts》阅读笔记:p17-p25</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a> <div>《OperatingSystemConcepts》学习第5天,p17-p25总结,总计9页。一、技术总结1.计算机系统的组成结构(1)CPU—Thehardwarethatexecutesinstructions.(2)Processor—AphysicalchipthatcontainsoneormoreCPUs.(3)Core—ThebasiccomputationunitoftheCPU.(</div> </li> <li><a href="/article/1891202350736011264.htm" title="【Spring Boot】Spring AOP动态代理,以及静态代理" target="_blank">【Spring Boot】Spring AOP动态代理,以及静态代理</a> <span class="text-muted">web13508588635</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>目录SpringAOP代理一.代理的概念二.静态代理三.JDK代理3.1重写invoke方法进?功能增强3.2通过Proxy类随机生成代理对象四.CGLIB代理4.1自定义类来重写intercept方法4.2通过Enhancer类的create方法来创建代理类五.AOP源码剖析总结(重中之重,精华)SpringAOP代理一.代理的概念根据前面的学习想必大家都已经对SpringAOP有所了解了,接下</div> </li> <li><a href="/article/1891199451930882048.htm" title="WebRTC学习二:WebRTC音视频数据采集" target="_blank">WebRTC学习二:WebRTC音视频数据采集</a> <span class="text-muted">m0_74823239</span> <a class="tag" taget="_blank" href="/search/webrtc/1.htm">webrtc</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a> <div>系列文章目录第一篇基于SRS的WebRTC环境搭建第二篇基于SRS实现RTSP接入与WebRTC播放第三篇centos下基于ZLMediaKit的WebRTC环境搭建第四篇WebRTC学习一:获取音频和视频设备第五篇WebRTC学习二:WebRTC音视频数据采集文章目录系列文章目录前言一、获取音视频流1.设置请求的媒体流参数2.调用getUserMedia3.处理获取到的媒体流4.处理错误二、完整</div> </li> <li><a href="/article/1891196425648271360.htm" title="Python自学攻略:AI时代的高效学习法 —— 如何用大模型快速上手编程" target="_blank">Python自学攻略:AI时代的高效学习法 —— 如何用大模型快速上手编程</a> <span class="text-muted">优化小秦</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>在AI技术爆发的今天,学习Python已不再是传统的“看书+敲代码”模式。借助大语言模型(如Deepseek、GPT、Claude、Kimi、豆包等),学习效率可以提升数倍。本文将结合实操路径、工具链和避坑指南,为你提供一套AI时代的Python速成方案。一、为什么AI能让Python学习效率飙升?实时纠错与解释传统学习:遇到报错需反复查资料,耗时且挫败感强AI辅助:直接将错误信息丢给大模型,1秒</div> </li> <li><a href="/article/1891194913635233792.htm" title="PHP 流程控制与错误处理" target="_blank">PHP 流程控制与错误处理</a> <span class="text-muted">来恩1003</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/1.htm">从入门到精通</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>PHP学习资料PHP学习资料PHP学习资料在PHP编程中,流程控制语句用于控制程序的执行顺序,而错误处理和异常处理机制则确保程序在遇到问题时能够稳定运行,并提供有意义的反馈。以下将详细介绍PHP中的条件语句、循环语句的使用,以及错误处理和异常处理机制。一、条件语句1.if-else语句if-else语句是最基本的条件判断结构,用于根据条件的真假来执行不同的代码块。$age=20;if($age>=</div> </li> <li><a href="/article/1891193023392444416.htm" title="python分支结构说课_Python程序设计 循环结构说课稿" target="_blank">python分支结构说课_Python程序设计 循环结构说课稿</a> <span class="text-muted">程籽籽</span> <a class="tag" taget="_blank" href="/search/python%E5%88%86%E6%94%AF%E7%BB%93%E6%9E%84%E8%AF%B4%E8%AF%BE/1.htm">python分支结构说课</a> <div>循环结构程序设计——实现复杂计算程序一、说教材1.教材地位分析教材是由湖北省中小学教材编写组编写的义务教育教科书《信息技术》。其中《循环结构程序设计》是初中信息技术课本第三册的第七单元“Python程序设计(下)”的第26课的内容。本节课的内容是在上节课选择结构的基础上进行的。循环结构作为Python程序设计的三大基本结构之一,有助于学生更好的解决生活中的实际问题,通过这节课的学习,学生会对循环结</div> </li> <li><a href="/article/1891192771147001856.htm" title="初中信息技术说课python_第一单元 走进Python 编程世界" target="_blank">初中信息技术说课python_第一单元 走进Python 编程世界</a> <span class="text-muted">weixin_39917046</span> <a class="tag" taget="_blank" href="/search/%E5%88%9D%E4%B8%AD%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E8%AF%B4%E8%AF%BEpython/1.htm">初中信息技术说课python</a> <div>(共17张PPT)今年一场突如其来的新冠肺炎不仅使得人人带上了口罩,过了一个不一样的寒假,同时也使得我们以不一样的方式开启我们的学习。同学们你们知道那些人容易得肺炎重症呢?有基础病的身体素质差的身体质量指数(BMI,BodyMassIndex)是国际上常用的衡量人体肥胖程度和是否健康的重要标准,主要用于统计分析。肥胖程度的判断不能采用体重的绝对值,它天然与身高有关。因此,BMI通过人体体重和身高两</div> </li> <li><a href="/article/1891192392225189888.htm" title="python分支结构说课_Python程序设计 选择结构说课稿" target="_blank">python分支结构说课_Python程序设计 选择结构说课稿</a> <span class="text-muted">爱吃可颂</span> <a class="tag" taget="_blank" href="/search/python%E5%88%86%E6%94%AF%E7%BB%93%E6%9E%84%E8%AF%B4%E8%AF%BE/1.htm">python分支结构说课</a> <div>选择结构程序设计——偏胖还是偏瘦?一、说教材1.教材地位分析教材是由湖北省中小学教材编写组编写的义务教育教科书《信息技术》。其中《选择结构程序设计》是初中信息技术课本第三册的第七单元“Python程序设计(上)”的第25课的内容。本节课的内容是在上节课顺序结构的基础上进行的。选择结构作为Python程序设计的三大基本结构之一,有助于学生更好的解决生活中的实际问题,通过这节课的学习,学生会对顺序结构</div> </li> <li><a href="/article/1891191003134619648.htm" title="i510300h和i78750h参数对比哪个好" target="_blank">i510300h和i78750h参数对比哪个好</a> <span class="text-muted">妙龙</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">笔记本</a> <div>i510300H是笔记本平台的标准电压处理器,为四核心八线程,主频2.5GHz,睿频4.5GHz,45WTDP,8M三级缓存,passmark跑分为9026分。我的笔记本就是活动时8折抢购的https://list.jd.com/list.html?i7-8750H的规格是6核心12线程,coffcelake架构,主频2.2GHz,单核最大睿频4.1GHz,六核最大睿频3.9GHz,L3缓存9MB</div> </li> <li><a href="/article/1891190498744397824.htm" title="腾讯云通过API怎样调用deepseek" target="_blank">腾讯云通过API怎样调用deepseek</a> <span class="text-muted">ZhangJiQun&MXP</span> <a class="tag" taget="_blank" href="/search/2024%E5%A4%A7%E6%A8%A1%E5%9E%8B%E4%BB%A5%E5%8F%8A%E7%AE%97%E5%8A%9B/1.htm">2024大模型以及算力</a><a class="tag" taget="_blank" href="/search/%E6%95%99%E5%AD%A6/1.htm">教学</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</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/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a> <div>腾讯云通过API怎样调用deepseek目录腾讯云通过API怎样调用deepseekhtml方式curl方式重点说明:不需要SK,仅仅使用ip和端口号html方式<metacharset=</div> </li> <li><a href="/article/1891189866662785024.htm" title="Pinia入门" target="_blank">Pinia入门</a> <span class="text-muted">qincjun</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E6%8C%87%E5%8D%97/1.htm">前端学习指南</a><a class="tag" taget="_blank" href="/search/pinia/1.htm">pinia</a> <div>一、铺垫pinia官网:https://pinia.vuejs.org/zh/getting-started.html以下的内容全部来自官网;只不过有时候访问官网上不去;只能自己扒下来;pinia的前端使用非常简单;只需要掌握几个步骤就可以二、套路1.用你喜欢的包管理器安装pinia:yarnaddpinia#或者使用npmnpminstallpinia2.创建一个pinia实例(根store)并</div> </li> <li><a href="/article/1891189740397457408.htm" title="前端开发:CSS选择器" target="_blank">前端开发:CSS选择器</a> <span class="text-muted">qincjun</span> <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>一、基础选择器1.1标签选择器通用型,一次将所有的同类型标签设置成相同属性;p{color:red;}div{color:green;}1.2类选择器类名用.(点)开头的.eat{color:red;}.sleep{color:blue;}.play{color:black;font-size:30px;}吃饭//给段落赋予一个class类名;是此类名的是一样的CSS格式睡觉//一个元素可以赋予多</div> </li> <li><a href="/article/1891184699343171584.htm" title="C# ASP.NET的应用场景" target="_blank">C# ASP.NET的应用场景</a> <span class="text-muted">来恩1003</span> <a class="tag" taget="_blank" href="/search/C%23%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/1.htm">C#从入门到精通</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>.NET学习资料.NET学习资料.NET学习资料C#ASP.NET作为一种强大的Web开发框架,在众多领域都有着广泛的应用,为各类Web应用的开发提供了高效、可靠的解决方案。以下是其主要的应用场景:企业级Web应用在企业级应用开发中,C#ASP.NET凭借其卓越的性能和强大的功能,成为众多企业的首选。它能够与企业现有的系统和数据库进行无缝集成,例如与MicrosoftSQLServer数据库紧密结</div> </li> <li><a href="/article/1891184068314329088.htm" title="Python说课内容介绍" target="_blank">Python说课内容介绍</a> <span class="text-muted">laocooon523857886</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>一、明确课程目标1.课程目标的确定面向整个专业:Python课程作为计算机专业或相关专业中的一部分,需要对学生的编程能力、问题解决能力以及软件开发的基础技能进行培养。通过本课程,学生能够掌握Python编程的基本语法、面向对象编程、常见数据结构和算法。面向岗位:课程目标还需要结合市场需求和岗位要求。例如,数据分析、人工智能、Web开发等方向都需要具备Python编程能力。学生通过学习Python,</div> </li> <li><a href="/article/1891184069010583552.htm" title="前端框架Vue内容回顾" target="_blank">前端框架Vue内容回顾</a> <span class="text-muted">GISer_Jinger</span> <a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端面试Vue必备内容详解如果你正在准备Vue相关的前端面试,这份详细指南将帮助你掌握Vue核心知识,助你高效备战面试。1.Vue基础知识1.1Vue的核心概念声明式渲染:Vue采用数据驱动视图的方式,通过{{}}语法或v-bind绑定数据,无需手动操作DOM。组件化开发:Vue提供了单文件组件(SFC),支持HTML、CSS、JS组合在.vue文件中,提高代码复用性和可维护性。数据驱动:Vue采</div> </li> <li><a href="/article/1891183689430265856.htm" title="物联网 网络安全 概述" target="_blank">物联网 网络安全 概述</a> <span class="text-muted">网络安全King</span> <a class="tag" taget="_blank" href="/search/%E7%89%A9%E8%81%94%E7%BD%91/1.htm">物联网</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>如何学习安全?随着物联网(IoT)的普及,物联网安全问题也变得越来越重要。物联网安全涉及保护物联网设备和系统免受攻击和未经授权的访问,这需要专业的知识和技能。下面是一些学习物联网安全的方法:1.理解物联网基础知识在开始学习物联网安全之前,您需要对物联网的基础知识有所了解。这包括物联网的定义、架构、通信协议、设备和应用等。2.学习网络安全基础知识物联网安全是网络安全的一个子集,因此您需要了解网络安全</div> </li> <li><a href="/article/1891182427477438464.htm" title="咱们一起学C++ 第一百八十八篇:之C++中全局new和delete运算符的重载探秘" target="_blank">咱们一起学C++ 第一百八十八篇:之C++中全局new和delete运算符的重载探秘</a> <span class="text-muted">一杯年华@编程空间</span> <a class="tag" taget="_blank" href="/search/%E5%92%B1%E4%BB%AC%E4%B8%80%E8%B5%B7%E5%AD%A6%E4%B9%A0C%2B%2B/1.htm">咱们一起学习C++</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>咱们一起学C++第一百八十八篇:之C++中全局new和delete运算符的重载探秘大家好!C++作为一门强大的编程语言,在内存管理方面提供了丰富的机制。今天咱们来深入探讨C++中全局new和delete运算符的重载,希望通过这次学习,我们能对C++的内存管理有更深刻的理解,一起在编程的道路上不断进步!一、为什么要重载全局new和delete运算符在C++编程中,默认的全局new和delete运算符</div> </li> <li><a href="/article/1891181167097475072.htm" title="idea 配置并运行python" target="_blank">idea 配置并运行python</a> <span class="text-muted">鬼龙寺</span> <a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>我整理的一些关于【CI】的项目学习资料(附讲解~~)和大家一起分享、学习一下:https://d.51cto.com/xltfov使用IntelliJIDEA配置并运行Python项目在当今的编程世界中,选择合适的集成开发环境(IDE)对提高开发效率至关重要。IntelliJIDEA是一款强大的IDE,它不仅支持Java,还通过插件扩展支持Python等其他编程语言。本篇文章将指导读者如何在Int</div> </li> <li><a href="/article/1891180914868809728.htm" title="python自动化框架pytest_全功能Python测试框架:pytest" target="_blank">python自动化框架pytest_全功能Python测试框架:pytest</a> <span class="text-muted">weixin_39637646</span> <div>python通用测试框架大多数人用的是unittest+HTMLTestRunner,这段时间看到了pytest文档,发现这个框架和丰富的plugins很好用,所以来学习下pytest.image.pngpytest是一个非常成熟的全功能的Python测试框架,主要有以下几个特点:简单灵活,容易上手支持参数化能够支持简单的单元测试和复杂的功能测试,还可以用来做selenium/appnium等自动</div> </li> <li><a href="/article/1891180536957825024.htm" title="print不起作用 pytest_全功能Python测试框架:pytest" target="_blank">print不起作用 pytest_全功能Python测试框架:pytest</a> <span class="text-muted">吕欲知</span> <a class="tag" taget="_blank" href="/search/print%E4%B8%8D%E8%B5%B7%E4%BD%9C%E7%94%A8/1.htm">print不起作用</a><a class="tag" taget="_blank" href="/search/pytest/1.htm">pytest</a> <div>python通用测试框架大多数人用的是unittest+HTMLTestRunner,这段时间看到了pytest文档,发现这个框架和丰富的plugins很好用,所以来学习下pytest.pytest是一个非常成熟的全功能的Python测试框架,主要有以下几个特点:简单灵活,容易上手支持参数化能够支持简单的单元测试和复杂的功能测试,还可以用来做selenium/appnium等自动化测试、接口自动化</div> </li> <li><a href="/article/1891177132739063808.htm" title="做其他的不好吗?别写代码了(4)" target="_blank">做其他的不好吗?别写代码了(4)</a> <span class="text-muted">chalmers_15</span> <a class="tag" taget="_blank" href="/search/ai%E6%96%87%E7%AB%A0/1.htm">ai文章</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>AI技术在IT领域的应用确实已经成为一个趋势,这对IT从业者来说既是机遇也是挑战。我们需要客观地看待AI对IT行业的影响:AI可以自动化和优化很多IT工作,如系统监控、故障诊断、代码编写等,这可能会替代一些传统的IT工作岗位。但同时AI也会创造新的IT工作机会,如AI系统的开发、部署和维护,以及利用AI技术进行创新和优化等。未来IT从业者需要更多掌握AI相关的技能,如机器学习、数据分析等,以适应A</div> </li> <li><a href="/article/1891173223941337088.htm" title="4.1、十字线 - 趋势中的十字线" target="_blank">4.1、十字线 - 趋势中的十字线</a> <span class="text-muted">五十番</span> <a class="tag" taget="_blank" href="/search/K%E7%BA%BF%E6%8A%80%E6%9C%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">K线技术学习笔记</a><a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a> <div>K线技术学习笔记------基本知识------1.1、基本知识-蜡烛图的历史1.2、基本知识-蜡烛图的结构1.3、基本知识-合成蜡烛线------反转形态------2.1、反转形态-单线反转形态2.2、反转形态-双线反转形态2.3、反转形态-三线反转形态2.4、反转形态-多线反转形态------持续形态------3.1、持续形态-窗口3.2、持续形态-三法形态3.3、持续形态-分手线形态--</div> </li> <li><a href="/article/1891172716447330304.htm" title="【从0带做】基于Springboot3+Vue3的高校食堂点餐系统" target="_blank">【从0带做】基于Springboot3+Vue3的高校食堂点餐系统</a> <span class="text-muted">ADFVBM</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>大家好,我是武哥,最近给大家手撸了一个基于SpringBoot3+Vue3的高校食堂点餐系统,可用于毕业设计、课程设计、练手学习,系统全部原创,如有遇到网上抄袭站长的,欢迎联系博主~详细介绍https://www.javaxm.cn/star/gxstdc.html项目在线体验地址体验地址:(请电脑端浏览器访问):http://43.142.9.148:81/用户账号:aaa密码:123456系统</div> </li> <li><a href="/article/1891170825785110528.htm" title="2025 机器学习方向毕业设计选题清单:开题指导与建议" target="_blank">2025 机器学习方向毕业设计选题清单:开题指导与建议</a> <span class="text-muted">Krin_IT</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E9%80%89%E9%A2%98%E6%8C%87%E5%AF%BC/1.htm">毕设选题指导</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>目录毕设选题选题迷茫选题的重要性更多选题指导最后大四是整个大学期间最忙碌的时光,一边要忙着准备考研,考公,考教资或者实习为毕业后面临的就业升学做准备,一边要为毕业设计耗费大量精力。大四的同学马上要开始毕业设计,对选题有疑问可以问学长哦(见文末)!以下整理了适合不同方向的计算机专业的毕业设计选题对毕设有任何疑问都可以问学长哦!更多选题指导:最新最全计算机专业毕设选题精选推荐汇总大家好,这里是海浪学长</div> </li> <li><a href="/article/1891169063128854528.htm" title="【300套】基于Springboot+Vue的Java毕业设计项目(附源码+演示视频+LW)" target="_blank">【300套】基于Springboot+Vue的Java毕业设计项目(附源码+演示视频+LW)</a> <span class="text-muted">程序猿老A(专注毕业设计)</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8EJava%E7%9A%84%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">基于Java的毕业设计</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</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/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a> <div>大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。今天给大家分享300+的Java毕业设计,基于Springboot+vue框架,这些项目都经过精心挑选,涵盖了不同的实战主题和用例,可做毕业设计和课程设计参考。✍️除了源码,对于大部分项目实现的功能都有相应的介绍,并且配有演示视频,方便大家根据自己的需要择优下载学习。另外如有定制需求或者想要相对应的论文参考,文末可以十我VX联系。后续还会持续</div> </li> <li><a href="/article/1891168055833194496.htm" title="Python满屏飘字代码" target="_blank">Python满屏飘字代码</a> <span class="text-muted">Want595</span> <a class="tag" taget="_blank" href="/search/%E8%B6%A3%E5%91%B3%E7%BC%96%E7%A8%8B/1.htm">趣味编程</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>系列专栏《Python趣味编程》《C/C++趣味编程》《HTML趣味编程》《Java趣味编程》系列文章序号直达链接Tkinter1Python李峋同款可写字版跳动的爱心2Python跳动的双爱心3Python蓝色跳动的爱心4Python动漫烟花5Python粒子烟花Turtle1Python满屏飘字2Python蓝色流星雨3Python金色流星雨4Python漂浮爱心5Python爱心光波①6Py</div> </li> <li><a href="/article/1891165536365113344.htm" title="景联文科技数据处理平台:支持高质量图像标注服务" target="_blank">景联文科技数据处理平台:支持高质量图像标注服务</a> <span class="text-muted">景联文科技</span> <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/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89/1.htm">计算机视觉</a> <div>图像标注是计算机视觉领域中不可或缺的一环,它通过为图像添加标签来帮助机器学习算法理解图像内容。这一过程对于创建高质量的训练数据集至关重要,使得AI模型能够准确地识别和分类现实世界中的物体。常见的图像标注类型:边界框标注:这是最常用的标注方式之一,通常用于物体检测任务。通过绘制矩形框来确定图像中目标物体的位置,可以是二维或三维形式。分割标注:包括语义分割(同一类别的所有实例被视为整体)和实例分割(每</div> </li> <li><a href="/article/1891165410154311680.htm" title="景联文科技:以全面数据处理服务推动AI创新与产业智能化转型" target="_blank">景联文科技:以全面数据处理服务推动AI创新与产业智能化转型</a> <span class="text-muted">景联文科技</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>数据标注公司在人工智能领域扮演着重要角色,通过提供高质量的数据标注服务,帮助企业和组织训练和优化机器学习模型。从需求分析到数据交付,每一个步骤都需要严格把控,确保数据的质量和安全性。景联文科技是一家专业的数据采集与标注公司,致力于为客户提供高质量的数据处理服务,助力企业在人工智能(AI)领域的创新与发展。数据标注的四项基本流程:数据采集、数据清洗、数据标注、数据质检。数据采集数据采集是数据处理的第</div> </li> <li><a href="/article/77.htm" title="算法 单链的创建与删除" target="_blank">算法 单链的创建与删除</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/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div> 先创建结构体 struct student { int data; //int tag;//标记这是第几个 struct student *next; }; // addone 用于将一个数插入已从小到大排好序的链中 struct student *addone(struct student *h,int x){ if(h==NULL) //?????? </div> </li> <li><a href="/article/204.htm" title="《大型网站系统与Java中间件实践》第2章读后感" target="_blank">《大型网站系统与Java中间件实践》第2章读后感</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">java中间件</a> <div>       断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章,这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难,但每一个屏障都会有解决方案,最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。          看完整章内容,</div> </li> <li><a href="/article/331.htm" title="zeus持久层spring事务单元测试" target="_blank">zeus持久层spring事务单元测试</a> <span class="text-muted">deng520159</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>今天把zeus事务单元测试放出来,让大家指出他的毛病, 1.ZeusTransactionTest.java 单元测试   package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Test; import </div> </li> <li><a href="/article/458.htm" title="Rss 订阅 开发" target="_blank">Rss 订阅 开发</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E8%AE%A2%E9%98%85/1.htm">订阅</a><a class="tag" taget="_blank" href="/search/rss/1.htm">rss</a><a class="tag" taget="_blank" href="/search/%E8%A7%84%E8%8C%83/1.htm">规范</a> <div>                RSS是 Really Simple Syndication的缩写(对rss2.0而言,是这三个词的缩写,对rss1.0而言则是RDF Site Summary的缩写,1.0与2.0走的是两个体系)。   RSS</div> </li> <li><a href="/article/585.htm" title="分页查询实现" target="_blank">分页查询实现</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5%E6%9F%A5%E8%AF%A2/1.htm">分页查询</a> <div>在查询列表时我们常常会用到分页,分页的好处就是减少数据交换,每次查询一定数量减少数据库压力等等。 按实现形式分前台分页和服务器分页: 前台分页就是一次查询出所有记录,在页面中用js进行虚拟分页,这种形式在数据量较小时优势比较明显,一次加载就不必再访问服务器了,但当数据量较大时会对页面造成压力,传输速度也会大幅下降。 服务器分页就是每次请求相同数量记录,按一定规则排序,每次取一定序号直接的数据</div> </li> <li><a href="/article/712.htm" title="spring jms异步消息处理" target="_blank">spring jms异步消息处理</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a> <div>spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器,常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量,以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理,进一步提高性能,减少侦听器的阻塞。具体配置如下: </div> </li> <li><a href="/article/839.htm" title="highCharts柱状图" target="_blank">highCharts柱状图</a> <span class="text-muted">布衣凌宇</span> <a class="tag" taget="_blank" href="/search/hightCharts/1.htm">hightCharts</a><a class="tag" taget="_blank" href="/search/%E6%9F%B1%E5%9B%BE/1.htm">柱图</a> <div>第一步:导入 exporting.js,grid.js,highcharts.js;第二步:写controller   @Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController {  private UserServi</div> </li> <li><a href="/article/966.htm" title="我的spring学习笔记2-IoC(反向控制 依赖注入)" target="_blank">我的spring学习笔记2-IoC(反向控制 依赖注入)</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/Spring+%E6%95%99%E7%A8%8B/1.htm">Spring 教程</a><a class="tag" taget="_blank" href="/search/spring3+%E6%95%99%E7%A8%8B/1.htm">spring3 教程</a><a class="tag" taget="_blank" href="/search/Spring+%E5%85%A5%E9%97%A8/1.htm">Spring 入门</a> <div>IoC(反向控制 依赖注入)这是Spring提出来了,这也是Spring一大特色。这里我不用多说,我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC,下面我将介绍不用Spring的IoC。 IoC不是框架,她是java的技术,如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明: 如:程序中有 Mysql.calss 、Oracle.class 、SqlSe</div> </li> <li><a href="/article/1093.htm" title="TLS java简单实现" target="_blank">TLS java简单实现</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/keystore/1.htm">keystore</a><a class="tag" taget="_blank" href="/search/tls/1.htm">tls</a><a class="tag" taget="_blank" href="/search/secure/1.htm">secure</a> <div>  1. SSLServer.java package ssl; import java.io.FileInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; import java.security.KeyStore; import </div> </li> <li><a href="/article/1220.htm" title="Zip解压压缩文件" target="_blank">Zip解压压缩文件</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/Zip%E6%A0%BC%E5%BC%8F%E8%A7%A3%E5%8E%8B/1.htm">Zip格式解压</a><a class="tag" taget="_blank" href="/search/Zip%E6%B5%81%E7%9A%84%E4%BD%BF%E7%94%A8/1.htm">Zip流的使用</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E8%A7%A3%E5%8E%8B/1.htm">文件解压</a> <div>   ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName));     &n</div> </li> <li><a href="/article/1347.htm" title="underscore.js 学习(一)" target="_blank">underscore.js 学习(一)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/underscore/1.htm">underscore</a> <div>        工作中需要用到underscore.js,发现这是一个包括了很多基本功能函数的js库,里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。       学</div> </li> <li><a href="/article/1474.htm" title="java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)" target="_blank">java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)</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/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jstatd/1.htm">jstatd</a> <div>1.介绍         jstatd是一个基于RMI(Remove Method Invocation)的服务程序,它用于监控基于HotSpot的JVM中资源的创建及销毁,并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。         jstatd是基于RMI的,所以在运行jstatd的服务</div> </li> <li><a href="/article/1601.htm" title="【Spring框架三】Spring常用注解之Transactional" target="_blank">【Spring框架三】Spring常用注解之Transactional</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/transactional/1.htm">transactional</a> <div>Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力,如下是@Transactional注解的定义:   /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version </div> </li> <li><a href="/article/1728.htm" title="我(程序员)的前进方向" target="_blank">我(程序员)的前进方向</a> <span class="text-muted">bitray</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....</div> </li> <li><a href="/article/1855.htm" title="nginx lua开发经验总结" target="_blank">nginx lua开发经验总结</a> <span class="text-muted">ronin47</span> <div>使用nginx lua已经两三个月了,项目接开发完毕了,这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的,跟PHP的占比差不多持平了,因此在开发中遇到一些问题备忘一下 1:content_by_lua中代码容量有限制,一般不要写太多代码,正常编写代码一般在100行左右(具体容量没有细心测哈哈,在4kb左右),如果超出了则重启nginx的时候会报 too long pa</div> </li> <li><a href="/article/1982.htm" title="java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5},1在栈顶。颠倒之后的栈为{5,4,3,2,1},5处在栈顶" target="_blank">java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5},1在栈顶。颠倒之后的栈为{5,4,3,2,1},5处在栈顶</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Stack; public class ReverseStackRecursive { /** * Q 66.颠倒栈。 * 题目:用递归颠倒一个栈。例如输入栈{1,2,3,4,5},1在栈顶。 * 颠倒之后的栈为{5,4,3,2,1},5处在栈顶。 *1. Pop the top element *2. Revers</div> </li> <li><a href="/article/2109.htm" title="正确理解Linux内存占用过高的问题" target="_blank">正确理解Linux内存占用过高的问题</a> <span class="text-muted">cfyme</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux开机后,使用top命令查看,4G物理内存发现已使用的多大3.2G,占用率高达80%以上: Mem:   3889836k total,  3341868k used,   547968k free,   286044k buffers Swap:  6127608k total,&nb</div> </li> <li><a href="/article/2236.htm" title="[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题" target="_blank">[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a> <div>      当我们的流程引擎进入IRC阶段的时候,当循环反馈模型出现之后,每次循环都会导致一大堆节点内存数据残留在系统内存中,循环的次数越多,这些残留数据将导致系统内存溢出,并使得引擎崩溃。。。。。。       而解决办法就是利用汇编语言或者其它系统编程语言,在引擎运行时,把这些残留数据清除掉。</div> </li> <li><a href="/article/2363.htm" title="自定义类的equals函数" target="_blank">自定义类的equals函数</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/equals/1.htm">equals</a> <div>仅作笔记使用 public class VectorQueue { private final Vector<VectorItem> queue; private class VectorItem { private final Object item; private final int quantity; public VectorI</div> </li> <li><a href="/article/2490.htm" title="Linux下安装R语言" target="_blank">Linux下安装R语言</a> <span class="text-muted">datageek</span> <a class="tag" taget="_blank" href="/search/R%E8%AF%AD%E8%A8%80+linux/1.htm">R语言 linux</a> <div>命令如下:sudo gedit  /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke</div> </li> <li><a href="/article/2617.htm" title="如何修改mysql 并发数(连接数)最大值" target="_blank">如何修改mysql 并发数(连接数)最大值</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>MySQL的连接数最大值跟MySQL没关系,主要看系统和业务逻辑了   方法一:进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可   方法二:MySQL的最大连接数默认是100客户端登录:mysql -uusername -ppass</div> </li> <li><a href="/article/2744.htm" title="单一功能原则" target="_blank">单一功能原则</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/1.htm">面向对象的程序设计</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1/1.htm">软件设计</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%8E%9F%E5%88%99/1.htm">编程原则</a> <div>单一功能原则[ 编辑]     SOLID 原则 单一功能原则 开闭原则 Liskov代换原则 接口隔离原则 依赖反转原则 查   论   编 在面向对象编程领域中,单一功能原则(Single responsibility principle)规定每个类都应该有</div> </li> <li><a href="/article/2871.htm" title="POJO、VO和JavaBean区别和联系" target="_blank">POJO、VO和JavaBean区别和联系</a> <span class="text-muted">fanmingxing</span> <a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/javabean/1.htm">javabean</a> <div>POJO和JavaBean是我们常见的两个关键字,一般容易混淆,POJO全称是Plain Ordinary Java Object / Plain Old Java Object,中文可以翻译成:普通Java类,具有一部分getter/setter方法的那种类就可以称作POJO,但是JavaBean则比POJO复杂很多,JavaBean是一种组件技术,就好像你做了一个扳子,而这个扳子会在很多地方被</div> </li> <li><a href="/article/2998.htm" title="SpringSecurity3.X--LDAP:AD配置" target="_blank">SpringSecurity3.X--LDAP:AD配置</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a> <div>前面介绍过基于本地数据库验证的方式,参考http://hanqunfeng.iteye.com/blog/1155226,这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证,权限依旧存储在本地数据库中】。   将配置文件中的如下部分删除: <!-- 认证管理器,使用自定义的UserDetailsService,并对密码采用md5加密--> </div> </li> <li><a href="/article/3125.htm" title="mac mysql 修改密码" target="_blank">mac mysql 修改密码</a> <span class="text-muted">IXHONG</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>$ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码(注意,这是第一次MySQL密码为空的时候的设置命令,如果是修改密码,还需在-</div> </li> <li><a href="/article/3252.htm" title="设计模式--抽象工厂模式" target="_blank">设计模式--抽象工厂模式</a> <span class="text-muted">kerryg</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>抽象工厂模式:     工厂模式有一个问题就是,类的创建依赖于工厂类,也就是说,如果想要拓展程序,必须对工厂类进行修改,这违背了闭包原则。我们采用抽象工厂模式,创建多个工厂类,这样一旦需要增加新的功能,直接增加新的工厂类就可以了,不需要修改之前的代码。     总结:这个模式的好处就是,如果想增加一个功能,就需要做一个实现类,</div> </li> <li><a href="/article/3379.htm" title="评"高中女生军训期跳楼”" target="_blank">评"高中女生军训期跳楼”</a> <span class="text-muted">nannan408</span> <div>   首先,先抛出我的观点,各位看官少点砖头。那就是,中国的差异化教育必须做起来。    孔圣人有云:有教无类。不同类型的人,都应该有对应的教育方法。目前中国的一体化教育,不知道已经扼杀了多少创造性人才。我们出不了爱迪生,出不了爱因斯坦,很大原因,是我们的培养思路错了,我们是第一要“顺从”。如果不顺从,我们的学校,就会用各种方法,罚站,罚写作业,各种罚。军</div> </li> <li><a href="/article/3506.htm" title="scala如何读取和写入文件内容?" target="_blank">scala如何读取和写入文件内容?</a> <span class="text-muted">qindongliang1922</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/scala/1.htm">scala</a> <div>直接看如下代码: package file import java.io.RandomAccessFile import java.nio.charset.Charset import scala.io.Source import scala.reflect.io.{File, Path} /** * Created by qindongliang on 2015/</div> </li> <li><a href="/article/3633.htm" title="C语言算法之百元买百鸡" target="_blank">C语言算法之百元买百鸡</a> <span class="text-muted">qiufeihu</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>中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”,鸡翁一,值钱五,鸡母一,值钱三,鸡雏三,值钱一,百钱买百鸡,问翁,母,雏各几何? 代码如下: #include <stdio.h> int main() { int cock,hen,chick; /*定义变量为基本整型*/ for(coc</div> </li> <li><a href="/article/3760.htm" title="Hadoop集群安全性:Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode" target="_blank">Hadoop集群安全性:Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode</a> <span class="text-muted">wyz2009107220</span> <a class="tag" taget="_blank" href="/search/NameNode/1.htm">NameNode</a> <div>正如大家所知,NameNode在Hadoop系统中存在单点故障问题,这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 1. Secondary NameNode 原理:Secondary NN会定期的从NN中读取editlog,与自己存储的Image进行合并形成新的metadata image 优点:Hadoop较早的版本都自带,</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>