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>实现下划线效果
<html><body><p>一打有 <del>二十</del> <ins>十二</ins> 件。</p><p>大多数浏览器会改写为删除文本和下划线文本。</p><p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p></body>
</html>
HTML中插入样式
<style>和<link>注解
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式
<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 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
我们这样使用它
<a name="label">锚(显示在页面上的文本)</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学习笔记-v1.3相关推荐
- Go单元测试学习笔记 V1.0
与你相识 博主介绍: – 本人是普通大学生一枚,每天钻研计算机技能,CSDN主要分享一些技术内容,因我常常去寻找资料,不经常能找到合适的,精品的,全面的内容,导致我花费了大量的时间,所以会将摸索的内容 ...
- STM32学习笔记V1.1GPIO寄存器的ODR、BSRR、BRR
STM32GPIO寄存器的ODR.BSRR.BRR 端口输出数据寄存器(GPIOx_ODR)一般不用不知道为什么? 等知道之后再添加. 在输出模式下 端口位设置/清除寄存器(GPIOx_BSRR) 高 ...
- (转)JUNOS入门学习笔记
JUNOS入门学习笔记 V1.01 1 说明 首先,请注意文档题目:"xxx入门",行家就不用看了,但我不介意您收藏本文. 写这个文档的目的,是为了把我的学习过程分享给大家,也希望 ...
- pyecharts查看版本_pyecharts v1 版本 学习笔记 折线图,面积图
折线图 折线图 基本demo import pyecharts.options as opts from pyecharts.charts import Line c = ( Line() .add_ ...
- Kaldi学习笔记:01(kaldi/egs/sitw/v1)run.sh解析
kaldi学习笔记-01-sitw 简介 脚本修改 run.sh 简介 研究生阶段入坑了说话人识别方向,最近在学习如何使用Kaldi提取i-vector进行说话人识别,在这里记录一下学习的笔记. 这次 ...
- YOLO v1学习笔记
YOLO v1学习笔记 一. 概述 1.优点: 2. 缺点: 二.模型详细介绍 1.设计思路 2.网络结构 3.网络输出详细介绍 三.损失函数 1.位置误差 2.置信度误差 3.分类误差 四.模型预测 ...
- CADe_SIMu V1.0.0.1手把手学习笔记(1)
CADe_SIMu V1.0手把手学习记录-简单易上手的电气控制仿真:电机点动控制 从今日起,本小学生要正式开始学习CADe_SIMu V1.0.0.1的电气仿真的学习记录,希望能为记忆力逐年衰减的我 ...
- 容器云原生DevOps学习笔记——第三期:从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- blazeface学习笔记
完整的应该是一个人脸识别项目,人脸识别,大言不惭的说,我之前其实也做过,比如用dlib来做人脸识别,就是用opencv那一套来实现,说句实在话,速度非常慢,即便是在intel CPU上,一秒也就两三帧 ...
最新文章
- AbstractQueuedSynchronizer原理分析
- 用 Flask 来写个轻博客 (21) — 结合 reCAPTCHA 验证码实现用户注册与登录
- kindeditor编辑器使用七牛云上传图片
- 恢复SAP IDES中SPFLI SFLIGHT SBOOK表数据
- mysql 压缩表_MySQL InnoDB 表压缩(行格式压缩)
- Tomcat服务安装与部署(安装与优化)
- mysql rowdatapacket_arrays – 将此RowDataPacket对象数组缩小为单个对象
- JavaScript中的基本表单验证
- 创业版上市与SAP管理软件系统的关系
- git add 所有修改文件_Git 技术干货!工作中quot;Gitquot;的使用实践和常用命令合集!
- RHEL7及CentOS7的语言、字符编码、键盘映射、X11布局设置(localectl)-系统管理(1)...
- pjsip在windows上编译
- php网站 视频马赛克,如何给视频加马赛克 菜鸟也能学会的视频加马赛克解决方案...
- Android Binder机制详解
- 破解安装谷歌翻译软件 Translate Client ( 含文件下载链接 )
- -- 自古多情空余恨~~~~
- 数据挖掘领域十大经典算法之—C4.5算法(超详细附代码)
- SVN项目提交设置忽略上传资源
- 舰队collection服务器维护,舰娘百科 - 专业性的舰队Collection百科全书
- java hypot_Java StrictMath hypot()用法及代碼示例