或者
- 等标记后边的内容如何能得到???
如果有:<b>abcdefg
或者
<li>一级
问:
用什么方法能得到<b>或者<li>后边的内容
又问:
如果是innerHTMLf动态生成的<b>或<li>显示到页面中,也能得到后边的内容吗?
或者
<li>一级
问:
用什么方法能得到<b>或者<li>后边的内容
又问:
如果是innerHTMLf动态生成的<b>或<li>显示到页面中,也能得到后边的内容吗?
...全文
请发表友善的回复…
发表回复
烂笔头Danky 2002-12-26
- 打赏
- 举报
元素有ID的方法:
<b id=aaa>123</b>
<b id=bbb>456</b>
<ul>
<li id=ccc>789
</ul>
<script>
alert(document.aaa.innerText+"\n"+document.bbb.innerText+"\n"+document.ccc.innerText);
</script>
<b id=aaa>123</b>
<b id=bbb>456</b>
<ul>
<li id=ccc>789
</ul>
<script>
alert(document.aaa.innerText+"\n"+document.bbb.innerText+"\n"+document.ccc.innerText);
</script>
江南昆虫 2002-12-26
- 打赏
- 举报
最好是给他们取ID,不过不取也行:
<b>123</b>
<b>456</b>
<ul>
<li>789
</ul>
<script language="JavaScript">
<!--
alert(document.getElementsByTagName('B')[0].innerHTML);
alert(document.getElementsByTagName('B')[1].innerHTML);
alert(document.getElementsByTagName('LI')[0].innerHTML);
//-->
</script>
<b>123</b>
<b>456</b>
<ul>
<li>789
</ul>
<script language="JavaScript">
<!--
alert(document.getElementsByTagName('B')[0].innerHTML);
alert(document.getElementsByTagName('B')[1].innerHTML);
alert(document.getElementsByTagName('LI')[0].innerHTML);
//-->
</script>
详尽的前端笔记,包含html和css部分,由xmind8做的笔记。css部分:编写的位置
1.内联样式
将样式编写到标签的style属性中
这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用
2.内部样式表
将样式表编写到head中的style标签中
使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护
3.外部样式表
将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="文件的路径"/>
将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式
编写的位置
1.内联样式
将样式编写到标签的style属性中
这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用
2.内部样式表
将样式表编写到head中的style标签中
使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护
3.外部样式表
将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="文件的路径"/>
将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式
基本语法
选择器
通过选择器可以选中页面中的一组元素,然后为其设置样式
元素选择器
根据标签名,选中页面中的指定元素
语法:标签名{ }
例子:
div{}
p{}
h1{}
id选择器
根据元素的id属性值选中一个唯一的元素
语法:#id {}
例子:
#box1{}
#hello{}
类选择器
根据元素的class属性值,选中一组元素
语法:.class{}
例子:
.hello{}
.box{}
通配选择器
选中页面中的所有元素
语法:*{}
通配选择器的性能比较差,尽量避免使用
并集选择器
可以同时选中符合多个选择器的元素
语法:选择器1,选择器2,选择器N{}
例子:
div,p,#box,.hello{}
交集选择器
可以选中满足多个条件的元素
语法:选择器1选择器2选择器N{}
例子:p.hello{}
后代元素选择器
选中指定元素的指定后代元素
语法:祖先元素 后代元素{}
例子:
div span {}
div p{}
子元素选择器
选中指定元素的指定子元素
语法:父元素 > 子元素 {}
例子:
div > span {}
div > p{}
声明块
声明块中实际上就是一个一个CSS声明
声明
每一个CSS声明都是一个样式,实际上就是一个名值对的结构
名和值之间使用:链接
:左边是样式的名字
:右边是样式的值
每一个声明以;结尾
例子
color:red;
font-size:20px;
元素之间的关系
父元素
直接包含子元素的的元素叫做父元素
子元素
直接被父元素包含的元素叫做子元素
祖先元素
直接或间接包含后代元素的元素叫做祖先元素,父元素也是祖先元素
后代元素
直接或间接被祖先元素包含的元素叫后代元素,子元素也是后代元素
兄弟元素
拥有相同父元素的元素叫做兄弟元素
块元素和内联元素
块元素
块元素会独占页面中的一行,无论他的内容的多少
一般使用块元素对页面进行布局
常见的块元素
div
p
h1~h6
内联元素
内联元素只占用自身的大小,不会独占一行
内联元素也叫行内元素(inline)
一般内联元素都是用来为文本来设置效果
常见的内联
span
a
img
包裹规则
一般都是使用块元素去包裹内联元素,而不会使用内联去包裹块元素
a元素可以包含任意元素,除了a本身
p元素不能包含任何块元素
伪类和伪元素
伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置
:link
表示一个普通的链接(未访问过的链接)
:visited
表示访问过的链接
:hover
鼠标移入的链接,也可以为其他元素设置hover
:active
正在被点击的链接,也可以为其他元素设置active
:focus
表示元素获取焦点的状态,一般用于文本框
::selection
表示内容被选中的状态
在火狐中使用::-moz-selection来代替
:first-letter
表示第一个字符
:first-line
表示文字的第一行
:before
选中元素的最前边
一般该伪类都会结合content一起使用,通过content可以向指定位置添加内容
:after
选中元素的最后边
一般该伪类都会结合content一起使用,通过content可以向指定位置添加内容
属性选择器
根据元素的属性选择指定元素
[属性名]
选取含有指定属性的元素
[属性名="属性值"]
选取属性值等于指定值的元素
[属性名^="属性值"]
选取属性值以指定内容开头的元素
[属性名$="属性值"]
选取属性值以指定内容结尾的元素
[属性名*="属性值"]
选取属性值中包含指定内容的元素
兄弟元素选择器
选取后一个兄弟元素
前一个 + 后一个
选取后边所有的兄弟元素
前一个 ~ 后边所有
子元素的伪类
:first-child
寻找父元素的第一个子元素,在所有的子元素中排序
:last-child
寻找父元素的最后一个子元素,在所有的子元素中排序
:nth-child
寻找父元素中的指定位置子元素,在所有的子元素中排序
例子
p:nth-child(3)
可以使用even,来找到偶数的子元素
可以使用odd,来找到奇数的子元素
:first-of-type
寻找指定类型中的第一个子元素
:last-of-type
寻找指定类型中的最后一个子元素
:nth-of-type
寻找指定类型中的指定子元素
否定伪类
从一组元素中将符合要求的元素剔除出去
语法:
:not(选择器)
例子:
.abc:not(div)
HTML,超文本标记语言
负责页面中的结构,定义出页面中的各个组成部分
HTML是采用纯文本的形式的编写,采用HTML标签来标识出页面中的不同部分
标签
成对出现
<标签名>标签名>
自结束标签
<标签名 />
属性
通过属性可以设置标签的效果
属性需要定义在开始标签中或这自结束标签中
属性实际上是一组一组名值对结构
例子:
<标签名 属性名="属性值" 属性名="属性值">标签名>
<标签名 属性名="属性值" 属性名="属性值" />
HTML页面的基本结构
常用标签
网页的根标签
一个页面中有且只有一个根标签
网页中的所有内容都需要写在html标签的内部
网页的头部
该标签中的内容不会在网页中直接显示
该标签用于帮助浏览器解析页面
子标签
用来设置网页的标题
默认会在浏览器的标题栏中显示
搜索引擎检索网页时,会主要检索title中的内容,它会影响到页面在搜索引擎中的排名
用来设置网页的元数据,比如网页使用的字符集
设置网页的关键字
设置网页的描述
请求的重定向
网页的主体
网页中所有的可见部分都需要在body中编写
~
水平线标签 内联框架 可以向一个页面中引入其他的外部页面 属性 src 外部页面的地址,可以使用相对路径 width和height 可以设置框架的宽度和高度 name 可以为内联框架指定一个名字 可以将该属性值设置为超链接的target属性的值 这样当点击超链接时,页面将会在相应的内联框架中打开 内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架 超链接 可以使当前页面跳转到其他的页面 链接的文字 属性 href 指向链接跳转的目标地址,可以是一个相对路径 还可以是#id属性值,这样当点击超链接以后,将会跳转到当前页面的指定位置 可以使用mailto:来创建一个发送电子邮件的超链接 target 指定在哪个窗口中打开链接 可选值 _self 默认值,默认在当前窗口打开链接 _blank 在新窗口中打开链接 内联框架的name属性值 在指定的内联框架中打开链接 注释 语法 注释中的内容不会在页面中显示,但是会在源码中显示,我们可以通过注释来说明网页的代码 也可以通过注释隐藏一些页面中不想显示的内容 实体 在HTML页面中一些特殊符号是不能直接使用,需要使用实体来代替这些特殊符号 实体也可以称为转义字符 实体的语法 &实体名; 常用的实体 空格 < < > > 版权符号 © 图片标签
使用图片标签可以向页面中引入一个外部图片
属性
src
指向一个外部图片的路径,可以使用相对路径
alt
指定一个在图片无法加载时对图片的描述
搜索引擎主要通过该属性来识别图片的内容
如果不写该属性则搜索引擎会对图片进行收录
width
设置图片的宽度
height
设置图片的高度
图片的格式
JPEG
颜色丰富的图片,如,照片
GIF
颜色单一,简单透明的图片,动态图
PNG
颜色丰富,复杂透明的图片
图片选择的原则
效果一致,用小的
效果不一致,用效果好的
相对路径
相对于当前资源所在的目录的路径
可以使用../返回一级目录,返回几级使用几个../
xHtml语法规范
1.HTML中不区分大小写,但是尽量使用小写
2.HTML的注释不能嵌套
3.标签必须结构完整
要么成对出现
要么自结束标签
4.标签可以嵌套但是不能交叉嵌套
5.属性必须有值,且值必须加引号,单引号双引号都可以
文本标签
表示语气上的强调
表示内容的重要性
表示单纯的斜体
表示单纯的加粗
表示细则一类的内容
表示参考的内容,凡是加书名号的都可以使用cite
~
标题标签
在html中一共有六级标题
六级标题中,h1最重要,h6最不重要,一般页面中只会使用h1~h3
h1的重要性仅次于title,浏览器也会主要检索h1中的内容,以判断页面的主要内容
一般一个页面中只能写一个h1
段落标签
换行标签
水平线标签 内联框架 可以向一个页面中引入其他的外部页面 属性 src 外部页面的地址,可以使用相对路径 width和height 可以设置框架的宽度和高度 name 可以为内联框架指定一个名字 可以将该属性值设置为超链接的target属性的值 这样当点击超链接时,页面将会在相应的内联框架中打开 内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架 超链接 可以使当前页面跳转到其他的页面 链接的文字 属性 href 指向链接跳转的目标地址,可以是一个相对路径 还可以是#id属性值,这样当点击超链接以后,将会跳转到当前页面的指定位置 可以使用mailto:来创建一个发送电子邮件的超链接 target 指定在哪个窗口中打开链接 可选值 _self 默认值,默认在当前窗口打开链接 _blank 在新窗口中打开链接 内联框架的name属性值 在指定的内联框架中打开链接 注释 语法 注释中的内容不会在页面中显示,但是会在源码中显示,我们可以通过注释来说明网页的代码 也可以通过注释隐藏一些页面中不想显示的内容 实体 在HTML页面中一些特殊符号是不能直接使用,需要使用实体来代替这些特殊符号 实体也可以称为转义字符 实体的语法 &实体名; 常用的实体 空格 < < > > 版权符号 © 图片标签
短引用,行内引用长引用,块级引用 上标 下标删除的内容 插入的内容预格式标签,可以保留代码中空格换行这些格式表示程序代码 列表 无序列表 使用ul来创建一个无序列表,在列表中使用li来表示一个列表项 无序列表使用符号作为项目符号 有序列表 使用ol来创建一个无序列表,在列表中使用li来表示一个列表项 使用有序的序号作为项目符号 定义列表 列表相关的元素都是块元素,他们之间可以互相嵌套 去除项目符号 list-style:none