HTML、CSS、JS的基础知识点有哪些
发表于：2025-01-22 作者：千家信息网编辑
千家信息网最后更新 2025年01月22日，本篇内容介绍了"HTML、CSS、JS的基础知识点有哪些"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成
千家信息网最后更新 2025年01月22日HTML、CSS、JS的基础知识点有哪些,<meta>,<link>,<style>,<script>,<base></p><h4>文本元素：</h4><p>作用：文本时网页上的重要组成部分，直接书写的文本会用浏览器默认的样式显示</p><p>文本元素列表：是包含在文本元素中的文本，则会被显示为元素所拥有的样式</p><h4>HTML标题：</h4><p>标题是通过<h2>~<h7>标签进行定义的，目的是为了能够以醒目的方式显示，<h2>定义最大标题，<h7>定义最小标题</p><p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H0qWULYZ-1613216632726)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192107880.png)]</p><h4>HTML段落：</h4><p>段落是通过<p>标签进行定义的，<p>元素提供了结构化文本的一种方式，<p>元素对中的文本会以单独的段落显示，与前后文本换行分开，添加一段额外的垂直空白距离，作为行间距</p><h4>HTML列表：</h4><p>列表是将具有相似特征或先后顺序的几行文字进行对齐排列，所有列表都是由列表类型和列表项组成</p><p>列表类型：</p><p>有序列表 <code><ol></code>：用于列出表面上有特定次序的一些项目，其中只能包含列表项<li></p><p>无序列表 <code><ul></code>：用于列出页面上没有特定次序的一些项目，也只能包含具体列表项元素<li></p><p>列表项：用来表示列表具体的内容 <li></p><h4>HTML列表嵌套：将列表元素嵌套使用，可以建多层列表</h4><p>HTML分区元素：</p><p>用于元素的一些分组，常用于页面布局，块分区元素<div></div>,行内分区元素<span></span></p><p>元素显示方式：</p><p>块级元素：默认情况下，块级元素独占一行，即元素前后都会自动换行，比如<p>,<div></p><p>行内元素：不会换行,与其他行内元素位于同一行</p><p><code><span></code>元素是内联元素,可用作文本的容器，无特定的含义</p><p><code><i></code>元素定义斜体字</p><p><code><em></code>定义着重文字</p><p><code><del></code>用来定义带删除线的文字</p><p><code><u></code>用来定义带下划线的文字</p><p>空格折叠：默认情况下，HTML中的多个空格，多个换行符会压缩成单个空格，即只显示一个空格</p><p>实体引用：空格： ；（小于号）<:< （大于号 ） >:>；</p><h4>HTML图像：</h4><p>使用<img>元素可以将图片添加到页面</p><p>语法：<img src="url" ></p><p>常用属性：width,height</p><p>src指的是"source",原属性的值是图像的URL地址，但是地址值分为绝对路径和相对路径</p><p>绝对路径：文件从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径后总能找到要连接的文件</p><p>相对路径：文件的位置是相对于当前的文件位置，包括目录名或指向一个可以从当前目录出发找到的文件</p><h4>HTML超链接：<a href ="url",target=""></h4><p>href 属性：链接地址 URL target 属性：目标的打开方式</p><p>锚点：文档中某行的一个记号，用于链接到文档中的某个位置</p><p>链接锚点：在锚点前加 # <a href ="#g1">内容</a></p><p>定义锚点：<a name="g1">内容</a></p><p>俩者需对应使用，前后呼应</p><h4>HTML表格</h4><p>表格是由<table>标签来定义的，通常用来组织结构化信息，是被称作单元格的矩形框，按照从左到右，从上到下的顺序排列在一起而形成的，表格的数据保存在单元格里</p><p>创建表格：<table></table></p><p>创建行：<tr></tr></p><p>创建列：<td></td></p><p>表格常用的属性：</p><p><code>border</code> 边框</p><p><code>width/height</code> 宽/高</p><p><code>align</code> 对齐方式</p><p><code>padding</code> 边框与文字之间的距离，内边距</p><p><code>cellspacing</code>：单元格之间的距离</p><p>跨行属性：rowspan 合并行 colspan 合并列</p><p>行分组：表格看分为3个部分，分别为：表头，表主题，表尾</p><pre lang="javascript"><table> <!--表头--> <thead> <tr> <th></th> </tr> </thead> <!--表主体--> <tbody> <tr> <td></td> </tr> </tbody> <!--表尾--> <tfoot> <tr> <td></td> </tr> </tfoot></table></pre><h4>HTML表单：</h4><p>表单是用于显示收集信息并提交信息到服务器，表单是一个包含表单元素的区域</p><p>俩要素：form元素，表单控件</p><p>表单是从浏览器向服务器传输数据的手段</p><p>表单元素：</p><p>定义表单使用成对的<form>标记，表示要将此元素中所涵盖的控件中的数据传入到服务器</p><p>主要属性：</p><p><code>action</code>：表单提交URL；</p><p><code>method</code>：数据提交方式；</p><p><code>enctype</code>：表单数据进行编码的方式</p><p>表单控件：由许多不同类型的控件，其是一种HTML元素，是信息输入项，包含</p><p>input元素（具有不同的外观）:文本框，密码框，单选框，按钮…</p><p>其他元素：标签，文本域，下拉选</p><p><strong>input元素</strong></p><p>文本框 <input type = "text"/></p><p>密码框：<input type = "password"/></p><p>主要属性：value：由访问者自由输入任何文本</p><p><code>Maxlength</code>：限制输入的字符数</p><p><code>Readonly</code>：设置文本控件的只读</p><p>单选框: <input type ="radio"/></p><p>复选框：<input type ="checkbox"/></p><p>属性：value：文本，当提交form时，选中单选按钮，则发送服务器</p><p>Name：实现分组，一组单选框或者复选框名称必须相同</p><p>Check：设置选中</p><p>提交按钮：<input type = "submit " value="提交"/>传送表单数据给服务器</p><p>重置按钮：<input type = "reset" value="重置"/>清空内容，并 设为最初默认状态</p><p>普通按钮：<input type = "button" value=""/>执行客户端脚本</p><p>隐藏域：<input type = "hidden"/>表单中包含但不希望用户所见</p><p>文件选择框：<input type = "file"/>选择上传的文件</p><p>其他元素：</p><p>标签：表单中的文本用于给控件设置显示名称</p><p>语法：<label for="控件ID">文本</label></p><p>属性：for：设置该文本所关联的控件ID，关联后点击标签等同于点击控件</p><p>文本域：多行文本框</p><p>语法：<textrea></textrea></p><p>属性：cols:指定文本域的列数；rows：指定文本域的行数； readonly：该文本域只读</p><p>下拉选</p><p>语法：</p><pre lang="javascript"><select> <option></option></select></pre><h3>CSS概述</h3><h4>什么是CSS?</h4><p>CSS是层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，样式通常储存在样式表中，CSS是HTML的化妆师</p><h4>如何使用CSS？</h4><p>内联样式：定义在单个HTML元素中</p><p>内部样式表 ：定义在HTML的头元素中</p><p>外部样式表：将样式定义在外部的CSS文件中（.css）,由HTML页面引用样式表文件</p><p>内联样式：定义在HTML元素的属性style里面</p><p>css语法：只需要将分号隔开的一个或多个属性作为元素的style属性值，属性值之间用冒号（:）连接，多个属性值之间用分号（;）隔开</p><p>内部样式表：在HTML的<head>元素内部添加<style>元素</p><p>外部样式表：样式定义在独立的CSS文件中，一个纯文本文件，后缀为.css,该文件只包含样式规则</p><p>使用方法：①创建外部样式表文件</p><p>②引用该样式文件</p><p><link rel="stylesheet" type="text/css" href="文件地址值"\></p><h4>CSS语法规范：</h4><p>CSS规则由俩个部分构成：选择器，以及一条或多条样式声明</p><p>CSS注释：CSS注释以 "/*" 开始, 以 "*/" 结束,</p><p>/*这是个注释*/</p><h4>CSS规则特性</h4><p>优先级：同一个元素若存在多个CSS规则，对应冲突的声明以优先级高者为准（就近原则）</p><p>层叠性：同一个元素若存在多个CSS规则，对于不冲突的声明可以叠加</p><p>继承性：父元素的CSS声明可以被子元素继承，如字体，颜色</p><h4>CSS选择器</h4><p>元素选择器：能通过元素名来选择 CSS 作用的目标</p><p>类选择器：能够附带 class 属性的元素都可以使用此样式声明，将元素的 class 属性设置为样式类名，可以将类选择器和元素选择器结合使用，以实现对某种元素的中不同样式的细分控制 (.class_name)</p><p>ID选择器：以一种独立于文档元素的方式，它仅作用于id属性的值 (#id_name)</p><p>选择器组：选择器声明为以逗号隔开的选择器列表，将一些相同的规则作用于多个元素</p><p>派生选择器：用来选择子元素</p><p>分类：后代选择器：选择某元素的后代（子孙）元素</p><p>子元素选择器：选择某元素的所有子元素</p><p>伪类选择器：用于设置同一个元素在不同状态下的样式</p><p>常用伪类:</p><p><code>:link</code>向未被访问的超链接添加样式</p><p><code>:visited</code> 向已被访问的添加样式</p><p><code>:active</code>:向未激活的元素添加样式</p><p><code>:hover</code>:当鼠标悬停到元素上方时，添加样式</p><p><code>:focus</code>:当元素获取焦点时，向该元素添加样式</p><p><code>border</code>：用来设置元素的边框</p><p>四边设置：border：width值 style值 color值</p><p>单边设置：border-left border-right border-top border-bottom</p><p>样式单位：%：百分比 in：英寸 cm：厘米</p><p>mm:毫米 pt 磅（1pt=1/72 in）</p><p>Px像素 1em 等于当前字体尺寸</p><p><code>Overflow</code>：当内容溢出元素边框时</p><p><code>Visible</code> 不裁剪内容，可显示在内容框外</p><p><code>Hidden</code> 裁剪内容，不提供滚动机制</p><p><code>Scroll</code> 裁剪内容，提供滚动机制</p><p><code>Auto</code> 如溢出，提供滚动</p><h4>Box框模型：</h4><p>元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。</p><p>内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置</p><ul class="list-paddingleft-2"><li><p>Margin - 清除边框区域。Margin没有背景颜色，它是完全透明</p></li><li><p>Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 `</p></li><li><p>Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响</p></li><li><p>Content - 盒子的内容，显示文本和图像</p></li></ul><h4>背景色：</h4><h4>background-color：用于为元素设置背景色，可接受任何合法的颜色值</h4><p>背景图片：</p><p><code>background-image</code>：设置背景图片，默认值为none，表示背景上没有放置任何图像，如需设置，则需要起始字符附带图像的url地址</p><p>默认情况下，背景图片是在水平和垂直方向上重复出现的</p><p><code>background-repeate</code>：可控制背景图片的平铺效果</p><p><code>repeate</code>：在水平和垂直方向重复</p><p><code>repeate-x</code>：在水平方向重复</p><p><code>repeate-y</code>：在垂直方向重复</p><p><code>no repeate</code>：仅显示一次</p><p><code>background-position</code>：用于改变背景图片在元素中的位置</p><h3>CSS文本格式化</h3><h4>控制字体：</h4><h4>font-family：value 1，value 2 指定字体</h4><p><code>font-size</code>：value 字体大小</p><p><code>font-weight</code>：normal/bold 字体加粗</p><p><code>color</code>：value 文本颜色</p><p><code>Text-align</code>：left/right/center 文本排列</p><p><code>Line-height</code>：value 行高</p><p><code>Text-indent</code>：value 首行文本缩进</p><h3>表格样式：</h3><h4>常用属性：表格同样使用box模型（边框 ，内边距，宽，高）以及文本格式化属性</h4><h4>表格特有属性：如果设置了单元格边框，相邻单元格边框 会单独显示，类似于双线边框</h4><p>border-collapse：合并相邻的边框，设置是否将表格的边框合并为一个边框</p><h4>显示方式：元素都有自己默认的选择方式</h4><p>块元素：从上到下显示，可以设置宽高 如：<P>,<div>,<h2></p><p>行内元素：从左到右显示，不能设置宽高，如：<span>,<a></p><p>行内块元素：从左到右显示，可以设置宽高，<input>,<img></p><p>除了默认显示效果外，可以用display属性，修改元素的显示方式</p><p>具体修改方式:</p><p>display：none 表示不显示该元素，释放其占用的空间</p><p>display：block 表示将元素的显示方式设置为块</p><p>display：inline 表示将元素的显示方式设置为行内元素</p><p>display：inline-block：表示将元素的显示方式设置为行内块元素</p><h3>定位：</h3><p>定义元素框对于其正常位置应该出现的位置或相对于父元素另一个元素相对于浏览器窗口本身的位置</p><p><strong>流定位</strong>：页面中的块级元素从上到下依次排列，每一个块级元素都会出现在新的一行，元素框之间的垂直距离，由框的垂直外边距计算得出</p><p>内联元素：在一行中从左到右，水平排列不需要换行，使用的是水平内边距，边框和外边距调整他们的间距</p><p><strong>浮动定位</strong>：将元素排除在普通流之外，将浮动元素放置在包含框的左边或者右边，浮动元素依旧包含于框之外，浮动框可以向左或者向右移动，直到外边缘碰到包含框或者另一个浮动框位为止，如需要设置框浮动在包含框的左边或者右边，可以通过float属性实现具体方向的移动</p><p>任何元素都是可以移动的 float：none/left/right</p><p>clear清除浮动所带来的影响：clear：none/left/right/both</p><p><strong>相对定位</strong>：元素原本所占的空间不释放，元素框会相对于原来的位置偏移某个距离，设置垂直或者水平，让元素相对于它的起点进行移动</p><h4>首先需要设置position属性，其值为relative，然后使用left/right/top/bottom设置具体的偏移量</h4><p><strong>绝对定位</strong>：将元素的内容从当前定位中清除，释放空间，并使用偏移量来固定元素的位置，相对于最近的祖先元素，若偏移元素没有已定位的元素，那么它的位置就是相对于body元素的位置</p><p>首先设置position属性，其值为absolute，然后使用left/right/top/bottom设置具体的偏移量</p><p><strong>固定定位</strong>：将元素的内容固定在页面的某个位置，元素从普通流中完全移出，不占用页面空间，当用户将页面向下滚动时，元素看不随着移动</p><p>首先设置position属性，其值为fixed，然后使用left/right/bottom/top设置具体的偏移量</p><p><strong>堆叠顺序</strong>：一旦修改元素的定位方式，元素可能发生堆叠，可以使用z-index来控制有元素在框中出现的堆叠数值</p><p>Z-index：value 数值越大，级别越高，越显示在前</p><h3>列表样式：</h3><p>List-style-type：用于控制列表中列表项标志的一个样式</p><p>无序列表：出现在各列旁边的圆点</p><p>无需列表的取值：none：无标记；disc：实心圆（默认）；circle（空心圆）；square 实心方块</p><p>有序列表：可能出现数字，字母或者其他用来排列计数</p><p>有序列表的取值：none：无标记；decimal：数字；</p><p>lower-roman：小写罗马数字 upper-roman：大写罗马数字</p><p>list-style-image：使用图像替换列表项，取值为url</p><h3>JavaScript</h3><p>什么是javaScript？</p><p>嵌入在HTML中在浏览器中的脚本语言，具有与java和C语言类似的语言，一种网页的编程技术，用来向HTML页面添加交互行为，直接嵌入HTML页面，由浏览器解释执行代码，不进行预编译</p><p>特点：可以使用任何文本工具编译，由浏览器内置的JavaScript引擎执行代码</p><p>解析执行：事先不编译，逐行执行</p><p>基于对象：内置大量线程对象</p><p>使用：客户端的数据计算，客户端表单合法性验证，浏览器事件触发，网页特殊显示效果制作，服务器的异常数据提交</p><h4>JavaScript程序的用法：</h4><p>事件定义式：在时间定义时，直接写JavaScript；</p><p>嵌入式：在使用Script标签</p><p>文件调用式:代码位于单独的(.js)文件中，html页面引用js文件，在script标签中添加文件的地址（src=""）</p><h4>JavaScript代码错误：</h4><p>解释性代码，代码错误则页面中无效果，可以打开网页的"检查""错误控制台"来查看错误</p><h4>JavaScript语法规范：</h4><p>基本语法：由Unicode字符集编写</p><p>注释：单行：//注释内容 多行：/*注释内容*/</p><p>语句：表达式，关键字，运算符，大小写敏感，建议使用分号结尾一条语句</p><p>标识符和关键字：</p><p>标识符:不以数字开头的字母，数字，下划线和$组成</p><p>关键字：查看js手册</p><p>变量：使用关键字var声明变量，变量初始化使用"=="来赋值</p><p>没有初始化的变量自动取值为：undefined</p><p>变量无类型，统一使用var声明，变量所引用的数据有类型</p><h4>JavaScript数据类型：</h4><p>特殊类型：null： 空 undefined：未定义</p><p>内置对象：Number：数字 String：字符串 boolean：俩个值 true/false Array数组 function：函数</p><p>外部对象：window：浏览器对象 document：文档对象</p><p>自定义对象：Object：自定义对象</p><p>String类型:</p><p>由Unicode字符，数字，标点符号组成的字符序列，直接量需要一对单/双引号括起</p><p>Number类型：</p><p>在JavaScript中不区分整型数值和浮点型数值，整型直接量：默认的整数直接量为十进制</p><p>Boolean类型：</p><p>仅有俩个值 true/false</p><p>数据类型转换：</p><p>①数据类型之间隐式转换</p><p>②转换函数：</p><p>·toString：所有数据类型均可以转换为String类型</p><p>·parseInt（）：强制转换为整数，如不能转换则出现NaN;</p><p>·parseFloat（）：强制转换为浮点数，不能转换会出现NaN;</p><p>·typeof：查看当前类型，返回String/Number/boolean/object/Function/undefined</p><p>·isNaN（）：判断被检测表达式转换后是否不是一个数，若不是数，则为true；否则为fasle</p><p>特殊数据类型：</p><p>Null：程序中无值/无对象，可以给一个变量赋值为null来清除内容</p><p>Undefined：声明变量，单位赋值/对象属性不存在</p><h4>运算符：</h4><p>算数运算：+，-，*，/，%，++（自增），-（自减）</p><p>关系运算：>，>=，<，<=，!=，==</p><p>===：全等：类型相同，数值相同</p><p>！==：不全等</p><p>逻辑运算：与：&&；或：||；非（！）</p><p>条件运算：三目运算：表达式？表达式1：表达式2</p><p>控制语句：任何复杂的程序都可以通过顺序结构，分支结构，循环结构三种基本程序执行，默认结构为顺序结构</p><p>分支结构：if语句；switch-case与break联合使用</p><p>循环结构：for循环，while循环，do-while循环</p><h3>JavaScript对象概述</h3><p>对象是JavaScript中最重要的API，其中包含最多种对象，比如：内置对象，外部对象（window对象，dom对象），自定义对象</p><h4>如何使用对象？</h4><p>对象包含属性和函数，</p><blockquote>访问对象的属性：对象.属性访问对象的方法： 对象.方法名</blockquote><p>常见内置对象：</p><h3>String对象：</h3><p>创建对象：var str = "hello"; var str=new String ("hello");</p><p>String对象的属性:length</p><p>常用方法：大小写转换：x.tolowerCase ; x.toUpperCase()</p><p>获取指定字符：x.charAt(index) 返回指定位置的字符</p><p>X.charCodeAt(index):返回指定位置的字符的Unicode编码</p><p>查询指定字符串：x.indexOf(findstr,[index]); x.lastindexOf(findstr,[index])</p><p>使用说明：findstr：查找的字符串；index：开始查找的位置索引，可以省略，如果没有找到则返回-1；lastindexOf：从后面开始找起</p><p>获取子字符串：x.substring(start,[end])</p><p>使用说明：start：开始位置；end：结束位置</p><p>替换子字符串：X.replace（findstr，tostr）</p><p>使用说明：findstr：要找的子字符串；tostr：替换的字符串</p><p>拆分字符串：x.split(bystr,[howmarny])</p><p>使用说明：bystr分割用的字符串；howmarny返回的数组最大长度</p><h3>Number对象：</h3><p>Number对象是数值对象，创建方法为var num=123；</p><p>常用方法：toFixed（num）转换为字符串，并保留小数点后一定位数</p><h3>Array对象：</h3><p>创建数组对象：</p><pre lang="javascript">var a1 = new Array（）；var a2 =new Array（6）；var a3 =new Array（100，"a",true）;var a4 = \[100 ,200,300\];</pre><p>获取数组元素的个数：.length；</p><p>数组长度可变；</p><p>数组的倒序与排序：</p><p>X.reverse（） 反向数组，改变数组X中数值的顺序</p><p>X.sort（sortfunc）数组排序：sortfunc：可选项，用来确定元素的函数名称</p><h3>Math对象：</h3><p>Math对象用于执行数学任务，无需创建，直接把math作为对象使用可以调用所有的属性和方法</p><p>三角函数：Math.sin(x),Math.COS(X),math.tan(x)</p><p>计算函数：Math.log(x)…</p><p>数值比较函数：</p><h3>Date对象：</h3><p>用于处理日期和时间，封装了系统毫秒数</p><p>创建方法：var now = new Date（）</p><p>常用方法：读写时间毫秒数：getTime（）；setTime（）</p><p>读写时间分量:getDate();getDay;setDate();setDay;toString…</p><h3>RegExp对象</h3><p>表示正则表达式 var rge = new RegExp（）；</p><p>常用方法：</p><p>x.replace（regexp，tostr）</p><p>x.match(regexp)</p><p>x.search(regexp)</p><p><code>exec(str)</code>检索字符串中指定的值，返回找到的值</p><p><code>test(str)</code>检索字符串中指定的值，返回 true 或 false</p><p>使用说明：</p><p><code>regexp</code>代表正则表达式或字符串</p><p><code>replace</code>返回替换后的结果</p><p><code>match</code>返回匹配字符串的数组</p><p><code>search</code>返回匹配字符串的首字符位置索引</p><h3>Function对象</h3><p>JS中函数就是Function对象，函数名就是指向Function对象的引用，使用函数名就可以访问函数对象</p><p>函数的返回值：默认返回undefined，可以使用return返回具体的值</p><p>函数的参数：JS的函数没有重载；调用时只要函数名一样，无论传入多少个参数，调用的都是同一个函数；没有接收的实参的参数值是undefined；所有的参数传递给arguments数组对象</p><p>Arguments：是一特殊的对象，在函数代码中，表示函数的参数数组，在函数代码中可以使用arguments访问所有参数</p><p>-arguments.length函数的参数个数</p><p>-arguments[i]:第i个参数</p><p>-可以使用arguments实现可变参数的函数</p><p>使用Function对象创建函数：</p><pre lang="javascript">var abc = new Function（"x","y","return(x+y)"）var result = abc(2,3);Alert(result)//5Alert(abc)//Function（"x","y","return(x+y)"）</pre><p>匿名函数：</p><p>Var func = Function（x，y）{return（x+y）}</p><p>Eval函数</p><p>Eval用于计算表达式字符串，或用于执行字符串中的JS代码</p><p>只接收原始字符串作为参数，如果参数中没有合法的表达式和语句，抛出异常</p><p>var s1 = "2+3"; eval(s1) //5</p><h3>外部对象概述</h3><p>·BOM（Browser Object Model）：</p><p>浏览器对象模型，用来访问和操作浏览器窗口，是JavaScript有能力和浏览器"对话"，通过操作BOM，可以动窗口，更改状态栏文本，执行其他不与页面内容发生直接联系的操作</p><p>·DOM（Document Object Model）</p><p>文档对象模型，用来操作文档，定义了访问和操作HTML文档的标准方法</p><p>·WINDOW对象：表示浏览器窗口</p><p>常用属性：</p><p><code>Document</code>：窗口中显示的HTML文档对象</p><p><code>History</code>：浏览器窗口的历史记录对象</p><p><code>Location</code>：窗口文件地址对象</p><p><code>Screen</code>：当前屏幕对象</p><p><code>Navigator</code>：浏览器相关信息</p><p>常用方法：</p><p>alert（）；confirm（）</p><p>setTimeout（）；clearTimeout（）</p><p>setInterval（）；clearInterval（）</p><p>对话框：</p><p>alert（str）提示对话框 ，显示str字符串内容</p><p>confirm（str）确认对话框，显示str字符串内容，按"确定"按钮返回true，其他则返回false</p><p>定时器：</p><p>多用于网页的动态时钟，制作倒计时，跑马灯效果等</p><p>周期性时钟：以一定的间隔执行代码，循环往复</p><p>一次性时钟：在一个设定的时间间隔之后执行代码，而不是在函数被调用后立即执行</p><p>周期性定时器：</p><p>setInterval（exp，time） exp：执行语句 time：时间间隔</p><p>clearInterval（tID）停止启动的定时器</p><p>一次性定时器：</p><p>setTimeout（exp，time）exp：执行语句 time：时间间隔，返回已经启动的定时器</p><p>clearTimeout（tID）停止启动的定时器</p><p>常用属性：</p><p><code>Screen</code>对象：包含有关客户端显示屏幕的信息，常用于获取屏幕的分辨率和色彩 Width/height/availwidth/availHeight</p><p><code>History</code>对象：包含用户访问过的URL</p><p><code>length</code>属性：浏览器历史记录列表中的URL数量</p><p><code>back（）</code>：等同于后退按钮</p><p><code>forword（）</code>：等同于前进按钮</p><p><code>go（num）</code>：等同于单机前后或后退num次</p><p>Location对象：</p><p>Location对象包含有关当前的URL信息，常用于获取或改变当前浏览的网址</p><p>href属性：当前窗口正在浏览器的网页地址</p><p>reload（）：重新载入当前网址，等同于刷新按钮</p><p>Navigator对象:</p><p>包含有关浏览器的信息，常用于获取客户端浏览器和操作系统信息</p><h3>DOM概述</h3><p>DOM（document object model）文档对象模型</p><p>当网页被加载时，浏览器会创建页面的文档对象模型，通过可编程的对象模型。javaScript 获得了足够的能力来创建动态的 HTML，JavaScript可以改变页面中的所有 HTML 元素，属性，CSS 样式以及对页面中的所有事件做出反应</p><p>DOM节点树：DOM模型被构造为对象的数，这棵树的根就是 document 对象</p><p>DOM操作包括：查找节点，读取节点信息，修改节点信息，创建新节点，删除节点</p><p>读取，修改节点信息：</p><p>nodeName：节点名称</p><p>元素节点和属性节点：标签或属性的名称</p><p>文本节点：永远是text</p><p>文档节点：永远的document</p><p>nodeType：节点类型</p><p>返回数值：若是元素节点，返回1；属性节点：2；</p><p>文本节点：3；注解节点：8；文档节点：9</p><p>元素节点的内容：</p><p><code>innerText</code>：设置或获取位于对象起始和结束标签内的文本</p><p><code>innerHTML</code>：设置或获取位于对象起始和结束标签内的 HTML</p><p>节点属性：</p><p><code>getAttribute（）</code>方法，根据属性名称获取属性的值</p><p><code>SetAttribute（）</code>方法</p><p>RemoveAttribute（）</p><p>将HTML标记，属性和CSS都对象化</p><p>元素节点的样式：</p><p>style属性：node.style.color;node.style.fontsize</p><p>className属性：动态绑定样式</p><h3>查询</h3><p>查询节点：</p><p>如果需要操作HTML元素，必须首先找到该元素，查询节点的方式有</p><ol class="list-paddingleft-2"><li><p>通过id查询</p></li><li><p>通过层次（节点关系）查询</p></li><li><p>通过标签名称查询</p></li><li><p>通过name属性查询根据元素的id查询节点：document.getElementById();通过指定的id来返回元素节点，查询整个HTML文档中的任何HTML元素，如果id值错误，返回null</p></li></ol><p><strong>根据层次查询：</strong></p><p><code>parentNode</code>：遵循文档的上下层次结构，查找单个父节点</p><p><code>childNodes</code>：遵顼文档的上下层次结构，查找多个子节点</p><p>根据标签名查询：</p><p>getElementByTagName（）根据指定的标签名返回所有元素，查找整个HTML文档的所有元素，如果标签名错误，返回长度为0的节点列表</p><p>若返回一个节点列表（数组），使用节点列表的length属性获取个数，[index]:定位具体的元素</p><p>根据name属性查询：</p><p>document.getElementByName（）：根据标签的name属性的值进行查询</p><h3>增加</h3><p>创建新节点：document.createElement(name) name:要创建元素的标签名称，返回新创建的节点</p><p>添加新节点：parentNode.appendChild(newNode)</p><p><code>newNode</code>:新节点作为父节点的最后一个子节点进行添加</p><p>parentNode.insertBefore(newNode,refNode) refNode是参考节点，新节点位于此节点之前添加</p><h3>删除</h3><p>删除节点： <code>node.removeChild(childNode)</code>:删除某个子节点，childNode必须是 node 的子节点</p><h3>事件</h3><p>概述：指页面元素状态改变，用户在操作鼠标或者键盘时触发的动作，具体包括：鼠标事件，键盘事件，状态改变事件…</p><p><code>Event</code>： 事件触发后会产生一个 event 对象</p><p><strong>事件属性：</strong></p><p>鼠标事件：onclick 单击事件 ondblclick 双击事件</p><p><code>onmouseover</code>：鼠标移入事件</p><p><code>onmouseout</code>：鼠标移出事件</p><p><code>onmousedown</code>：鼠标点击事件</p><p><code>onmouseup</code>：鼠标松开事件</p><p>event对象：</p><p>任何事件触发后会产生一个 event 对象，event 对象记录事件发生时的鼠标位置，键盘按键状态和触发对象等信息</p><h3>JQuery</h3><p>JQuery 是一个优秀的 JavaScript 框架，一个轻量级的 JS 库，它封装了 JS,CSS,DOM 提供了一致的，简洁的 API,使用户更加方便的处理HTML，实现动画效果，并且方便为网站提供 Ajax 交互模型，使用户的 HTML 页面保持代码和 HTML 内容分离</p><h4>使用JQuery</h4><p>JQuery 的使用步骤：</p><ol class="list-paddingleft-2"><li><p>引入 JQuery 的 js 文件</p></li><li><p>使用选择器定位操作节点</p></li><li><p>调用 JQuery 的方法进行操作什么是 JQuery 对象？JQuery 对象本质上是一个 DOM 对象数组，它在该数组上扩展了一些操作数组中元素的方法 Obj.length:获取数组的长度Obj.get(index):获取数组中的某一个 DOM 对象 Obj[index]:等价于obj.get(index)DOM对象转换为 JQuery 对象：$(DOM对象)</p></li></ol><h4>JQuery选择器：</h4><p>JQuery选择器类似于CSS选择器（定位元素），能够实现定位元素，添加行为，使用JQuery选择器能够将内容与行为分离</p><p>选择器的分类：基本选择器，层次选择器，过滤选择器，表单选择器</p><p><strong>基本选择器：</strong></p><p>元素选择器：根据标签来定位元素 $("标签名")</p><p>类选择器：根据class属性定位元素 $(".class属性名")</p><p>Id选择器：根据id属性定位元素 $("#id属性名")</p><p>选择器组：定位一组选择器所对应的所有元素 $("#id,name")</p><p><strong>层次选择器：</strong></p><p>在select1元素下，选中所有满足select2的子孙（后代）元素 $("select1 select2")</p><p>在select1元素下，选择所有满足select2的子元素</p><p>$("select1>select2")</p><p><strong>过滤选择器：</strong></p><p>根据元素的基本特征定位元素，常用于表格和列表</p><p><code>first：</code>第一个元素；<code>last：</code>最后一个元素</p><p><code>not（selector）</code>把 selector 排除在外</p><p><code>even</code> 挑选偶数行 <code>odd</code> 挑选奇数行</p><p><code>eq（index）</code>下标等于index元素</p><p><code>gt（index）</code>下标大于index的元素</p><p><code>lt（index）</code>下标小于index的元素</p><p>内容过滤选择器：</p><p>根据文本内容定位元素</p><p><code>contains（text）</code>匹配包含给定文本的元素</p><p><code>empty</code> 匹配所有不包含子元素或文本的空元素</p><p>可见性过滤选择器：</p><p><code>hidden</code>：匹配所有不可见元素</p><p><code>visible</code>：匹配所有的可见元素</p><p>属性过滤选择器：</p><p>根据属性定位元素</p><p>[attribute]匹配具有 attribute 属性的元素</p><p>状态过滤选择器：</p><p>根据状态定位元素</p><p>表单选择器：</p><p>包括：text：匹配文本框 password：匹配密码框…</p><p>读写节点：</p><p>读写节点的HTML内容：</p><p>读入：obj.html() 写出：obj.html("写出内容")</p><p><strong>读写节点的文本内容：</strong></p><p>读入：obj.text() 写出：obj.text("写出内容")</p><p><strong>读写节点的value属性值 ：</strong></p><p>读入：obj.val() 写出：obj.val("写出内容")</p><p><strong>读写节点的属性值：</strong></p><p>读入：obj.attr("属性名") 写出：obj.attr("属性名"，"属性值")</p><p><strong>增删节点：</strong></p><p>创建DOM节点：$(''节点内容'')</p><p>插入DOM节点：</p><p><code>parent.append(obj)</code> 作为最后一个子节点添加</p><p><code>parent.prepend(obj)</code> 作为第一个子节点添加</p><p>删除DOM节点：</p><p><code>Obj.remove()</code> 删除节点</p><p><code>Obj.remove(selector)</code> 只删除满足 selector 的节点</p><p><code>Obj.empty()</code> 清空节点</p><p>样式：</p><p><code>addClass（" "）</code>追加样式</p><p><code>removeClass（" "）</code>移出指定样式</p><p><code>removeClass()</code> 移出所有样式</p><p><code>toggleClass（" "）</code>切换样式</p><p><code>hasClass（""）</code>判断是否有这个样式</p><p><code>css（""）</code>读取css的值</p><p><code>css（"",""）</code>设置多个样式</p><p>遍历节点：</p><p><code>children（）</code>取得一个包含匹配的元素集合中的每一个元素的所有子元素的元素集合</p><p><code>parent（）</code> 父节点</p><p>事件处理：参考手册</p><p>等待页面加载完毕后执行：$(function(){…})</p><p>获得事件对象 event</p><p>只需要对事件处理函数传递一个参数 如：$obj.click(function(e){…}); e 就是事件对象，已经经过了 JQuery 的底层事件对象的封装，封装后的事件对象可以方便的兼容各浏览器</p><p>事件的常用属性：</p><p>获取事件源：e.target 返回值就是DOM对象</p><p>：匹配所有的可见元素</p><p>属性过滤选择器：</p><p>根据属性定位元素</p><p>[attribute]匹配具有 attribute 属性的元素</p><p>状态过滤选择器：</p><p>根据状态定位元素</p><p>表单选择器：</p><p>包括：</p><p>text：匹配文本框</p><p>password：匹配密码框…</p><p>读写节点：</p><p>读写节点的HTML内容：</p><p>读入：obj.html() 写出：obj.html("写出内容")</p><p>读写节点的文本内容：</p><p>读入：obj.text() 写出：obj.text("写出内容")</p><p>读写节点的value属性值 ：</p><p>读入：obj.val() 写出：obj.val("写出内容")</p><p>读写节点的属性值：</p><p>读入：obj.attr("属性名") 写出：obj.attr("属性名"，"属性值")</p><p>增删节点：</p><p><strong>创建DOM节点：</strong><code>$("节点内容")</code></p><p><strong>插入DOM节点：</strong></p><p><code>parent.append(obj)</code> 作为最后一个子节点添加</p><p><code>parent.prepend(obj)</code> 作为第一个子节点添加</p><p><strong>删除DOM节点：</strong></p><p><code>Obj.remove()</code> 删除节点</p><p><code>Obj.remove(selector)</code> 只删除满足 selector 的节点</p><p><code>Obj.empty()</code> 清空节点</p><p>样式：</p><p><code>addClass（" "）</code>追加样式</p><p><code>removeClass（" "）</code>移出指定样式</p><p><code>removeClass()</code> 移出所有样式</p><p><code>toggleClass（" "）</code>切换样式</p><p><code>hasClass（""）</code>判断是否有这个样式</p><p><code>css（""）</code>读取css的值</p><p><code>css（"",""）</code>设置多个样式</p><p>遍历节点：</p><p><code>children（）</code>取得一个包含匹配的元素集合中的每一个元素的所有子元素的元素集合</p><p><code>parent（）</code> 父节点</p><p>等待页面加载完毕后执行：$(function(){…})</p><p>获得事件对象event</p><p>只需要对事件处理函数传递一个参数 如：$obj.click(function(e){…}); e 就是事件对象，已经经过了JQuery 的底层事件对象的封装，封装后的事件对象可以方便的兼容各浏览器</p><p>事件的常用属性：</p><p>获取事件源：e.target 返回值就是DOM对象</p><p>获取鼠标点击的坐标 e.pageX e.pageY</p><p class="introduction">"HTML、CSS、JS的基础知识点有哪些"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！</p>
</div>
<div class="diggit"><a href="#"> 很赞哦！ </a></div>
<div class="clear"></div>
<div class="keywords">
<a href="/s-元素">元素</a>
<a href="/s-对象">对象</a>
<a href="/s-节点">节点</a>
<a href="/s-属性">属性</a>
<a href="/s-样式">样式</a>
<a href="/s-选择">选择</a>
<a href="/s-内容">内容</a>
<a href="/s-文本">文本</a>
<a href="/s-事件">事件</a>
<a href="/s-标签">标签</a>
<a href="/s-浏览">浏览</a>
<a href="/s-浏览器">浏览器</a>
<a href="/s-字符">字符</a>
<a href="/s-函数">函数</a>
<a href="/s-文档">文档</a>
<a href="/s-页面">页面</a>
<a href="/s-定位">定位</a>
<a href="/s-文件">文件</a>
<a href="/s-位置">位置</a>
<a href="/s-字符串">字符串</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377745.html">数据库的安全要保护哪些东西</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2375887.html">数据库安全各自的含义是什么</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377880.html">生产安全数据库录入</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377879.html">数据库的安全性及管理</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377878.html">数据库安全策略包含哪些</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377877.html">海淀数据库安全审计系统</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377876.html">建立农村房屋安全信息数据库</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377875.html">易用的数据库客户端支持安全管理</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377874.html">连接数据库失败ssl安全错误</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377873.html">数据库的锁怎样保障安全</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-841359.html">目前常用数据库及搜索引擎有</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-708377.html">视界线安装包数据库是哪个文件</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-291807.html">服务器怎么进安全策略</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2328362.html">南京软件开发诚信合作</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-811259.html">代码评分数据库</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-251943.html">为啥进冥赤龙服务器老短</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-155679.html">qq游戏 服务器</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2095591.html">制造业配方管理软件开发</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-1549106.html">信息网络安全管理暂行办法</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-1917211.html">系统软件开发如何收费</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2145079.html">栖霞软件开发公司有哪些</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-1475866.html">网络安全经常出差吗</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-1753638.html">网络安全这个职业分析</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-556893.html">32g 曙光内存服务器</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-1277195.html">元亨证通网络技术人才服务武汉</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-1549613.html">国外网络安全牛人</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-1841797.html">2021高职网络安全技能大赛</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-539514.html">我的世界怎么配置服务器核心</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-1208145.html">天象网络技术学院</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-1352736.html">杭州追电网络技术有限公司</a>
<a target="_blank" href="https://www.qianjiagd.com/s-即时通讯软件开发哪家比较专业">即时通讯软件开发哪家比较专业</a>
<a target="_blank" href="https://www.qianjiagd.com/s-网络安全 英雄">网络安全 英雄</a>
<a target="_blank" href="https://www.qianjiagd.com/s-广东数字化城管软件开发公司">广东数字化城管软件开发公司</a>
<a target="_blank" href="https://www.qianjiagd.com/s-学校网络安全工作台账">学校网络安全工作台账</a>
<a target="_blank" href="https://www.qianjiagd.com/s-信息资源数据库电子版">信息资源数据库电子版</a>
<a target="_blank" href="https://www.qianjiagd.com/s-奉贤区本地网络技术图片">奉贤区本地网络技术图片</a>
<a target="_blank" href="https://www.qianjiagd.com/s-七日杀怎么加入服务器">七日杀怎么加入服务器</a>
<a target="_blank" href="https://www.qianjiagd.com/s-网络安全工程师 年龄">网络安全工程师 年龄</a>
<a target="_blank" href="https://www.qianjiagd.com/s-如何建立企业数据库">如何建立企业数据库</a>
<a target="_blank" href="https://www.qianjiagd.com/s-网络安全刑责">网络安全刑责</a>
</div>
<div class="share"><img src="https://www.qianjiagd.com/static/zsymb/images/wxgzh.jpg">
<div class="share-text">
<p>扫描关注千家信息网微信公众号，第一时间获取内容更新动态</p>
<p>转载请说明来源于"千家信息网"</p>
<p>本文地址：<a href="https://www.qianjiagd.com/a9367" target="_blank">https://www.qianjiagd.com/a9367</a></p>
</div>
</div>
<div class="clear"></div>
<div class="info-pre-next">
<ul>
<li><a href="https://www.qianjiagd.com/a9361"><i><em>上一篇</em><img src="https://www.qianjiagd.com/static/assets/images/nopic.gif"></i>
<h2>html中什么是逻辑部分</h2>
<p>这篇文章将为大家详细讲解有关html中什么是逻辑部分，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目</p>
</a></li>
<li><a href="https://www.qianjiagd.com/a9369"><i><em>下一篇</em><img src="https://www.qianjiagd.com/static/assets/images/nopic.gif"></i>
<h2>linux中device、driver、bus有什么关系</h2>
<p>小编给大家分享一下linux中device、driver、bus有什么关系，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！l</p>
</a></li>
</ul>
</div>
</div>
</div>
<div class="clear blank"></div>
<div class="otherlink whitebg">
<div class="news-title">
<h2>相关文章</h2>
</div>
<ul>
<li><a href="https://www.qianjiagd.com/a177928" title="PHP中session会话操作技巧有哪些">PHP中session会话操作技巧有哪些</a></li>
<li><a href="https://www.qianjiagd.com/a146158" title="PHP类相关知识点有哪些">PHP类相关知识点有哪些</a></li>
<li><a href="https://www.qianjiagd.com/a123341" title="VS2008无法直接查看STL值怎么办">VS2008无法直接查看STL值怎么办</a></li>
<li><a href="https://www.qianjiagd.com/a245815" title="php版微信公众平台之微信网页登陆授权的示例分析">php版微信公众平台之微信网页登陆授权的示例分析</a></li>
<li><a href="https://www.qianjiagd.com/a201934" title="中高级PHP程序员应该掌握什么技术">中高级PHP程序员应该掌握什么技术</a></li>
<li><a href="https://www.qianjiagd.com/a63118" title="CI框架出现mysql数据库连接资源无法释放怎么办">CI框架出现mysql数据库连接资源无法释放怎么办</a></li>
<li><a href="https://www.qianjiagd.com/a37602" title="ajax跨域访问报错501怎么办">ajax跨域访问报错501怎么办</a></li>
<li><a href="https://www.qianjiagd.com/a106909" title="什么是RPC框架">什么是RPC框架</a></li>
<li><a href="https://www.qianjiagd.com/a157266" title=".net mvc超过了最大请求长度怎么办">.net mvc超过了最大请求长度怎么办</a></li>
<li><a href="https://www.qianjiagd.com/a213044" title="php分页原理的示例分析">php分页原理的示例分析</a></li>
<!-- <li><a target="_blank" href="/">制作是这么收费的？</a></li> -->
</ul>
</div>
</div> <!-- . end of left-box -->
<!-- right aside start-->
<aside class="side-section right-box">
<div class="side-tab">
<ul id="sidetab">
<li class="sidetab-current">站长推荐</li>
<li>点击排行</li>
</ul>
<div id="sidetab-content">
<section>
<div class="tuijian">
<section class="topnews imgscale"><a href="https://www.qianjiagd.com/a622964" title="recovery是什么意思?电脑开机重启显示recovery蓝屏怎么办"><img src="https://www.qianjiagd.com/uploadfile/thumb/a87ff679a2f3e71d9181a67b7542122c/278x185_auto.jpg" alt="recovery是什么意思?电脑开机重启显示recovery蓝屏怎么办"><span>recovery是什么意思?电脑开机重启显示recovery蓝屏怎么办</span></a></section>
<ul>
<li><a href="https://www.qianjiagd.com/a67182" title="怎么在Linux中配置SSH和Xshell远程连接服务器"><i><img src="https://www.qianjiagd.com/uploadfile/thumb/9a/65e9dcdf.jpg" alt="怎么在Linux中配置SSH和Xshell远程连接服务器"></i>
<p>怎么在Linux中配置SSH和Xshell远程连接服务器</p>
</a></li>
<li><a href="https://www.qianjiagd.com/a123341" title="VS2008无法直接查看STL值怎么办"><i><img src="https://www.qianjiagd.com/uploadfile/thumb/52/bf79ba42.jpg" alt="VS2008无法直接查看STL值怎么办"></i>
<p>VS2008无法直接查看STL值怎么办</p>
</a></li>
<li><a href="https://www.qianjiagd.com/a106909" title="什么是RPC框架"><i><img src="https://www.qianjiagd.com/uploadfile/thumb/10/d0f5142a.jpg" alt="什么是RPC框架"></i>
<p>什么是RPC框架</p>
</a></li>
<li><a href="https://www.qianjiagd.com/a157266" title=".net mvc超过了最大请求长度怎么办"><i><img src="https://www.qianjiagd.com/uploadfile/thumb/36/6d16d7e5.jpg" alt=".net mvc超过了最大请求长度怎么办"></i>
<p>.net mvc超过了最大请求长度怎么办</p>
</a></li>
</ul>
<section class="topnews imgscale"><a href="https://www.qianjiagd.com/a244736" title="java怎么实现try/catch异常块"><img src="https://www.qianjiagd.com/uploadfile/thumb/15/9878a9c6.jpg" alt="java怎么实现try/catch异常块"><span>java怎么实现try/catch异常块</span></a></section>
<ul>
<li><a href="https://www.qianjiagd.com/a199222" title="PHP中如何处理上传文件"><i><img src="https://www.qianjiagd.com/uploadfile/thumb/ee/203d504b.jpg" alt="PHP中如何处理上传文件"></i>
<p>PHP中如何处理上传文件</p>
</a></li>
<li><a href="https://www.qianjiagd.com/a184615" title="php中require_once报错的解决方法"><i><img src="https://www.qianjiagd.com/uploadfile/thumb/ef/e0177085.jpg" alt="php中require_once报错的解决方法"></i>
<p>php中require_once报错的解决方法</p>
</a></li>
<li><a href="https://www.qianjiagd.com/a192541" title="PHP如何编写学校网站上新生注册登陆程序"><i><img src="https://www.qianjiagd.com/uploadfile/thumb/a1/0898126a.jpg" alt="PHP如何编写学校网站上新生注册登陆程序"></i>
<p>PHP如何编写学校网站上新生注册登陆程序</p>
</a></li>
<li><a href="https://www.qianjiagd.com/a210747" title="php中微信公众号开发模式的示例分析"><i><img src="https://www.qianjiagd.com/uploadfile/thumb/af/9e9aba9a.jpg" alt="php中微信公众号开发模式的示例分析"></i>
<p>php中微信公众号开发模式的示例分析</p>
</a></li>
</ul>
</div>
</section>
<section>
<div class="paihang">
<section class="topnews imgscale"><a href="https://www.qianjiagd.com/a21343" title="在vmware esxi6.5中将硬盘驱动类型由HDD变为SSD类型"><img src="https://www.qianjiagd.com/uploadfile/thumb/ab/08b16e75.jpg" alt="在vmware esxi6.5中将硬盘驱动类型由HDD变为SSD类型"><span>在vmware esxi6.5中将硬盘驱动类型由HDD变为SSD类型</span></a></section>
<ul>
<li><i></i><a href="https://www.qianjiagd.com/a175843" title="Vue中的匿名插槽与具名插槽是什么">Vue中的匿名插槽与具名插槽是什么</a></li>
<li><i></i><a href="https://www.qianjiagd.com/a114973" title="vue3与vue2的区别以及vue3的API用法介绍">vue3与vue2的区别以及vue3的API用法介绍</a></li>
<li><i></i><a href="https://www.qianjiagd.com/a27254" title="录制的横屏视频怎么变成全屏竖屏（录制的横屏怎么变竖屏）">录制的横屏视频怎么变成全屏竖屏（录制的横屏怎么变竖屏）</a></li>
<li><i></i><a href="https://www.qianjiagd.com/a69563" title="qq群作业里为什么图片上传不了（qq群作业照片传不上去）">qq群作业里为什么图片上传不了（qq群作业照片传不上去）</a></li>
<li><i></i><a href="https://www.qianjiagd.com/a71754" title="vscoder如何关闭错误提示">vscoder如何关闭错误提示</a></li>
<li><i></i><a href="https://www.qianjiagd.com/a36693" title="百度网盘PDF怎么转换成Word格式 PDF转Word操作教程">百度网盘PDF怎么转换成Word格式 PDF转Word操作教程</a></li>
<li><i></i><a href="https://www.qianjiagd.com/a15469" title="老年机号码拉黑怎么解除（老年机号码拉黑怎么解除）">老年机号码拉黑怎么解除（老年机号码拉黑怎么解除）</a></li>
<li><i></i><a href="https://www.qianjiagd.com/a85246" title="京东以旧换新评估价和实际一样吗（京东以旧换新估价和成交价一样吗）">京东以旧换新评估价和实际一样吗（京东以旧换新估价和成交价一样吗）</a></li>
</ul>
<section class="topnews imgscale"><a href="https://www.qianjiagd.com/a13935" title="拼多多注销后可以重开新用户吗（拼多多注销后重开算新用户吗）"><img src="https://www.qianjiagd.com/uploadfile/thumb/0a/8e8c068e.jpg" alt="拼多多注销后可以重开新用户吗（拼多多注销后重开算新用户吗）"><span>拼多多注销后可以重开新用户吗（拼多多注销后重开算新用户吗）</span></a></section>
</div>
</section>
</div>
</div>
<div class="whitebg cloud">
<h2 class="side-title">标签云</h2>
<ul>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377745.html">数据库的安全要保护哪些东西</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2375887.html">数据库安全各自的含义是什么</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377880.html">生产安全数据库录入</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377879.html">数据库的安全性及管理</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377878.html">数据库安全策略包含哪些</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377877.html">海淀数据库安全审计系统</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377876.html">建立农村房屋安全信息数据库</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377875.html">易用的数据库客户端支持安全管理</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377874.html">连接数据库失败ssl安全错误</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377873.html">数据库的锁怎样保障安全</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377872.html">数据库安全章节测试</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377871.html">华大基因数据库安全性</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377870.html">数据库es安全性测试工具</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377869.html">数据库与云安全</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377868.html">微生物安全数据库</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377867.html">数据库个人信息安全吗</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377866.html">安全数据库降级</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377865.html">黑龙江数据库安全防护系统</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377864.html">数据库安全性实验例题</a>
<a target="_blank" href="https://www.qianjiagd.com/tag-2377863.html">在国家公共安全数据库有记录</a>
</ul>
</div>
<div class="clear blank"></div>
<div class="whitebg suiji">
<h2 class="side-title">猜你喜欢</h2>
<ul>
<li><a href="https://www.qianjiagd.com/a29879" title="微信登录加载联系人失败怎么弄（微信加载联系人失败 点击重试）">微信登录加载联系人失败怎么弄（微信加载联系人失败 点击重试）</a></li>
<li><a href="https://www.qianjiagd.com/a63090" title="华为手机按键震动在哪设置关掉 按键振动怎么取消方法">华为手机按键震动在哪设置关掉 按键振动怎么取消方法</a></li>
<li><a href="https://www.qianjiagd.com/a73496" title="陌陌无限注册教程（怎么注册陌陌新号）">陌陌无限注册教程（怎么注册陌陌新号）</a></li>
<li><a href="https://www.qianjiagd.com/a206293" title="win10开机蓝屏终止代码SYSTEM_SERVICE_EXCEPTION的解决方法">win10开机蓝屏终止代码SYSTEM_SERVICE_EXCEPTION的解决方法</a></li>
<li><a href="https://www.qianjiagd.com/a71928" title="微信看不到朋友圈不显示一条横线（微信看不到朋友圈只有一条横线）">微信看不到朋友圈不显示一条横线（微信看不到朋友圈只有一条横线）</a></li>
<li><a href="https://www.qianjiagd.com/a123341" title="VS2008无法直接查看STL值怎么办">VS2008无法直接查看STL值怎么办</a></li>
<li><a href="https://www.qianjiagd.com/a173126" title="快影怎么把视频弄成横屏播放 制作方法分享">快影怎么把视频弄成横屏播放 制作方法分享</a></li>
<li><a href="https://www.qianjiagd.com/a22324" title="拼多多的多多支付怎么解绑银行卡（拼多多的多多支付怎么解绑银行卡）">拼多多的多多支付怎么解绑银行卡（拼多多的多多支付怎么解绑银行卡）</a></li>
<li><a href="https://www.qianjiagd.com/a99782" title="怎么将苹果手机中录音发给好友 iPhone传语音文件方法教程">怎么将苹果手机中录音发给好友 iPhone传语音文件方法教程</a></li>
<li><a href="https://www.qianjiagd.com/a213464" title="iis7.5中如何让html与shtml一样支持include功能">iis7.5中如何让html与shtml一样支持include功能</a></li>
</ul>
</div>
</aside>
<!-- right aside end-->
</article>
<div class="clear blank"></div>
<!--footer start-->
<footer>
<div class="footer box">
<div class="wxbox">
<ul>
<li><img src="https://www.qianjiagd.com/static/zsymb/images/wxgzh.jpg"><span>微信公众号</span></li>
<li><img src="https://www.qianjiagd.com/static/zsymb/images/wx.png"><span>我的微信</span></li>
</ul>
</div>
<div class="endnav">
<p><b>站点声明：</b></p>
<p>所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。</p>
<p>Copyright © 2009-2025 <a href="https://www.qianjiagd.com/" target="_blank">千家信息网</a> All Rights Reserved.
<a href="/sitemap.xml">网站地图</a>
<a href="/about/">关于我们</a>
<a href="/contact-us/">联系我们</a>
</p>
</div>
</div>
</footer>
<a href="#" title="返回顶部" class="icon-top"></a>
<!--footer end-->
<div style="display:none">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?aec778eae8071ef8921721735a4a9509";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</div>
<div style="display:none">
<span class="dr_show_hits_9367">0</span><script type="text/javascript"> $.ajax({ type: "GET", url:"/index.php?s=api&c=module&siteid=1&app=article&m=hits&id=9367", dataType: "jsonp", success: function(data){ if (data.code) { $(".dr_show_hits_9367").html(data.msg); } else { dr_tips(0, data.msg); } } }); </script></div>
<!--本页面URL https://www.qianjiagd.com/a9367 -->
<!--本页面于2025-01-22 12:14:16更新-->
</body>
</html>
本篇内容介绍了"HTML、CSS、JS的基础知识点有哪些"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
Web概述
Web三要素：浏览器，服务器，HTTP协议
HTML工作原理：HTML是部署在服务器上的文本文件，根据HTTP协议浏览器发出请求给服务器，服务器做出响应给浏览器返回一个HTML，浏览器解释执行HTML，从而显示内容
什么是HTML？
HTML是超文本标记语言（Hyper Text Markup Language）,一种纯文本类型的语言，用来设计网页的标记语言，用该语言编写的文件以.html或者.htm为后缀，由浏览器解释执行，在HTML的页面上可以嵌套脚本语言编写程序段，如JavaScript
HTML标签
HTML标签通常也被称为HTML标记，HTML元素；HTML标签是由尖括号包围的关键字，比如，HTML标签通常是成对出现的,比如，标签对中的第一个标签为开始标签，第二个标签为结束标签，开始标签和结束标签也被称为开放标签和闭合标签
HTML注释：
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们
HTML文档类型：
声明：HTML由多个不同的版本，只有完全明白页面中的使用的确切HTML版本，浏览器才能完全正确的显示HTML页面，这就是的意义；
不是HTML的标签，它为浏览器提供一项信息，即HTML是用什么版本所写的
HTML标签：
定义：标签用于定义文档的头部，是所有头部元素的容器，中的元素可以引用脚本，指示浏览器在哪里找到样表式，提供元信息等等
文档的头部描述了文档的各种信息和属性，包括文档的标题，在web中的位置以及和其他文档的关系等，绝大多数文档的头部包含的数据都不会真正的作为内容显示给读者
以下这些标签可用在head部分：