卷王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/1899442702450225152.htm" title="HTML5 Canvas制作雪花飘落动画" target="_blank">HTML5 Canvas制作雪花飘落动画</a> <span class="text-muted">坚持坚持那些年</span> <div>本文还有配套的精品资源，点击获取简介：HTML5引入了Canvas元素，它赋予网页设计师丰富的绘图能力，允许通过JavaScript实现复杂的动画效果。本文将介绍如何结合HTML5的Canvas元素和JavaScript创建一个全屏的雪花飘落背景动画。通过定义雪花对象、创建雪花数组、编写主循环并利用requestAnimationFrame来绘制和更新雪花位置，我们能够实现一个逼真的雪花飘落动画效</div> </li> <li><a href="/article/1899442702886432768.htm" title="Poe AI推出Previews预览功能！对标Claude Artifacts！" target="_blank">Poe AI推出Previews预览功能！对标Claude Artifacts！</a> <span class="text-muted">AI信息Gap</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/ai/1.htm">ai</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a><a class="tag" taget="_blank" href="/search/OpenAI/1.htm">OpenAI</a><a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a> <div>Anthropic在发布最新模型Claude3.5Sonnet时，同时官宣了一个针对ClaudeAI重要的更新，那就是Artifacts。新功能Artifacts允许Claude用户在与聊天机器人的对话之外，通过一个专门的窗口分享、编辑和构建重要的独立内容。这些内容通常是超过15行的文本、代码片段、HTML网页、SVG图像、图表和交互式React组件等。用户可以在专用窗口中查看、复制和编辑这些内容</div> </li> <li><a href="/article/1899441812041428992.htm" title="Html5学习教程，从入门到精通， HTML5超链接应用的详细语法知识点和案例代码（18）" target="_blank">Html5学习教程，从入门到精通， HTML5超链接应用的详细语法知识点和案例代码（18）</a> <span class="text-muted">知识分享小能手</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>HTML5超链接应用的详细语法知识点和案例代码超链接（Hyperlink），也称为跃点链接，是互联网和文档编辑中的一种重要概念。超链接的定义超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、动画、程序、电子邮件地址、文件，甚至是一个音视频文件。如果点击了这个链接，当前页面的位置就会跳转到被链接的目标位置。在文档编辑中，超链接可以链</div> </li> <li><a href="/article/1899439542939742208.htm" title="Django框架的全面指南：从入门到高级" target="_blank">Django框架的全面指南：从入门到高级</a> <span class="text-muted">步入烟尘</span> <a class="tag" taget="_blank" href="/search/Python%E8%B6%85%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97%E5%85%A8%E5%86%8C/1.htm">Python超入门指南全册</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/sqlite/1.htm">sqlite</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以</div> </li> <li><a href="/article/1899437652256550912.htm" title="Canvas资源宝典：全面探索HTML5 Canvas技术" target="_blank">Canvas资源宝典：全面探索HTML5 Canvas技术</a> <span class="text-muted">支然苹</span> <div>Canvas资源宝典：全面探索HTML5Canvas技术awesome-canvasAcuratedlistofawesomeHTML5Canvaswithexamples,relatedarticlesandposts.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-canvas一、项目介绍项目概述awesome-canvas是由RaphaëlMor</div> </li> <li><a href="/article/1899437526028972032.htm" title="探索创新：CanvasParticles - 点燃你的网页动态效果" target="_blank">探索创新：CanvasParticles - 点燃你的网页动态效果</a> <span class="text-muted">柏赢安Simona</span> <div>探索创新：CanvasParticles-点燃你的网页动态效果去发现同类优质开源项目:https://gitcode.com/是一个开源的JavaScript库，专注于在HTML5Canvas上创建引人入胜的粒子动画效果。如果你是Web开发者，正在寻找一种方法为你的网站增添独特的视觉吸引力，那么这个项目绝对值得你深入了解。项目简介CanvasParticles提供了一套简洁而强大的API，让你能够</div> </li> <li><a href="/article/1899437273754169344.htm" title="探索Coco-Web：一款强大的H5创作工具" target="_blank">探索Coco-Web：一款强大的H5创作工具</a> <span class="text-muted">岑晔含Dora</span> <div>探索Coco-Web：一款强大的H5创作工具去发现同类优质开源项目:https://gitcode.com/是一个开源的、基于Web的H5（HTML5）创作平台，旨在让开发者和设计师能够轻松地创建互动式的内容和应用。通过其直观的界面和丰富的功能，无论你是编程高手还是初学者，都能够利用Coco-Web制作出富有吸引力的数字内容。技术分析Coco-Web基于现代Web技术构建，包括：React.js:</div> </li> <li><a href="/article/1899437021672304640.htm" title="探索CoreHTML5Canvas：创作动态Web图形的新工具" target="_blank">探索CoreHTML5Canvas：创作动态Web图形的新工具</a> <span class="text-muted">郁英忆</span> <div>探索CoreHTML5Canvas：创作动态Web图形的新工具去发现同类优质开源项目:https://gitcode.com/是一个强大的JavaScript库，专为开发者设计，旨在简化和增强在Web上创建交互式和动画图形的能力。这个项目利用HTML5Canvas元素，提供了一个简洁且高效的API，让开发人员可以轻松地构建出丰富的2D渲染效果。技术分析HTML5Canvas是HTML5的一个重要特</div> </li> <li><a href="/article/1899435759656562688.htm" title="实现openAI流式打印效果 (包含markdown代码高亮及复制功能)" target="_blank">实现openAI流式打印效果 (包含markdown代码高亮及复制功能)</a> <span class="text-muted">Todo_MrWu</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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>准备工作//插件npminstallmarkdown-ithighlight.js//引入文件importMarkdownItfrom'markdown-it'importhljsfrom'highlight.js'import'highlight.js/styles/atom-one-dark.css'初始化数据data(){return{vHtml:'',//最终填充展示的htmlstring</div> </li> <li><a href="/article/1899435379816198144.htm" title="前端框架的发展史" target="_blank">前端框架的发展史</a> <span class="text-muted">Qpeterqiufengyi</span> <a class="tag" taget="_blank" href="/search/%E4%B8%93%E6%9C%89%E5%90%8D%E8%AF%8D%E8%A7%A3%E9%87%8A/1.htm">专有名词解释</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>1、htmlcss+div从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。1994</div> </li> <li><a href="/article/1899430966187847680.htm" title="Flask框架中局部刷新页面" target="_blank">Flask框架中局部刷新页面</a> <span class="text-muted">oliver.chau</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>在Flask中使用AJAX仅刷新leftMenue.html你的项目使用Flask，想要在添加网站后，仅刷新leftMenue.html而不刷新整个页面，可以使用AJAX（推荐）。✅1.在app.py里创建一个返回leftMenue.html的路由在Flask里，我们需要一个专门的API来返回最新的leftMenue.html。fromflaskimportFlask,render_templat</div> </li> <li><a href="/article/1899430966909267968.htm" title="Webpack 打包详细教程" target="_blank">Webpack 打包详细教程</a> <span class="text-muted">oliver.chau</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</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>Webpack是一个现代JavaScript应用的静态模块打包工具，它可以处理JavaScript、CSS、图片等资源，并优化它们以提高性能。以下是Webpack从基础到进阶的详细教程。1.Webpack基础概念Webpack的核心概念包括：Entry（入口）：Webpack开始打包的起点。Output（输出）：打包后的文件存放路径。Loaders（加载器）：转换非JavaScript资源（如CS</div> </li> <li><a href="/article/1899427309929164800.htm" title="我的投资组合网站：打造个性化的在线投资展示平台" target="_blank">我的投资组合网站：打造个性化的在线投资展示平台</a> <span class="text-muted">Tranyn.X</span> <div>本文还有配套的精品资源，点击获取简介：本文介绍如何创建和设计一个在线平台，用于展示个人或专业投资者的投资策略、历史表现和投资理念。网站的构建涉及网页布局、响应式设计、CSS样式控制、内容管理、数据分析、SEO优化、安全性、用户体验、个性化和社交媒体整合等多个方面，确保网站既具有吸引力又能够有效地传达投资者的专业形象和投资成就。1.投资组合网站构建与网页布局设计网站构建的初步规划在当今数字化时代，构</div> </li> <li><a href="/article/1899412180600680448.htm" title="Web端测试时，接口返回200，页面有没显示，可能时什么原因？" target="_blank">Web端测试时，接口返回200，页面有没显示，可能时什么原因？</a> <span class="text-muted">海姐软件测试</span> <a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>需从系统架构、前后端交互、测试方法三个维度展开分析，结合具体场景给出可落地的排查方案：一、核心原因分析（按优先级排序）前端渲染异常JS脚本执行错误（如语法错误导致页面渲染中断）DOM元素未正确加载（XHR异步请求未完成时触发渲染）CSS样式冲突（display:none/visibility:hidden导致元素不可见）数据解析错误接口返回字段缺失（如缺少关键展示字段id）数据格式不符合预期（如字</div> </li> <li><a href="/article/1899405119406010368.htm" title="JavaScript面试宝典" target="_blank">JavaScript面试宝典</a> <span class="text-muted">傻小胖</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.JS由哪三部分组成？JavaScript由以下三部分组成：ECMAScript（ES）：JavaScript的核心语法，如变量、作用域、数据类型、函数、对象等。DOM（文档对象模型）：用于操作HTML和XML文档的API，可以动态修改网页内容、结构和样式。BOM（浏览器对象模型）：用于操作浏览器窗口和页面，例如window、navigator、location、history、screen等对</div> </li> <li><a href="/article/1899404110487154688.htm" title="【算法】BFS(最短路径问题、拓扑排序)" target="_blank">【算法】BFS(最短路径问题、拓扑排序)</a> <span class="text-muted">秦jh_</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><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>个人主页：秦jh_-CSDN博客系列专栏：https://blog.csdn.net/qinjh_/category_12862161.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12862161&sharerefer=PC&sharesource=qinjh_&sharefrom=from_link目录边权为1的最短路径问题多源</div> </li> <li><a href="/article/1899400197226688512.htm" title="我与DeepSeek读《大型网站技术架构》（3）" target="_blank">我与DeepSeek读《大型网站技术架构》（3）</a> <span class="text-muted">诺亚凹凸曼</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>大型网站架构的核心要素《大型网站技术架构：核心原理与案例分析》第三章聚焦于大型网站架构的核心要素，从技术维度剖析了构建高可用、高性能、可扩展系统的关键设计方向。1.五大核心架构要素(1)性能（Performance）目标：快速响应用户请求，优化用户体验。关键策略：前端优化：CDN加速静态资源、合并压缩JS/CSS、浏览器缓存。服务端优化：缓存（Redis/Memcached）、异步处理（消息队列）</div> </li> <li><a href="/article/1899399566386589696.htm" title="WordPress建站给外贸人带来的负担" target="_blank">WordPress建站给外贸人带来的负担</a> <span class="text-muted">小机出海</span> <a class="tag" taget="_blank" href="/search/%E5%BB%BA%E7%AB%99%E5%B8%B8%E8%B0%88/1.htm">建站常谈</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a> <div>WordPress是全球最大的开源建站平台，有着丰富的主题与插件，尽管功能非常强大，但也给想要建站的外贸人带来了一些负担。一、技术门槛与学习成本1、由于WordPress发展了几十年，里面的功能应有尽有，但往往这些复杂的功能导致建站新手对它的学习成本变得很高，需要理解各个模块与功能点，增加了上手的复杂度。2、WordPress的建站服务商他不会告诉你，你可能需要知道一些代码知识（HTML、CSS、</div> </li> <li><a href="/article/1899386201182367744.htm" title="固定表头、首列 —— uniapp、vue 项目" target="_blank">固定表头、首列 —— uniapp、vue 项目</a> <span class="text-muted">菲力蒲LY</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>项目实地：也可以在【微信小程序】搜索体验：xny.handbook另一个体验项目：官网一、效果展示二、代码展示（1）html部分股票代码建议投金额实际投金额建议股数实际股数◎原单价涨出-单价↑跌出+单价↓+○预赚+●实赚-○预赔-●实赔操作{{item.stockCode}}{{item.calculAdvsIvsMoney}}{{item.calculRealIvsMoney}}{{item.t</div> </li> <li><a href="/article/1899384937878974464.htm" title="Dash 简介" target="_blank">Dash 简介</a> <span class="text-muted">tankusa</span> <a class="tag" taget="_blank" href="/search/dash/1.htm">dash</a> <div>Dash是一个基于Python的开源框架，专门用于构建数据分析和数据可视化的Web应用程序。Dash由Plotly团队开发，旨在帮助数据分析师、数据科学家和开发人员快速创建交互式的、基于数据的Web应用，而无需深入掌握前端技术（如HTML、CSS和JavaScript）。Dash的核心优势在于其简单易用性和强大的功能。通过Dash，用户可以使用纯Python代码来构建复杂的Web应用，而无需编写繁</div> </li> <li><a href="/article/1899381533098176512.htm" title="使用css画三角形" target="_blank">使用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中，可以通过利用border属性来创建三角形。其原理是通过设置一个元素的宽高为0，然后给其设置不同方向的边框，并将不需要的边框颜色设置为透明，从而形成三角形的形状。以下是使用CSS创建三角形的示例代码：基本三角形.triangle{width:0;height:0;border-left:50pxsolidtransparent;/*左边框*/border-right:5</div> </li> <li><a href="/article/1899378250661031936.htm" title="Python __init__.py" target="_blank">Python __init__.py</a> <span class="text-muted">愚昧之山绝望之谷开悟之坡</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/init/1.htm">init</a> <div>Python__init__.py作用详解尼古拉苏关注12018.06.1012:57:34字数745阅读45,278转载于：https://www.cnblogs.com/tp1226/p/8453854.html__init__.py该文件的作用就是相当于把自身整个文件夹当作一个包来管理，每当有外部import的时候，就会自动执行里面的函数。1.标识该目录是一个python的模块包（modul</div> </li> <li><a href="/article/1899361855600652288.htm" title="vscode 好用插件" target="_blank">vscode 好用插件</a> <span class="text-muted">yqcoder</span> <a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>一、通用效率类1.AutoRenameTag在编写HTML或XML代码时，当你修改一个标签的名称，它会自动同步修改对应的结束标签，节省了手动修改的时间，提高了代码的准确性和编写效率。2.BracketPairColorizer为代码中的括号对（如()、{}、[]）添加不同的颜色，让你可以更清晰地分辨嵌套的括号层次，尤其在处理复杂代码时，能有效减少因括号匹配错误导致的问题。3.CodeRunner支</div> </li> <li><a href="/article/1899358951691055104.htm" title="Python字符串操作" target="_blank">Python字符串操作</a> <span class="text-muted">weixin_30871905</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>转自http://blog.chinaunix.net/u/19742/showart_382176.html#Python字符串操作'''1.复制字符串'''#strcpy(sStr1,sStr2)sStr1='strcpy'sStr2=sStr1sStr1='strcpy2'printsStr2'''2.连接字符串'''#strcat(sStr1,sStr2)sStr1='strcat'sSt</div> </li> <li><a href="/article/1899343573246078976.htm" title="web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript" target="_blank">web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript</a> <span class="text-muted">IT-司马青衫</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>‍静态网站的编写主要是用HTMLDⅣV+CSSJS等来完成页面的排版设计‍，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。精彩专栏推荐【作者主页——获取更多优质源码】【web前端期末大作业——毕设项目精品实战案例(1</div> </li> <li><a href="/article/1899339285023223808.htm" title="Webpack打包构建流程" target="_blank">Webpack打包构建流程</a> <span class="text-muted">码上跑步</span> <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>webpack的打包构建流程为什么需要打包？在前端有非常多的资源，如css、js、vue、vue、图片、字体等。有些资源需要加工处理1.ts->jsts-loader2.css->css-loader+style-loader3.图片->file-loader+url-loader4.html->html-webpack-plugin需要对产物进行优化optimization（webpack优化配</div> </li> <li><a href="/article/1899338906130771968.htm" title="webpack" target="_blank">webpack</a> <span class="text-muted">码上跑步</span> <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>webpack介绍webpack是一个构建工具,实现了模块化管理项目.他的工作方式是用各种loader将各种资源转化为js文件或者对js文件进行压缩编译亦或对静态资源进行处理.官网:webpack由来模块化存在一些问题1.ESM的兼容性问题2.模块文件过多,网络请求频繁3.前端的所有资源包括html和css都需要模块化构建工具应运而生,需要一个集编译,模块打包,支持不同的资源的模块打包工具.Web</div> </li> <li><a href="/article/1899338906554396672.htm" title="Vue初体验" target="_blank">Vue初体验</a> <span class="text-muted">码上跑步</span> <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是javascript的渐进式框架。Vue初识Vue工作时必须要创建一个Vue的实例，并且传入一个配置对象。root容器里的代码是符合html的语法但是新添加了一些Vue语法，在这些地方Vue会自动进行解析。root容器里的代码称为Vue模版。Vue实例和容器是一一对应的。在实际开发中只有一个Vue，配合组件使用。在vue里的插值{{}}内部只要写js表达式就能正常解</div> </li> <li><a href="/article/1899328948634972160.htm" title="CSS入门指南：从零开始学习网页开发——（一）简介" target="_blank">CSS入门指南：从零开始学习网页开发——（一）简介</a> <span class="text-muted">GIS小白吃</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、什么是CSS？CSS（CascadingStyleSheets，层叠样式表）是一种用于描述网页的外观和布局的样式表语言。它通过定义网页元素的样式（如颜色、字体、边距等）来与HTML内容分离，提升了网页的可维护性和设计的灵活性。CSS的核心目的是增强网页的表现力。早期的网页仅使用HTML来进行内容的展示，但由于HTML只能描述内容的结构，页面设计和内容变得难以管理。于是，CSS作为一种辅助技术应</div> </li> <li><a href="/article/1899324534067097600.htm" title="关于Jquery基本内容一" target="_blank">关于Jquery基本内容一</a> <span class="text-muted">gloria123_</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>jQuery(jQ)html+css+js1jQ是一个js库,封装了大量的特定的集合(函数和方法)如animate()、css()、show()等2使用jQ大大提高开发效率,简化dom操作常见的js库jQueryYUIDojoExtJszeptojQuery选择器$(selector)筛选方法parent()$(“li”).parent()children(selector)$(“ul”).chi</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程序设计基础知识点期末总结