html笔记
一、网页介绍
1.常见的浏览器有:IE 火狐 谷歌(重要的) sarfari(苹果默认系统) opera 共五大浏览器
2.市场份额: 谷歌 ie8
备注:win7的系统自带是IE8
二、浏览器内核
1.内核分为两个部分:渲染引擎和JS引擎
2.各个浏览器的内核:
- Trident(IE内核)
- Gecko(firefox)特点是:公开性
- Wekit(safari):chrome一开始也是用的这个内核,后来换成bink
- chromium/bink(chrome):bink是wekit的分支
- Presto(opera)opera:后来换成bink
三.Web的结构标准
1.结构分为三部分:结构 ,表现,行为
2.三部分详情
结构标准:结构标准用于对网页元素进行整理和分类,主要包括xml和xhtml两部分,作用使内容更清晰,更有逻辑性
样式标准:表现用于设置网页元素的版式,颜色大小等外观样式,主要指css,主要是用于修饰内容的样式
行为标准:行为是指网页模型的定义以及交互的编写,主要包括DOM和ECMAScipt(简称js)两部分,内容的交互以及操作效果
理想中的编码一定要有:html(结构),css(样式),js(行为)
四.html的认识
1.html:是超文本标签语言,主要是通过html标签对网页中的文本,图片,声音等内容进行描述。
2.html的语言语法骨架格式
<html>根标签
<head>头标签
<title></title>标题标签
</head>
<body>主体标签
</body>
</html>
(1)html 标签:作用所有html中标签的一个根节点
(2)head标签:用于存放:title,meta,base,style,script,link,head中必须要设置title标签
(3)title标签:让页面有一个属于自己的标题
(4)body标签:页面再得主体部分,用于存放所有的html标签
3.html的标签分类
(1)双标签
格式为:<标签名>内容</标签名>
注意:<>标签开始部分
</>标签结束部分
/关闭符号
(2)单标签
也成为空标签
格式为:<标签名/>
4.html的关系
(1)嵌套关系(包含意义)
(2)并列关系
注意:如果两个标签之间是嵌套关系,要按tap键缩进字符,这样才会更加的美观
5.开发工具:
sublime快速生成方法–输入html或者!,再按一下tap键就可以了
这个是告诉我们使用的哪个版本,这个是代表是html 5的版本 字符集,utf-8是目前做常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312, 以后就同意用utf-8,这就避免出现字符集不统一而引起乱码的情况了jb2312是代表简单中文
BIG5是代表繁体中文,港澳台等用
GBK包含全部中文字符,是gb2312的扩展,加入对繁体字的支持,兼容gb2312
utf-8则包含全世界所有国家需要用的字符集
五.标签学习
1.排版标签
(1)标题标签 h 双标签
h1–h6字体依次减小
语法格式为:文本内容
属性:align:left,center,right
示例:
<body>
<h1 align="center">
文本内容
</h1>
</body>
(2)段落标签 p 双标签
语法格式为:
文本内容
<body>
<p>
内容
</p>
</body>
自动换行功能
(3)水平线标签:
此标签 属于单标签
属性:
width:设置水平线的宽度
size:设置水平线的高度
color:设置水平线的颜色
align:设置水平线的位置
left靠左
right靠右
center中间
示例:
<body>
<hr width="660px" height="2opx" align="left" color="red"/>
</body>
( 4 )换行标签:
此标签属于单标签
示例:
<body>
<p>
文本内容文本内容<br />
文本内容文本内容<br />
文本内容文本内容<br />
</p>
</body>
( 5 )div span 标签 : 没有语义
div:布局,分割的意思,其实有很多div组合网页
span:跨度,跨距;范围
语法格式:
2.文本格式化标签
(1)加粗标签 :
b 或者 strong,建议加粗用strong,它有语义
语法格式:文本内容</b》,或者文本内容</strong》
(2)斜体标签:
i 或者em,建议用em
语法格式:文本内容</i》,或者文本内容</em》
(3)加删除线标签:
s 或者del,建议使用del
语法格式:文本内容</s》,或者文本内容</del》
(4 )加下划线标签:
u或者ins,不赞同使用u
语法格式:文本内容</u》,或者文本内容</ins》
注意:b i u s 只用使用,没有强调的意思;strong em ins del语义更强烈
3.标签的属性
属性就是特性,在使用html制作网页时,如果想让html标签提供更多的信息,可以使用html标签的属性加以设置,基本语法格式如下:
<标签名 属性1=“属性值1” 属性2=“属性值2” …>文本内容</标签名>
注意:
1.标签可以拥有多个属性,必须在开始标签中,位于标签名后面
2.属性之间不分先后顺序,标签名与属性,属性与属性之间均以空格分开
3.任何标签的属性都有默认值,省略该属性则取默认值
4.图片标签 :img 属于单标签
该语法中src属性用于指定图像文件的路径和文件名,他是img中的必须的属性
语法格式为:
img所有的属性:
src:图像的路径
alt:图像不能显示时的替换文本
title:鼠标悬停时显示的内容
width:设置图像的宽度,xhtml中不支持%页面百分比
height:设置图像的高度,xhtml中不支持%页面百分比
border:设置图像边框的宽度
示例:
<img src="纯色. jpg" alt="这是风景图片" title="清新淡雅" width="400px"
**5.链接标签:
a 英文单词anchor的缩写,意思是锚,铁锚的
基本语法格式如下:文本或者图像
属性:
href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能
target:用于指定链接页面打开方式,其取值有self和blank两种,,其中self为默认值,blank为在新窗口打开
示例:
<a href="http://baidu.com" target="_blank">百度</a > ,其中black是在新窗口打开
<a href="http://baidu.com" tagert="_self">百度</a > ,其中self是默认是在本窗口打开
注意:
1.外部链接需要添加http://www.baidu.com
3.如果当时没有确定链接目标时,通常将来凝结标签的href属性定义为:#(即href=”#“),表示该链接为一个空链接
4.不仅可以创文本超链接,在网页各种网页元素中,如图像,表格,音频,视频等都可以添加为超链接。
6.锚点定位
通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两部分
1.使用文本</a
2.使用相对应的id名标注跳转目标的位置
示例
<a href="#3">个人介绍</a>
<p id="3">
文本内容
</p>
7.base标签
此标签可以设置整体链接的打开状态
语法格式为:属于单标签
示例:
<html>
<head>
<title>网页跳转</title>
<meta charset="UTF-8"/>
<base target="_blank" />
</head>
<body>
<h3>网页跳转</h3>
<hr />
<a href="http://www.baidu.com">百度</a>
<a href="http://www.taobao.com">淘宝</a>
<a href="http://www.jd.com">京东</a>
</body>
</html>
8.特殊字符
常用的字符:
空格字符: ;
小于号字符:< &it;
大于号字符:> >
版权字符(圆圈里面有个c):©;
9.注释标签
加了注释标签之后浏览器是不执行的,注释里面的内容浏览器是看不见的,但是作为html的一部分,它会下载到用户的计算机上,查看源代码就可以看见
<!--你好,这是源代码-->
10.图像路径
(1)相对路径
1.图像文件和html文件位于同一个文件夹:只需要输入图像的文件的名称即可,如
2.图像文件位于html文件的下一级文件夹:输入文件夹名和文件名,之间用/隔开,如
3.图像文件位于html文件的上一级文件夹:在文件名之前加入"…/",如果是上两级则需要是…/…/,依此类推,如
(2)绝对路径:完整的网络网址
例如:https://www.baidu.com
11.列表标签
(1)无序列表:没有顺序性 ul
语法格式:
<.ul>