HTML学习笔记-v1.3

概要

接着上回的文本格式设计标签继续学习,也都是一些简单基础的,权当新手入门或是字典查询用

<bdo>文字倒序输出

<html>

<body>

<p>
如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

rtl表示的是right to left ,所以 输出的时候应该是这样的   txet werbeH emos ereH  
这里有一个有趣的事情,在网页上虽然显示的是从右到左,但是你把网页上的那段复制粘贴到其他地方,又恢复了正确顺序

<q/> 和 <blockquote> 实现块引用

主要是实现引用的格式化,代码如下
<html>

<body>

这是长的引用:
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用:
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>
输出后会发现使用<blockquote>会使文字规整的展现在一个看不见的块里,而<q>只是一个引号而已

<del>实现删除字效果和<ins>实现下划线效果

在淘宝上经常看到一件商品原价多少钱,然后在那个数字上划了一道,在下面又写了一个新的数字,这个划线效果就是del,而ins就是我们常见的下划线

<html>

<body>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>
</html>

HTML中插入样式

字体颜色只有黑色,一点都不好看,我们怎么优化呢?于是用到了样式(这里涉及到css的知识以后会专门写一个css的学习笔记)

<style>和<link>注解

我们会在定义样式时遇到两个关键字,一个是style,其主要作用就是提示并开始定义样式,而link的只要作用是引用资源,在下面代码的作用就是引用样式资源文件

外部样式表

顾名思义,就是引入HTML外的一个样式文件来给他配置样式,他的好处就是只需要修改这个样式文件整个站点都会改变风格

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

注:以上代码由于没有配置css样式,所以直接在浏览器中运行是并没有什么卵用的

内部样式

直接在内部设置样式简单粗暴

<html>

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

</html>

这个代码可以直接运行的,看看效果记忆深刻~

内联样式

就是直接以属性的形式写入标签中

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>


用<a>定义链接

我们经常在网页上看到一串蓝色的字,然后点击就会跳转到别的网页,正是用的这个标签

<a href="http://hao.360.cn/yinyuewz.html">音乐</a>

这是在360好搜源码中粘过来的一段代码,运行后点击音乐就会进入相关网站

注:链接文本(上文中音乐的那个位置)不一定是文本,图片什么的也可以哦~

<target>来定义被连接的文档在何处显示

如:在新窗口打开网页

<a href="http://www.baidu.com.cn/" target="_blank">百度</a>

name属性创建书签实现同一页面的位置跳转

name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

我们这样使用它

<a name="label">锚(显示在页面上的文本)</a>

这个作用就好像我们的目录功能,点击相应的标题就会跳到相应的位置

比如,我们要在目录中定义一行字"用<a>定义链接"直接跳转到我们当前的大标题的位置,我们就可以这样做

<a name="tips">用<a>定义连接</a>
<!--在HTML中对锚进行命名-->

注:为了方便理解这样写,上面的代码应该写在我们大标题的位置上,也就是给大标题设置一个属性name,并为其指向的锚点命名

<a href="#tips">跳转到大标题</a>
<!--在同一文档中创建指向该锚的链接-->

这样点击跳转到大标题就跳转到我们的大标题了

当然也可以在其他页面中创建指向该锚点的链接

<a href="http://www.blog.csdn.com/html/html_links.asp#tips">点击跳转到大标题</a>

我们只要将#和锚名加入到URL的末端就可以随意跳转了,最后以一个栗子收尾吧~

<html>
<body>
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

感想

其实学习html的目的不是来创建网站,创建网站的ide有很多,而且大大提高了开发效率,我们的目标是可以看明白一个网站的源码,明白他的工作原理,更好的为日后检查漏洞修复优化代码做铺垫,还有,老规矩,每次写完博客都会发一句自己喜欢的话
<a href = "#my">点击跳到那里</a>
<h2><a name = "my"> 我爱你十年如一日沉淀,放手给你碧海蓝天 </a></h2>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值