一、HTML概述

HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是HTML的语句。

1、HTML文档的基本结构

所有页面都应该至少包含这些部分，由于浏览器容错性强，所以即使不包含也能正常显示，但是最好还是写完全了。

2、如何编写一个HTML文件

HTML文件是一个ASCII格式的文件。它可以在任何一种可以编辑ASCII文件的编辑器中编辑（如果HTML文件中包含汉字，则要在支持汉字的编辑器中编辑）。

3、HTML文件的调试

直接用浏览器打开，检查运行结果

4、HTML文件的内容

◇ 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。体部分是真正存放页面数据的地方。

◇ 多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

◇ 想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。

◇ 属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

5、HTML文件中的标签

1）格式：<标签名属性名=‘属性值’> 数据内容或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、定义列表

自定义列表以

开始。每个自定义列表项的定义以

开始。

<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）

和

此标记可以带属性，变成

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

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

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

2）

与

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

a、 < ol type=" x ">

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、

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属性

使用表格的这一属性可以给表格加上框线。如

2、cellspacing属性

这一属性可以用来设置有线表格的单元格线的宽度，用法为

3、cellpadding属性

这一属性可以用来设置单元格线与数据之间的距离，用法为

隔）

4、

这是一对用来指明表格标题的标记，常用格式如：

5、

这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在

文字会突出显示

6、nowrap属性可用于

和
和
及	超过一行，浏览器默认会自动换行显示。使用该属性进行屏蔽。四、超文本链接 href中不仅仅只能用file和http协议，其它协议也可以的，如thunder,mailto 1、页面链接用HTML创建超文本链接需要使用标记符（结束标记符不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。在HTML文件中用链接指针指向一个目标。其基本格式为：标记超文本链接信息 2、本地链接超文本链接指向自己的计算机中的某一个文件，叫本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用标记符的name属性。格式如下：此处创建了一个标签 3、电子邮件链接如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。如:管理员信箱 4、迅雷下载链接 a.avi 5、超链接字体的颜色 1）link属性：设置超链接文字的颜色，默认为蓝色，格式： 2）vlink属性：设置鼠标指向超链接文字时，该链接文字的颜色，默认为红色，使用格式为： 6、自定义超链接自定义超链接(取消默认点击效果，触发自定义事件) 给href的属性值赋：javascript:void(0)，以屏蔽默认点击效果 7、href默认的协议是file，因此如果写成href=""，则是打开当前html文件所在的文件夹 target="_blank"这个属性可以让超链接的目标在另一个窗口中显示出来五、图像图像地图：应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。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、 name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。 http-equiv 属性：模拟HTTP协议的响应消息头。 2、 rel 属性：描述目标文档与当前文档的关系。 type 属性：文档类型。 media：指定目标文档在哪种设备上起作用。 3、滚动条 direction 属性：left right down up behavior 属性：scroll（重复滚动） alternate（来回滚动） slide（不重复滚动） loop 属性：滚动的次数 -1表示一直滚动 scrolldelay属性：设置活动字幕滚动两次之间的延迟时间 4、 </span></p><p><span style="font-size:14px">可以将文本内容按在代码区的样子显示在页面上。<br/></span></p><p><span style="font-size:14px">注：pre标签对包含<a href="http://www.php.cn/code/427.html" target="_blank">html标签</a>的文字内容无法实现按排版格式显示</span></p><p><span style="font-size:14px">5、几个纯数据封装标签</span></p><p><span style="font-size:14px">p span p</span></p><p><span style="font-size:14px">6、标签分为两大类 <br/></span></p><p><span style="font-size:14px">1) 块级标签(元素)：标签结束后都有换行。font span img input select a</span></p><p><span style="font-size:14px">2) 行内标签(元素)：标签结束后没有换行。 p p dl ol ul table title<br/></span></p><p><span style="font-size:14px">7、lable标签</span></p><p><span style="font-size:14px">给元素定义快捷键 </span></p><p><span style="font-size:14px"></span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><label for="user" accesskey="u">用户名(u)</label> <input type="text" id="user" /> 登录后复制点击用户名时，会自动跳到user的编辑框中【相关推荐】 1. 免费html在线视频教程 2. html开发手册 3. php.cn原创html5视频教程以上是必须掌握的html小知识的详细内容。更多信息请关注PHP中文网其他相关文章！相关标签： html，知识来源：php.cn 上一篇：简单介绍HTML 元素中语法及空元素下一篇：网页制作（html）的基本知识（一）html初识及属性本站声明本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn 作者最新文章 NameValuePair方式传参数实例教程 1970-01-01 08:00:00 使用dom4j解析xml文档实例 1970-01-01 08:00:00 Catalog Service - 解析微软微服务架构实例代码 1970-01-01 08:00:00 .net Elasticsearch入门实例详解 1970-01-01 08:00:00 详细介绍Spring boot 添加jsp支持配置的实例 1970-01-01 08:00:00 JS怎么检测window.open打开的窗口是否关闭？ 1970-01-01 08:00:00 分享一个sqlyog连接数据库乱码的问题以及解决方法 1970-01-01 08:00:00 使用Java中可变长参数的实例 1970-01-01 08:00:00 最新的高德地图API WEB开发实例教程 1970-01-01 08:00:00 AJAX的优点和缺点 1970-01-01 08:00:00 最新问题 PHP邮件发送器无法正常工作：没有错误日志，消息显示已发送，但未收到我的网络服务器的php错误日志中没有收到任何错误日志。我尝试过多个不同的SMTP服务器（我知道的其他电子邮件提供商也可以使用）。这是我的HTML表单：<formaction=... 来自于 2023-11-10 15:02:39 0 1 218 JavaScript中如何获取CSS/HTML命名颜色的RGB值我已经建立了一个名为[name-rgb]的Javascript对象。你的基本:namedColors={AliceBlue:[240,248,255],AntiqueWhite:[... 来自于 2023-11-06 09:05:50 0 2 210 操作方法：使用 TailwindCSS + Vue3 + Vite 切换深色模式我是Vite/Vue3的初学者，目前我面临一个问题，我需要社区的综合知识。我创建了一个Vite/Vue3应用程序并安装了TailwindCSS：npmcreatevite@late... 来自于 2023-11-01 12:05:00 0 1 272 如何在PHP中构建跨数据库查询？在我们的上一集（如何在MySQL中构建跨数据库查询）中，我学习了如何在MySQL中构建跨数据库查询。这很有效，但是当我们的英雄尝试在PHP中使用这些新发现的知识时，他发现他最好的朋... 来自于 2023-10-22 11:40:00 0 2 311 如何使用 JavaScript 或 jQuery 获取图像的自然尺寸？到目前为止我有这个代码：varimg=document.getElementById('draggable');varwidth=img.clientWidth;varheight... 来自于 2023-10-21 13:53:08 0 2 275 相关专题更多> html版权符号 html在线编辑器 html网页制作 html空格 html是什么 html字体大小怎么设置 html转txt html文本框代码怎么写热门推荐 url是什么意思？ DOM是什么意思如何改变图片大小 HTML中如何将字体加粗 html图片大小如何设置热门教程更多> 相关教程热门推荐最新课程最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课) 1403058 php入门教程之一周学会PHP 4230849 JAVA 初级入门视频教程 2418257 小甲鱼零基础入门学习Python视频教程 498142 PHP 零基础入门教程 833967 最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课) 1403058次学习 JAVA 初级入门视频教程 2418257次学习小甲鱼零基础入门学习Python视频教程 498142次学习 Web前端开发极速入门 214170次学习零基础精通 PS 视频教程 858870次学习【web前端】Node.js快速入门 4671次学习国外Web开发全栈课程全集 3620次学习 Go语言实战之 GraphQL 3109次学习 550W粉丝大佬手把手从零学JavaScript 559次学习 python大神Mosh，零基础小白6小时完全入门 16077次学习最新下载更多> 网站特效网站源码网站素材前端模板 [表单按钮] jQuery企业留言表单联系代码 [播放器特效] HTML5 MP3音乐盒播放特效 [菜单导航] HTML5炫酷粒子动画导航菜单特效 [表单按钮] jQuery可视化表单拖拽编辑代码 [播放器特效] VUE.JS仿酷狗音乐播放器代码 [html5特效] 经典html5推箱子小游戏 [图片特效] jQuery滚动添加或减少图片特效 [相册特效] CSS3个人相册封面悬停放大特效 [前端模板] 家居装潢清洁维修服务公司网站模板 [前端模板] 清新配色个人求职简历引导页模板 [前端模板] 设计师创意求职简历网页模板 [前端模板] 现代工程建筑公司网站模板 [前端模板] 教育服务机构响应式HTML5模板 [前端模板] 网上电子书店商城网站模板 [前端模板] IT技术解决互联网公司网站模板 [前端模板] 紫色风格外汇交易服务网站模板 [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG) [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG) [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS) [PNG素材] 金色的毕业帽矢量素材(EPS+PNG) [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG) [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG) [banner图] 扁平风格的植树节banner矢量素材(AI+EPS) [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG) [前端模板] 家居装潢清洁维修服务公司网站模板 [前端模板] 清新配色个人求职简历引导页模板 [前端模板] 设计师创意求职简历网页模板 [前端模板] 现代工程建筑公司网站模板 [前端模板] 教育服务机构响应式HTML5模板 [前端模板] 网上电子书店商城网站模板 [前端模板] IT技术解决互联网公司网站模板 [前端模板] 紫色风格外汇交易服务网站模板关于我们免责声明 Sitemap PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！