首页 > 代码库 > 小白的HTML笔记

小白的HTML笔记

元素
<p>段落
<a href="http://www.mamicode.com/default.htm">链接
<br/>换行
属性
例如上面的链接地址就在href中指定
<h1>定义标题开始
<h1 align="center">拥有关于对齐方式的附加信息
<body>定义HTML文档的主题
<body bgcolor="yellow">拥有关于背景颜色的附加信息
<table>定义HTML表格
<table border="1">拥有关于表格边框的附加信息
属性、属性值和元素对大小写不敏感,推荐使用小写
标题
<h1>是最大的标题<h6>是最小的标题
搜索引擎使用标题为网页结构和内容编制索引,因此用标题来呈现文档结构是很重要的
水平线<hr>标签在HTML页面中创建水平线
注释 <!--内容-->
查看源代码  只需要右键,查看源代码
HTML 输出 - 有用的提示
我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
文本格式化专题
1)<b>  bold粗体的意思
2)<strong>加粗,用法和bold用法相似
3)<em>强调,斜体
4)<i>italic斜体
5)<big>大一号
6)<pre>预格式文本,可以保留空格和换行
用于显示计算机/编程代码的标签
<code>computer code
<kbd>keyboard input
<tt>teletype text
<sample>Sample text
<var>computer variable
<addresss>在HTML文件中写地址
在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本
 <abbr title="etcetera">etc.<abbr/>该代码可以用于表达title的完整版本
上面的用法和效果与<acronym>和abbr相同
改变文字方向
<bdo dir="rtl">
内容
<bdo/>
其中“trl”的作用应该是使文字从右向左输出
引用
长引用<blockquote>浏览器会 插入换行和外边距,而<q>(短引用)元素不会有任何特殊的呈现
删除和下划线
删除<del>内容<del/>,下划线<ins>
文本格式化标签
标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式(style)代替。
“计算机输出”标签
标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。
引用、引用和术语定义
标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。
 
HTML编辑器
专业的HTML编辑器
  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor
也可以选择使用PC自带的记事本工具
编写完毕之后将文件拓展名改成.html或者.htm
HTML样式
1.通过添加到<head>部分的样式信息对HTML进行格式化
技术分享
连接到外部样式表
技术分享技术分享
没有下划线的链接
技术分享
技术分享
 
 
HTML链接
1.创建超链接
站内链接  
<a href="http://www.mamicode.com/index.html">内容</a>
站外链接
<a href="http://www.baidu.com/">
2.创建超链接
<a href:“www.baidu.com”><img border="0" src="http://www.mamicode.com/这里输入图片的引用地址">
</a>\
3.HTML链接-target属性
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
使用target属性,可以定义被连接的文档在何处显示,而例子中的target="_blank"会在新窗口打开文档
4. name属性
技术分享
因此name属性的作用是设置标签,至于标签的使用就要用到#
 
___________________________________________________________________________________________________________________________________
___________________________________________________________________________________________________________________________________
插入图像
1.举例
<p>
<img src="http://www.mamicode.com/图片地址" width="128" height="128"/>
</p>
 
2.定义图像的语法是
<img src:"url"/>  注:URL(uniform resource locator),统一资源定位器,是www页的地址
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。
替换文本属性(图片的替代品)
alt属性用来为图像定义一串预备的可替换的文本。替换文本的值,是用户定义的
例如
<img src:“boat.gif” alt="Big Boat">
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
如何向HTML页面添加背景图片
<body background="url">
排列图片
技术分享
 
 
 
创建图片映像
技术分享
 
关于这个例子我有一些不懂的地方: usemap=#planetmap        map标签的作用及用法     area标签内的各个参数用法
现在对这些问题进行解答。
map标签用法传送门:http://www.w3school.com.cn/tags/tag_map.asp
area标签用法传送门:http://www.w3school.com.cn/tags/tag_area.asp
map标签简要介绍map标签中必要的属性有id(为map定义唯一的名称),可选的属性有name(为image—map规定的名称)
area标签而area标签是用来定义图像映射中的区域(图像映射指的是带有可点击区域的图像),而且area元素总是嵌套在<map>标签中
img标签中的usemap属性与<map>元素name属性相关联,创建图像与映射之间的联系

小白的HTML笔记