一、认识网页和浏览器
双标签:<标签名> 内容 </标签名>
单标签:<标签名 />
单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。
html标签的关系分为两种:
嵌套关系:
并列关系:
倡议:如果两个标签之间的关系是嵌套关系,子元素最好锁紧一个tab键
的身位,如果是并列关系最好上下对齐
html标签的语义化:
所谓语义化,就是指标签的含义。
为什么语义化:
方便代码的阅读和维护
同时让浏览器或网络爬虫可以很好地解析,从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化
核心:合适的地方给一个最为合理的标签
语义化是否良好:当我们去掉CSS之后,网页结构依然组织有序,并且有很好的可读性。
标签的属性:
属性就是特性:比如手机的颜色与尺寸就是手机所具有的的属性
使用html制作网页时,如果想让html标签提供更多的信息,可以使用html标签的属性进行设置
基本格式:<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
在上面的语法中:
1.标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
3.任何标签的属性都有默认值,省略该属性则取默认值。
采取 键值对 的格式 key="value" 的格式
比如:
<hr width="400" />
属性 是 宽度
值 是 400
1、网页:
网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、
视频以及Flash等
2、浏览器
浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。
我们平时称为五大浏览器
3、浏览器内核
浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎
它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,
然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。
有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,
如加上没什么人使用的非商业的免费内核,可能会有10多种,
但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。 ```
(1)Trident(IE内核)
国内很多的双核浏览器的其中一核便是 Trident,美其名曰 "兼容模式"。
代表: IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。
Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。
(2)Gecko(firefox)
Gecko(Firefox 内核): Mozilla FireFox(火狐浏览器) 采用该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高
,全世界的程序员都可以为其编写代码,增加功能。 可惜这几年已经没落了,
比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
(3) webkit(Safari)
Safari 是苹果公司开发的浏览器,所用浏览器内核的名称是大名鼎鼎的 WebKit。
现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了),苹果感觉像被别人抢了媳妇,
都哭晕再厕所里面了。
代表浏览器:傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器,
(4) Chromium/Blink(chrome)
在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
大部分国产浏览器最新版都采用Blink内核。二次开发
(5) Presto(Opera)
Presto(已经废弃) 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",
因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。
4、web标准构成
Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面
结构标准:结构用于对网页元素进行整理和分类,咱们主要学的是HTML。 最重要 表现标准:表现用于设置网页元素的版式、
颜色、大小等外观样式,主要指的是CSS。 行为标准:行为是指网页模型的定义及交互的编写,主要学的是 Javascript ~。
二、HTML基础
1、<DOCTYPE>
2、<html>
作用所有HTML中标签的一个根节点。 最大的标签 根标签
3、title文档的标题
作用:让页面拥有一个属于自己的标题。
4、head:文档的头部
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
注意在head标签中我们必须要设置的标签是title
5、body文档的文主体
以后我们的页面内容 基本都是放到body里面的
body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
~~~
6、<p></p>:
paragraph--段落
段落标签
7、<br>
break--打断,换行
换行标签,单标签
说明:
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,
就需要使用换行标签
8、<hr/>
horizontal--横线
水平线标签
定义水平线标签,单标签
9、<span></span> 标签
span--跨度,跨距,范围
没有语义
网页布局的主要盒子
10、<div></div>标签
division--分割,分区
没有具体语义
网页布局的主要盒子
11、<b></b> 标签
规定粗体文本
12、<strong></strong>
加粗表示强调(xhtml推荐使用)
13、<em></em>
<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说
,这意味着要把这段文字用斜体来显示。(xhtnl中推荐使用)
14、<i></i>
以斜体方式进行显示
15、<s></s>
文字以加删除线方式显示
16、<del></del>
文字以加删除线方式显示(xhtml中推荐使用)
17、<u></u>
以加下划线方式显示(xhtml不赞成使用u)
18、<ins></ins>
以加下划线方式显示
19、<img/>标签
image--图像
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素(xhtml不支持%) 设置宽度
height 像素(xhtml不支持页 设置高度
面百分比)
border 数字 设置图像边框的宽度
20、<a></a>链接标签
anchor--锚,铁锚
html <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性:
href:
用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
Hypertext Reference的缩写。意思是超文本引用
target:
用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,blank为在新窗口中打开方式。
格式:
1._blank
<a href="document.html" target="_blank">my document</a>
浏览器会另开一个新窗口显示document.html文档
2._self
<a href="document.html" target="_self">my document</a>
把文档调入当前页框
3._top
<a href="document.html" target="_top">my document</a>
去掉所有页框并用
注意:
1.外部链接 需要添加 http:// www.baidu.com
2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),
表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
锚点定位 (难点)
通过创建锚点链接,用户能够快速定位到目标内容。 创建锚点链接分为两步:
1.使用“a href=”#id名>“链接文本"</a>创建链接文本(被点击的)
<a href="#two"></a>
2.使用相应的id名标注跳转目标的位置。
<h3 id="two">第2集</h3>
html中几种返回顶部的方法
1.设置锚点链接
2.<a href="#top" title="">TOP</a>设置属性值为#top
21、base标签
base--基本的
base 可以设置整体链接的打开状态
base 写到 <head> </head> 之间
例:
<img src="media/base.png" />
把所有的连接 都默认添加 target="_blank"
注:因为base标签的原因设置为打开方式是在新窗口中打开,则某个链接想在当前窗口打开
则可以在此链接的标签添加元素target="_self"即可
22、特殊字符(理解)
html为这些特殊字符准备了专门替代的代码
特殊字符 描述 字符的代码
空格符
< 小于号 <
> 大于号 >
& 和号 &
¥ 人民币 ¥
..............................等等
23、注释标签
<!--注释语句-->
目的:便于阅读
关于注释几点建议:
多写注释是非常好的代码习惯团队协作顺畅
注释是写给队友看的,浏览器不执行注释!
查看源代码可以看得到
24、路径
相对路径:
相对路径是相对于链接的源web页面只想网站中其他文件的一个链接
就像在地图上一样重点总是相对于起点
“..”是返回上一级的意思
绝对路径(基本不用)
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,
意指当所有网页引用同一个文件时,所使用的路径都是一样的
“D:webimglogo.gif”,或完整的网络地址,
例如“http://www.itcast.cn/images/logo.gif”。
25、无序列表(重点)
ul= unordered list
li = list iten
无序列表的各个列表项之间没有顺序级别之分,是并列的。
其基本语法格式如下:
```html
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
关于列表嵌套:
1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他
标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
26、有序列表(理解)
ol=ordered list
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序
排列定义,有序列表的基本语法格式如下:
```html
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
27、自定义列表(理解)
页面底部的时候经常会用到dl来做更为适合
定义列表常用于对术语或名词进行解释和描述,
定义列表的列表项前没有任何项目符号。其基本语法如下:
```html
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
```
<img src="media/2.jpg" />
用的还可以:
<img src="media/mix.png" />
关于网页中的斜杠“”和反斜杠“/”的使用问题
问:我的操作系统中使用""作分隔符;我是不是应该用""而不是"/"?
答:不是这样的。
对于网页,只能使用“/(斜线)”。不要用“(反斜线)”。不同的操作系统使用不同的
文件分隔符(如:Windows上使用“”,而不是“/”),但是在Web上,我们选择了一个
通用分隔符,所有操作系统都要使用这个分隔符,所以不管你使用Mac,windows
linux还是其他操作系统。在HTML的路径中都要使用“/”。
谷歌浏览器中的一个工具toggle device toolbar 切换设备工具栏 可更改页面的显示
select an element in the page to inspect it可以检查页面对应的元素