HTML标记语言篇--学习笔记01

HTML标记语言篇
第1章  HTML基础
1.1 基本概念
WWW 是“World Wide Web”(全球广域网)的缩写,简称为Web,中文又称为“万维网”。
HTML(Hypertext Markup Language,超文本标记语言)是一种文本类、解释执行的标记语言,用于编写要通过WWW显示的超文本文件,称为HTML文件,也叫Web页面或网页。扩展名为.html或.htm 。HTML文件的组成包含两部分内容:一是HTML标记;二是HTML标记所设置的内容。

1.2 文档类型:规范的HTML/XHTML 文档需要以<!DOCTYPE>标记声明开始的。

1.3 HTML文件的基本结构:头部(head),标题(title),页面主体(body)

1.4 HTML标记
html文件的开始和结束标签:<html></html>
html中标签的大致写法:
• 由开始标签和结束标签组成,空标签写法为:<标签名/>,双标签<标签名></标签名>
• 标签名不区分大小写,但在XHTML中必须小写(后面课程会讲到xhtml时会讲)
• 标签具有属性,属性用来表示标签的性质和特征,属性在一开始的标签中指定,如下图:


第2章  页面的头部标记
2.1 页面的头部标记
<title>    设定显示在浏览器标题栏中的内容
<meta>     定义网页的字符集、关键字、描述信息等内容
<style>    设置CSS层叠样式表的内容
<link>     对外部文件的链接
<script>   设置页面脚本或链接外部脚本文件

2.2 元信息标记<meta>
作用一:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
作用二:
作用三:
<meta name="description" content="内容介绍" />
作用四:
<meta http-equiv="refresh" content="3">   -->设置页面每隔3s刷新一次
<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn">   -->在当前页面停留3s后,自动跳转到新浪网站首页

2.3 网页标题小图片,title命名旁边给加个小图标

第3章  页面的主题标记<body>
3.1 先说下HTML的注意事项和建议:
● 凡是标签都应该闭合!
● 凡是标签都应该小写!
● 文件编码跟设置的编码保持一致!
● 标签属性加引号(英文输入法下的引号)
● HTML 缩进统一使用tab键

3.2 一个网站的三大元素: 图片,超链接,文字

3.3 添加网页背景图片:<body background="images/***.jpg" bgproperties="fixed">
默认情况下,背景图片会随着页面的滚动而滚动,设置<body>标记的bgproperties="fixed",可以使背景图片固定不动。

3.4 设置网页链接文字颜色:<body link="颜色值" alink="颜色值" vlink="颜色值">
link属性设置未访问链接文字颜色;alink属性设置正在访问链接文字颜色;vlink属性设置访问过后的链接文字颜色

3.5 设置网页边距:设置网页与浏览器边框的间距
<body leftmargin="边距值" rightmargin="边距值" topmargin="边距值" bottommargin="边距值">

第4章  文字与段落标记
4.1 标题字 h1~h6   <h2 align= "对齐方式">标题字</h2>
h1的字最大,递减至 h6 最小

4.2 空格:在HTML里面,浏览器不能解析源代码中使用的 Enter键,所有的空格,换行符,水平制表符等等。无论你打再多个,都会视为一个空格。

4.3 字体标签:<font>
属性: color  颜色,默认黑色
size   默认字号为3号字。取值范围1~7,可+1到+7,-1到-7(正负取值相对于页面默认字号),超出取值范围,与取值范围的最近的值效果相同。
face   默认宋体[黑体,微软雅黑...]

4.4 字体格式化标签:
<i>...</i>italic  意大利,斜体  <em>...</em>(建议使用em)  -->设置斜体格式
<b>...</b>blod  坚强的,加粗的 <strong>...</strong>(建议使用strong)   -->设置粗体格式
<big>..</big>       -->设置为大字号
<small>...</small>  -->设置为小字号
<u>...</u>underline   -->下划线 设置下划线
<s>...</s>、sanchu<strike>...</strike>、<del>...</del>    -->设置删除线
<q>...</q>        引用""
<dfn>...</dfn>    举例
<mark>...</mark>  高亮
<sup>...</sup>    上标字
<sub>...</sub>    下标字
ruby,rt,rp        注释

☛  OJ(Orange Juice)

代码是:<ruby>OJ<rp>(<rt>Orange Juice<rp>)</ruby>

☛(x+y)2 = x2 + y2 + 2xy

代码是:(x+y)<sup>2</sup> = x<sup>2</sup> + y<sup>2</sup> + 2xy

4.5 注释语句:  <!-- 注释内容 -->
为了提高代码的维护性和可读性,常常在源代码中添加注释语句,用于对代码进行说明。注释语句并不现实在浏览器中。

4.6 实体字符
空格       &emsp; 这个兼容性比较好 &nbsp;有些浏览器不能使用
&          &amp;
版权       &copy;
商标       &reg;



4.7 段落标记
段落标签:<p>  全称:paragraph
语法说明:在HTML中即可使用单标记也可使用双标记,但XHTML只能用双标记.区别是双标记会与上下文同时产生一空行的间隔,而单标记只与上文产生一空行间隔

换行标签: <br />
居中标记:<center>...</center>
缩排标记:<blockquote>...</blockquote>
预格式化标记<pre>

水平线标签:<hr />
属性: align   值(left,right,center)
size    粗细(默认单位px)
color   颜色
noshade 实心的不带阴影的效果
width   长度/宽度(默认单位px,可选%:浏览器窗口宽度的百分比)

第5章  超链接a标签
HTML中a标签的用法:
功能一:设置超链接目标窗口
target属性的取值
属性值     说明
_seft     在自身窗口(默认)打开链接文档
_blank    在新窗口中打开链接文档
_parent   在上一级窗口中打开,一般在框架页面中经常使用
_top      在浏览器的整个窗口中打开,忽略任何框架
框架名称  在指定的框架窗口中打开链接文档

功能二:链接类型
1.引用外部链接:<a href="http://www.baidu.com">超级链接</a>

2.引用内部链接:<a href="同一网站内部网页名称">内部链接是指在同一个网站内部,不同网页之间的链接关系</a>

3.锚点,也叫书签链接。锚点需要满足两个条件。锚点名,锚链接
demo:
<a name="top"></a>
<a href="#top">点击跳转到顶部</a>

4.图片链接
<a href="图片链接目标"><img src="图片文件路径"></a>

5.foxmail发邮箱的软件,发送邮箱,比较少用
<a href="mailto:chenha0qiang@163.com">联系我们</a>

6.skype手机调试,在移动端很有用。
<a href="tel:159157*****">拨打</a>
<a href="sms:159157*****">发短信</a>

7.脚本链接
<a href="">欢迎访问</a>

功能三:链接路径
● 在当前目录下,直接写文件名 (默认 ./  当前目录)
<a href="readme.txt">本地文件</a>
● 当文件在当前目录的某个(dir)文件夹下,这么来写
<a href="dir/readme.txt">本地文件</a>
● 当文件在当前目录的上一级,这么来写 (使用 ../ 返回上一层)
<a href="../readme.txt">本地文件</a>
● 绝对路径
<a href="E:/image/img2.png">用绝对路径打开图片</a>

8.下载链接:当a连接的href加载的是浏览器无法打开的文件,比如zip,rar。是会提供下载的
<a href="01.zip">下载</a>

a标签的属性:
href    链接
title   提示信息
name    定义书签名称
target  打开方式
_self      ==>   自身窗口(默认)
_blank     ==>   空白页面,新窗口
_top       ==>   顶级窗口
_parent    ==>   父亲窗口
framename  ==>   框架名

第6章  图片标记
6.1 图片标签:<img /> (image)
属性:
src    图片的来源,路径。(source)
alt    图片加载失败的说明文字。建议写图片标签的时候都加上,有利于SEO优化。
width  宽度(如果只设置一个宽度或高度,那么对应得高度或宽度会等比例放大缩小)
height 高度(如果只设置一个宽度或高度,那么对应得高度或宽度会等比例放大缩小)
hspace 设置图片与周围对象的水平间距
vspace 设置图片与周围对象的垂直间距
title  提示信息。
border 图片的边框。(后面课程中会经常用到)
align  设置图片与周围对象的对齐方式(可取值有:top、bottom、middle、left、right)

6.2 图像热区
概念:图片映射是指源端点为图片热区的超链接。一幅图像被切分成不同的区域,每一个区域可以链接到不同的地址,这些区域称为图像的热区。

基本语法 :
</map>

属性:              |    类型:
shape     类型       |    矩形(2个坐标) rect
coords    坐标      |    圆形(1个)     circle
href      跳转地址  |    多边形(N个)   poly

链接属性href(a标签和area标签中可使用该属性):当链接到不可解析的文件时会提示下载信息

什么地方用图像热区呢?
一般如果图片很大,很长,只取某部分,那就使用图像热区。

图像热区超级不好调试的,会以目标图片的左上角为原点,就是占位大小不包括margin,占位大小有占位宽和站位高。
占位宽=width+border+padding;
站位高=height+border+padding;
而这个可以使用photoshop找到坐标,使用到标尺等工具。使用photoshop打开图片->将鼠标放在坐标上->在控制面板查看坐标信息

今天的知识点大概就这些,明天就周末了,祝大家周末愉快!

相关推荐

  • u-boot学习笔记四(C语言局部) 清明节放假休息两天~_~!继续对u-boot源代码做个简明的分析,这次重要针对C语言局部,迎接辩难指正!看好C局部代码我感受要掌握三个主线。1.初始化包括板子,环境等初始化。2.u-boot号召是如何如何运作的.3.如何调用linux内核的
  • 【Java学习笔记】Java语言基础2 14.线程同步synchronized()方法15.notify()16.集合类用于存储一组对象,常用的有Vector类,Enumeration类,Arraylist,Collection接口,Iterator接口,Set,List例子:把
  • [图]纸牌屋第四季第二集英语学习笔记02 HouseofCardsS04E02 EnglishStudyNotes02 欢迎转载泥鳅蛮原创英语学习笔记http://blog.sina.com.cn/eelbarb请尊重原创,转的时候请务必把本段文字和链接一起带走,否则我会保留追究法律责任的权利哦。纸牌屋第四季第二集S04E02英语学习笔记02HouseofC
  • JavaScript学习笔记六:prototype的提出 JavaScript学习笔记六:prototype的提出本系列文章导航JavaScript学习笔记一——数据类型JavaScript学习笔记二——函数JavaScript学习笔记三——作用域JavaScript学习笔记四——Eval函数Ja
  • 新版Solaris 经典实战视频教程 金牌讲师讲解+学习笔记(黑客教父部落) 新版Solaris经典实战视频教程金牌讲师讲解+学习笔记(黑客教父部落)链接:http://pan.baidu.com/s/1boWCFE3密码:2qkc
  • VC++学习笔记 VC++学习笔记2007-12-25API函数:Windows操作系统提供了各种各样的函数,以方便我们开发Windows应用程序。这些函数上Windows操作系统提供给应用程序编程的接口(ApplicationProgrammingInte
  • C++学习笔记 -多重继承成员的模糊性 什么是多重继承的模糊性?指的是在多重继承下,派生类对基类成员访问不唯一,这就导致模糊性问题,编译系统不知道选择哪个基类成员。​​以上代码在brid和fish两个基类中都有breath()函数,派生类在执行时不知道执行
  • 树莓派学习笔记——修改树莓派软件源 树莓派学习笔记——修改树莓派软件源0前言本文说明如何修改树莓派软件源。如果使用raspbian系统,修改软件源的方法和Ubuntu相同,可在http://www.raspbian.org找到最新的软件源镜像,修改/etc/apt/sourc
  • 2011年软考网络管理员辅导学习笔记(7) 为了更好的帮助大家考试,考试百科在文章网络管理员辅导:学习笔记中,为大家提供的如下内容:  第5章Cisco测试命令和TCP/IP连接故障处理  一、故障处理命令  1、show命令:  1)全局命令:  showversion;显示系统硬
  • 2011年软考网络管理员辅导学习笔记(1) 为了更好的帮助大家考试,考试百科在文章网络管理员辅导:学习笔记中,为大家提供的如下内容:    第1章故障处理方法  一、网络的复杂性  一般网络包括路由、拨号、交换、视频、WAN(ISDN、帧中继、ATM、…)、LAN、VLAN、…  二
  • Chrome学习笔记(一):线程模型,消息循环 http://bigasp.com/archives/478TableofcontentsforChrome学习笔记Chrome学习笔记(一):线程模型,消息循环Chrome学习笔记(二):UI组件,皮肤引擎——基础设施篇Chrome学习笔
  • 如何学习程序设计语言(Java学习之路) 如何学习程序设计语言(Java学习之路)一、如何学习程序设计?JAVA是一种平台,也是一种程序设计语言,如何学好程序设计不仅仅适用于JAVA,对C++等其他程序设计语言也一样管用。有编程高手认为,JAVA也好C也好没什么分别,拿来就用。为什

你的评论

就没有什么想说的吗?

©2017传客网    琼ICP备15003173号-2    

本站部分文章来源于互联网,版权归属于原作者。
本站所有转载文章言论不代表本站观点,如是侵犯了原作者的权利请发邮件联系站长(weishubao@126.com),我们收到后立即删除。
站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

X