The fifth chapter to learn HTML + CSS + Jump Jump link anchor + special symbols

Jump Links

Links tab
a-> double tag <a> </a>
href attribute: Link Address
target property: You can change the link to open the way, by default: the current page is opened in a new window _self opens _blany
base-> single label: the role is to change the default link behavior.
Small exercises

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<base target="_blank">
	<body>
		<a href="http://www.baidu.com">
		<img src="./timg.jpg" alt="">
		</a>
		<a href="http://www.baidu.com" target="_blank">访问百度</a>
		<a href="http://www.baidu.com">访问百度</a>
		<a href="http://www.baidu.com">访问百度</a>
		<a href="http://www.baidu.com">访问百度</a>
		<a href="http://www.baidu.com">访问百度</a>
		<a href="http://www.baidu.com">访问百度</a>
	</body>
</html>

Renderings
Here Insert Picture Description

Jump anchor

To achieve a

             The #
             id attribute
little exercise

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<a href="#html">HTML</a>
		<a href="#css">CSS</a>
		<a href="#javascript">Javascript</a>
		<h2 id="html">HTML超文本标记语言</h2>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段限</p>
		<h2 id="css">CSS样式</h2>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段限</p>
		<h2 id="javascript">Javascript脚本</h2>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段限</p>
	</body>
</html>

Achieve two

Achieved two
# sign
name attribute
little exercise

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<a href="#html">HTML</a>
		<a href="#css">CSS</a>
		<a href="#javascript">Javascript</a>
		<a name="html"></a>
		<h2 >HTML超文本标记语言</h2>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段限</p>
		<a name="css"></a>
		<h2 id="css">CSS样式</h2>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段限</p>
		<a name="javascript"></a>
		<h2>Javascript脚本</h2>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段落</p>
		<p>模拟的段限</p>
	</body>
</html>

Renderings
Here Insert Picture Description

Special symbols

When writing some text, often you encounter a character input method can not be entered, such as (registered trademark) ,.
(Copyright symbol), etc., as well as when a piece of text to add more spaces, pages and does not resolve the multiple spaces. These can not enter, and space characters are special characters in HTML, prepared a special code for these special characters
Here Insert Picture Description

Published 65 original articles · won praise 7 · views 1240

Guess you like

Origin blog.csdn.net/qq_42222342/article/details/104121148