html前端复习题二HTML的基本结构 1.页面的三要素页面的结构 HTML 页面的样式 CSS 页面的行为 JS 2

HTML的基本结构

1.页面的三要素

页面的结构 HTML

页面的样式 CSS

页面的行为 JS

2.HTML的基本结构

2.1 最简单的HTML文件

以下是一个最简单的HTLML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.2 结构说明

对其中的各个结构做说明

(1) 文档头声明

文档头声明, 也叫文档类型声明

代码⌨️

<!DOCTYPE html>

注意⚠️

文档头类型的英文缩写非常好记： DOC + TYPE (document + type)
不是标签
html 代指以 HTML5 的标准来解析当前页面
文档头类型声明一般会放在文档最开始的位置,浏览器的解析方式从上至下,从左至右

(2) `<html>`标签

HTML的根元素

代码⌨️

<html></html>

注意⚠️

HTML的根元素
除了文档头声明,其他所有内容都应当放在 HTML 的根元素当中

(3) `<head>`标签

HTML的头部

代码⌨️

<head></head>

注意⚠️

head 当中绝大部分内容都是不可见的
head 当中主要是用于辅助

(4) `<title>`标签

设置页面的标题

代码

<title></title>

(5) `<meta>`标签

定义页面的元数据,元数据本身没有任何含义,它的含义是根据后面的属性来决定的

代码

<head>
<meta name="description" content="我的第一个页面">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="LinDaiDai">
<meta charset="UTF-8">
</head>

例如属性charset: 规定 HTML 文档的字符编码

<meta charset="UTF-8">

表示以UTF-8的字符编码进行解析

注意⚠️

<meta>标签通常位于<head>区域内
元数据通常以名称/值对出现
如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值

实例

实例 1 - 定义文档关键词，用于搜索引擎：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：

<meta name="description" content="Free Web tutorials on HTML and CSS">

实例 3 - 定义页面作者：

<meta name="author" content="Hege Refsnes">

实例 4 - 每30秒刷新页面：

<meta http-equiv="refresh" content="30">

(6) `<body>`标签

HTML的身体, 用于向页面中展示内容

代码⌨️

<body></body>

注意⚠️

<body>标签定义文档的主体
<body>标签包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)

3.HTML的发展史

HTML(第一版)

• 1993年6月，互联网工程工作小组发布 HTML 工作草案

• 2.0

• 1995年11月作为 RFC 1866发布

• 3.2

• 1996年1月14日由 W3C 发布，是 HTML 文档第一个被广泛使用的标准

• 4.0

• 1997年12月18日有 W3C 组织发布，也是 W3C 推荐标准

• 4.01

• 1999年12月24日由 W3C 组织发布，是 HTML 文档另一个重要的，广泛使用的标准

• XHTML 1.0

• 发布于2000年1月26日，是 W3C组织的推荐标准，后来经过修订于2002年8月1日才重新发布

• 拓展的超文本标记语言

• 更严格，更纯净的 HTML 代码

• 为什么要被设计出来？

• HTML 已经发展到一种极度混乱的程度

• W3C制定了 XHTML ，它的目的是取代 HTML

• 例子：找一段非常混乱的代码

• 代码规范

• 但是后来失败了，没有人喜欢约束

• “存在即是合理”

• WHATWG 开始制定一种“妥协式”的

• web applications 1.0

• 2008年 W3C 认可该草案

• html5

• 优势

• 解决跨浏览器的问题

• 部分替代了原来的 JS

• 更明确的语义支持

• 增强了 WEB 应用程序的功能

4.注释：

4.1 注释的作用

解释和说明

给开发者看（给人看的）

4.2 HTML 部分的注释：

<!-- 需要注释的内容-->

<!--第一行
第二行-->

4.3 注释的快捷键

ctrl + /

5.标记以及标签：

5.1 标记

单标记：<>

如：

<img>

双标记 <> </>

如：

<div></div>

5.2 标签

将特定的英语单词放入我们的标记中，这样我们的标记就有了特殊的含义，这时候，我们将有含义的标记称之为“标签”。

1.块元素标签

div

双标签语义: 无意义;

h1~h6

双标签语义:一级标题至六级标题;

默认样式: margin-top 和 margin-bottom;

双标签语义: 段落;

默认样式:

margin-top:16px;
margin-bottom:16px;

blockquote

双标签语义: 定义长段的引用;

默认样式:

margin-top:16px;
margin-bottom:16px;
margin-left :40px;
margin-right:40px;

address

双标签语义: 定义地址

默认样式:

font-style: italic;

ul >li

双标签语义: 定义无序列表;

默认样式:

margin-top：16px;
margin-bottom:16px;
padding-left:40px;

ol >li

双标签语义: 定义有序列表;

默认样式:

margin-top：16px;
margin-bottom:16px;
padding-left:40px;

dl >dd 和 dt 双标签语义:

dl: 语义: 定义段落

默认样式:

margin-top：16px;
margin-bottom:16px;

dt 语义 : 定义标题列表项;

默认样式: none ;

dd: 语义: 定义普通列表项

dd: 是针对dt的解释和说明

默认样式:

margin-left；40px;

::: tip 块元素的特性:

1.块元素默认独占一行;

2.块元素如果没有设置宽度，默认继承父级的宽度

3.块元素可以正常的显示margin 和 padding

4.块元素可以设置宽度和高度;

:::

2.内联元素标签

span

双标签语义 ; 无意义

一般使用span来设置某些文字或局部内容的样式;

双标签语义: 强调语气

显示方式；斜体

strong

双标签语义: 重要的文本

语气强烈程度高于<em>

显示方式；粗体 ;

双标签语义: 超链接

1.属性href

href=" ": 指定超链接所关联的另一个资源的地址;

作用1:用于和网络上的另一个资源"保持关联";

绝对路径

https://www.baidu.com

https/http: 超文本传输协议;

相对路径

img/1.jpg

物理路径:

file://

作用2:锚点

(例1)

点击"回到标记处" 回到锚点处只能作用于id

<a href="#maodian1">
<a href="#maodian2">

<div id="maodian1">
<div id="maodian2">

点击第一个a标签, 页面则跳到id为maodiao的标签处

(例2)

<a href="#" ></a>

地址栏链接污染会在地址栏的最末尾加上#
会造成点击后刷新网页

(例3)

<a href="###" ></a>

地址栏链接污染会在地址栏的最末尾加上###
不会造成点击后刷新网页

(例4)

 <a href="javascript:void(0);" ></a>

地址栏链接不会污染
不会造成点击后刷新网页
会使浏览器默认记录内容是否被点击过的功能失效

2.属性target

target="":指定使用哪种框架去装载新资源

属性值：

_self 当前网页进行加载;
_blank 新建页面进行加载;

例

<a href="https://www.baidu.com" target="_blank">打开百度</a>

表示点击这个 a标签,则已一个新窗口打开百度首页

双标签

语义: 定义短的引用

浏览器一般以双引号的方式来显示该内容

cite

双标签

语义: 定义作品的名称浏览器一般会以斜体的方式来显示该内容

code

双标签

定义一段计算机代码

pre

双标签

语义: 预文本格式化内容

::: tip 内联元素的特征:

内联元素默认会在一行显示，直至一行放不下时才会另起一行;

内联元素空格和回车会被解析;

内联元素不支持设置宽度和高度; "的；(是由内容来"撑开设置float:left就可以设置宽高)

内联元素无法正常的显示margin 和 padding ；(设置float:left就可以设置宽高)

:::

3.内联块元素标签

img

单标签

语义定义图片

属性

src 指定"图片资源文件"所在的地址
alt 指定图片无法正常加载时所提供的用户信息,便于 SEO (搜索引擎) 搜索

注意⚠️

会有小间隙解决

width:100%; 
height:100%;

::: tip 内联块元素的特征:

1.可以设置宽高

2.可以放在同一行显示

3.代码换行也会被解析

:::

元素与元素之间会有空白：原因内联元素空格和回车会被解析

解决:

手动把回车空格去掉
把父级的font-size:0;

5.3 写标签的简便方法

设置3个div :

div*3 + tab

<div></div>
<div></div>
<div></div>

设置一个div 内有三个子div:

div>div*3 + tab

<div>
	<div></div>
	<div></div>
	<div></div>
</div>

设置一个div内有一个子div 和一个 p 标签:

 div>p+div + tab

<div>
	<p></p>
	<div></div>
</div>

给div 设置一个类名:

 .wrap +tab

<div class="wrap"></div>

给 p 设置一个类名 :

 p.p1 +tab

<p class="p1"></p>

给一个div 内设置俩个子div 并分别加上类名:

 .father>.son1+.son2 +tab

    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>

设置三个内容相同的div:

 div{我是 div }*3 +tab

    <div>我是 div </div>
    <div>我是 div </div>
    <div>我是 div </div>

设置三个内容依次递增的div :

div{我是世界第 $ 帅}*3 +tab

    <div>我是世界第1帅</div>
    <div>我是世界第2帅</div>
    <div>我是世界第3帅</div>

设置三个类名依次递增的div:

 .div_$*3 +tab

    <div class="div_1"></div>
    <div class="div_2"></div>
    <div class="div_3"></div>

设置三个ID名依次递增的div:

 #div_$*3 +tab

    <div id="div_1"></div>
    <div id="div_2"></div>
    <div id="div_3"></div>

设置3个href为javascript:; 内容为百度的a标签

 a[href=javascript:;]{百度}*3 +tab

    <a href="javascript:;">百度</a>
    <a href="javascript:;">百度</a>
    <a href="javascript:;">百度</a>

6.标签类型之间的转换

在css中使用display属性来进行标签与标签之间的转换

display: 修改当前标签的类型

常用的属性值有：

block 块元素;
inline 内联元素:
inline-block 内联块元素;
none 让当前元素完全消失在布局当中不在占有位置;

7.标签之间的嵌套

1.块元素

div 里面可以套p 、 p 不能嵌套 div

如以下做法是可以的：

<div>
	<p>我是p表签</p>
</div>

以下做法是错误的：

<p>
	<div></div>
</p>

h1 ~ h6、 dt 同样不能嵌套其他块元素

2.内联元素

超链接当中不能嵌套超链接;

如以下做法是错误的：

<a>
	<a></a>
</a>

8.HTML的加载顺序

谨记两点：

从上至下从左至右

后加载的内容会覆盖前面加载的内容

9.前端规范

1、所有书写均在英⽂文半⻆角状态下的⼩小写；

2、id，class必须以字⺟母开头；标签的命名必须以字母、下滑线、$作为开头

3、所有标签必须闭合；

4、html标签用tab键缩进；

5、属性值必须带双引号；

6、

7、/* css注释 */

8、ul,li/ol,li/dl,dt,dd拥有⽗父⼦子级关系的标签；

9、p,dt,h标签⾥面不能嵌套块属性标签；

10、a标签不能嵌套a；

11、内联标签不能嵌套块标签；

10.对seo有意义的标签

1.页面的标题title 标签

<title>页面标题</title>

2.页面的关键字

<meta name="keywords" content="HTML5" />

3.页面的描述

<meta name="description" content="LinDaiDai"/>

4.h1标签和h2标签

<h1></h1>
<h2></h2>

5.重要的文本strong标签

<strong></strong>

6.图片img标签的alt属性

<img src="img/img1.png" alt="我是图片1" />

7.友情链接

经常看到网页最下面的友情链接

如w3c的官网下面：

基本的表单标签

1. form

双标签

语义：定义表单

代码⌨️

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

1.1 属性

1. action

作用：表单需要提交的地址,向何处发送表单数据

代码⌨️

<form action="URL">

URL为表单提交的地址,可能的值有：

绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）
相对 URL - 指向站点内的文件（比如 src="example.htm"）

2. method

作用：表单提交的方式

代码⌨️

<form action="example.htm" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

可能的值有：

get 也是默认值,一般用于从服务器上获取数据,安全性上不如post
post 一般用于向服务器传送数据

2. input

单标签

语意: 输入型表单控件

代码⌨️

<input type="submit" value="Submit" />

2.1 属性

1. type

作用：规定input元素的类型

代码⌨️

<input type="submit" />

可能的值：

1.text 文本输入框,默认值

属性✍️

placeholder 文本框提示语

maxlength 文本可输入最大长度

<input type="text" placeholder="请输入" maxlength="20" />

2.password 密文输入框

也是一个文本输入框,与它的区别是密文输入框内输入的内容是不可见的,会被显示为一个个小黑点.

属性✍️

placeholder 文本框提示语

maxlength 文本可输入最大长度

3.radio 单选框

相同类型的单选框，name 属性需要相同

属性✍️

name 设置radio的名称

value 属性值

disabled 是否禁用设置了这个属性之后单选框为禁用状态

checked 单选框的默认选项 checked="checked"

<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="girl"/>女

<!--默认为男-->
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女

<!--直接写checked也是和上面等效的-->
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/>女

<!--禁用状态-->
<input type="radio" name="sex" disabled/>男
<input type="radio" name="sex"/>女

4.checkbox 复选框

属性✍️

name 设置checkbox的名称

value 属性值

disabled 是否禁用设置了这个属性之后多选框为禁用状态

checked 复选框的默认选项 checked="checked"

<input type="checkbox" name="hobby" value="eat" checked/>吃饭
<input type="checkbox" name="hobby" value="sleep"/>睡觉
<input type="checkbox" name="hobby" value="swim"/>洗澡
<input type="checkbox" name="hobby" value="programme"/>编程

5.hidden 隐藏

这种类型的输入元素实际上是隐藏的。

这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。

如果想要提交并非用户直接输入的数据的话，就是用这种类型的元素。

属性✍️

name 设置或返回隐藏域的名称

value 设置或返回隐藏域的 value 属性的值

<input type="hidden" name="height" value="100"/>

6.button 表单的普通按钮

属性✍️

value 按钮上显示的字

disabled 是否禁用按钮

<input type="button" value="点击">

7.submit 表单的提交按钮

属性✍️

value 按钮上显示的字

name 设置或返回submit的名称

disabled 是否禁用按钮

与button的区别

<input type="button" /> 这就是一个按钮,如果你不写javascript 的话,按下去什么也不会发生
<input type="submit" /> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它
<button></button>这个按钮放在 form 中也会点击自动提交,比前两个的优点是按钮的内容不光可以有文字,还可以有图片等多媒体内容.（当然，前两个用图片背景也可以做到）.它的缺点是不同的浏览器得到的 value 值不同;可能还有其他的浏览器兼容问题

8.reset 重置按钮

属性✍️

value 按钮上显示的字,默认值为“重置“

name 设置或返回重置按钮的名称

disabled 是否禁用按钮

2. name

作用：定义 input 元素的名称 (键值对：名称 = 数值，KEY = VALUE)

代码⌨️

<input name="firstName" />

3. value

作用： input输入内容的值

代码⌨️

<input type="submit" value="Submit" />

3. select

下拉菜单

双标签

内部需要使用option 来作为菜单的列表项

name设置给select , option 设置 value

可以通过设置selected 属性来设置默认首选项

<select name="wd">
	<option value="选项1">选项1</option>
   	<option value="选项1">选项1</option>
</select>

4. textarea

文本输入域

单标签

CSS属性

resize 设置文本框是否可拉伸,设置为 "none" 则不可以

textarea {
    resize: none;
}

属性✍️

name 设置并返回textarea的名称

value 设置或返回在 textarea 中的文本

placeholder 文本框提示语

maxlength 文本可输入最大长度

cols 文本框的宽度

rows 文本框的高度

disabled 是否被禁用

<textarea cols="3" rows="10" maxlength="20" placeholder="请输入"></textarea>

DOM基础

第一章:DOM概述

1.1DOM以及节点概念

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。

DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

![img1](https://github.com/LinDaiDai/JavaScript/blob/master/DomImg/img1.png?raw=trueE:\JavaScript\DomImg\img1.png)

**HTML**文档可以说由节点构成的集合，DOM节点有:

元素节点：上图中、、
等都是元素节点，即标签。
文本节点:向用户展示的内容，如
...

中的JavaScript、DOM、CSS等文本,即标签内部的纯文本.

属性节点:元素属性，如标签的链接属性href="www.imooc.com",即标签的属性.

document节点是每个文档的根节点

document节点下面只有一个 html节点，我们称之为文档元素。

(documentElement)文档元素是文档的最外层元素，其他元素都包含在文档元素中。

一个文档只能有一个文档元素，在html中文档元素永远是 <html>元素。

在DOM树中，html文档中每一处标记都可以用树中的一个节点来表示。

html(元素)标签，通过元素节点表示属性，通过属性节点来表示文档类型，通过文档类型节点来表示注释，通过注释类型来表示

1.2节点的属性(特性)

每一个节点都有三个特点:

1.nodeName      节点名称(只读)    

2.nodeValue     节点值(设置或返回节点的值)     

3.nodeType      节点类型

1.nodeName：节点名称(nodeName 始终包含 HTML 元素的大写字母标签名) nodeName 是只读的

2.元素节点的 nodeName 与标签名相同

3.属性节点的 nodeName 与属性名相同（元素.getAttributeNode(“属性名”)获取属性节点）4.文本节点的 nodeName 始终是 #text（通过元素的子节点获取）

5.注释节点的nodeName是#comment（通过元素的子节点获取）

6.文档节点的 nodeName 始终是 #document

7.nodeValue：节点值（设置或返回节点的值）

8.元素节点的 nodeValue 是 undefined 或 null

9.属性节点的 nodeValue 是属性值

10.文本节点的 nodeValue 是文本本身

11.注释节点的nodeValue是注释里面的内容

12.文档节点的nodeValue 是null

13.nodeType：节点类型

14.元素 element 1

15.属性 attr 2

16.文本 text 3

17.注释 comments 8

18.文档 document 9

例:

<body>
<p id = "p" class = "abc">您好</p>
<script>
    var p = document.getElementById('p');
    p.nodeName      P
    p.nodeValue     null
    p.nodeType     1     元素节点
    var text = p.firstChild;
    text.nodeName     #text
    text.nodeValue     您好
    text.nodeType     3     文本节点
    var attrNode = p.getAttributeNode("id");
    attrNode.nodeName     id
    attrNode.nodeValue     p
    attrNode.nodeType     2     属性节点
 </script>
 </body>

第二章:document对象

2.1获取节点

1.getElementById('id名')

根据元素的id名来获取节点

**IE5以下不兼容**

2.getElementsByTagName('标签名')

根据元素的标签名来获取节点.一个文档中可能会存在很多相同的标签名,因此用此方法获取到的是多个element组成的集合

3.getElementsByName('name')

根据标签的name属性来获取节点,返回的也是多个element组成的集合;

**注:**不是所有标签都有name属性,只有 **表达标签** 才有name属性(切某些低版浏览器不支持)

4.querySelector('css选择器')

参数:指定一个或多个匹配元素的css选择器.可以用id, 类, 类型,属性,属性值等来选取元素.

对于多个选择器,使用逗号隔开,返回一个匹配的元素,

返回值:匹配指定css选择器的第一个元素, 若没找到,返回null.

document.querySelector 获取第一个

var p = document.querySelector("#box > p"); //box 这个 id 下的 p标签

console.log(p);

abc

5.querySelectorAll('css选择器')

获取满足选择器里的所有标签

6.documentElement(元素)

documentElement 属性以一个元素对象返回一个文档的文档元素。HTML 文档返回对象为 HTML元素。

<body>
    <script type="text/javascript">
        alert(document.documentElement.nodeName);    // html
        alert(document.documentElement.nodeValue);    // null
        alert(document.documentElement.nodeType);    // 1
    </script>
</body>

2.2 Node关系获取操作

1.节点与节点之间的关系

父（parent）节点父节点拥有任意数量的子节点

子（child）节点子节点拥有一个父节点

兄弟（sibling）节点同级的子节点被称为同胞（兄弟或姐妹）。

同胞是拥有相同父节点的节点根 (root) 节点

一个文档只能有一个根节点。

对html文档来说，根节点就是documentElement。

根节点不可能有父节点

2.获取操作

var div = document.querySelector("div");
var allNodes = div.childNodes;          //childNodes会把所有类型节点都获取到,包裹元素节点,文本节点(空格换行符等),属性节点;

但主要是为了获取元素节点(nodeType为1)
方法1:
for( var c in allNode){
if( c.nodeType ==1){
document.write(c)
}
}
方法2:
var allNodes = div.children;          //div的所有子节点(只有元素节点,不包裹文本等其他节点)
var count = div.childElementCount;     //div的所有子节点的个数 ,也可以之间用 allNodes.length;
var firstChild = div.firstElementChild;     //div的第一个元素节点
var lastChild = div.lastElementChild;          //div的最后一个元素节点
var secondChild = div.firstElementChild.nextElementSibling;     //div的第二个元素节点
var lastSecondChild = div.lastElementChild.previousElementSibling;     //div的倒数第二个元素节点
div == div.firstElementChild.parentNode;                              //div的第一个元素节点的父节点就是div本身
注:若把 children 换为childNodes 以及把后面全部的Element去掉,则会选取所有类型的节点

3.创建修改操作

3.1 createTextNode( )

	创建文本节点

`var text = document.createTextNode("这个是文本节点");`

3.2 createElement( )

	创建元素节点	

	可以是 div  p   span  ul  li 等

`var ele = document.createElement("div");`

3.3 appendChild( )

给一个元素追加child节点

`document.body.appendChild(ele); //添加到body的最后一个子节点之后; `

3.4 insertBefore( )

fatherNode.insertBefore(newNode, existingNode);

参数:	1.要插入的节点	2.目标节点

在一个节点前插入一个节点

将一个新创建的元素插入到某个元素之前

 如:在ul中,有3个li ,要将新创建的一个li 插入到第一位,
      ul.insertBefore(li,ul.firstElementChild);
    将li 插入到最后一位:
      1.ul.appendChild(li);
      2.ul.insertBefore(li,null/undefined);

3.5 removeChild( )

移除子节点

fatherNode.removeChild(node)

3.6 replaceChild( )

fatherNode.replaceChild(newNode,existingNode)

替换子节点

3.7 cloneNode( )

node.cloneNode(deep)

克隆节点

参数 deep 可以指定节点的精确克隆

	1.若不写参数,只拷贝当前的这个元素节点,不包过它的子节点

	2.参数为 **true** ,**它还将递归复制当前节点的所有子孙节点**.

4.元素属性操作

##### 4.1 getAttribute( ):获取属性值

<ul id = "abc" class = "one">
如 获取 ul 的 id 
     console.log(ul.getAttribute("id"));
 => abc
##### 4.2 setAttribute( ):

添加或设置属性值

      1.如将 ul 的 id 名更换  
          div.setAttribute("id" , "box")
          ul 的 id 变为 box 
      2.将 ul 的class 再添加俩个类名
           div.setAttribute("class" , div.getAttribute("class") + " two");
##### 4.3 removeAttribute( )

*element*.removeAttribute(*attributename*)

参数：必需。规定要删除的属性的名称

*例:* 一个可以转换形态的按钮

<body>  
<input id="input1" type="button" value="点我可以转换我的状态" onclick="myFunction();">
<script>
    function myFunction() {            
        var input1 = document.getElementById("input1");
        var typeValue = input1.getAttribute("type");
        if(typeValue){
            input1.removeAttribute("type");    //如果type属性有值就把这个属性去掉
        }else {
            input1.setAttribute("type", "button");    //如果type属性不存就添加属性。
        }
    };
</script>   
</body>

4.4 hasAttribute( )

element.hasAttribute(attributename)

参数：必须。判断指定的属性名是否存在。

5.元素节点的常用属性

5.1 基本属性

div.nodeName   所有节点都有

div.tagName     只针对元素节点

div.id           获取id

div.id = "abc"    增加/替换 id

div.className = "one"    增加/替换 class

checked 属性     表单标签特有的

5.2 innerHTML属性

innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。

值为为文本	

若要改变innerHTML(**要改变的值一定要放在.innerHTML之后**);

var num =5;  num="我是字符串";   num=true;
var span = document.getElementById('span').innerHTML=num;     正确写法
alert(typeof(span));     //num是什么属性或者赋值给它的是什么属性, span就是什么属性;
var span = document.getElementById('span').innerHTML;
span = num;                                                  错误写法

1.利用innerHTML 获取标签内的所有内容,返回一个字符串
alert(box.innerHTML); //获取这个元素节点里的文本(包含HTML标签),类型为string
正常浏览器显示:    <span>我是span</span>
IE                 <SPAN>我是span</SPAN>

2.利用innerHTML 设置一个字符串,会把字符串中的有效的标签解析出来.
  如,给div标签中添加一个内容是 "abc" 的p 标签
        var div = document.querySelector(div);
        div.innerHTML = "<p>abc</p>";

5.3 innerText属性

1.innerText值获取标签中的文本内容，子标签本身不会获取到。

2.去修改的时候，即使带有标签也会把标签作为纯文本来对待，而不会解析为标签

**注:和innerHTML不同,它并不会解析有效的标签,而是把它作为纯文本对待**

5.4 outerHTML

1.**读取值** 把包过标签自身和它里面的内容都获取到    

2.**设置值** 把标签用字符串来替换掉,如果字符串中有有效的标签,会被解析.

**注:和innerHTML不同,它可以读取包过标签自身**

5.5 value

	如果一个标签可以拥有value值，则可以可以通过element.value来获取。

	一般表单数据才具有vlaue：input、textarea、select

5.6 获取元素的属性(offset)

**注:** 以下四个属性只能读取 不能对元素进行修改;

1.offsetWidth  	获取元素的实际宽度	包含border 和 padding 在内

2.offsetHeight 	获取元素的实际高度	包含border 和 padding 在内

3.offsetLeft 		元素定位之后相对于参照物父容器的偏移

4.offsetTop 		元素定位之后相对于参照物父容器的偏移

6.样式表的属性--css脚本化

6.1 获取和修改行内样式表

2种方式访问到行内样式:

	1.element.style.css属性名    

       2.element.style["css属性名"]

6.2 获取内部样式表和外部样式表

1.对于IE: 对象.currentStyle["属性名"]     

    2.其他浏览器: window.getComputedStyle(对象,null)["属性名"]

6.3 字符串模板

字符串${变量}

element.style.backgroundColor = `rgba(  
       ${randomInt(0,255)},
       ${randomInt(0,255)},
       ${randomInt(0,255)},
       ${Math.random()*0.+0.4}`;

html前端复习题二

HTML的基本结构

1.页面的三要素

2.HTML的基本结构

2.1 最简单的HTML文件

2.2 结构说明

(1) 文档头声明

(2) <html>标签

(3) <head>标签

(4) <title>标签

(5) <meta>标签

(6) <body>标签

3.HTML的发展史

4.注释：

4.1 注释的作用

4.2 HTML 部分的注释：

4.3 注释的快捷键

5.标记以及标签 ：

5.1 标记

5.2 标签

1.块元素标签

2.内联元素标签

3.内联块元素标签

5.3 写标签的简便方法

6.标签类型之间的转换

7.标签之间的嵌套

1.块元素

2.内联元素

8.HTML的加载顺序

9.前端规范

10.对seo有意义的标签

基本的表单标签

1. form

1.1 属性

1. action

2. method

2. input

2.1 属性

1. type

2. name

3. value

3. select

4. textarea

DOM基础

第一章:DOM概述

1.1DOM以及节点概念

1.2节点的属性(特性)

第二章:document对象

2.1获取节点

1.getElementById('id名')

2.getElementsByTagName('标签名')

3.getElementsByName('name')

4.querySelector('css选择器')

5.querySelectorAll('css选择器')

6.documentElement(元素)

2.2 Node关系 获取操作

1.节点与节点之间的关系

2.获取操作

3.创建修改操作

3.1 createTextNode( )

3.2 createElement( )

3.3 appendChild( )

3.4 insertBefore( )

3.5 removeChild( )

3.6 replaceChild( )

3.7 cloneNode( )

4.元素属性操作

4.4 hasAttribute( )

5.元素节点的常用属性

5.1 基本属性

5.2 innerHTML属性

5.3 innerText属性

5.4 outerHTML

5.5 value

5.6 获取元素的属性(offset)

6.样式表的属性--css脚本化

6.1 获取和修改行内样式表

6.2 获取内部样式表和外部样式表

6.3 字符串模板

(2) `<html>`标签

(3) `<head>`标签

(4) `<title>`标签

(5) `<meta>`标签

(6) `<body>`标签

5.标记以及标签：

2.2 Node关系获取操作