为什么要遵循遵循Web标准:
浏览器的内核不同,展示的页面或者排版就有一些差异,遵循Web标准可以可以让页面更加统一。
Web标准的三层组成:结构(Structure)、表现(Presentation)和行为(Behavior)。
结构: 用于网页元素进行整理和分类,主要是.html。
表现:用于设置网页元素的版式、颜色、大小等外观样式,主要是.css
行为:网页模型的定义及交互的编写,主要是.js
1、初识HTML
HTML指超文本标记语言(Hyper Text Markup Language),用来描述网页的一种语言。
超文本的含义:可以加入图片、声音、动画、多媒体等内容,还可以从一个文件跳转到另外一个文件,与不同的文件链接。
网页是由网页元素组成的,这些元素利用HTML标签描述出来,然后通过浏览器解析,就可以显示给用户了。
学习html主要是学习html标签,用html标签来描述网页元素:比如图片标签、文字标签、连接标签等等。
所有的html标签都是在<>中
<html></html> html标签,根标签
<head></head>文章的头部,在head中要设置的是title
<title></title>文章的标题,每个页面都有自己的标题
<body></body>文章的主题,元素包含文档的所有内容、页面内容
2.
标签的分类:
双标签:
<标签名>内容</标签名>
/ 关闭符号
单标签:
<标签 /> 比如<br />
3
标签关系:
(1)嵌套关系
<head>
<title>
</title>
</head>
(2)并列关系
<head>
</head>
<body>
</body>
4
<!doctype html>就是告诉浏览器按照HTML5规范解析界面
lang 指定语言种类
lang='en'表示html的语言为英文,en是English的缩写。
zh-CN表示为中文。
5
常见的字符集编码方式:
gb2312 简单中文
big5 繁体字
gbk 包含全部中文字符,是gb2312的扩展
utf-8 包括世界各国的语言
6
标签的语义化:
在合适的地方放一个合适的标签,让语义显得更加清晰明了
7
标签的属性:
<标签名 属性1=“属性值1” 属性2=“属性值2”……> 内容 </标签名>
举例:
<ipad 颜色=“金色” 大小=“10.4寸”></ ipad>
有哪些标签:
(1)排班标签:
标题标签(h):h1 ~ h6,h1标题最大,依次递减
段落标签(p):<p> </p>
水平线标签(hr):<hr />
换行标签(br):<br />
段落和换行的区别:
呈现出来的效果很不相同
div和span标签:div和span没有语义,可以看作是两个盒子
div是division的缩写,意思是 分割
span意识是 跨度、范围。
两个都是盒子,用来布局。
<div>一行只能放一个
<span>一行可以放多个
(2)文本格式化标签:
<b></b> 和<strong></strong>:文字以 粗体 的方式显示,b(bold)只是加粗,strong还有强调的意思
<i></i>和<em></em>:文字以 斜体 的方式呈现
<s></s>和<del></del> :文字以 加删除线 的方式显示
<u></u>和<ins></ins>:文字以加 下划线 的方式呈现
一般都是推荐后面的写法
(3)图像标签:
image 图像
在页面中插入图片,语法如下:
<img src = "图像URL" /> 单标签
src 属性用于指定图像文件的路径和文件名
属性 alt 作用:图片不能显示时替换文本
属性 title 作用:鼠标悬停时显示的内容
属性 width 作用:设置图像的宽度,单位像素
属性 height 作用:设置图像的高度,单位像素
属性 border 作用:设置图像边缘的宽度,单位 数字(一般跟着css)
注意点:
标签有多个属性,但都必须写在开始标签后
属性不分前后顺序,但是标签与属性之间、属性与属性之间必须用空格隔开
采用 键值对 的格式 ,key=“value”
(4)链接标签
<a> 单词是:anchor,意思为锚
属性 href,用于锚定跳转目标的url
属性 target,用于指定页面的打开方式,有self和blink两种打开方式,_self是默认当前窗口打开,_blank是在新窗口打开
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
注意:
外部链接需要添加 http://
内部链接:直接链接内部页面名称即可<a href = "index.html">首页</a>
空链接:通常不确定链接到哪里的时候一般用#代替,即href = "#"
不仅可以创建文本链接,各种图片、表格、音频都可以设置链接。
(5)注释标签
<!--注释-->
注释标签是给别人看的,主要目的是为了解释之后的代码是做什么的,但是程序不执行
注释的快捷键:ctrl + /
取消注释的快捷键 :ctrl + shift + /
8 路径
相对路径:从代码所在的这个文件出发,去寻找我们的文件路径,而我们所说的 上一级、下一级、同一级,都是相对于代码文件来说,我们所找的文件所在的位置。
同一级:直接写名字
下一级:用 /
上一级:先翻出来,用../,这是翻出来一级,如果有两级的话,就是../../
绝对路径:完整的网页地址,或者自己电脑中固定的地址,了解即可,不大使用。