卷王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/1773604712738783232.htm" title="android 自定义曲线图,Android自定义View——贝赛尔曲线" target="_blank">android 自定义曲线图,Android自定义View——贝赛尔曲线</a> <span class="text-muted">weixin_39767513</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9B%B2%E7%BA%BF%E5%9B%BE/1.htm">自定义曲线图</a> <div>个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化</div> </li> <li><a href="/article/1773569718641295360.htm" title="uni-app实现步骤条" target="_blank">uni-app实现步骤条</a> <span class="text-muted">夏夏的码农</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st</div> </li> <li><a href="/article/1773504513622212608.htm" title="大前端-postcss安装使用指南" target="_blank">大前端-postcss安装使用指南</a> <span class="text-muted">黑夜照亮前行的路</span> <a class="tag" taget="_blank" href="/search/postcss/1.htm">postcss</a> <div>PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把</div> </li> <li><a href="/article/1773450885851054080.htm" title="python转码" target="_blank">python转码</a> <span class="text-muted">Desamond</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> <div>转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，</div> </li> <li><a href="/article/1773347793847517184.htm" title="UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS" target="_blank">UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS</a> <span class="text-muted">liferecords</span> <a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/1.htm">自然语言处理</a> <div>UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调</div> </li> <li><a href="/article/1773308900838277120.htm" title="Web前端Html的表单" target="_blank">Web前端Html的表单</a> <span class="text-muted">任家伟</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单</div> </li> <li><a href="/article/1773240552423227392.htm" title="react native 总结" target="_blank">react native 总结</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/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su</div> </li> <li><a href="/article/1772709062681624576.htm" title="html版本号 webpack_html-webpack-plugin详解" target="_blank">html版本号 webpack_html-webpack-plugin详解</a> <span class="text-muted">weixin_39994949</span> <a class="tag" taget="_blank" href="/search/html%E7%89%88%E6%9C%AC%E5%8F%B7/1.htm">html版本号</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a> <div>引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面</div> </li> <li><a href="/article/1772700000292241408.htm" title="HTML语言剖析" target="_blank">HTML语言剖析</a> <span class="text-muted">混沌破晓</span> <div>HTML语言剖析Html简介-目录全写：HyperTextMark-upLanguage译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1.Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签</div> </li> <li><a href="/article/1772647114975805440.htm" title="CDH 启停使用HiveServer2" target="_blank">CDH 启停使用HiveServer2</a> <span class="text-muted">金刚_30bf</span> <div>翻译：https://www.cloudera.com/documentation/enterprise/latest/topics/cdh_ig_hiveserver2_start_stop.html版本：5.14.2HiveServer2是HiveServer的改进版本，支持Kerberos身份验证和多客户端并发访问。您可以使用Beeline客户端访问HiveServer2。警告：如果以远程模</div> </li> <li><a href="/article/1772617543765262336.htm" title="HTML背景带视频的个人炫酷引导页源码" target="_blank">HTML背景带视频的个人炫酷引导页源码</a> <span class="text-muted">erthre</span> <a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>正文:一款简洁大气得个人团队引导HTML单页，非常不错，LOGO支持自行更改替换，可以拿来做为团队官网也可以个人，只是单页没有后台。程序:wwhtxs.lanzouq.com/if6oE0i26ohi图片:</div> </li> <li><a href="/article/1772553729602551808.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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa</div> </li> <li><a href="/article/1772511560346959872.htm" title="C#使用ASP.NET Core Razor Pages构建网站（二）" target="_blank">C#使用ASP.NET Core Razor Pages构建网站（二）</a> <span class="text-muted">林祖师</span> <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>上一篇文章讲了HTTP协议的基本概念、客户端Web开发技术以及ASP.NETCore框架的关键特点和创建项目方法链接：C#使用ASP.NETCoreRazorPages构建网站（一）接下来继续了解ASP.NETCoreRazorPages构建网站的后续内容了解RazorPagesRazorPages允许开发人员轻松地将HTML标记和C#代码混合在一起，这是使用.cshtml扩展名的原因。默认情况下</div> </li> <li><a href="/article/1772425208259477504.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/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/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>文章目录webpack快速基础1.概念1.1入口1.2输出(output)1.3loader1.4插件（plugin)2.建立项目，用于测试功能2.1安装webpack，2.2创建webpack配置文件,2.3配置package.json，运行项目3.配置mode开发环境4.配置entry编译入口5.配置output编译出口6.配置加载csswebpack快速基础1.概念webpack是现代Jav</div> </li> <li><a href="/article/1772328030845337600.htm" title="vue-pdf 预览pdf (数据流)" target="_blank">vue-pdf 预览pdf (数据流)</a> <span class="text-muted">reembarkation</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>页面有个要预览pdf的需求，数据是从后台传递过来的数据流：1.安装插件：npminstallvue-pdf2.在页面引用：importpdffrom'vue-pdf'...components:{pdf},3.html中添加：4.通过接口获取数据：downloadFile({id:this.id}).then((res)=>{if((!res&&res.status!=200)||(res.dat</div> </li> <li><a href="/article/1772201408989298688.htm" title="CSS color-mix() 函数" target="_blank">CSS color-mix() 函数</a> <span class="text-muted">蚂蚁上的大象</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B/1.htm">前端的那些事</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</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>CSScolor-mix()函数是近年来CSS色彩模块新增的一项强大功能，允许开发者在样式表中直接混合两种或多种颜色。这一特性为设计师和开发者带来了更多创作空间，让网页的颜色设计变得更加生动和丰富。本文将带你了解color-mix()函数的使用方法及其在实际项目中的应用。什么是CSScolor-mix()函数？color-mix()是一个即将推出的CSS颜色函数，它能够根据指定的颜色模型（如RGB</div> </li> <li><a href="/article/1772138979433447424.htm" title="DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动" target="_blank">DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动</a> <span class="text-muted">01空间</span> <a class="tag" taget="_blank" href="/search/%E5%B8%B8%E8%A7%81%E5%9C%BA%E6%99%AF%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/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>滚动条水平滚动展示溢出内容htmlcss（less）思路html11112222333344445555666677778888css（less）.outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc</div> </li> <li><a href="/article/1772126388602601472.htm" title="【Docker】【nginx】docker安装nginx并映射宿主机配置文件地址" target="_blank">【Docker】【nginx】docker安装nginx并映射宿主机配置文件地址</a> <span class="text-muted">小丛的知识窝</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>dockerrun-d-p80:80-v/root/docker/docker-nginx/nginx.conf:/etc/nginx/nginx.conf-v/root/docker/docker-nginx/html:/usr/share/nginx/html-v/root/docker/docker-nginx/logs:/var/log/nginx--namenginxnginx</div> </li> <li><a href="/article/1772109107537444864.htm" title="Reviewing a fastq_mergepairs report to check for problems 信息搬运" target="_blank">Reviewing a fastq_mergepairs report to check for problems 信息搬运</a> <span class="text-muted">代号北极能</span> <div>信息来源https://www.drive5.com/usearch/manual/merge_report.htmlBelowisanexamplereportproducedbythe-reportoptionoffastq_mergepairs.Thisinformationisalsoshownontheterminal(standarderroroutputstream).Theopti</div> </li> <li><a href="/article/1772071635629703168.htm" title="html5 websocket 手机,websocket在h5上正常，编译到手机上就连不上" target="_blank">html5 websocket 手机,websocket在h5上正常，编译到手机上就连不上</a> <span class="text-muted">猫研所</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E6%89%8B%E6%9C%BA/1.htm">手机</a> <div>对接的网易云信微信IMSDK，在h5上能建立起连接，在手机端不行，截图是h5的链接，下面是app的日志：20:10:34.247连接websocket参数"wss://wlnimsc0.netease.im/socket.io/1/websocket/378166b5-af18-4372-a0a5-05aee5a1d882"atuni-app:///sdk/yunxin-wx/vendors/NI</div> </li> <li><a href="/article/1771859536957734912.htm" title="JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？" target="_blank">JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个简单的代码示例，展示了HTML、CSS和JavaScript是如何一起工作的：HTML,CSS,JavaScriptExample/*在HTML文档内使用内联CSS*/.greeting{color:blue;font-size:24px;}Hello,素材8网，www.sucai8.cnChangeText//在HTML文档内使用内联JavaScriptdocument.addEven</div> </li> <li><a href="/article/1771855371036590080.htm" title="随笔：一件尴尬的小事" target="_blank">随笔：一件尴尬的小事</a> <span class="text-muted">Doubt_Fact</span> <div>今天下午，朋友找我帮忙，想让我帮忙写一个随机点名的程序，我满口答应了下来，不过我不怎么会写窗口应用，就问他可不可以以网页代替，他同意了。我便写了一个html文件，除了中间遇到一个小插曲，一个缺少的英文“,”被漏掉了，到最后一直无法正常显示……在完成后，我到网页上看到了一种把网页制作成程序的方法，只需利用程序nativefier来操作，这个程序最后基于Node.js。我又很快在我的windows机器</div> </li> <li><a href="/article/1771649715369213952.htm" title="【大咖力荐新手必备】软件开发入门，这300篇文章就够了！" target="_blank">【大咖力荐新手必备】软件开发入门，这300篇文章就够了！</a> <span class="text-muted">高校俱乐部</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91/1.htm">软件开发</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B%E5%BF%85%E5%A4%87/1.htm">新手必备</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BC%96%E7%A0%81/1.htm">数据编码</a><a class="tag" taget="_blank" href="/search/IP/1.htm">IP</a> <div>小编在这里根据知识图谱整理了CSDN站内的优质文章300篇，帮助见习工程提升技术能力、实现系统化学习！基础IT技术文章300篇大合集包含：【信息/编码】进制转换25篇、数据编码25篇；【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇；【程序逻辑】JavaScript29篇、常用算法37篇；【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助</div> </li> <li><a href="/article/1771578465921859584.htm" title="python flask 表单_python中flask应用（表单处理）" target="_blank">python flask 表单_python中flask应用（表单处理）</a> <span class="text-muted">weixin_39771260</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E5%8D%95/1.htm">表单</a> <div>本篇文章给大家带来的内容是关于python中flask应用(表单处理)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、为什么使用Flask-WTF？request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。尽管Flask的request对象提供的支持足以处理web表单，但依然有许多任务会变得单调且重复。表单的HTML代码</div> </li> <li><a href="/article/1770882642342903808.htm" title="Java基础知识总结（下）" target="_blank">Java基础知识总结（下）</a> <span class="text-muted">Yonagi833</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E7%BB%8Fand%E5%85%AB%E8%82%A1/1.htm">面经and八股</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><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><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>本文部分内容节选自JavaGuide,地址:https://javaguide.cn/java/basis/java-basic-questions-03.html基础（上）→基础（中）→基础（下）异常Java异常类层次图概览Exception和Error有什么区别？在Java中，所有的异常都有一个共同的祖先java.lang包中的Throwable类.Throwable类有两个重要的子类:Exc</div> </li> <li><a href="/article/1770878118320472064.htm" title="项目里面引入字体包react" target="_blank">项目里面引入字体包react</a> <span class="text-muted">前端小灰灰</span> <div>项目里面引入字体包：①字体包放在public目录下，②新建一个font.css文件，//font.css@font-face{font-family:AlibabaSans;src:url('./font/AlibabaSans-Black.otf');}③在HTML文件全局引入④然后在less里面就能使用了：例：font-family:AlibabaSans;</div> </li> <li><a href="/article/1770410083927261184.htm" title="CSS-DAY2" target="_blank">CSS-DAY2</a> <span class="text-muted">i330.</span> <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>CSS-DAY22024/2/4Emmet语法快速生成HTML结构语法如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div如果有父子级关系的标签，可以用>比如ul>li就可以了如果有兄弟关系的标签，用+就可以了比如div+p如果生成带有类名或者id名字的，直接写.demo或者#twotab键就可以了（默认是div，如需修改其他标签只需在.之前加上标签名即可，如p.color</div> </li> <li><a href="/article/1770408572249767936.htm" title="问了一下 GPT--当前基于 React + TypeScript 的生态中一名前端工程师需要具备哪些能力？" target="_blank">问了一下 GPT--当前基于 React + TypeScript 的生态中一名前端工程师需要具备哪些能力？</a> <span class="text-muted">zoe_ya</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>在当前基于React+TypeScript的生态中，你需要掌握一系列的技能和知识，以构建现代化、高效能且可维护的前端应用程序。以下是一些关键领域的知识和技能点：基础知识HTML/CSS/JavaScript:理解语义化的HTML、CSS布局和定位技术以及现代JavaScript（ES6+）的特性。TypeScript:掌握TypeScript的基本语法、类型系统以及如何在React项目中使用Typ</div> </li> <li><a href="/article/1770381258401054720.htm" title="react 和vue区别" target="_blank">react 和vue区别</a> <span class="text-muted">小王学前端️</span> <a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</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>React和Vue是两个非常流行的前端JavaScript框架，它们有许多相似之处，但也有一些关键的区别：设计理念：React更倾向于函数式编程，推崇组件的纯粹性和可预测性，而Vue则更倾向于易用性和灵活性，提供了更多的内置特性和语法糖。模板vsJSX：Vue使用基于HTML的模板语法，这使得开发者可以快速上手。而React使用JSX，它是JavaScript的语法扩展，允许在JavaScript</div> </li> <li><a href="/article/1770286855061831680.htm" title="【构建工具】PostCSS快速配置" target="_blank">【构建工具】PostCSS快速配置</a> <span class="text-muted">古狼_guwolf</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/postcss/1.htm">postcss</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>1.安装依赖包npmi-Dpostscsspostcss-clinpmi-Dautoperfixerpostcss-preset-envnpmi-Dstylelintstylelint-config-standardnpmi-Dpostcss-pxtorem//执行命令npxpostcssstyle.css-odist.csspostcss//PostCSS核心包postcss-cli//Post</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程序设计基础知识点期末总结