HTML学习笔记(一)

原创 2018年04月17日 11:15:36

点击打开链接的学习总结。

HTML常用的标签及解释
1、基本格式框架
<html>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>

2、文本格式化标签
<b>粗体</b>
<big>大号字</big>
<em>着重字(粗)</em>
<i>斜体字</i>
<strong>加强语气(粗)</strong>
<sub>下标</sub>
<sup>上标</sup>
<ins>插入字</ins>
<del>删除字</del>

3、链接
<a href="URL" target="_blank"> this is a link </a>

其中,href=超链接,target="_blank"表示在新窗口打开文件。
注意,两者之间用空格。
有一种特殊情况是使用name属性,可以转跳到name属性定义的锚。
<a name="tips">基本的注意事项 - 有用的提示</a>
. . . <a href="#tips">跳转到tips标签处</a>

注意,引用锚时要在名字前面加#。

4、图像
<img src="boat.gif" alt="Big Boat" width="104" height="102" />
其中,src存放图片所在地址;
alt属性表示替换文本,即当图片不能加载是所显示的文字说明;
width和height用于设置图片的长度和宽度;
另外,图像还有一个属性border用于规定图像边框的宽度。

5、改变属性的通用方法——style
<body style="background-color:yellow">
<h2 style="font-family:arial;color:red;font-size:20px;text-align:center;">
标题
</h2>
</body>
其中,background-color用于设置背景颜色;
font-family用于设置字体;
color用于设置(标题)字体颜色;
font-size用于设置字体大小;
text-align:center居中。

6、引用
第一种:相当于“”。
<q>所要引用的话</q>

第二种:长引用,自动缩进,cite表示出处地址(可省略)。
<blockquote cite="URL">......</blockquote>

第三种:缩略词,鼠标放到缩略词上会显示完整内容,即title。
<abbr title="world health organization">WHO</abbr>
第四种:地址(联系信息),自动斜体,并且前后自动加换行。

<address>我是地址</address>

第五种:著作标题,自动斜体。
<cite>老人与海</cite>

特别的,双向重写,dir="rtl"为从右向左书写
<bdo dir="rtl">从右向左</bdo>

7、计算机代码
<kbd>键盘输入</kbd>
<samp>计算机输出示例</samp>
<code>代码</code>
<pre>文本</pre>
<var>数学公式</var>

其中,前三种均不保留空格和换行,如果要保持文本的原有格式,请使用第四种,<pre>保留换行。

8、创建图像映射
<html>
<body>

<p>请点击图像上的星球,把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

</body>
</html>

其中,<map>定义图像地图,包括id和name属性,感觉一般情况下都要定义;
<area>定义图像地图的可点击区域,包含的属性:
            shape规定区域的形状
            coords规定区域的(x,y)坐标,左上角为(0,0);比如(x,y,z),xy表示圆心,z表示半径

<img>中的usemap属性引用map中的id或name属性。

9、其他

<br/>-------换行
<hr/>-------水平线

<!-- this is a comment -->---------注释

html常用标签学习笔记

  • 2018年04月01日 18:30
  • 26KB
  • 下载

html学习笔记(1)

1、html:超文本标记语言,标记:就是用来描述网页内容的一些特定符号,不是编程语言,而是一种描述性的标记语言。 2、制作html网页文件     *** 裸奔(只有内容,没有修饰)      a、新...
  • hanbo622
  • hanbo622
  • 2015-04-12 17:57:43
  • 4596

个人html学习笔记 精华版

  • 2009年05月27日 19:39
  • 58KB
  • 下载

Jenkins学习笔记(一)

参考 kurenai's blog   http://kurenai.elastos.org/ 安装准备:   1、JDK(使用JDK1.6及以上)   2、Jenkins      ...
  • yuebao1991
  • yuebao1991
  • 2016-01-13 10:23:21
  • 226

【慕课网】HTML&CSS基础课程学习笔记

HTML部分: 一、HTML介绍 1-1.介绍html大体 1-2.介绍html是结构层、css是表现层、javascript行为层 1-3.介绍html标签 1-4...
  • Cyan1614
  • Cyan1614
  • 2017-06-06 18:14:53
  • 316

前端html与css学习笔记总结篇(超详细)

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师web网站架构师自己创业转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才...
  • qq_36368586
  • qq_36368586
  • 2016-11-20 16:53:31
  • 4899

SpringMVC 学习笔记(一) Hello World

Spring MVC 是目前最主流的MVC 框架之一 Spring MVC 通过一套 MVC 注解,让 POJO 成为处理请 求的控制器,而无须实现任何接口。 支持 REST 风格的 URL 请求 采...
  • a67474506
  • a67474506
  • 2015-06-04 14:26:16
  • 2136

Redis学习笔记(二)

一、通过Jedis客户端连接Redis缓存步骤: 1、添加jar包: pom坐标: dependency>      groupId>redis.clientsgroupId>      artif...
  • sd4422739
  • sd4422739
  • 2015-11-18 09:26:07
  • 313

Jsr75学习笔记(一) .txt

  • 2008年12月27日 19:10
  • 2KB
  • 下载

HTML, CSS学习笔记(完整版)

第一章 div布局 前几课内容 .htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。 shtml是服务器先处理然后再交给浏览器处理   #HTML小知识#之#...
  • u011925500
  • u011925500
  • 2014-10-02 00:28:22
  • 4784
收藏助手
不良信息举报
您举报文章:HTML学习笔记(一)
举报原因:
原因补充:

(最多只允许输入30个字)