一些自己学习的html代码（锚，动态改变文本和链接，有序无序列表等）

最新推荐文章于 2021-09-23 15:36:39 发布

xiaoout

最新推荐文章于 2021-09-23 15:36:39 发布

阅读量944

点赞数

分类专栏：杂学文章标签： html锚动态改变文本和链接 ul无序列表

本文链接：https://blog.csdn.net/u010398265/article/details/46122599

版权

杂学专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html中动态改变文本和链接第一段代码

html中锚的使用第二段代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态改变文本及文本链接</title>
		<script language="javascript">
       			function fun_cchange(){
						document.getElementById('sn1').innerHTML="雅虎";
						document.getElementById('sn1').href='http://www.yahoo.com';
						
						//document.getElementById(('sn1').innerText;
					
					}
				         
        </script>
</head>

<body>
	<a id="sn1" href="http://www.sina.com">新浪</a>
    	<input type="button" name="btchange" value="change" οnclick="fun_cchange()"> 


	<h2>innerHTML 几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。</h2>
	<h2>那么自然  document.getElementById('sn1').href   是用来获取链接的，知道赋值的，这应该很容易懂。</h2>

	<h3>注意这行1之间所输出的东西1     1 还有<等等 自己可以再查查</h3>

	<h3>还可以自己思考看如何点回来新浪</h3>
</body>
</html>

锚的使用

这个代码里面有一个<ul> </ul>无序列表标签每一项用<li></li> 自己琢磨下还有有序标签<ol></ol> 每个项也是<li></li> 自己可以测试用下

那么锚具体怎么用，锚又是什么？

先说锚是什么，就是你点下可以去到所需要的内容顶部，当然自己点下就应该知道了，基本介绍，个人资料，经历简介到个人相册都是锚的用法。

怎么用，用<a>标签，也就是和设置超链接一样<a href=""> ,不同的是给个#，像这样，<a href="#">,仅仅是这样，直接会跳到页面顶部，那如果要像这个代码一样跳转咋整，那就要给所跳转的地方命个名了，如<a name = "1">,那么前面<a href="#1">，这样点有#号的地方就可以跳到所命名的地方。

<html>

	<head>
		<title>梁咏琪-百度</title>
        <meta	
				http-equiv = "Content-Type"
				content = "text/html;
				charset = GB2312"
				>
	</head>
	<body bgcolor="#EC286C">

<img align="left" width="120" height="60" src="../imags/baidu.jpg">

<a href="">新闻</a>  
<a href="">网页</a>  
<a href="">贴吧</a>  
<a href="">音乐</a>  
<a href="">站长信箱
<hr align="left" size="30" width="520"></a>
<br>
<font size="6">梁咏琪</font>
<ul type="disc">
目录
<br>
<img align="right" src="../imags/liangyongqi.jpg">

<br>
<li><a href="#1">[基本介绍]</a></li>
<li><a href="#2">[个人资料]</a></li>
<li><a href="#3">[经历简介]</a></li>
<li><a href="#4">[唱片列单]</a></li>
<li><a href="#5">[个人创作]</a></li>
<li><a href="#6">[荣获奖项]</a></li>
<li><a href="#7">[广告代言]</a></li>
<li><a href="#8">[个人相册]</a></li>
</ul>
<hr><a name="1">
<h2>[基本介绍]</h2>
<br>  2005年
<p>  2006年，郑梁二人分手，大众扼腕。此年推出的2张专辑备受好评，也引来话题争议</p>
<p>  2007年，梁咏琪依然不与香港TVB续约，从此梁咏琪较专注中国内地及台湾市场。此年梁咏琪首次来内地举行演唱会。同年 出演了香港回归10周年的官方影片《女人本色》</p>
<p>  </p></a>
<hr><a name="2">
<h2>[个人资料]</h2><br>
<br><br><br><br><br><br><br><br><br><br>
</a>
<hr>
<h2><a name="3">经历简介</a></h2>
<br><br><br><br><br><br><br><br><br><br>
<hr>
<h2><a name="4">唱片列单</a></h2>
<br><br><br><br><br><br><br><br><br><br>
<hr>
<h2><a name="5">个人创作</a></h2>
<br><br><br><br><br><br><br><br><br><br>
<hr>
<h2><a name="6">荣获奖项</a></h2>
<br><br><br><br><br><br><br><br><br><br>
<hr>
<h2><a name="7">广告代言</a></h2>
<br><br>
<font color="#CCFF33" size="8"><a href="../len2.html">广告</a></font><br><br><br><br><br><br><br>
<hr>
<h2><a name="8">个人相册</a></h2>
<br>
	<marquee>
    <img width=300 src="../作业/1.bmp">
    <img width=300 src="../作业/2.bmp">
    <img width=300 src="../作业/3.bmp">
    <img width=300 src="../作业/4.bmp">
    <img width=300 src="../作业/5.bmp">
    </marquee>
<hr>
</body>





</html>

xiaoout

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一些自己学习的html代码（锚，动态改变文本和链接，有序无序列表等）

html中动态改变文本和链接第一段代码html中锚的使用第二段代码动态改变文本及文本链接 function fun_cchange(){ document.getElementById('sn1').innerHTML="雅虎"; document.getElementById('sn1').href='http://ww
复制链接

扫一扫