位置: IT常识 - 正文
HTML基础知识点(html基础总结)
编辑：rootadminHTML基础知识点 1、HTML基础1.1、什么是网页？
本文链接地址:https://www.jiuchutong.com/zhishi/292335.html
转载请保留说明！
推荐整理分享HTML基础知识点(html基础总结)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:html 基础,html 基础,html相关基础概念,html基础教程,html基础总结,HTML基础知识点,html基础总结,html基础总结,内容如对您有帮助，希望把文章链接给更多的朋友！
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。
1.2、什么是HTML？HTML 指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。
1.3、常用的浏览器有哪些？常用的五大浏览器有：IE浏览器、火狐浏览器（Firefox）、g谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
浏览器内核备注IETridentIE、猎豹安全浏览器、360急速浏览器、百度浏览器FirefoxGecko火狐浏览器内核SafariWebkit苹果浏览器内核Chrome/OperaBlinkBlink其实是Webkit的分支1.4、什么是web标准？web 标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。
1.5、web标准的构成标准作用结构结构用于对网页元素进行整理和分类，主要指的是HTML表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS行为行为是指网页模型的定义及交互的编写，主要指的是Javascript1.6、web标准的好处有哪些？提高兼容性：对于浏览器开发商和web程序开发人员在开发新的应用程序时遵守指定的标准更利于web的发展。提高开发效率：开发人员按照web标准制作网页，这样对于开发者来说就更简单了，可以很容易了解彼此的代码。跨平台：使用web标签，将确保所有浏览器正常的显示网页，无需费时重写。加快网页解析速度：遵守web标准可以使网页更利于搜索引擎搜索。易于维护：页面的样式和布局信息保存在单独的CSS文件中，想改变页面外观时，仅需要修改CSS文件即可。2、HTML基本标签2.1、HTML页面固定结构<html> <head> <title>网页的标题</title> </head> <body> 网页的主题内容 </body></html>html标签：网页的整体head标签：网页的头部body标签：网页的身体title标签：网页的标题2.2、HTML标签分类2.2.1 按闭合特征分类闭合标签：由开始标签和结束标签共同组成，成对出现；常见的闭合标签有<div></div><p></p>、<span></span>等。标签之间的关系可以存在并列及嵌套关系。单标签：指没有内容的标签，在开始标签中自带闭合标识符。常见的单标签有<img/>、<hr/>、<link/>、<meta/>、<input/>、<br/>等。2.2.2 按显示模式分类块级元素：块级元素是指本身属性为display: block的元素。行内元素：行内元素是指本身属性为display: inline的元素，其宽度随着元素的内容变化而变化，也叫内联元素。行内块元素：行内块级元素是指本身属性为display: inline-block的元素块级元素特点：
每一个块级元素独占一行，从上到下排布。块级元素可以直接控制宽高。不设置宽度的情况下，块级元素的宽度是其父元素内容的宽度。不设置高度的情况下，块级元素的高度是他本身内容的高度。常见的块级元素：
标签描述div常见的块级容器，也是css和layout的主要标签h1~h6一二三四五六级标题hr水平分割线menu菜单列表ol、ul、li有序列表、无序列表、列表项dl、dt、dd自定义列表、定义分类、类项描述table表格address定义地址p段落form交互表单行内元素特点：
行内元素会和其他元素从左到右的显示在一行。行内元素不能直接设置宽高，只可以设置内外边距的水平方向的值。也就是说，对行内元素设置margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的。垂直方向的margin和padding是无效的。行内元素只能容纳文本或者其他行内元素，不允许在行内元素中嵌套块级元素行内元素的宽高是由内容本身大小决定的。常见行内元素：
标签描述a锚点，链接标签span常用的行内标签容器，定义文本内区块sup上标文本sub下标文本strong加粗ins下划线em倾斜del删除labelinput元素的标注行内块级元素特点：
和其他行内或行内块级元素放置在同一行上元素的宽高和内外边距都可以设置常见行内块级元素：
标签描述button按钮input输入框textarea多行文本输入框img图片select下拉列表3、路径的介绍绝对路径：指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如：D:\BaiduNetdisk\BaiduNetdisk.exe相对路径：从当前文件开始出发找目标文件的路径。3.1、 相对路径的三种情况同级目录：直接写目标文件的名字，vscode在前面加./快速查找下级目录：直接写文件夹名/目标文件名字！，vscode在前面加在前面加./快速查找上级目录：…/目标文件的名字4、HTML媒体和链接4.1、 img图片标签属性说明src指定需要展示的图片路径alt替换文本，当图片加载失败时，才显示的文字title提示文本，当鼠标悬停时，才显示的文字width图片的宽度height图片的高度4.2 audio音频标签属性说明src指定需要播放的音频路径controls显示播放的控件autoplay自动播放（部分浏览器不支持）loop循环播放4.3 video视频标签属性说明src指定需要播放的视频路径controls显示播放的控件autoplay自动播放（谷歌浏览器中需要配合muted实现静音播放）loop循环播放4.4 a链接标签介绍属性说明href目标网页的路径target跳转目标网页的打开形式。_self：默认值，在当前窗口跳转；_blank：在新窗口中跳转5、列表标签5.1、 无序列表标签名说明ul表示无序列表的整体，用于包裹li标签li表示无序列表的每一项，用于包含每一行的内容代码示例
<ul> <li>香蕉</li> <li>苹果</li> <li>凤梨</li> <li>葡萄</li> <li>桃子</li></ul>效果
香蕉苹果凤梨葡萄桃子5.2、 有序列表标签名说明ol表示有序列表的整体，用于包裹li标签li表示有序列表的每一项，用于包含每一行的内容代码示例
<ol> <li>斗破苍穹</li> <li>斗罗大陆</li> <li>遮天</li> <li>盘龙</li> <li>仙逆</li></ol>效果
斗破苍穹斗罗大陆遮天盘龙仙逆5.3、 自定义列表标签名说明dl表示自定义列表的整体，用于包裹dt/dd标签dt表示自定义列表的主题dd表示自定义列表的针对主题的每一项内容代码示例
<dl> <dt>购物指南</dt> <dd>购物流程</dd> <dd>会员介绍</dd> <dd>生活旅行</dd> <dd>常见问题</dd></dl>效果
购物指南购物流程会员介绍生活旅行常见问题6、table表格6.1、 表格的标签标签名说明table表格整体，可用于包裹caption、thead、tbody、tfoot或直接包裹多个trcaption表格整体大标题，默认在表格整体顶部居中位置显示thead表格头部，用于包裹thtbody表格主体，用于包裹tdtfoot表格底部，用于包裹tdtr表格每行，可用于包裹th,tdth表格小标题，通常用于表格第一行，默认内部文字加粗并且居中显示td表格单元格，可用于包裹内容代码示例
<table> <caption>成绩单</caption> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> </thead> <tbody> <tr> <td>诸葛亮</td> <td>100分</td> <td>98分</td> <td>99分</td> </tr> <tr> <td>司马懿</td> <td>97分</td> <td>98分</td> <td>99分</td> </tr> <tr> <td>周瑜</td> <td>97分</td> <td>96分</td> <td>98分</td> </tr> <tr> <td>贾诩</td> <td>97分</td> <td>98分</td> <td>99分</td> </tr> <tr> <td>郭嘉</td> <td>99分</td> <td>99分</td> <td>99分</td> </tr> </tbody> <tfoot> <td>平均分</td> <td>98分</td> <td>98.2分</td> <td>98.8分</td> </tfoot></table>效果
成绩单姓名语文数学英语诸葛亮100分98分99分司马懿97分98分99分周瑜97分96分98分贾诩97分98分99分郭嘉99分99分99分平均分98分98.2分98.8分6.2、 表格相关属性属性名属性值效果border数字边框宽度width数字表格宽度height数字表格高度alignleft、right、center表格水平位置，也可以用于tr和td中，表示的是单元格内容的水平位置bordercolorrbg、rbga、十六进制边框的颜色cellpadding单元格的内容和边框之间的距离cellspacing两个单元格之间距离的大小bgcolor表格的背景色，也可以用于tr和tdbackground表格的背景图片，也可以单独的用于某一个单元格6.3、 表格合并单元格属性名属性值说明rowspan合并单元格的个数跨行合并，将多行的单元格垂直合并colspan合并单元格的个数跨列合并，将多列的单元格水平合并代码示例
<table> <caption>成绩单</caption> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> </thead> <tbody> <tr> <td>诸葛亮</td> <td>100分</td> <td rowspan="2">98分</td> <td rowspan="2">99分</td> </tr> <tr> <td>司马懿</td> <td rowspan="3">97分</td> </tr> <tr> <td>周瑜</td> <td>96分</td> <td>98分</td> </tr> <tr> <td>贾诩</td> <td>98分</td> <td>99分</td> </tr> <tr> <td>郭嘉</td> <td align="center" colspan="3">99分</td> </tr> </tbody> <tfoot> <td>平均分</td> <td>98分</td> <td>98.2分</td> <td>98.8分</td> </tfoot></table>效果
成绩单姓名语文数学英语诸葛亮100分98分99分司马懿97分周瑜96分98分贾诩98分99分郭嘉99分平均分98分98.2分98.8分7、form表单7.1、 input系列标签的基本介绍标签名type属性值说明inputtext文本框，用于输入单行文本inputpassword密码框，用于输入密码inputradio单选框，用于多选一inputcheckbox多选框，用于多选多inputfile文件选择，用于之后上传文件inputsubmit提交按钮，用于提交表单inputreset重置按钮，用于重置表单inputbutton普通按钮，默认无功能，之后配合js添加功能7.2、 button系列标签的基本介绍标签名type属性值说明buttonsubmit提交按钮。点击之后提交数据给后台服务器buttonreset重置按钮。点击之后恢复表单默认值buttonbutton普通按钮。默认无功能7.3、 select下拉菜单标签标签组成：
select标签：下拉菜单的整体option标签：下拉菜单的每一项 常见属性：selected：下拉菜单的默认选中代码示例
<select> <option>长海</option> <option selected>重庆</option> <option>西安</option></select>效果
长海 重庆 西安
7.4、 textarea文本域标签常见属性：
cols：规定了文本域内可见宽度rows：规定了文本域内可见行数7.5、 label标签使用场景：常用于绑定内容与表单标签的关系
使用方法一
使用label标签把内容包裹起来在表单标签上添加id属性在label标签的for属性中设置对应的id属性值使用方法二
直接使用label标签把内容和表单标签一起包裹起来需要把label标签的for属性删除即可8、常见字符实体显示结果描述实体名称' '空格 <小于号<>大于号>&和号&"引号"’撇号'¢分（cent）¢£榜（pound）£¥元（yen）¥€欧元（euro）€§小节§©版权（copyright）©9、有语义的布局标签标签名语义header网页头部nav网页导航footer网页底部aside网页侧边栏section网页区块article网页文章上一篇：JS-获取网页滑动距离，并实时监听(js获取网页链接)
下一篇：【爬坑之路一】windows系统下更新升级node版本【亲测有效】(爬坑图片卡通)
