脚本宝典收集整理的这篇文章主要介绍了python大佬养成计划----HTML网页设计<二>,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
文本标签
- 换行标签 -- br
是单标签,意味着它没有结束标签。起强制换行作用
段落中的文字<br>段落中的文字<br>段落中的文字<br>
- 水平分割线 -- hr
与br相同,也是单标签。可用来区分不同段落或正文与标题。可设置分割线的宽度和高度
设置了50%宽度,50像素且右对齐的分割线
<hr width='50%' size='50' align='right'>
- 预格式化文本标签 -- PRe
保留文本的原有格式
<pre>文本</pre>
包含在标签与其结束标签中的内容,以当前文字高度的一半显示在文本的左上侧
包含在标签与其结束标签中的内容,以当前文字高度的一半显示在文本的左下侧
<sup>上标文字内容</sup>
<sub>下标文字内容</sub>
- 块引用标签 -- blockquote
代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进
<blockquote>引用文字</blockquote>
- 普通文本行内标签 -- span
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
<span>文本内容</span>
- 普通文本标签 -- div
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
<div>文本内容</div>
<!DOCTYPE htML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>张阿机</title>
</head>
<body>
<h1 style="color: green">一级标题</h1>
<span>pre显示</span>
<pre>
<strong>雨霖铃·寒蝉凄切</strong>
宋代:柳永
寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处,兰舟催发。执手相看泪眼,竟无语凝噎。念去去,千里烟波,暮霭沉沉楚天阔。
多情自古伤离别,更那堪,冷落清秋节!今宵酒醒何处?杨柳岸,晓风残月。此去经年,应是良辰好景虚设。便纵有千种风情,更与何人说?
</pre>
<span>bolckquote显示</span>
<blockquote>
<strong>雨霖铃·寒蝉凄切</strong>
宋代:柳永
寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处,兰舟催发。执手相看泪眼,竟无语凝噎。念去去,千里烟波,暮霭沉沉楚天阔。
多情自古伤离别,更那堪,冷落清秋节!今宵酒醒何处?杨柳岸,晓风残月。此去经年,应是良辰好景虚设。便纵有千种风情,更与何人说?
</blockquote>
求解数学方程x<sup>2</sup>+x+6=0.<br/>
所得解:x<sub>1</sub>=-3,x<sub>2</sub>=2
</body>
</html>
<img title="python大佬养成计划----HTML网页设计@H_85_406@" alt="python大佬养成计划----HTML网页设计<二>" data-src="/img/bvbhM7s?w=1189&h=728" src="https://static.segmentfault.COM/v-5cc2cd8e/global/img/squares.svg" style="cursor: pointer;">
超链接标签
一个网站是由多个网页组成的,页面之间依靠链接确定相互之间的导航关系,各个网页链接在一起后,才构成一个网站。
超链接标签--<a>
1.外部链接
如果链接是指向站点文件夹之外的,就称做外部链接,添加外部链接时,使用绝对路径,方法是直接输入路径地址,如http://www.baidu.com
2.@R_683_2512@
是指同一个网站内部,不同页面之间的链接关系,也可称作站内链接。建立内部链接时,使用相对路径。
超链接属性 -- herf
在添加超链接时,属性设置非常重要。
<a href='超链接路径'>设置链接的文字或图片等属性</a>
超链接属性 -- target
默认情况下,超链接打开新页面的方式是在当前窗口中打开,属性可以用来定义目标窗口打开方式。
_parent-->在上一级窗口中打开,使得页面载入父窗口
_blank--->浏览器在一个新的窗口中打开网页
<a href='超链接路径' target='页面打开方式'>设置链接的文字或图片等属性</a>