卷王2048

educoder web程序设计基础知识点期末总结

网页表格

基本概念

为了完成本关任务，你需要掌握：1.表格的结构，2.表格的基本标签，3.表格标签的基本属性。

表格的结构

在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。例如下图所示的表格中，表格标题为“通讯录”，表格第一行单元格中的内容基本不变，称作项目表头，表格第二行后单元格的内容通常会动态改变，称作数据资料。

表格的基本标签

HTML表格由table标签以及一个或多个tr、th或td标签组成：

table标签：定义一个表格
caption标签：定义表格标题，嵌套在中
tr标签：定义表格中的一行，嵌套在中
th标签：定义表格中的表头单元格，嵌套在中
td标签：定义表格中的数据单元格，嵌套在中

表格标签的基本属性

table标签的基本属性

table标签的基本属性如下图所示：

tr标签的基本属性

tr标签的基本属性如下图所示：

th和td标签的基本属性

th和td标签的基本属性如下图所示：

高级属性

外边框线样式属性frame

表格的外边框线的样式可用属性frame的取值来确定，frame取值与相应的样式如下：

above：显示上边框
below：显示下边框
hsides：显示上下边框
vsides：显示左右边框
lhs：显示左边框
rhs：显示右边框
border：显示上下左右边框
void：不显示边框

内部边框样式属性rules

表格的内部边框的样式可用属性rules的取值来确定，rules取值与相应的样式如下：

all：显示所有内部边框
none：不显示内部边框
rows：仅显示行边框
cols：仅显示列边框
groups：显示介于行组和列组间边框

单元格合并

在制作稍复杂的表格时，需要对表格中的行或列进行合并。

水平方向单元格的合并

需要将水平方向的单元格合并时，可在或标记中添加colspan属性，属性的取值即为合并的单元格数目。

垂直方向单元格的合并

需要将垂直方向的单元格合并时，可在或标记中添加rowspan属性，属性的取值即为合并的单元格数目。

经典例题

1、下列选项中，用于设置表格内部边框线显示的属性是（ c ）。

A、borderB、frameC、rulesD、innerborder
2、如果希望表格的外部边框只显示上下两条边框线，属性frame的取值应选（ a ）。

A、hsidesB、vsidesC、lhsD、rhs
3、如果希望表格的内部边框只显示行线，则属性rules的取值应选（ b ）。

A、lineB、rowsC、colsD、groups
4、HTML中，若合并两个水平方向单元格，应使用的属性是（ a ）。

A、colspanB、nospanC、rowspanD、colwrap

5、

，表示（d ）

A、显示所有分隔线B、只显示组(Groups)与组之间的分隔线C、只显示行与行之间的分隔线D、只显示列与列之间的分隔线

本关任务：创建一个标题为“家庭账单”的表格。实现的效果如下图所示：

编程要求

根据任务描述提示的目标效果，在右侧编辑器补充代码，创建一个题为“家庭账单”的表格，要求如下： 1.为整个网页添加下图所示背景图，其URL为https://www.educoder.net/api/attachments/1217848； ![(https://www.educoder.net/api/attachments/1217848) 2.表格边框为2px；表格宽度为600；bordercolor为#00ff00;cellpadding为6；表格在网页中居中排列； 3.表格标题为“家庭账单”； 4.单元格的背景等样式已在头部style标签中设置，各单元格的内容及合并要求请参看任务描述中的效果图，要注意绿色显示区的单元格要设置为项目表头，青色显示区的单元格要设置为数据单元格。



 
    
    表格综合

家庭账单
本周项目		费用明细		备注
本周项目		收入	支出	备注
收入	工资	10000	0
	兼职	2000	0
	收入合计	12000	0
支出	生活用品	0	4000
	学杂费	0	3000
	支出合计	0	7000

表单

表单结构相关知识

为了完成本关任务，你需要掌握：1.表单的结构，2.form标签的属性。

表单的结构

表单是收集用户数据的容器。一个表单通常由表单控件和相关的提示信息组成。

表单控件：实现用户输入的组件。如文本框、密码框、单选按钮、复选按钮、下拉列表框、多行文本框、文件域等控件。
提示信息：提示用户进行填写和操作的说明文字。

每个表单都以form开始标签开始，以form结束标签结束。两个标签之间是组成表单的各个控件及提示信息。表单的基本结构如下：

           各种表单控件及提示信息

form的属性

表单在向服务器传输数据时需要一些进行一些设置，可通过form标签的属性来实现。

name

每个表单及其表单控件都有一个 name 属性，用于在提交表单时对表单及数据进行识别。

action

在提交表单时，action属性用于指定接收并处理表单数据的服务器程序的url地址。

method

在提交表单时，method属性用于设置表单数据的提交方式。有两种方法：get方法和post方法。

get方法

采用GET方法时，浏览器会与服务器建立连接，然后将表单数据直接附在action属性设置的URL之后，通过URL在一个传输步骤中发送所有的表单数据，URL和表单数据之间用问号进行分隔。显然这种方法用户数据要显示在地址栏中，保密性很差，而且对用户发送的数据量也有限制。

post方法

采用POST方法是在HTTP请求中嵌入表单数据。浏览器首先与action属性中指定的服务器建立连接，一旦建立连接之后，浏览器按分段传输的方法将数据发送给服务器。显然这种方法用户数据嵌入在http请求中而不是地址栏的，保密性较好，对用户发送的数据量也无限制。但post方法发送的信息是未经加密的，容易被黑客获取。

其他属性

在HTML5中，form标签还有两个新的属性。

autocomplete：规定是否启用表单的自动完成功能。自动完成允许浏览器侦测字段输入，当用户开始键入时，浏览器会基于以前键入过的值，自动列表显示在字段中填写的选项。取值为on,启用自动完成功能;取值为on,取值为off，禁止自动完成功能。
novalidate：规定是否不进行表单验证。启用该属性，则当提交表单时不进行验证。

表单控件的类型

常用的表单控件有以下几种：

input控件：是单行输入型控件，用来接受用户输入的信息。
textarea控件：用来创建一个支持多行的文本输入区域。
select控件：用于创建下拉列表框。
button控件：用于定义一个按钮。

经典例题

1、下列选项中，不属于表单标记
的常用属性的是（ d ）。

A、actionB、methodC、nameD、size
2、在HTML中，，method属性表示（ a ）。

A、提交方式B、表单所用的脚本语言C、提交的URL地址D、表单的类型
3、在HTML中，（ c ）标签用于在网页中创建表单。

A、B、B、< input type="button" >C、< input type="reset" >D、
2、HTML代码表示（ b　）。

A、创建一个单选框B、创建一个单行文本输入区域C、创建一个提交按纽D、创建一个使用图象的提交按纽
3、对于标签，如果希望实现密码框效果，* 值是（ c ）。

A、hiddenB、textC、password D、submit
4、下列选项中，用于设置input控件在首次加载时为禁用的属性是（ a ）。

A、disabledB、checkedC、requiredD、autofocus
5、设置表单中密码框的最大长度为15正确的属性设置是（ d ）

A、size=15B、max=15C、maxsize=15 D、maxlength=15

任务描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JGcbuwYv-1615285516976)(C:/Users/95853/AppData/Roaming/Typora/typora-user-images/image-20210309170340289.png)]




 
   
   设置单行文本框
  
  
   
     姓名：

     密码：

     国庆期间你最喜欢看的电影？

     夺冠
     我和我的祖国
     姜子牙

    你喜欢的运动是？

    打篮球
     打排球
     踢足球
     其他

文本域相关知识

为了完成本关任务，你需要掌握：textarea标签及其属性

textarea标签的属性

textarea标签用于定义多行文本区域，文本区域中可容纳无限数量的文本，其中文本的默认字体是等宽字体（Courier）。

textarea的基本属性

textarea的基本属性主要有：

cols：规定每行中的字符数
rows：规定可见的行数
name：规定文本区域的名称
readonly：规定文本区域为只读
disabled：规定文本区域为不可用

HTML5中textarea的新属性

textarea的新属性主要有：

wrap：规定表单提交时，文本区域的文本换行模式。取值为soft表示不换行，取值为hard表示换行
maxlength：规定文本区域的最大字符数
placeholder:规定一个简短的提示，描述文本区域期望的输入值
required:规定文本区域是必需的/必填的。
autofocus：规定当页面加载时，文本区域自动获得焦点
form:定义文本区域所属的一个或多个表单

经典例题

1、若将文本区域设置为显示10行，每行显示50个字符，正确选项是（ c ）

A、</code></p> <p>B、<code><input rows="50" cols="10"></code></p> <p>C、<code><textarea rows="10" cols="50"></code></p> <p>D、<code><input rows="10" cols="50"></code></p> </li> <li> <p>2、若将文本区域设置为只读的，可在textarea标签中添加（ b ）属性。</p> <p>A、disabledB、readonlyC、requiredD、autofocus</p> </li> <li> <p>3、在表单提交时使textarea 中的文本换行，正确的选项是（d ）</p> <p>A、<code><textarea name="mm" rows="5" cols="50"></code></p> <p>B、<code><textarea name="mm" rows="5" cols="50" wrap></code></p> <p>C、<code><textarea name="mm" rows="5" cols="50" wrap="soft"></code></p> <p>D、<code><textarea name="mm" rows="5" cols="50" wrap="hard"></code></p> </li> <li> <p>4、textarea标签的属性不包括（ a ）</p> <p>A、widthB、rowsC、colsD、maxlength</p> </li> <li> <p>5、textarea文本区域的宽度可用size属性来设置。b</p> <p>A、正确B、错误</p> </li> </ul> <h3>下拉列表相关知识</h3> <p>为了完成本关任务，你需要掌握：select控件结构及其相关属性。</p> <h4>select控件</h4> <p>select控件可以创建选择框。可为用户提供一组选项，允许用户从中选取，通常呈现为下拉菜单的样式。</p> <h5>select控件的基本结构</h5> <p>下拉列表选择区是由<code><select></code>标签和<code><option></code>标签构成，其中<code><select></code>标签用来创建下拉列表，<code><option></code>标签定义了列表中的可用选项。基本结构如下：</p> <pre><code><select name=""> <option value=" ">选项1</option> <option value=" ">选项2</option> ...</select> </code></pre> <h5>select标签的常用属性</h5> <p>select标签的常用属性有：</p> <ul> <li>name：规定下拉列表的名称</li> <li>size：规定列表中可见选项的数目</li> <li>multiple：设定为多选</li> <li>disabled：禁用该下拉列表</li> </ul> <h5>select标签的新属性</h5> <p>HTML5中引入的select新属性有：</p> <ul> <li>autofocus：规定在页面加载时下拉列表自动获得焦点</li> <li>required：规定用户在提交表单前必须选择一个下拉列表中的选项</li> <li>form：定义 select 字段所属的一个或多个表单</li> </ul> <h5>option标签的常用属性</h5> <ul> <li>disabled：规定该选项在首次加载时被禁用</li> <li>selected：规定该选项在首次加载时为选中状态</li> <li>value：定义送往服务器的选项值</li> </ul> <h4>经典例题</h4> <ul> <li> <p>1、<code><select></code>标签用于创建（ d ）</p> <p>A、表格B、框架C、单选框D、下拉列表选框</p> </li> <li> <p>2、<code><select></code>用于在表单中插入一个下拉列表框，它需要与哪个标签配合使用（ c ）</p> <p>A、<code><list></code>B、<code><item></code>C、<code><option></code>D、<code><dot></code></p> </li> <li> <p>3、设置下拉列表框中某项被默认选中的属性是( c )。</p> <p>A、checkedB、checkC、selectedD、select</p> </li> <li> <p>4、若设置下拉列表为多选，可在select标签中添加（ b ）属性。</p> <p>A、selectedB、multipleC、requiredD、checked</p> </li> <li> <p>5、下拉列表设置<code><select name="Fruit" size="3"></code>表明（a ）</p> <p>A、可以看到3个下拉列表选项B、有3个下拉列表选项C、下拉列表控件的宽度为3D、下拉列表字符长度为3</p> </li> </ul> <h3>分组元素相关知识</h3> <p>为了完成本关任务，你需要掌握：表单分组涉及到的标签及属性</p> <h4>fieldset标签</h4> <p>fieldset标签用于定义表单的一个子容器，将所包含的内容以边框环绕方式显示。 fieldset标签没有必需的或唯一的属性，可添加的属性有：</p> <ul> <li>name：规定fieldset的名称</li> <li>form：规定fieldset所属的一个或多个表单</li> <li>disabled：规定该组中的相关表单元素被禁用</li> </ul> <h4>legend标签</h4> <p>legend标签用于定义分组的标题，fieldset标签中的第一个元素一般是legend标签。</p> <h4>经典例题</h4> <ul> <li> <p>1、fieldset标签用于定义（ )</p> <p>A、表单的一个文本区域B、表单的一个下拉列表C、表单的一个子容器D、表单的一个隐藏域</p> </li> <li> <p>2、表单的分组标题可以用（）设置。</p> <p>A、title标签B、summary标签C、caption标签D、legend标签</p> </li> <li> <p>3、下列选项中，（）不属于fieldset标签的属性。</p> <p>A、sizeB、nameC、disabledD、form</p> </li> <li> <p>4、下列关于表单分组的设置代码，正确的是（）</p> <p>A、请选择个人爱好打篮球打排球 </p> <p>B、请选择个人爱好打篮球打排球</p> <p>C、请选择个人爱好打篮球打排球</p> <p>D、请选择个人爱好打篮球打排球 </p> </li> </ul> <h3>表单验证相关知识</h3> <p>为了完成本关任务，你需要掌握：1.表单验证的概念，2.HTML5的表单验证类型及用法。</p> <h4>表单验证的概念</h4> <p>表单验证是指在用户提交表单之前，验证用户输入的数据是否合法。 HTML5提供了一套简单的验证方式，在表单提交时，会根据情况弹出一些简单的提示，如“请填写此字段”“请匹配要求的模式”等，不同的浏览器所弹出的提示内容会有所不同。</p> <h4>表单验证的类型</h4> <p>HTML5中主要包括以下几个方面的验证：输入类型的验证、日期和时间范围的验证、必填字段的验证、步长的验证、字符长度的验证、数值范围的验证、正则表达式的验证等。</p> <h5>required非空验证</h5> <p>在某个表单控件中添加required属性，则表明该表单的值不能为空。required 属性适用于以下类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。示例如下： <code><input type="text" placeholder="请输入用户名" required></code></p> <h5>maxlength字符长度验证</h5> <p>在某个表单控件中添加maxlength属性，可限定输入的字符数。maxlength 属性与<code><input type="text"></code> 或 <code><input type="password"></code> 配合使用。示例如下： <code><input type="password" maxLength="10"/></code></p> <h5>输入类型的验证</h5> <p>HTML5新增了一些具有校验功能的input控件的类型，分别是：</p> <ul> <li>email:要求输入内容必须符合电子邮件地址的格式。</li> <li>url:要求输入内容必须符合URL的格式</li> <li>number:要求输入内容必须为数字，并可通过min、max、step等属性来设置最小值、最大值和间隔</li> </ul> <p>示例如下： <code><input type="email"/></code> <code><input type="url"/></code> <code><input type="number" min="0" max="100" step="10" value="20"/></code></p> <h5>pattern验证</h5> <p>HTML5新增的pattern属性具有对表单中输入字段模式进行验证的功能。适合于text、serch、url、telephone、email、password等<code><input></code>类型。示例如下： <code><input type="text" pattern="^[0-9]{12}$"/></code> 可以看到，pattern属性取值为符合某种规则的正则表达式，它以“^”开始，以“$”结束，中间是“规则字符串”，规则字符串通常由普通字符和元字符组成。</p> <ul> <li>普通字符：由大小写的字母和数字组成</li> <li>元字符：是具有特殊含义的字符<br> 常见的元字符及其功能说明如下图所示： <a href="http://img.e-com-net.com/image/info8/a08f80defc3c4fb8af3c7d51f6933f7c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a08f80defc3c4fb8af3c7d51f6933f7c.jpg" alt="educoder web程序设计基础知识点期末总结_第6张图片" width="650" height="425" style="border:1px solid black;"></a></li> </ul> <h4>经典例题</h4> <ul> <li> <p>1、下列选项中，对表单控件的值进行非空验证的属性为（ a ）</p> <p>A、requiredB、checkedC、selectedD、null</p> </li> <li> <p>2、在input控件的类型中，下列选项中对输入有校验功能的是（ c ）</p> <p>A、textB、passwordC、emailD、submit</p> </li> <li> <p>3、关于输入字符数的限定，下列代码中，设置正确的是（ d）。</p> <p>A、<code><input type="number" size="6"/></code></p> <p>B、<code><input type="text" size="6"/></code></p> <p>C、<code><input type="number" maxlength="6"/></code></p> <p>D、<code><input type="text" maxlength="6"/></code></p> </li> <li> <p>4、匹配1个或多个在它前面的元字符是（b ）。</p> <p>A、*B、+C、？D、.</p> </li> <li> <p>5、若限定用户输入6位数字，下列的代码正确的是（ c ）。</p> <p>A、<code><input type="text" pattern="^([0-9]{6,})$"></code></p> <p>B、<code><input type="text" pattern="^([0-9](6))$"></code></p> <p>C、<code><input type="text" pattern="^([0-9]{6})$"></code></p> <p>D、<code><input type="text" pattern="^([0-9](6,))$"></code></p> </li> </ul> <h3>给表单添加组件相关知识</h3> <p>为了完成本关任务，你需要掌握：label标签及其相关的属性。</p> <h4>label标签及其属性</h4> <p><code><label></code>标签用于为输入类型的表单控件定义标注。用<code><label></code>元素定义的文本标签，从显示上看与其他文本毫无差异。但当用户点击由<code><label></code>元素定义的文本标签时，与该文本关联的输入控件将获得焦点。 <code><label></code>标签的属性主要是：</p> <ul> <li>for:规定label绑定到哪个表单元素上，属性取值为表单元素的id。在HTML5中新增了form属性：</li> <li>form:规定label字段所属的一个或多个表单。当<code><label></code>标签不在表单标签<code><form></code>中时，就需要使用form属性来指定所属表单；属性值是其所属表单的id。如果input元素属于多个表单，用空格符分隔表单的id名，但目前浏览器测试都不支持。</li> </ul> <h4>label标签与表单控件的关联</h4> <p>label标签与表单控件之间有两种关联方法。</p> <h5>显式关联</h5> <p>通过使用 “for” 属性将 label 绑定到另一个元素，这种方式称为显式关联。用法示例：</p> <pre><code><form> 性别：<br/> <input name="sex" id="man" type="radio"/> <label for="man">男</label> <input name="sex" id="woman" type="radio"/> 女 </form> </code></pre> <h5>隐式关联</h5> <p>把需要绑定的标签放到label内部，这种关联方法称为隐式关联。用法示例：</p> <pre><code><form>性别：<br/> <label><input name="sex" type="radio"/>男</label> <input name="sex" type="radio"/>女</form> </code></pre> <h4>经典例题</h4> <ul> <li> <p>1、为了给单行文本框绑定文本标注，以便于用户单击该关联文本时可以使文本框获得焦点，可采用（ b ）标签定义文本。</p> <p>A、lableB、labelC、blurD、focus</p> </li> <li> <p>2、<code><label></code>标签中的for属性取值为（c ）</p> <p>A、要绑定的文本内容B、要绑定的表单标签<code><form></code>的id属性值C、要绑定的表单控件的id属性值D、要绑定的表单控件的name属性值</p> </li> <li> <p>3、<code><label></code>标签中的form属性取值为（ a ）</p> <p>A、所属表单的id值B、所属表单的name值C、所属表单控件的id值D、所属表单控件的name值</p> </li> </ul> <h2>头部标签</h2> <h4>title标签</h4> <p>title标签用于定义HTML页面的标题。它是双标签，开始和结束标签之间的内容就是要设置的页面标题。它的作用是：</p> <ul> <li>在浏览器的标题栏中显示标题</li> <li>标题可以用作默认快捷方式或收藏夹的名称</li> <li>标题还可以作为搜索引擎结果中的页面标题</li> </ul> <p>应用时注意：</p> <ul> <li>一个网页只能有一个标题</li> <li>标题名称的长度不超过64个字符数</li> <li>标题标记对之间不允许有其它的标签存在</li> </ul> <h4>meta标签</h4> <p>meta标签是单标签，用于定义页面的元信息。元信息不会显示在浏览器窗口中，但是对于机器是可读的。在HTML页面中，可以添加多个meta标签。它的作用是：</p> <ul> <li>设置页面的属性，如设置刷新、失效期、缓存、 cookie等</li> <li>设置搜索引擎的属性，如设置关键字、简介、作者、机器人向导、版权、编辑器等</li> <li>设置字符编码的属性。</li> </ul> 标签的语法格式： <p>格式说明：</p> <ul> <li>http-equiv设置页面的属性，其相关内容由content属性取值来描述</li> <li>name设置搜索引擎的属性，其相关内容也是由content属性取值来描述</li> <li>charset是HTML5新增的属性，用于设置字符编码类型。</li> </ul> <h4>link标签</h4> <p>link标签可引用外部文件。它是单标签，一个页面允许使用多个link标签引用多个外部文件。它的作用是：</p> <ul> <li>指定引用外部文档的地址</li> <li>指定当前文档与引用的外部文档的关系</li> <li>说明引用外部文档的类型</li> </ul> <p><code><link/></code>标签的语法格式： <code><link href="" rel="" type=""/></code></p> <p>格式说明：</p> <ul> <li>href设置外部文档的地址</li> <li>rel设置当前文档与引用的外部文档的关系</li> <li>type设置外部文档的类型。</li> </ul> <h4>style标签</h4> <p>style标签用于为HTML文档定义样式。它是双标签，开始和结束标签之间是CSS样式规则。每个HTML文档能包含多个 style标签。特别要注意：style 标签中type 属性必须设置，且属性取值只能 “text/css”。</p> <h4>meta标签的作用</h4> <p>meta标签用于定义页面的元信息，可重复出现再头部标签中。它是单标签，通过“名称/值”的形式成对使用其属性。 meta标签主要分为两大类，一类对页面进行设置，另一类对搜索引擎进行设置。</p> <ul> <li>对页面进行设置的格式：<code><meta http-equiv="名称" content="值"/></code></li> <li>对搜索引擎进行设置的格式：<code><meta name="名称" content="值"/></code></li> </ul> <h4>http-equiv/content</h4> <p>http-equiv/content属性对用于设置刷新、失效期、 cookie等页面信息。 <a href="http://img.e-com-net.com/image/info8/8db1f4b56db0496d96fd592d47100644.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8db1f4b56db0496d96fd592d47100644.png" alt="educoder web程序设计基础知识点期末总结_第7张图片" width="846" height="260" style="border:1px solid black;"></a> 用法示例：</p> <ul> <li>页面停留20秒后跳转到www.educoder.net</li> </ul> <ul> <li>网页于2020年7月26号8点过期</li> </ul> <ul> <li>设置cookie并进行页面缓存</li> </ul> <h4>name/content</h4> <p>http-equiv/content属性对用于设置关键字、简介、作者、机器人向导、版权、编辑器等。 <a href="http://img.e-com-net.com/image/info8/c1eda6f6df0845e0928802384b1d0013.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c1eda6f6df0845e0928802384b1d0013.png" alt="educoder web程序设计基础知识点期末总结_第8张图片" width="839" height="329" style="border:1px solid black;"></a></p> <p>用法示例：</p> <ul> <li>用于标注网页的作者和Email</li> </ul> <ul> <li>为搜索引擎提供网站简介</li> </ul> <ul> <li>为搜索引擎提供关键字</li> </ul> <ul> <li>为搜索引擎提供编辑器类型</li> </ul> <ul> <li>为搜索引擎提供提供最新版本信息</li> </ul> <h4>charset</h4> <p>charset是HTML5新增的字符编码属性。属性取值必须是标准字符集的名称，常用的字符编码如下：</p> <ul> <li>ISO-8859-1：国际标准化组织针对不同的字母表/语言定义的标准字符集（拉丁字母表的字符编码），是浏览器默认的字符集</li> <li>utf-8：Unicode 联盟开发的标准，utf-8 是网页和电子邮件的首选编码。</li> <li>gb2312：信息交换用汉字编码字符集，中国国家标准总局1980年发布。适用于汉字处理、汉字通信等系统之间的信息交换。</li> </ul> <p>用法示例：</p> <ul> <li>设置utf-8字符编码标准</li> </ul> <h2>文本控制类标签</h2> <h4>块级元素与行内元素</h4> <h5>块级元素</h5> <p>块级元素是指显示为一个区块内容的元素，在浏览器显示时，通常会以新行来开始（和结束）。其特点是：</p> <ul> <li>总在新行上开始</li> <li>高度、行高以及内外边距都可控</li> <li>默认宽度为容器的100%</li> <li>可以嵌套行内元素和其他块级元素</li> </ul> <h5>行内元素</h5> <p>行内元素也叫内联元素，是指显示为一行内容的元素，在浏览器显示时，会顺次在一行排列，而不另起新行。其特点是：</p> <ul> <li>和其他元素排成一行</li> <li>高度、行高以及内外边距不可控</li> <li>宽度就是其内容的宽度，不可改变</li> <li>行内元素只能容纳文本或其他行内元素</li> </ul> <h4>标题段落标签</h4> <h5>文本标题标签<code><hi></code></h5> <p>文本标题标签<code><hi></code>是双标签，块级元素，用于规定文本内容标题的层次。在HTML中提供了6级标题标签，从一级<code><h1></code>开始到六级<code><h6></code>，字号大小依次减小。默认情况下，在大多数浏览器中显示<code><h1><h2><h3></code>的内容大于文本在网页中的默认尺寸，<code><h4></code>的内容与默认文本的大小基本相同，而<code><h5></code>和<code><h6></code>的内容较默认文本小一些。可设置文本标题的对齐属性。</p> <h5>段落标签<code><p></code></h5> <p>段落标签<code><p></code>是双标签，块级元素，用于将文本内容定义为一个段落，段落内容从新的一行开始，并于上一段之间有一个空行。可设置段落文本的对齐属性。</p> <h4>文本修饰标签</h4> <h5>换行标签<code><br/></code></h5> <p>换行标签<code><br/></code>是单标签，可以在文本内容不结束的情况下对文本进行换行。它不产生一个空行，但连续多个的<code><br></code>标签可以产生多个空行的效果。</p> <h5>水平线标签<code><hr/></code></h5> <p>水平线标签<code>hr/</code>是单标签，用于产生一条水平线。可设置水平线的粗细、长度、对齐方式、有无阴影和线的颜色属性。</p> <h5>文本修饰类标签</h5> <p>文本修饰类标签都是双标签，行内元素。用于设置文字的风格样式。这些标签及其功能说明如下图所示。 <a href="http://img.e-com-net.com/image/info8/1c02064c76134f2298241e053c789ea0.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/1c02064c76134f2298241e053c789ea0.png" alt="educoder web程序设计基础知识点期末总结_第9张图片" width="983" height="476" style="border:1px solid black;"></a></p> <h5>块标签<code><div></code></h5> <p>块标签<code><div></code>是双标签，块级元素。用于排版大块段落，可以将网页分割为独立的部分，以实现网页的规划和布局。可通过style属性设置样式，也可以通过class 或 id属性应用样式。</p> <h5>行内标签<code><span></code></h5> <p>行内标签<code>span</code>是双标签，行内元素。用来组合文档中的行内元素，便于样式定义或使用JavaScript 对它进行操作。使用方法和<code><div></code>标签基本相同。</p> <h4>特殊字符的引用</h4> <p>浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。这些字符不能直接使用，只能通过下图所示的引用方式实现。 <a href="http://img.e-com-net.com/image/info8/eea2ddc4c8c443748902ad36768aeda8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eea2ddc4c8c443748902ad36768aeda8.jpg" alt="educoder web程序设计基础知识点期末总结_第10张图片" width="650" height="384" style="border:1px solid black;"></a></p> <h2>页面节点元素</h2> <h4>section元素</h4> <p>section 元素用于定义文章的节（区段），比如章节、页眉、页脚或文档中的其他部分。通常由内容及其标题组成。</p> <h4>nav元素</h4> <p>nav元素用于代表页面的一个部分，是一个可以作为页面导航的链接组，主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域。</p> <h4>address元素</h4> <p>address元素用于一般被作者用来提供该文档的联系人信息，一般放在一个网页的开头或者结尾，最常用的是和其他内容包含在footer元素内。如果address元素位于article元素内部，则它表示article元素所包含文章内容的作者的联系信息，如果直接位于body元素内，那么表示该网页的作者的联系信息。</p> <h2>交互元素</h2> <h4>progress元素</h4> <p>progress元素属于状态交互元素。用来表示页面中的某个任务完成的进度。progress元素具有max和value两个属性：</p> <ul> <li>max:表示任务的总量，默认值为1.</li> <li>value:表示已完成任务的数量。</li> </ul> <p>应用中，可以有以下三种情况。用法示例1： <code><progress max=100 value=20></progress></code> 用法示例2： <code><progress value=0.5></progress></code> 用法示例3： <code><progress></progress></code> 示例2中，没有设置max属性，则默认为1；示例3中max和value的属性都没有设置，则进度条处于左右自由滑动状态。当进度条需要动态改变时，需要通过JavaScript来实现。</p> <h4>meter元素</h4> <p>meter元素属于状态交互元素。可用于投票系统中候选人各占比例情况、考试分数统计等。 meter元素具有如下属性：</p> <ul> <li>form：规定meter元素所属的一个或多个表单，其取值为表单标签form所定义的id名。</li> <li>value：设置或获取meter元素的当前值，其数值必须介于min和max值之间。</li> <li>max:设置meter元素的最大值，默认为1.</li> <li>min:设置meter元素的最小值，默认为0.</li> <li>high:设置过高的阈值，当value值大于high并小于max时，显示过高的颜色。</li> <li>low：设置过低的阈值，当value值小于low并大于min时，显示过低的颜色。</li> <li>optimum:设置最优值。</li> </ul> <p>用法示例：</p> <pre><code><!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body><meter></meter>没有属性的meter<br/><meter value="0.6"></meter>只有value属性的meter<br/><meter value="40" min="10" low="30" high="80" max="100" ></meter>value介于low和high之间，计量条绿色<br/><meter value="20" min="10" low="30" high="80" max="100" ></meter>value小于low的meter，计量条黄色<br/><meter value="90" min="10" low="30" high="80" max="100" ></meter>value大于high的meter，计量条黄色<br/><meter value="40" min="10" low="30" high="80" max="100" optimum="90"></meter>value介于low和high之间，但optimum介于low和high之外，计量条黄色<br/><meter value="20" min="10" low="30" high="80" max="100" optimum="60"></meter>value介于low和high之外，但optimum介于low和high之间，计量条黄色<br/><meter value="20" min="10" low="30" high="80" max="100" optimum="90"></meter>value和optimum均介于low和high之外，计量条红色<br/><meter value="90" min="10" low="30" high="80" max="100" optimum="20"></meter>value和optimum均介于low和high之外，计量条红色<br/></body></html> </code></pre> <p>运行的效果如下图所示： <a href="http://img.e-com-net.com/image/info8/95346b45305e418ba0514b51c9574c10.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/95346b45305e418ba0514b51c9574c10.jpg" alt="educoder web程序设计基础知识点期末总结_第11张图片" width="650" height="222" style="border:1px solid black;"></a></p> <h4>details/summary元素</h4> <p>details元素用于用于描述文档或文档某个部分的细节。在特定的浏览器下(如Chrome、 Safari ）能够产生像手风琴一样展开和折叠的交互效果。summary元素通常作为details元素的标题部分，嵌套在details元素中。应用时，details元素中标题内容是可见的，当单击标题时将会显示/隐藏details元素中的详细信息。 meter元素的属性主要就是open:</p> <ul> <li> <p>open:用于控制details元素是否显示,取值为true时，元素内部的子元素被展开显示，当open属性值为false时，其内部的子元素被收缩起来不显示。默认不显示。用法示例：</p> <pre><code><details> <summary>单击可显示/隐藏详细内容</summary> <p>这里详细介绍details元素所涉及的知识</p></details> </code></pre> </li> </ul> <p>用法示例：</p> <h4>menu元素</h4> <p>menu元素用于创建上下文、工具栏和弹出菜单。目前的浏览器仅支持创建上下文的菜单。menuitem元素用于定义菜单项 menu元素主要有以下两个属性:</p> <ul> <li> <p>label:用于设置菜单的可见标签。</p> </li> <li> <p>menu：用于设置菜单的类型，取值为context表示上下文菜单，取值为toolbar表示工具条，取值为popup表示弹出式菜单。用法示例：</p> <pre><code><span contextmenu="myMenu">右击一下</span><menu type="context" id="myMenu"><menuitem label="单击一下" onclick="alert('您单击了我一下')" ></menuitem></menu> </code></pre> <h4>command元素</h4> <p>command元素用于定义各种类型的命令按钮。利用该标记的icon属性可以添加图片，并且实现图片按钮效果；另外，改变标记中的“type”属性值，还可以定义按钮类型。 command元素主要有以下属性：</p> </li> <li> <p>icon:规定用于代表 command 元素的图像。</p> </li> <li> <p>label：设置规定 command 元素的可见标签。</p> </li> <li> <p>type：设置command 元素的类型，可以取checkbox（复选）、radio（单选）、command（操作按钮）。默认取 “command”。</p> </li> <li> <p>radiogroup：设置radio 类型按钮的组名。</p> </li> </ul> <p>用法示例：</p> <pre><code><command onclick="alert('您单击了我一下')"> 请单击 </command> </code></pre> <p>目前主流浏览器还不能支持menu元素和command元素，也就是FireFox浏览器可以支持部分显示。</p> <h2>文本层次语义元素</h2> <h4>em和strong</h4> <p>em和strong都是HTML5中定义的带有加强语义的元素，页面呈现加粗显示效果。</p> <ul> <li>em:把文本定义为强调的内容。显示时为斜体加粗。</li> <li>strong:把文本定义为语气更强的强调的内容。</li> </ul> <h4>cite</h4> <p>cite元素创建一个引用标记，用来指明某内容的引用或参考源，如书籍或杂志或新闻报道等的标题，规范、报纸、法律文件，网络文章的URL等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <code><a></code>标签中，从而把一个超链接指向该联机版本。</p> <h4>mark</h4> <p>mark元素定义带有记号的文本，可以高亮显示文档中的文字以达到醒目的效果。</p> <h4>time</h4> <p>time元素定义日期或时间,该元素能够以机器可读的方式对日期和时间进行编码，比如用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。</p> <h4>dfn</h4> <p>dfn元素用来定义术语，可以通过可选的 title属性来提供对术语的准确定义。例如： <code><dfn title=文档对象模型>DOM</dfn></code> 默认情况下，浏览器会将 dfn元素的内容渲染为斜体。并且，当鼠标悬停到术语上时，浏览器就会将 title属性的内容显示在提示框里。</p> <h4>code</h4> <p>code元素用来定义计算机代码文本。包含在该元素内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。</p> <h4>samp</h4> <p>samp元素定义计算机程序的样本文本。</p> <h4>kbd</h4> <p>kbd元素定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。浏览器通常用等宽字体来显示该标签中包含的文本。</p> <h4>var</h4> <p>var元素定义变量。这个标签经常与 <code><code></code>和<code><pre></code>标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。用 <code><var></code>标签标记的文本通常显示为斜体。</p> <h2>分组元素</h2> <h4>div</h4> <p>div元素是没有语义的通用分组元素，早期设计中常用div标签进行网页布局。</p> <h4>blockquote</h4> <p>blockquote元素表示摘自另一个源的大段内容的语义化元素。在显示上有段落空隙，在左右两边缩进（增加外边距）。</p> <h4>pre</h4> <p>pre元素用来定义预格式化文本，在<code><pre></code>标签内容中的文本通常会保留空格和换行符，显示为等宽字体。</p> <h4>figure/figcaption</h4> <p>figure元素代表一个和文档相关的图，figcaption是这个图的标题。</p> <h4>ul/li</h4> <p>ul可创建无序列表，在这个标签中可以用li标签设置多个列表项。基本格式如下：</p> <pre><code><ul> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li></ul> </code></pre> <p>无序列表<code><ul></code>有一个可选属性type，用来规定列表里项目符号的类型,其取值可以是disk(实心圆）、circle（圆）或square（实心正方形）。</p> <h4>ol/li</h4> <p>HTML中的ol元素表示排序的项目列表，属性type 可设置列表符号样式，取值为1表示按数字排序，取值为A表示按大写英文字母排序，取值为a表示按小写英文字母排序，取值为I表示按大写罗马数字排序，取值为i表示按小写罗马数字排序，默认按数字排序。属性start 设置列表符号初值，取值可以是1、2、3 …,例如以下代码：</p> <p>ol可创建有序列表，在这个标签中可以用li标签设置多个列表项，显示时每个列表项独占一行。基本格式如下：</p> <pre><code><ol> <li>有序列表项1</li> <li>有序列表项2</li> <li>有序列表项3</li></ol> </code></pre> <p>在HTML5中，有序列表<code><ol></code>有三个可选属性，type用来规定列表里项目编号的类型，start属性用于指定列表的开始编号，reversed属性用于将列表反向进行编号。</p> <h4>dl/dt,dd</h4> <p>dl可创建定义列表，在这个标签中可以用dt标签设置需要定义的术语，每个术语后可用1~n个dd标签设置定义的解释体。基本格式如下：</p> <pre><code><dl> <dt>术语</dt> <dd>术语解释1</dd> <dd>术语解释2</dd> </cl> </code></pre> <h4>经典例题</h4> <ul> <li> <p>1、在下列选项中，用于表示引自他处大段内容的分组元素是（ b ）。</p> <p>A、divB、blockquoteC、pD、pre</p> </li> <li> <p>2、在HTML中，元素pre的作用是（ c ）</p> <p>A、表示标题B、表示转行C、表示预排版D、表示文字效果</p> </li> <li> <p>3、以下哪个标记用来建立一个有序列表（ d ）。</p> <p>A、<code><ni></code>B、<code><ul></code>C、<code><dl></code>D、<code><ol></code></p> </li> <li> <p>4、在定义列表中，一对<code><dt></dt></code>标记可以对应多对<code><dd></dd></code>标记。a</p> <p>A、正确B、错误</p> </li> <li> <p>5、关于定义无序列表的基本语法格式，以下描述错误的是（d ）。</p> <p>A、<code><ul></ul></code>标记用于定义无序列表</p> <p>B、<code><li></li</code>>标记嵌套在<code><ul></ul></code>标记中，用于描述具体的列表项</p> <p>C、每对<code><ul></ul></code>中至少应包含一对<code><li></li></code></p> <p>D、<code><li></code>不可以定义type属性，只能使用CSS样式属性代替</p> </li> </ul> <h4>ol/li</h4> <p>HTML中的ol元素表示排序的项目列表，属性type 可设置列表符号样式，取值为1表示按数字排序，取值为A表示按大写英文字母排序，取值为a表示按小写英文字母排序，取值为I表示按大写罗马数字排序，取值为i表示按小写罗马数字排序，默认按数字排序。属性start 设置列表符号初值，取值可以是1、2、3 …,例如以下代码：</p> <p>ol可创建有序列表，在这个标签中可以用li标签设置多个列表项，显示时每个列表项独占一行。基本格式如下：</p> <pre><code><ol> <li>有序列表项1</li> <li>有序列表项2</li> <li>有序列表项3</li></ol> </code></pre> <p>在HTML5中，有序列表<code><ol></code>有三个可选属性，type用来规定列表里项目编号的类型，start属性用于指定列表的开始编号，reversed属性用于将列表反向进行编号。</p> <h4>dl/dt,dd</h4> <p>dl可创建定义列表，在这个标签中可以用dt标签设置需要定义的术语，每个术语后可用1~n个dd标签设置定义的解释体。基本格式如下：</p> <pre><code><dl> <dt>术语</dt> <dd>术语解释1</dd> <dd>术语解释2</dd> </cl> </code></pre> <h4>经典例题</h4> <ul> <li> <p>1、在下列选项中，用于表示引自他处大段内容的分组元素是（ b ）。</p> <p>A、divB、blockquoteC、pD、pre</p> </li> <li> <p>2、在HTML中，元素pre的作用是（ c ）</p> <p>A、表示标题B、表示转行C、表示预排版D、表示文字效果</p> </li> <li> <p>3、以下哪个标记用来建立一个有序列表（ d ）。</p> <p>A、<code><ni></code>B、<code><ul></code>C、<code><dl></code>D、<code><ol></code></p> </li> <li> <p>4、在定义列表中，一对<code><dt></dt></code>标记可以对应多对<code><dd></dd></code>标记。a</p> <p>A、正确B、错误</p> </li> <li> <p>5、关于定义无序列表的基本语法格式，以下描述错误的是（d ）。</p> <p>A、<code><ul></ul></code>标记用于定义无序列表</p> <p>B、<code><li></li</code>>标记嵌套在<code><ul></ul></code>标记中，用于描述具体的列表项</p> <p>C、每对<code><ul></ul></code>中至少应包含一对<code><li></li></code></p> <p>D、<code><li></code>不可以定义type属性，只能使用CSS样式属性代替</p> </li> </ul> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1369655286268256256"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html5,html,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902573271463817216.htm" title="localStorage在上面位置？数据存放文件名是什么？" target="_blank">localStorage在上面位置？数据存放文件名是什么？</a> <span class="text-muted">2301_79698214</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在上述代码中，数据并不是以传统文件的形式存放在某个具体的文件里，而是存储在浏览器的localStorage中。localStorage是HTML5新增的一个会话存储对象，它用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据仍然存在。数据存储位置和文件名存储位置：localStorage是浏览器提供的一个存储机制，数据存储在浏览器的本地存储区域，不同的浏览器存储位置不同，例如：Chro</div> </li> <li><a href="/article/1902554494642745344.htm" title="NSSCTF_crypto_[HGAME 2022 week3]RSA attack 3" target="_blank">NSSCTF_crypto_[HGAME 2022 week3]RSA attack 3</a> <span class="text-muted">岁岁的O泡奶</span> <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><a class="tag" taget="_blank" href="/search/%E5%AF%86%E7%A0%81%E5%AD%A6/1.htm">密码学</a><a class="tag" taget="_blank" href="/search/crypto/1.htm">crypto</a><a class="tag" taget="_blank" href="/search/NSSCTF/1.htm">NSSCTF</a><a class="tag" taget="_blank" href="/search/%E7%BB%B4%E7%BA%B3%E6%94%BB%E5%87%BB/1.htm">维纳攻击</a> <div>[HGAME2022week3]RSAattack3题目:太多了自己去看，提示:维纳攻击首先在做这题之前你得先懂得维纳攻击的原理https://www.cnblogs.com/wandervogel/p/16805992.htmlok啊看懂了维纳攻击的原理就来开始写脚本吧fromCrypto.Util.numberimportlong_to_bytesimportgmpy2#已知参数n=50741</div> </li> <li><a href="/article/1902553356019232768.htm" title="网页大屏适配使用css的scale方法缺点是两边会有留白；" target="_blank">网页大屏适配使用css的scale方法缺点是两边会有留白；</a> <span class="text-muted">无足鸟丶</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>网页大屏适配使用css的scale方法缺点是两边会有留白；Document*{margin:0;padding:0;}html,body{width:100vw;height:100vh;background-color:blue;}#container{width:100%;height:100%;}.box{width:1920px;height:1080px;background-color</div> </li> <li><a href="/article/1902553103970922496.htm" title="Browser-Use WebUI项目启动指南" target="_blank">Browser-Use WebUI项目启动指南</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/chatgpt/1.htm">chatgpt</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>摘要此前发布《Browser-UseWebUI使用体验》博文后，鉴于部分朋友运行时出现问题，重新运行并整理相关内容。本文详细记录WebUI项目启动全过程，涵盖Python3.11+、Chrome浏览器及APIKeys等环境要求，Python环境检查、依赖安装等环境配置步骤，.env文件中环境变量的设置方法。同时，针对启动中如lxml.html.clean依赖缺失、连接被拒等问题给出解决方案，介绍启</div> </li> <li><a href="/article/1902547550389465088.htm" title="网络安全入门教程（非常详细）从零基础入门到精通，看完这一篇就够了" target="_blank">网络安全入门教程（非常详细）从零基础入门到精通，看完这一篇就够了</a> <span class="text-muted">白帽黑客坤哥</span> <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/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"rel="stylesheet"/>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_v</div> </li> <li><a href="/article/1902533552965218304.htm" title="移动端IOS的H5页面被键盘顶起后，底部有一大片空白区域的解决方法" target="_blank">移动端IOS的H5页面被键盘顶起后，底部有一大片空白区域的解决方法</a> <span class="text-muted">不怕麻烦的鹿丸</span> <a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>在移动端开发中，当使用HTML5(特别是在Vue.js框架下)构建应用时，经常会遇到键盘弹出导致页面内容被顶起的问题。当键盘收起后，页面未能自动恢复到原来的位置。当键盘弹出时，你可以通过JavaScript监听键盘的显示和隐藏事件，并相应地调整页面的滚动位置。exportdefault{mounted(){window.addEventListener('focusin',this.handleF</div> </li> <li><a href="/article/1902511609775976448.htm" title="爬虫基础--request库详解" target="_blank">爬虫基础--request库详解</a> <span class="text-muted">amo的代码园_毕设</span> <a class="tag" taget="_blank" href="/search/Java%E5%9F%BA%E7%A1%80/1.htm">Java基础</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</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/vue.js/1.htm">vue.js</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>爬虫基础–request库详解1.requests模块介绍request库中文文档：https://docs.python-requests.org/zh_CN/latest/user/quickstart.htmlrequests是一个非常流行的PythonHTTP第三方库，它允许你发送各种HTTP请求，处理cookies、会话、连接池、重定向、多种认证方式等，使得处理HTTP请求变得非常便捷，</div> </li> <li><a href="/article/1902506185131618304.htm" title="Selenium实战-模拟登录淘宝并爬取商品信息_使用selenium模拟真实登录行为,并爬取商品评论数据。" target="_blank">Selenium实战-模拟登录淘宝并爬取商品信息_使用selenium模拟真实登录行为,并爬取商品评论数据。</a> <span class="text-muted">2401_84009899</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>模拟淘宝登录deflogin_taobao():print(‘开始登录…’)try:login_url=‘https://login.taobao.com/member/login.jhtml’driver.get(login_url)input_login_id=wait.until(EC.presence_of_element_located((By.ID,‘fm-login-id’)))in</div> </li> <li><a href="/article/1902499246268018688.htm" title="使用CRACO自定义 Webpack 配置" target="_blank">使用CRACO自定义 Webpack 配置</a> <span class="text-muted">黄毛火烧雪下</span> <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>1、为什么要用CRACO？默认情况下，CRA的Webpack配置是隐藏的，如果你需要修改Webpack，比如：✅CDN配置✅配置alias（路径别名）✅修改Less/Sass变量✅添加Babel插件✅优化Webpack构建（如SplitChunks、CDN加载）✅支持TailwindCSS✅移动端适配启用PostCSS+px转rem如果不用CRACO，你必须运行yarneject/npmrunej</div> </li> <li><a href="/article/1902497605456293888.htm" title="uniapp中使用webview并与原页面通信" target="_blank">uniapp中使用webview并与原页面通信</a> <span class="text-muted">数学分析分析什么？</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>uniapp中使用webview并与原页面通信1.接收数据主要使用@message与@onPostMessage接收原页面数据，且两个方法只能在APP中使用，其他平台均不支持。/***接收页面返回参数*@param{Object}item*/htmlMessage(item){console.log('收到的消息',item)letdata=item.detail...},2.发送数据（调用原页面</div> </li> <li><a href="/article/1902496717178204160.htm" title="uniapp工程中解析markdown文件" target="_blank">uniapp工程中解析markdown文件</a> <span class="text-muted">pvfhv</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>在uniapp中如何导入markdown文件，同时在页面中解析成html，请参考以下配置：1.安装以下3个依赖包npminstallmarkedhighlight.jsvite-plugin-markdown2.创建vite.config.js配置文件//vite.config.jsimport{defineConfig}from'vite';importunifrom'@dcloudio/vit</div> </li> <li><a href="/article/1902394561402040320.htm" title="设备树学习（二十三、番外篇-中断子系统之softirq）" target="_blank">设备树学习（二十三、番外篇-中断子系统之softirq）</a> <span class="text-muted">奔跑的小刺猬</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E5%A4%87%E6%A0%91/1.htm">设备树</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E5%A4%87%E6%A0%91%E5%8E%9F%E7%90%86%E5%92%8C%E5%AE%9E%E7%8E%B0/1.htm">设备树原理和实现</a> <div>既然开始学了，那么还是一次把中断的所有知识都系统的学一下。刚好有蜗窝大神的博客做指引。http://www.wowotech.net/irq_subsystem/soft-irq.html一、前言对于中断处理而言，linux将其分成了两个部分，一个叫做中断handler（tophalf），是全程关闭中断的，另外一部分是deferabletask（bottomhalf），属于不那么紧急需要处理的事情</div> </li> <li><a href="/article/1902388383766867968.htm" title="【Apache Storm】" target="_blank">【Apache Storm】</a> <span class="text-muted">茉菇</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/storm/1.htm">storm</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>一、Storm简介1、概述官网地址：https://storm.apache.org/index.htmlApacheStorm是一个开源的、分布式的实时计算系统，专为处理流式数据而设计。它能够处理大量数据流并在极低的延迟下提供实时的结果。相比于传统的批处理系统，Storm具有处理无限数据流的能力，支持非常高的可扩展性和容错机制。Storm可以适用于多种编程语言，具有高度的灵活性。2、核心功能分布</div> </li> <li><a href="/article/1902381186840326144.htm" title="vue3+springboot电影院售票选座管理系统" target="_blank">vue3+springboot电影院售票选座管理系统</a> <span class="text-muted">qq_3166678367</span> <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><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示：文章底部获取博主联系方式！！！！本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现：在Java的开发过程中，可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻</div> </li> <li><a href="/article/1902358365347049472.htm" title="HTML音频、视频--课后作业实践" target="_blank">HTML音频、视频--课后作业实践</a> <span class="text-muted">Heetun</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>浅学了web一段时间，用浅显的知识做了一个小小的实践，各位大佬们多多包涵，指正。主要知识重现：标记语法：src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值，true为自动播放；false为不自动播放loop:逻辑值，true自动循环播放；false不循环播放2.CSS的内部样式表选择器1{属性1：属性值1；属性2：属性值2；......}选择器2</div> </li> <li><a href="/article/1902356096639627264.htm" title="H3C Network命令详解" target="_blank">H3C Network命令详解</a> <span class="text-muted">weixin_30471561</span> <div>转载于:https://www.cnblogs.com/fanweisheng/p/11156926.html</div> </li> <li><a href="/article/1902350594786521088.htm" title="CSS中的伪类与伪元素：让样式更加灵活优雅" target="_blank">CSS中的伪类与伪元素：让样式更加灵活优雅</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>CSS中的伪类与伪元素：让样式更加灵活优雅在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。一、伪类（Pseudo-classes）1.1什么是伪类？伪类用于定义元素的特殊状态。它们以单个冒号（:）开头，就像给元素添加了一个虚拟的类，但无需修改HTML结构。1.2常用伪类/*鼠标悬停状态*/butto</div> </li> <li><a href="/article/1902350298547023872.htm" title="如何创建HTML自定义元素：使用 Web Component 的最佳实践" target="_blank">如何创建HTML自定义元素：使用 Web Component 的最佳实践</a> <span class="text-muted">乐闻x</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Component/1.htm">Component</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">学习记录</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/component/1.htm">component</a> <div>什么是WebComponent？WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素，从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分：CustomElements（自定义元素）：允许开发者定义自己的HTML标签。ShadowDOM（影子DOM）：为元素提供封装的DOM和样式，让组件内部的</div> </li> <li><a href="/article/1902348661065576448.htm" title="css知识点总结" target="_blank">css知识点总结</a> <span class="text-muted">吃橘子的Crow</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.css概述css是CascadingStyleSheets(级联样式表)css是一种样式表语言,用于为HTML文档控制外观,定义布局.可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)2.基本语法1.行内样式表行内样式表,又称内联样式、行间样式、内嵌样式。是</div> </li> <li><a href="/article/1902338202086207488.htm" title="【css酷炫效果】纯CSS实现动态云雾效果" target="_blank">【css酷炫效果】纯CSS实现动态云雾效果</a> <span class="text-muted">冰夏之夜影</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>【css酷炫效果】纯CSS实现动态云雾效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式body{margin:0;min-height:100vh;}.cloud-bg{position:relative;height:100vh;background:ra</div> </li> <li><a href="/article/1902338202564358144.htm" title="【css酷炫效果】纯CSS实现流动岩浆纹理效果" target="_blank">【css酷炫效果】纯CSS实现流动岩浆纹理效果</a> <span class="text-muted">冰夏之夜影</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>【css酷炫效果】纯CSS实现流动岩浆纹理效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式.lava-texture{position:relative;width:400px;height:300px;overflow:hidden;border-radi</div> </li> <li><a href="/article/1902338075883794432.htm" title="【css酷炫效果】实现鱼群游动动态效果" target="_blank">【css酷炫效果】实现鱼群游动动态效果</a> <span class="text-muted">冰夏之夜影</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>【css酷炫效果】实现小鱼游动动态效果缘创作背景css代码创建div容器引入jquery引入鱼群js完整代码效果图成品资源下载链接：点击下载缘在开发系统功能的时候，无意间看到了小鱼游动特效，感觉很有意思，就在网上找了相关教程，分享给大家。创作背景刚看到csdn出活动了，赶时间，直接上代码。css代码.container{background-color:transparent;position:f</div> </li> <li><a href="/article/1902326726910865408.htm" title="deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师..." target="_blank">deepseek 对于 Web 前端过去，现在，未来的看法！称未来可能不叫前端工程师...</a> <span class="text-muted">CoderBin_</span> <a class="tag" taget="_blank" href="/search/%E4%B8%8Edeepseek%E7%9A%84%E5%AF%B9%E8%AF%9D/1.htm">与deepseek的对话</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、你对于过去的web前端有什么看法？对早期的Web前端开发（大致在2000年代至2010年代初），可以总结出以下几个关键看法：1.技术原始，但充满探索精神基础技术简单：主要依赖HTML、CSS和原生JavaScript，缺乏现代框架和工具链的支持。兼容性噩梦：不同浏览器（尤其是IE6/7）的渲染差异极大，开发者需要大量Hack代码（如条件注释、CSS滤镜）来适配。创新萌芽：AJAX（2005年）</div> </li> <li><a href="/article/1902324833925001216.htm" title="Storm实战常见问题及解决方案" target="_blank">Storm实战常见问题及解决方案</a> <span class="text-muted">Lzy失控的</span> <a class="tag" taget="_blank" href="/search/storm-%E5%88%86%E5%B8%83%E5%BC%8F%E6%B5%81%E5%BC%8F%E8%AE%A1%E7%AE%97/1.htm">storm-分布式流式计算</a><a class="tag" taget="_blank" href="/search/bigdata-%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">bigdata-大数据</a> <div>原文seehttp://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html1关于Storm集群1.1关于storm集群的环境变量配置问题安装好JDK后，需要配置环境变量，通常情况下出于经验，我们往往会修改/etc/profile的值进行环境变量配置，但这在安装JDK以及后面安装的storm集群、zookeeper集群以及metaq集群时会出问题，这时候我们需</div> </li> <li><a href="/article/1902322310598160384.htm" title="【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用" target="_blank">【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用</a> <span class="text-muted">金枝玉叶9</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%871/1.htm">程序员知识储备1</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%872/1.htm">程序员知识储备2</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%873/1.htm">程序员知识储备3</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>《一起学Rust|Tauri2.0框架》是一个结合Rust语言与Tauri框架开发跨平台应用的教程。Tauri2.0是一个非常适合构建跨平台桌面应用的框架，它让开发者可以使用Web技术（如HTML、CSS、JavaScript）来创建前端，同时利用Rust编写后端逻辑，确保应用运行高效且轻量。在这个教程中，开发者可以学习如何使用Rust与Tauri2.0框架实现一个跨平台二维码扫描应用。具体步骤可</div> </li> <li><a href="/article/1902319410870284288.htm" title="element ui 封装Table组件" target="_blank">element ui 封装Table组件</a> <span class="text-muted">沃野_juededa</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>1.首先npmielement-ui-S安装element-ui2.引入Element在main.js中写入以下内容：importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);n</div> </li> <li><a href="/article/1902313477347799040.htm" title="能否在编辑器中一键导入Word文档？" target="_blank">能否在编辑器中一键导入Word文档？</a> <span class="text-muted">2501_90646763</span> <a class="tag" taget="_blank" href="/search/umeditor%E7%B2%98%E8%B4%B4word/1.htm">umeditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E7%B2%98%E8%B4%B4word/1.htm">ueditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%A4%8D%E5%88%B6word/1.htm">ueditor复制word</a><a class="tag" taget="_blank" href="/search/ueditor%E4%B8%8A%E4%BC%A0word%E5%9B%BE%E7%89%87/1.htm">ueditor上传word图片</a><a class="tag" taget="_blank" href="/search/ueditor%E5%AF%BC%E5%85%A5word/1.htm">ueditor导入word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%AF%BC%E5%85%A5pdf/1.htm">ueditor导入pdf</a><a class="tag" taget="_blank" href="/search/ueditor%E5%AF%BC%E5%85%A5ppt/1.htm">ueditor导入ppt</a> <div>要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,</div> </li> <li><a href="/article/1902312466457620480.htm" title="css3选择器详解" target="_blank">css3选择器详解</a> <span class="text-muted">丸子猪的dady</span> <a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>CSS3选择器我们之前学过CSS的选择器，比如：div标签选择器.box类名选择器#boxid选择器divp后代选择器div.box交集选择器div,p,span并集选择器div>p子代选择器*:通配符div+p:选中div后面相邻的第一个pdiv~p:选中的div后面所有的p属性选择器属性选择器的标志性符号是[]。匹配含义：^：开头$：结尾*：包含格式：E[title]选中页面的E元素，并且E存</div> </li> <li><a href="/article/1902312467132903424.htm" title="css动画详解" target="_blank">css动画详解</a> <span class="text-muted">丸子猪的dady</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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>过渡：transitiontransition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。transition包括以下属性：transition-property:all;如果希望所有的属性都发生过渡，就使用all。transition-property:width，意思是只让盒子的宽度在变化时进行过渡transiti</div> </li> <li><a href="/article/1902312340154544128.htm" title="HTMl详解" target="_blank">HTMl详解</a> <span class="text-muted">丸子猪的dady</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>拖拽目标元素的事件监听：（应用于目标元素）ondragenter当拖拽元素进入时调用ondragover当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）ondrop当在目标元素上松开鼠标时调用ondragleave当鼠标离开目标元素时调用.box{width:200px;height:200px;background-color:green;}//绑定拖拽事件</div> </li> <li><a href="/article/84.htm" title="继之前的线程循环加到窗口中运行" target="_blank">继之前的线程循环加到窗口中运行</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/JFrame/1.htm">JFrame</a><a class="tag" taget="_blank" href="/search/JPanel/1.htm">JPanel</a> <div>之前写了有关java线程的循环执行和结束，因为想制作成exe文件，想把执行的效果加到窗口上，所以就结合了JFrame和JPanel写了这个程序，这里直接贴出代码，在窗口上运行的效果下面有附图。 package thread; import java.awt.Graphics; import java.text.SimpleDateFormat; import java.util</div> </li> <li><a href="/article/211.htm" title="linux 常用命令" target="_blank">linux 常用命令</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E4%BB%A4/1.htm">命令</a> <div>1.grep 相信这个命令可以说是大家最常用的命令之一了。尤其是查询生产环境的日志，这个命令绝对是必不可少的。但之前总是习惯于使用（grep -n 关键字文件名）查出关键字以及该关键字所在的行数，然后再用（sed -n '100,200p' 文件名），去查出该关键字之后的日志内容。但其实还有更简便的办法，就是用（grep -B n、-A n、-C n 关键</div> </li> <li><a href="/article/338.htm" title="php heredoc原文档和nowdoc语法" target="_blank">php heredoc原文档和nowdoc语法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/heredoc/1.htm">heredoc</a><a class="tag" taget="_blank" href="/search/nowdoc/1.htm">nowdoc</a> <div><!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body> <?</div> </li> <li><a href="/article/465.htm" title="overflow的属性" target="_blank">overflow的属性</a> <span class="text-muted">周华华</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q</div> </li> <li><a href="/article/592.htm" title="《我所了解的Java》——总体目录" target="_blank">《我所了解的Java》——总体目录</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> 准备用一年左右时间写一个系列的文章《我所了解的Java》，目录及内容会不断完善及调整。在编写相关内容时难免出现笔误、代码无法执行、名词理解错误等，请大家及时指出，我会第一时间更正。 &n</div> </li> <li><a href="/article/719.htm" title="[简单]docx4j常用方法小结" target="_blank">[简单]docx4j常用方法小结</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/docx/1.htm">docx</a> <div> 本代码基于docx4j-3.2.0，在office word 2007上测试通过。代码如下: import java.io.File; import java.io.FileInputStream; import ja</div> </li> <li><a href="/article/846.htm" title="Spring配置学习" target="_blank">Spring配置学习</a> <span class="text-muted">云端月影</span> <a class="tag" taget="_blank" href="/search/spring%E9%85%8D%E7%BD%AE/1.htm">spring配置</a> <div> 首先来看一个标准的Spring配置文件 applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&q</div> </li> <li><a href="/article/973.htm" title="Java新手入门的30个基本概念三" target="_blank">Java新手入门的30个基本概念三</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B/1.htm">新手</a><a class="tag" taget="_blank" href="/search/java+%E5%85%A5%E9%97%A8/1.htm">java 入门</a> <div>17.Java中的每一个类都是从Object类扩展而来的。　　18.object类中的equal和toString方法。　　equal用于测试一个对象是否同另一个对象相等。　　toString返回一个代表该对象的字符串,几乎每一个类都会重载该方法,以便返回当前状态的正确表示.(toString 方法是一个很重要的方法)　　 19.通用编程:任何类类型的所有值都可以同object类性的变量来代替。　</div> </li> <li><a href="/article/1100.htm" title="《2008 IBM Rational 软件开发高峰论坛会议》小记" target="_blank">《2008 IBM Rational 软件开发高峰论坛会议》小记</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E6%95%8F%E6%8D%B7%E5%BC%80%E5%8F%91/1.htm">敏捷开发</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/IBM/1.htm">IBM</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a> <div>我一直想写些总结,用于交流和备忘,然都没提笔,今以一篇参加活动的感受小记开个头,呵呵! 其实参加《2008 IBM Rational 软件开发高峰论坛会议》是9月4号,那天刚好调休.但接着项目颇为忙,所以今天在中秋佳节的假期里整理了下. 参加这次活动是一个朋友给的一个邀请书,才知道有这样的一个活动,虽然现在项目暂时没用到IBM的解决方案,但觉的参与这样一个活动可以拓宽下视野和相关知识.</div> </li> <li><a href="/article/1227.htm" title="PL/SQL的过程编程,异常,声明变量,PL/SQL块" target="_blank">PL/SQL的过程编程,异常,声明变量,PL/SQL块</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/PL%2FSQL%E7%9A%84%E8%BF%87%E7%A8%8B%E7%BC%96%E7%A8%8B/1.htm">PL/SQL的过程编程</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8/1.htm">异常</a><a class="tag" taget="_blank" href="/search/PL%2FSQL%E5%9D%97/1.htm">PL/SQL块</a><a class="tag" taget="_blank" href="/search/%E5%A3%B0%E6%98%8E%E5%8F%98%E9%87%8F/1.htm">声明变量</a> <div>PL/SQL; 过程; 符号; 变量; PL/SQL块; 输出; 异常; PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言PL/SQL 是对 SQL 的扩展,sql的执行时每次都要写操作</div> </li> <li><a href="/article/1354.htm" title="Mockito(三)--完整功能介绍" target="_blank">Mockito(三)--完整功能介绍</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a><a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div> mockito官网：http://code.google.com/p/mockito/，打开documentation可以看到官方最新的文档资料。一.使用mockito验证行为 //首先要import Mockito import static org.mockito.Mockito.*; //mo</div> </li> <li><a href="/article/1481.htm" title="精通Oracle10编程SQL(8)使用复合数据类型" target="_blank">精通Oracle10编程SQL(8)使用复合数据类型</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *使用复合数据类型 */ --PL/SQL记录 --定义PL/SQL记录 --自定义PL/SQL记录 DECLARE TYPE emp_record_type IS RECORD( name emp.ename%TYPE, salary emp.sal%TYPE, dno emp.deptno%TYPE ); emp_</div> </li> <li><a href="/article/1608.htm" title="【Linux常用命令一】grep命令" target="_blank">【Linux常用命令一】grep命令</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/1.htm">Linux常用命令</a> <div>grep命令格式 grep [option] pattern [file-list] grep命令用于在指定的文件(一个或者多个,file-list)中查找包含模式串(pattern)的行,[option]用于控制grep命令的查找方式。 pattern可以是普通字符串，也可以是正则表达式，当查找的字符串包含正则表达式字符或者特</div> </li> <li><a href="/article/1735.htm" title="mybatis3入门学习笔记" target="_blank">mybatis3入门学习笔记</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a> <div>MyBatis 的前身就是iBatis，是一个数据持久层(ORM)框架。 MyBatis 是支持普通 SQL 查询，存储过程和高级映射的优秀持久层框架。MyBatis对JDBC进行了一次很浅的封装。以前也学过iBatis，因为MyBatis是iBatis的升级版本，最初以为改动应该不大，实际结果是MyBatis对配置文件进行了一些大的改动，使整个框架更加方便人性化。</div> </li> <li><a href="/article/1862.htm" title="Linux 命令神器：lsof 入门" target="_blank">Linux 命令神器：lsof 入门</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lsof/1.htm">lsof</a> <div> lsof是系统管理/安全的尤伯工具。我大多数时候用它来从系统获得与网络连接相关的信息，但那只是这个强大而又鲜为人知的应用的第一步。将这个工具称之为lsof真实名副其实，因为它是指“列出打开文件（lists openfiles）”。而有一点要切记，在Unix中一切（包括网络套接口）都是文件。有趣的是，lsof也是有着最多</div> </li> <li><a href="/article/1989.htm" title="java实现两个大数相加，可能存在溢出。" target="_blank">java实现两个大数相加，可能存在溢出。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a> <div> import java.math.BigInteger; import java.util.regex.Matcher; import java.util.regex.Pattern; public class BigIntegerAddition { /** * 题目：java实现两个大数相加，可能存在溢出。 * 如123456789 + 987654321</div> </li> <li><a href="/article/2116.htm" title="Kettle学习资料分享，附大神用Kettle的一套流程完成对整个数据库迁移方法" target="_blank">Kettle学习资料分享，附大神用Kettle的一套流程完成对整个数据库迁移方法</a> <span class="text-muted">Kai_Ge</span> <a class="tag" taget="_blank" href="/search/Kettle/1.htm">Kettle</a> <div>Kettle学习资料分享 Kettle 3.2 使用说明书目录概述..........................................................................................................................................7 1.Kettle 资源库管</div> </li> <li><a href="/article/2243.htm" title="[货币与金融]钢之炼金术士" target="_blank">[货币与金融]钢之炼金术士</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a> <div> 自古以来,都有一些人在从事炼金术的工作.........但是很少有成功的那么随着人类在理论物理和工程物理上面取得的一些突破性进展...... 炼金术这个古老</div> </li> <li><a href="/article/2370.htm" title="Toast原来也可以多样化" target="_blank">Toast原来也可以多样化</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/toast/1.htm">toast</a> <div>Style 1：默认 Toast def = Toast.makeText(this, "default", Toast.LENGTH_SHORT); def.show(); Style 2：顶部显示 Toast top = Toast.makeText(this, "top", Toast.LENGTH_SHORT); t</div> </li> <li><a href="/article/2497.htm" title="java数据计算的几种解决方法3" target="_blank">java数据计算的几种解决方法3</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/r-langue/1.htm">r-langue</a><a class="tag" taget="_blank" href="/search/r/1.htm">r</a> <div>4、iBatis 简单敏捷因此强大的数据计算层。和Hibernate不同，它鼓励写SQL，所以学习成本最低。同时它用最小的代价实现了计算脚本和JAVA代码的解耦，只用20%的代价就实现了hibernate 80%的功能,没实现的20%是计算脚本和数据库的解耦。复杂计算环境是它的弱项，比如：分布式计算、复杂计算、非数据</div> </li> <li><a href="/article/2624.htm" title="向网页中插入透明Flash的方法和技巧" target="_blank">向网页中插入透明Flash的方法和技巧</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Flash/1.htm">Flash</a> <div>将 Flash 作品插入网页的时候，我们有时候会需要将它设为透明，有时候我们需要在Flash的背面插入一些漂亮的图片，搭配出漂亮的效果……下面我们介绍一些将Flash插入网页中的一些透明的设置技巧。　　一、Swf透明、无坐标控制　　首先教大家最简单的插入Flash的代码，透明，无坐标控制：　　注意wmode="transparent"是控制Flash是否透明</div> </li> <li><a href="/article/2751.htm" title="ios UICollectionView的使用" target="_blank">ios UICollectionView的使用</a> <span class="text-muted">dcj3sjt126com</span> <div>UICollectionView的使用有两种方法，一种是继承UICollectionViewController，这个Controller会自带一个UICollectionView；另外一种是作为一个视图放在普通的UIViewController里面。个人更喜欢第二种。下面采用第二种方式简单介绍一下UICollectionView的使用。 1.UIViewController实现委托，代码如</div> </li> <li><a href="/article/2878.htm" title="Eos平台java公共逻辑" target="_blank">Eos平台java公共逻辑</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/Eos%E5%B9%B3%E5%8F%B0java%E5%85%AC%E5%85%B1%E9%80%BB%E8%BE%91/1.htm">Eos平台java公共逻辑</a><a class="tag" taget="_blank" href="/search/Eos%E5%B9%B3%E5%8F%B0/1.htm">Eos平台</a><a class="tag" taget="_blank" href="/search/java%E5%85%AC%E5%85%B1%E9%80%BB%E8%BE%91/1.htm">java公共逻辑</a> <div> Eos平台java公共逻辑 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:20:4</div> </li> <li><a href="/article/3005.htm" title="SpringMVC4零配置--Web上下文配置【MvcConfig】" target="_blank">SpringMVC4零配置--Web上下文配置【MvcConfig】</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/springmvc4/1.htm">springmvc4</a> <div>与SpringSecurity的配置类似，spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明。 applicationContext-MvcConfig.xml  <</div> </li> <li><a href="/article/3132.htm" title="解决ie和其他浏览器poi下载excel文件名乱码" target="_blank">解决ie和其他浏览器poi下载excel文件名乱码</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a> <div> 使用poi,做传统的excel导出，然后想在浏览器中，让用户选择另存为，保存用户下载的xls文件，这个时候，可能的是在ie下出现乱码（ie,9,10,11),但在firefox,chrome下没乱码，因此必须综合判断，编写一个工具类： /** * * @Title: pro</div> </li> <li><a href="/article/3259.htm" title="挥洒泪水的青春" target="_blank">挥洒泪水的青春</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>2015年2月28日，我辞职了，离开了相处一年的触控，转过身--挥洒掉泪水，毅然来到了兄弟连，背负着许多的不解、质疑——”你一个零基础、脑子又不聪明的人，还敢跨行业，选择Unity3D？“，”真是不自量力••••••“，”真是初生牛犊不怕虎•••••“，••••••我只是淡淡一笑，拎着行李----坐上了通向挥洒泪水的青春之地——兄弟连！这就是我青春的分割线，不后悔，只会去用泪水浇灌——已经来到</div> </li> <li><a href="/article/3386.htm" title="稳增长之中国股市两点意见-----严控做空，建立涨跌停版停牌重组机制" target="_blank">稳增长之中国股市两点意见-----严控做空，建立涨跌停版停牌重组机制</a> <span class="text-muted">nannan408</span> <div> 对于股市，我们国家的监管还是有点拼的，但始终拼不过飞流直下的恐慌，为什么呢？笔者首先支持股市的监管。对于股市越管越荡的现象，笔者认为首先是做空力量超过了股市自身的升力，并且对于跌停停牌重组的快速反应还没建立好，上市公司对于股价下跌没有很好的利好支撑。我们来看美国和香港是怎么应对股灾的。美国是靠禁止重要股票做空，在</div> </li> <li><a href="/article/3513.htm" title="动态设置iframe高度(iframe高度自适应)" target="_blank">动态设置iframe高度(iframe高度自适应)</a> <span class="text-muted">Rainbow702</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/iframe/1.htm">iframe</a><a class="tag" taget="_blank" href="/search/contentDocument/1.htm">contentDocument</a><a class="tag" taget="_blank" href="/search/%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94/1.htm">高度自适应</a><a class="tag" taget="_blank" href="/search/%E5%B1%80%E9%83%A8%E5%88%B7%E6%96%B0/1.htm">局部刷新</a> <div>如果需要对画面中的部分区域作局部刷新，大家可能都会想到使用ajax。但有些情况下，须使用在页面中嵌入一个iframe来作局部刷新。对于使用iframe的情况，发现有一个问题，就是iframe中的页面的高度可能会很高，但是外面页面并不会被iframe内部页面给撑开，如下面的结构： <div id="content"> <div id=&quo</div> </li> <li><a href="/article/3640.htm" title="用Rapael做图表" target="_blank">用Rapael做图表</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/rap/1.htm">rap</a> <div>function drawReport(paper,attr,data){ var width = attr.width; var height = attr.height; var max = 0; &nbs</div> </li> <li><a href="/article/3767.htm" title="HTML5 bootstrap2网页兼容（支持IE10以下）" target="_blank">HTML5 bootstrap2网页兼容（支持IE10以下）</a> <span class="text-muted">xiaoluode</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a> <div><!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"></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.  </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>

educoder web程序设计基础知识点 期末总结

网页表格

基本概念

表格的结构

表格的基本标签

表格标签的基本属性

table标签的基本属性

tr标签的基本属性

th和td标签的基本属性

高级属性

外边框线样式属性frame

内部边框样式属性rules

单元格合并

水平方向单元格的合并

垂直方向单元格的合并

经典例题

相关知识

编程要求

表单

表单结构相关知识

表单的结构

form的属性

name

action

method

get方法

post方法

其他属性

表单控件的类型

经典例题

任务描述

文本域相关知识

textarea标签的属性

textarea的基本属性

HTML5中textarea的新属性

经典例题

educoder web程序设计基础知识点期末总结