html教程

必须掌握的html小知识

零下一度

May 05, 2017 pm 01:55 PM

0fdc846418fc8c8dc538f7e85e5ede0c

2）操作思想：为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。

标签就相当于一个容器。对容器中的数据进行操作，就是在不断的改变容器的属性值。

二、列表

列表是一种条理化地排列信息的方法。它把内容一条条地水平排列显示，直观、清晰。而它也不同于表格，一般列表没有表格复杂。

1、无序列表

<span style="font-size:14px;"><ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul></span>

2、有序列表

<span style="font-size:14px;"><ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol></span>

3、定义列表

自定义列表以 5c69336ffbc20d23018e48b396cdd57a 标签开始。每个自定义列表项以 73de882deff7a050a357292d0a1fca94 开始。每个自定义列表项的定义以 67bc4f89d416b0b8236eaa5f43dee742 开始。

<span style="font-size:14px;"><dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl></span>

结果：

Coffee
Black hot drink
Milk
White cold drink

4、两个可带属性的复杂列表标记ul和ol

1）ff6d136ddc5fdfeffaf53ff6ee95f185和929d1f5ca49e04fdcb27f9465b944689

此标记可以带属性，变成9c944e05072d64dbc8f9d46833952a62的形式，x有如下几种:

x为disc：条目以符号“●”引导。

x为circle：条目以符号“○”引导。

x为square：条目以符号“■”引导。

2） c34106e0b4e09414b63b2ea253ff83d6与f6f112ef45f603be226bc581f9dd5e90

此标记会自动给条目排序并加上序号，也可带有属性：

a、 6e285ff0354460ade94fe5cfce2c9604

x为A：以大写字母排序。如A，B，C，D等。

x为a：以小写字母排序。如a，b，c，d等。

x为I：以大写罗马数字排序。如I，II，III，IV等。

x为i：以小写罗马数字排序。如i，ii，iii，iv等。

x为1：以阿拉伯数字排序。如1，2，3，4等。

b、6a8610d0c6fe60386ac5a9df8f769bd7

n是一个数字，此标记符表示重新定义的起始号。

<span style="font-size:14px;"><html>
<body>

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>
</span>

结果：

三、表格

使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。表

格一般由以下几部分组成：表格名称、表格栏及表中数据。

1、border属性

使用表格的这一属性可以给表格加上框线。如bb643a387a53979effdf2ff19129bb42表示表格是有表格线的，border的线宽默认为1。没有写border则表示表格是没有表格线的。一般用

14bbc0aaaaad3969760ccad65ba9e9bb来设置“有线表格”和边框宽度。n是一个具体的数字，用来指定宽度的大小，单位是“像素”，默认为没有边框。当n为0时，也没有边框。

2、cellspacing属性

这一属性可以用来设置有线表格的单元格线的宽度，用法为f44c1406c6284e61a5d41d1123d7a063。n是一个具体的数值，单位是像素。（也就是相邻单元格线之间的距离）

3、cellpadding属性

这一属性可以用来设置单元格线与数据之间的距离，用法为61047ea7ff7dcd975046b73917d37544。n为数值，单位是像素，默认值是1。（也就是每个单元格边线和当中数据的间

隔）

4、63bd76834ec05ac1f4c0ebbeaafb0994和37eb775bb5a9e6f3d094e96a76117fe8

这是一对用来指明表格标题的标记，常用格式如：63bd76834ec05ac1f4c0ebbeaafb0994 表格标题内容 37eb775bb5a9e6f3d094e96a76117fe8 （默认在表格框上，且相对于表格宽度居中）

5、b4d429308760b6c2d20d6300079ed38e和01c3ce868d2b3d9bce8da5c1b7e41e5b

这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在a34de1251f0d9fe1e645927f19a896e8与fd273fcf5bcad3dfdad3c41bd81ad3e5之中使用。由此标记指定的栏目，文字会突出显示。

6、nowrap属性可用于b4d429308760b6c2d20d6300079ed38e及b6c5a531a458a2e790c1fd6421739d1c

超过一行，浏览器默认会自动换行显示。使用该属性进行屏蔽。

四、超文本链接

href中不仅仅只能用file和http协议，其它协议也可以的，如thunder,mailto

1、页面链接

用HTML创建超文本链接需要使用72d4ced2cc960a6bc2541984146fdaaa标记符（结束标记符63505a6f727f70c8bd4066f3066dcb9d不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以

创建出不同类型的超链接。

在HTML文件中用链接指针指向一个目标。其基本格式为：15fb18337c82ffddbf1ec297d743dbaf标记超文本链接信息5db79b134e9f6b82c0b36e0489ee08ed

2、本地链接

超文本链接指向自己的计算机中的某一个文件，叫本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用72d4ced2cc960a6bc2541984146fdaaa标记

符的name属性。格式如下：ddfd78ba1616ae241ad6d8ab0c3142a3此处创建了一个标签5db79b134e9f6b82c0b36e0489ee08ed

3、电子邮件链接

如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链

接标记中插入mailto值。如:2e4a5357a1ff9327065ec46ac0232608管理员信箱5db79b134e9f6b82c0b36e0489ee08ed

4、迅雷下载链接

e7fd62761b7b3aff84eccce810ee7e13 a.avi 5db79b134e9f6b82c0b36e0489ee08ed

5、超链接字体的颜色

1）link属性：设置超链接文字的颜色，默认为蓝色，格式：5e3a68dca1c8fdc31fd0d2197f130233

2）vlink属性：设置鼠标指向超链接文字时，该链接文字的颜色，默认为红色，使用格式为：28a40992f46553b6d58b3af41c9a0f62

6、自定义超链接

c7ba17ad7dac7734aa48be6d8d0bbeb4 自定义超链接(取消默认点击效果，触发自定义事件) 5db79b134e9f6b82c0b36e0489ee08ed

给href的属性值赋：javascript:void(0)，以屏蔽默认点击效果

7、href默认的协议是file，因此如果写成href=""，则是打开当前html文件所在的文件夹

target="_blank"这个属性可以让超链接的目标在另一个窗口中显示出来

五、图像

图像地图：dab9f699790ab0922e596ecb9f6677d5

应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。map标签要和img标签联合使用

<img src="Sunset.jpg" alt="图片说明文字" usemap="#map" />
<map >
    <area shape="rect" coords="50,59,116,104" href="1.html" />
    <area shape="circle" coords="118,203,40" href="2.html" />
</map>

点击图片Sunset.jpg上面以（50,59）为矩形左上点，宽116，高为104区域时，链接到1.html页面；同理点击上面以（118,203）为圆心，40为半径区域时，链接到

2.html。

六、表单提交方式（get/post）

1、两种方式的区别

1) get提交将数据显示在地址栏，对于敏感信息不安全。post提交不显示在地址栏，对于敏感信息安全

2) 地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。而post可以提交大体积数据。

3) 对提交数据的封装方式不同。get将提交数据封装到了http消息头的第一行即请求行中。而post将提交的数据封装到请求体(请求数据)体中。

2、表单提交方式与乱码问题

无论是get还是post方式，对于Tomcat服务器端，默认的解码方式是ISO8859-1，因此中文会出现乱码。解决：通过用ISO8859-1进行编码，再用相应的中文码

表进行解码即可。

如果是post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效即该方法只设置数据体的编码方式。因此，通常表

单使用post提交，因为这样编码更方便。

3、客户端(浏览器)与服务端交互的三种方式：

1) 地址栏中输入url地址 ------ get方式

2) 超连接 ------ get方式

3) 表单 ------ get和post方式

七、其他标签

1、e8e496c15ba93d81f6ea4fe5f55a2244

name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

http-equiv 属性：模拟HTTP协议的响应消息头。

2、2cdf5bf648cf2f33323966d7f58a7f3f

rel 属性：描述目标文档与当前文档的关系。

type 属性：文档类型。

media：指定目标文档在哪种设备上起作用。

3、ed126914ed1419bab26abf7cf307b7b9

滚动条

direction 属性：left right down up

behavior 属性：scroll（重复滚动） alternate（来回滚动） slide（不重复滚动）

loop 属性：滚动的次数 -1表示一直滚动

scrolldelay属性：设置活动字幕滚动两次之间的延迟时间

4、e03b848252eb9375d56be284e690e873

可以将文本内容按在代码区的样子显示在页面上。

注：pre标签对包含html标签的文字内容无法实现按排版格式显示

5、几个纯数据封装标签

p span p

6、标签分为两大类

1) 块级标签(元素)：标签结束后都有换行。font span img input select a

2) 行内标签(元素)：标签结束后没有换行。 p p dl ol ul table title

7、lable标签

给元素定义快捷键

<label for="user" accesskey="u">用户名(u)</label>
<input type="text" id="user" />

点击用户名时，会自动跳到user的编辑框中

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上是必须掌握的html小知识的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles