html+css+js Web开发学习——3

a——链接

用于创建其它网页的链接、也可以链接到网页的其它位置(称为锚链接)。
有如下属性:id、style、class这些通用属性就不说了
1、href,指定连接到的URL。可以是相对路径或绝对路径。
2、title,用于鼠标悬停的连接上然后会显示的文字注释
3、name,定义一个可链接到的锚,用于不支持通过id来链接页面元素的浏览器
4、rel,描述当前文档和链接文档之间的关系。可选值参考
例子如下:
<!DOCTYPE html>
<html>
	<head>
		<title>1111</title>
	</head>
	<body>
		<a href="http://www.baidu.com" title="aaaa">链接到百度首页</a>
		<br>
		<a href="file:///E:/web学习/one.html#h15">链接到某页面中id为h15的元素</a>
		<br>
		<a href="#h24">链接到页面中id为h24的元素,当前页面的元素可以不加URL</a>
		<h1 id="h1">hahaha1<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h2">hahaha2<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h3">hahaha3<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h4">hahaha4<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h5">hahaha5<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h6">hahaha6<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h7">hahaha7<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h8">hahaha8<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h9">hahaha9<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h10">hahaha10<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h11">hahaha11<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h12">hahaha12<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h13">hahaha13<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h14">hahaha14<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h15">hahaha15<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h16">hahaha16<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h17">hahaha17<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h18">hahaha18<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h19">hahaha19<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h20">hahaha20<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h21">hahaha21<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h22">hahaha22<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h23">hahaha23<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h24">hahaha24<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h25">hahaha25<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h26">hahaha26<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h27">hahaha27<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h28">hahaha28<br>hahaha<br>hahaha<br>hahaha<br></h1>
		<h1 id="h29">hahaha29<br>hahaha<br>hahaha<br>hahaha<br></h1>
	</body>
</html>

标签a中rel属性的可选值

描述
alternate 文档的可选版本(例如打印页、翻译页或镜像)。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的前一个文档。
contents 文档目录。
index 文档索引。
glossary 文档中所用字词的术语表或解释。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的子段。
appendix 文档附录。
help 帮助文档。
bookmark 相关文档。
nofollow Google 使用 “nofollow”,用于指定 Google 搜索引擎不要跟踪链接。
licence
tag
friend

如何设置显示字符的格式

1、使用语义标签
2、使用css样式

使用语义标签设置显示字符格式:

1.<em>:斜体
2.<strong>:粗体
3.<code>:表示其包含的文本是代码示例,应使用Courier等等宽字体显示。
4.<samp>:同<code>
5.<kbd>:表示需要用户输入的文本,等宽字体
6.<var>:表示需要用实际值替换的变量或其他实体的名称,显示为斜体或带下划线
7.<dfn>:用于突出要定义或刚定义的单词,通常是斜体
8.<cite>:表示引用的作品名,斜体
9.<abbr>:表示缩略语

使用CSS样式设置显示字符格式:

需要先提一下,大多数标签都会以某种方式影响其包含的文本的外观,但是有一个标签对其包含的文本没有任何影响,这就是<span>,他的存在目的就是要与样式表相关联。
单独使用<span>标签不会有任何效果,需要与属性style结合使用,可以达到所有的语义标签效果,而且会更好。
下面列出style中可取的属性:
1.test-decoration,指定文本使用哪种装饰。
 可取值:1、underline:下划线
		2、overline:上划线
		3、line-through:穿过文本的线
		4、blink:闪烁
2.font-style,设置斜体。
 可取值:1、normal:默认值
		2、italic:斜体
		3、oblique:标准字体的倾斜版本
		4、inherit	:规定应该从父元素继承字体的粗细。
3.font-weight:设置加粗
 可取值:1、normal:默认值
 		2、bold:加粗
 		3、bolder:更粗
 		4、lighter:更细
 		5、100-900(以100为单位):400==normal,700==bold
 		6、inherit	:规定应该从父元素继承字体的粗细。
4.font-family:设置字体,通常字体名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
5.font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
 可取值:1、normal:默认值。浏览器会显示一个标准的字体。
		2、small-caps:浏览器会显示小型大写字母的字体。
		3、inherit:规定应该从父元素继承 font-variant 属性的值。
6.font-size:设置字体大小。
 可取值:1.xx-small、x-small、small、medium、large、x-large、xx-large:把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。默认值:medium。
	2.smaller:把 font-size 设置为比父元素更小的尺寸。
	3.larger:把 font-size 设置为比父元素更大的尺寸。
	4.length:把 font-size 设置为一个固定的值。
	5.%:把 font-size 设置为基于父元素的一个百分比值。
	6.inherit:规定应该从父元素继承字体尺寸。

pre——预定格式的文本

在pre标签内的内容,浏览器会原样显示,空格回车等不会删除。

hr——水平分隔线

该标签只支持所有标签都支持的属性。
默认情况是居中,可通过align=“left”、right、center设置。

br——换行

address——地址

通常用于给网页添加落款

常用的字符实体

显示结果 描述 实体名称 实体编号
空格 &nbsp &#160
< 小于号 &lt &#60
> 大于号 &gt &#62
& 和号 &amp &#38
" 引号 &quot &#34
撇号 &apos(IE不支持) &#39
&cent &#162
£ &pound &#163
¥ 人民币/日元 &yen &#165
欧元 &euro &#8364
§ 小节 &sect &#167
© 版权 &copy &#169
® 注册商标 &reg &#174
商标 &trade &#8482
× 乘号 &times &#215
÷ 除号 &divide &#247
发布了38 篇原创文章 · 获赞 17 · 访问量 4304

猜你喜欢

转载自blog.csdn.net/qq_14877637/article/details/87535839