九、html基础、CSS基础、DOM基础
（一）HTML基础标签
1、页面由三部分组成：HTML标签（页面有样式）、CSS样式（页面更好看）、JS代码（页面可操作）
2、HTML标签：
（1）打开pycharm，新建一个html文件
（2）HTML：能够被浏览器所识别的代码，我们称之为HTML标签。
（3）一个页面由一个一个的html标签所组成。
（4）每个标签所代表的含义不同。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 普通的字符串 <h1>被h1包裹的字符串</h1> <h2>被h1包裹的字符串</h2> <h3>被h1包裹的字符串</h3> <h4>被h1包裹的字符串</h4> <h5>被h1包裹的字符串</h5> <!-- 一对h1标签 --> </body> </html>
3、HTML标签分别有哪些及解析样式：
（1）标签的组成：
lang 是标签的属性 <!DOCTYPE html> <html lang="en"> <head> <!-- 字符集 --> <meta charset="UTF-8"> <!-- 浏览器的Tab --> <title>Learning</title> </head> <body> 普通的字符串 <h1>被h1包裹的字符串</h1> <h2>被h1包裹的字符串</h2> <h3>被h1包裹的字符串</h3> <h4>被h1包裹的字符串</h4> <h5>被h1包裹的字符串</h5> <!-- 一对h1标签 --> </body> </html>
（2）自闭合标签和主动闭合标签
<meta charset="UTF-8"> 自闭合标签 <title>Learning</title> 主动闭合标签
（3）head标签特点
<head></head> 在head标签中写的内容，大部分是不会在页面中被看到的。
（4）body标签特点：
<body></body> 页面中展示的样子，主要在body标签中进行开发。
（5）在head标签内添加图标：link rel ="shortcut icon" href="XXXXXX"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 描述当前网站的基本信息 --> <meta name="description" content="hello world"> <!-- 检索信息-关键词 --> <meta name="keywords" content="hooray"> <!-- 浏览器的Tab --> <title>Learning</title> <!-- Tab的图标 --> <link rel="shortcut icon" href="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2314218918,543343578&fm=26&gp=0.jpg"> </head>
（6）在head标签中添加样式表stylesheet
<!-- 样式表stylesheet --> <link rel="stylesheet" href="">
（7）在head标签中添加style标签
<!-- 写样式 --> <style></style>
（8）在head标签中添加script标签
<!-- 写JS --> <script></script>
（9）在body中添加段落标签：<p></p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 段落标签 --> <p>举头望明月，低头思故乡！</p> <p>锄禾日上午，汗滴禾下土；谁知盘中餐，粒粒皆辛苦。</p> </body> </html>
（10）在body中添加换行标签：<br>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <!-- 段落标签 换行标签--> <p>窗前明月光，疑是地上霜。<br>举头望明月，低头思故乡！</p> <p>锄禾日上午，汗滴禾下土。<br>谁知盘中餐，粒粒皆辛苦。</p> </body> </html>
（11）在body标签中添加空格符： 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <!-- 段落标签 换行标签--> <p>窗前明月光，   疑是地上霜。<br>举头望明月，   低头思故乡！</p> <p>锄禾日上午，   汗滴禾下土。<br>谁知盘中餐，   粒粒皆辛苦。</p> </body> </html>
（12）在body中，进行添加（<p></p>）展示段落标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <!-- 段落标签 换行标签--> <p>窗前明月光，   疑是地上霜。<br>举头望明月，   低头思故乡！</p> <p>锄禾日上午，   汗滴禾下土。<br>谁知盘中餐，   粒粒皆辛苦。</p> <p></p> 段落标签 <p></p>段落标签 </body> </html>
（13）在body中，添加h1~h6标签
<h1>h1标签</h1> <h2>h2标签</h2> <h3>h3标签</h3> <h4>h4标签</h4> <h5>h5标签</h5> <h6>h6标签</h6>
（14）body中，div标签和span标签：区别是div标签占满一整行，span标签根据自己多大占多大（块级标签和行内标签）
<!--div是伪白板标签：块级标签，无论内容多大，均占满一整行--> <div>我是div标签</div> <!--span是白板标签：行内标签，自己有多大，就占多大--> <span>我是span标签</span>
- 关于div是伪白板标签，截图所示：
- 关于span是白板标签，截图所示：
（15）body中，input标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <form action="https://www.baidu.com" method="post"> <input type="text" placeholder="请填写用户名" value="小明" name="username"> <!--password 密码框--> <input type="password" placeholder="请输入密码" value="" name="password"> <!--button 按钮类型--> <input type="button" value="button登录"> <!--form表单的方式提交--> <input type="submit" value="submit登录"> </form> </body> </html>
- 浏览器打开方式：post请求方式（截图一）
- 浏览器打开方式：get请求方式（截图二）
（16）form提交和ajax（代指一类，异步提交）提交
- form提交已经被废弃很久了，用户体验非常差，每次提交都会刷新页面，以前录入的信息都会消失；
- 大多数用的都是异步提交，当触发登录按钮（click事件）时，前端悄悄发送一个请求给后端，页面无感知，等后端返回信息后，通过判断后端的字段，来决定是否要跳转到下一个页面。
（17）button和submit区别登录
<form action="https://www.baidu.com" method="get"> <input type="text" placeholder="请填写用户名" value="小明" name="username"> <!--password 密码框--> <input type="password" placeholder="请输入密码" value="" name="password"> <!--button 按钮类型--> <!--使用JS，通过button按钮，进行click事件绑定：来触发异步登录--> <input type="button" value="button登录"> <!--form表单的方式提交--> <!--submit 属性 可以和 form标签连用：拥有提交操作--> <input type="submit" value="submit登录"> </form>
（18）其他标签的使用：（如reset、checkbox、radio、file）
<!--重置属性：必须和form标签连用才有用效果--> <input type="reset"> <!--多选框--> 男<input type="checkbox" name="sex" value="1" checked="checked"> 女<input type="checkbox" name="sex" value="2"> <!--单选框--> 中国<input type="radio" checked="checked" name="nationality"> 美国<input type="radio" name="nationality"> <!--文件：file--> <input type="file">
（19）label标签使用：
<form action="https://www.baidu.com" method="get"> <!--通过label标签扩大input的聚焦范围 通过for属性绑定 input的id属性--> <label for="u1">用户名：</label><input id="u1" type="text" placeholder="请填写用户名" value="小明" name="username">
（20）多行文本textarea
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <textarea name="t1">多行文本</textarea> </body> </html>
如截图所示：
（21）下拉框标签selected
<!--下拉框标签--> <select name="city"> <option value="1">北京</option> <option value="2" selected="selected">上海</option> <option value="3">广州</option> </select>
如图所示：
请问：select中option为什么要以枚举的方式定义？
1 代表 北京
2 代表 上海
3 代表 广州
A：信息若是敏感信息，不了解1 2 3的含义。
B：中文算2个字符，数字和英文算1个字符，提高效率。
（22）在select标签中，添加分组标签optgroup
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <select name="" > <optgroup label="北京"> <option>东城区</option> <option>西城区</option> <option>海淀区</option> </optgroup> <optgroup label="河北"> <option>石家庄</option> <option>唐山</option> <option>秦皇岛</option> </optgroup> </select> </body> </html>
如图所示：
（23）超链接a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <!--a超链接标签 target="_blank"打开新标签页面--> <a href="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2586890322,1270380610&fm=26&gp=0.jpg" target="_blank">图像地址 </a> </body> </html>
如图所示：
（24）img图片标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <!--img 图片标签--> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=584858828,3339321933&fm=26&gp=0.jpg" title="鼠标悬浮显示的文字" alt="图片加载失败显示的字段"> </body> </html>
（25）ul li 和 ol li形式的列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <ul> <li>参数1</li> <li>参数2</li> <li>参数3</li> </ul> <ol> <li>参数1</li> <li>参数2</li> <li>参数3</li> </ol> </body> </html>
如图所示：
（26）分层标签：dl dt dd
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <!--dl dt dd 分层标签--> <dl> <dt>北京</dt> <dd>西城</dd> <dd>东城</dd> <dt>天津</dt> <dd>和平区</dd> <dd>武清区</dd> </dl> </body> </html>
如图所示：
（27）table表格标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> </head> <body> <!--tr 行--> <!--th 表头的列--> <!--td body的列--> <table border="1"> <thead> <tr> <th>id</th> <th>method</th> <th>uri</th> <th colspan="2">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="3">post</td> <td>/api/interface</td> <td>edit</td> <td>delete</td> </tr> <tr> <td>2</td> <td>/api/interface</td> <td>edit</td> <td>delete</td> </tr> <tr> <td>3</td> <td>/api/interface</td> <td>edit</td> <td>delete</td> </tr> </tbody> </table> </body> </html>
（二）CSS样式基础
1、在HTML页面中，有几处可以写CSS样式？
答：有3处，分别为：
（1）div的style属性
（2）head的style标签中，可以写CSS属性
（3）可以通过link标签，引入样式表对HTML进行样式附着
2、css练习：
demo.css
#i2{ background-color: pink; }
HTML代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> #i1{ background-color: greenyellow; } </style> </head> <body> <div style="background-color: purple">one</div> <div id="i1">two</div> <div id="i2">three</div> </body> </html>
截图如下：
3、选择器
（1）id选择器：
- id选择器， 特殊符号：#
- id是唯一的，理论上整个html中不允许出现重复，在编码时会有报错提示，如图：
- 正确编码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> /*#i1{*/ /*background-color: greenyellow;*/ /*}*/ /*选择器*/ /*id选择器 关键符号 # */ #i3,#i4{ background-color: deepskyblue; } </style> </head> <body> <div id="i3">Jungle Bell</div> <div id="i4">Jungle Bell</div> </body> </html>
（2）class选择器（常用）
- class选择器，特殊符号.（英文.）
- class允许重复，
- 一个标签可以拥有多个class
<div class="c1 c3">good good study</div>
编码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> /*class 选择器*/ .c1{ background-color: orangered; } </style> </head> <body> <div class="c1">Animals</div> <div class="c1">Plants</div> <div class="c1">Vegetables</div> <div class="c1">Fruits</div> </body> </html>
（3）标签选择器
- 直接写标签名称
- 特性：所有标签都受影响
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> /* 标签选择器*/ div{ background-color: yellow; } </style> </head> <body> <div>标签选择器</div> <div>标签选择器</div> <div>标签选择器</div> <div>标签选择器</div> </body> </html>
（4）属性选择器
编码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> /*属性选择器*/ div[name="label"]{ background-color: darkseagreen; } </style> </head> <body> <div name="label">selected</div> </body> </html>
4、CSS优先级
（1）div上的style属性，优先级最高
（2）以div为基础，由近到远去找CSS样式
（3）编码如下：
demo.css
#i1{
background-color: pink;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>优先级</title> <link rel="stylesheet" href="demo.css"> <style> #i1{ background-color: greenyellow; } </style> </head> <body> <div id="i1" style="background-color: red">one</div> </body> </html>
如图所示：
5、高度height和宽度width
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> .c1{ background-color: yellow; /*height高度理论上不能用100%*/ /*实际上如果父标签，有高度，那么子标签就可以用100% == 父标签的高度*/ height: 100px; width: 100px; /*自适应布局,占满屏幕：100%*/ /*width: 100%;*/ } </style> </head> <body> <div class="c1"></div> </body> </html>
6、字体大小：font-size 字体加粗：font-weight
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> .c2{ /*字体大小可以写默认的*/ /*font-size: larger;*/ /*字体大小可以写像素的*/ font-size: 100px; font-weight: bolder; } </style> </head> <body> <div class="c2">字体大小</div> <div>字体大小</div> </body> </html>
7、水平文本对齐方式：text-align
left：文本左对齐；right：文本右对齐；center：中间对齐；inherit：父类继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> /*!*class 选择器*!*/ .c1{ background-color: yellow; border:1px red solid; height: 100px; width: 100px; } .c3{ /*水平居中*/ text-align:center; } </style> </head> <body> <div class="c1 c3">good good study</div> </body> </html>
8、垂直文本对齐方式：line-height
line-height的属性直接对应外层div的宽度就可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> .c1{ /*background-color: yellow;*/ border:1px red solid; } .c3{ /*水平居中*/ text-align:center; /*垂直居中*/ line-height: 100px; } </style> </head> <body> <div class="c1 c3">study</div> </body> </html>
9、浮动：float（块级标签浮动后，相当于分层）
- 通过浮动可以将块及标签放到一行，相当于不同层，但超过100%的宽度就会换行，超过100%的宽度，相对于外层div来判断；
- none：默认不浮动
- inherit：父类继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> .c1{ /*background-color: yellow;*/ border:1px red solid; height: 100px; width: 100px; } .c4{ float: left; } .c5{ float: right; } </style> </head> <body> <div class="c1 c4"></div> <div class="c1 c4"></div> <div class="c1 c5"></div> </body> </html>
10、分层：position
- position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom
- position：relative 与 position：absolute（绝对定位）组合使用，单个使用没有作用
绝对定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分层</title> <style> .header{ height: 48px; background-color: aquamarine; line-height: 48px; text-align: center; /*绝对定位*/ position: fixed; top:0; right:0; left:0; } </style> </head> <body> <div class="header">HTML</div> <div style="height: 1000px;width: 100px">模拟body</div> </body> </html>
相对定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分层</title> <style> .header{ height: 4px; background-color: aquamarine; line-height: 48px; text-align: center; /*绝对定位*/ position: fixed; top:0; right:0; left:0; } .c2{ height: 400px; width: 400px; border: 1px red solid; /*相对定位*/ position: relative; } .c3{ background-color: red; width: 100px; height: 100px; position:absolute; } </style> </head> <body> <div class="header">HTML</div> <div style="height: 48px;width: 100px">模拟body</div> <div class="c2"> <div class="c3" style="top:0;left:0"></div> <div class="c3" style="top:0;right:0"></div> <div class="c3" style="bottom:0;left:0"></div> <div class="c3" style="bottom:0;right:0"></div> </div> </body> </html>
11、外边距：margin，自己针对外围的div产生变化，外边距撑大外层（top left right bottom）
内边距：padding，自身的边距增加；top：自上到下增加；bottom：从下增加；left：从左增加；right：从右增加；
层级关系：z-index，分层后，z-index来记录层级关系，越大越在前面
（1）外边距：
<!--外边距 自己相对父标签 进行位移 不改变自身--> <div class="c1" style="width: 100%"> <div style="width: 100%;height:20px;background-color: greenyellow;margin-top: 10px"></div> </div>
（2）内边距
<!--内边距 改变自身--> <div class="c1" style="width: 100%"> <div style="width: 100%;height: 20px;background-color: greenyellow;padding-top: 10px"></div> </div>
（3）样例：解决分层优先级（z-index）和分层上方隐藏被遮盖问题（margin-top）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分层</title> <style> .header{ height: 48px; background-color: aquamarine; line-height: 48px; text-align: center; /*绝对定位*/ position: fixed; top:0; right:0; left:0; /*解决优先级问题*/ z-index: 999; } .c2{ height: 1000px; width: 400px; border: 1px red solid; /*相对定位*/ position: relative; /*加外边距，解决上方分层隐藏被遮盖的问题*/ margin-top: 48px; } .c3{ background-color: red; width: 100px; height: 100px; position:absolute; } </style> </head> <body> <div class="header">HTML</div> <!--<div style="height: 48px;width: 100px">模拟body</div>--> <div class="c2"> <div class="c3" style="top:0;left:0"></div> <div class="c3" style="top:0;right:0"></div> <div class="c3" style="bottom:0;left:0"></div> <div class="c3" style="bottom:0;right:0"></div> </div> </body> </html>
12、display：展示属性
（1）块级标签和行内标签之间切换的属性
- display：inline，块级标签转换为行内标签display
- display：block，行内标签转换为块级标签
（2）行内标签无法设置高度、宽度、padding、margin
（3）通过display的display：inline-block，行内标签的自己多大就占多大的特性，又有块级标签使用宽、高、内外边距的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> .c1{ /*background-color: yellow;*/ border:1px red solid; </style> </head> <body> <!--让一个标签变为块级标签 display：block--> <!--让一个标签变为行内标签 display：--> <!--行内标签 是不能 应用 宽 高 外边距 内边距 这几种属性的--> <!--既是行内标签 又是块级标签--> <div class="c1" style="display: inline-block">hello</div> </body> </html>
（4）隐藏元素 display：none
<!--display:none 隐藏元素--> <div class="c1" style="display: none"></div>
如图所示：
13、cursor：一些不同的光标
（1）cursor：pointer 鼠标的小手
（2）cursor：move 元素移动
<input type="button" value="登录" style="cursor: pointer">
14、overflow：overflow属性设置，当div内的内容溢出div高度时，会默认出现在元素框之外
- hidden：溢出部分截取掉
- scroll：超出就出现滚动条
- auto：自动判断是否出现滚动条
<!--overflow 滚动条 overflow:auto 自动判断是否出现滚动条 overflow：hidden 截取--> <div class="c1" style="overflow: auto"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2690869028,3052745899&fm=15&gp=0.jpg" alt=""> </div>
15、hover属性：当鼠标移动到上面后，设置其样式
16、background：针对背景一些样式设置
（1）background-image：背景图片，图片大小如果小于div大小，则无限堆叠，水平垂直都堆叠；
（2）background-repeat：对是否堆叠进行设置
- no-repeat：不堆叠
- repeat-y：纵向堆叠
- repeat-x：横向堆叠
（3）background-position：针对div设置图片展示的位置
- background-position-y：10px 纵向移动图片
- background-position-x：10px 横向移动图片
注：可以不写x或y，默认第一个为x的值，第二个位y的值：background-position：10px 10px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> .b1 { border: 1px red solid; height: 500px; width: 100%; } .b2{ background-image: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=916869868,3965009630&fm=11&gp=0.jpg'); /*background-repeat:repeat-y;*/ /*background-repeat:repeat-x;*/ background-repeat:no-repeat; } </style> </head> <body> <div class="b1 b2" style=""></div> </body> </html>
17、background-position 背景图片分层发生变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 样式表 stylesheet --> <link rel="stylesheet" href="demo.css"> <!-- 写样式 --> <style> .b3{ height: 1000px; width: 1000px; background-image: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2400404501,1602002277&fm=26&gp=0.jpg'); background-position: 600px 600px; } </style> </head> <body> <div class="b3"></div> </body> </html>
（三）DOM基础
1、DOM：Document Object Model（文档对象模型）
- 文档对象模型，这个对象里面提供操作页面的API
- 一个web页面的展示，是由HTML标签组合的一个页面，DOM对象实际就是将HTML标签转换成一个文档对象。可以通过DOM对象中js提供的方法，找到HTML的各个标签。通过找到标签就可以操作标签使页面动起来。
2、DOM和JS关系
- JS：JavaScript （和Java无关，都是一种语言，可以直接被浏览器所解析运行的。）
- 用JS写一些逻辑，调用DOM操作页面，从而实现有逻辑的操作页面。
3、HTML DOM节点树，如图：
通过HTML DOM，树中的所有节点均可通过JavaScript进行访问。
4、获取标签：
// 直接获取标签 document.getElementById('i1'); //获取id为i1的标签 document.getElementsByTagName('div'); //根据标签名称获得标签数组 document.getElementsByClassName('c1'); //根据class属性获取标签的数组 document.getElementsByName('dsx'); //根据name属性获取标签数组 //间接获取标签 var tmp = document.getElementById('h-test'); tmp.parentElement; //父节点标签元素 tmp.children; //所有子标签 tmp.firstElementChild; //第一个子标签元素 tmp.lastElementChild; //最后一个子标签元素 tmp.nextElementSibling; //下一个兄弟标签元素 tmp.previousElementSibling; //上一个兄弟标签元素
document.getElementById('inner1') ：绝对定位
5、操作标签：
（1）文本内容操作：
A：innerHTML 与 innerText tmp.innerText; //获取标签中的文本内容 tmp.innerText = 'HelloWorld'; //更改标签内文本内容 tmp.innerHTML; //获取标签中的所有内容，包含HTML代码 tmp.innerHTML='<a href="https://www.baidu.com">搜索</a>' //innerHTML 可以将含有HTML代码的字符串变为标签 B：input、textarea标签 tmp.value; //获取input、textarea参数 tmp.value = '内容' //对input、textarea的内容进行赋值 C：select 标签 tmp.value; //获取select标签的value参数 tmp.value = '选项' //修改select选项 tmp.selectedIndex; //获取select标签的选项下标 tmp.selectedIndex = 1 //通过下标更改select的选项
（2）Inner Text 和 Inner Html针对div标签的区别：
- InnerText修改的是div标签中间的数据。<div>XXXXXX</div>
- InnerHtml同时也是修改div中间的数据，和InnerText的区别是，当赋值能够被浏览器解析的标签字符串时，会直接渲染到页面上。
（3）事件：
直接绑定
直接在标签中绑定事件
温故而知新
