HTML
HTML,超文本标记语言
负责页面中的结构,定义出页面中的各个组成部分
HTML是采用纯文本的形式的编写,采用HTML标签来标识出页面中的不同部分
HTML页面的基本结构
一个网页有三个部分组成:结构html、表现css、行为javascript
结构html
结构是页面的整体结构,哪里是标题,哪里是段落,哪里是图片
结构使用HTML来编写
表现css
表现是页面的外在的样式,比如字体,字体大小,字体颜色,背景…
使用CSS来设置页面中元素的样式
行为javascript
页面和用户之间的交互行为
使用JavaScript来设置页面的行为
一个设计优良的网页要求结构、表现、行为三者分离
在开发中总是要面临一个问题,就是程序之间的耦合,三者分离就是为了解耦合
标签(元素)
成对出现
1 | <标签名></标签名> |
自结束标签
1 | <标签名 /> |
块元素和内联元素
块元素
块元素会独占页面中的一行,无论他的内容的多少
一般使用块元素对页面进行布局
常见的块元素
div
p
h1~h6
内联元素
内联元素只占用自身的大小,不会独占一行
内联元素也叫行内元素(inline)
一般内联元素都是用来为文本来设置效果
常见的内联
span
a
img
包裹规则
一般都是使用块元素去包裹内联元素,而不会使用内联去包裹块元素
a元素可以包含任意元素,除了a本身
p元素不能包含任何块元素
元素之间的关系
父元素
直接包含子元素的的元素叫做父元素
子元素
直接被父元素包含的元素叫做子元素
祖先元素
直接或间接包含后代元素的元素叫做祖先元素,父元素也是祖先元素
后代元素
直接或间接被祖先元素包含的元素叫后代元素,子元素也是后代元素
兄弟元素
拥有相同父元素的元素叫做兄弟元素
属性
通过属性可以设置标签的效果
属性需要定义在开始标签中或这自结束标签中
属性实际上是一组一组名值对结构
例子:
1 2 | <标签名 属性名="属性值" 属性名="属性值"></标签名> <标签名 属性名="属性值" 属性名="属性值" /> |
复制
常用标签
<!doctype html>
文档声明
用来标识当前页面的html的版本
该声明用来告诉浏览器,当前的页面是使用HTML5的标准编写的<html>
网页的根标签
一个页面中有且只有一个根标签
网页中的所有内容都需要写在html标签的内部
<head>
网页的头部
该标签中的内容不会在网页中直接显示
该标签用于帮助浏览器解析页面
子标签<title>
用来设置网页的标题
默认会在浏览器的标题栏中显示
搜索引擎检索网页时,会主要检索title中的内容,它会影响到页面在搜索引擎中的排名<meta>
用来设置网页的元数据,比如网页使用的字符集<meta charset="utf-8" />
设置网页的关键字<meta name="keywords" content="关键字,关键字,关键字,关键字"/>
设置网页的描述<meta name="description" content="网页的描述"/>
请求的重定向<meta http-equiv="refresh" content="秒数;url=地址" />
<body>
网页的主体
网页中所有的可见部分都需要在body中编写<h1>
~ <h6>
标题标签
在html中一共有六级标题
六级标题中,h1最重要,h6最不重要,一般页面中只会使用h1~h3
h1的重要性仅次于title,浏览器也会主要检索h1中的内容,以判断页面的主要内容
一般一个页面中只能写一个h1<p>
段落标签<br />
换行标签<hr />
水平线标签
内联框架
可以向一个页面中引入其他的外部页面<iframe>``</iframe>
属性
src
外部页面的地址,可以使用相对路径
width和height
可以设置框架的宽度和高度
name
可以为内联框架指定一个名字
可以将该属性值设置为超链接的target属性的值
这样当点击超链接时,页面将会在相应的内联框架中打开
内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架
<a>
超链接
可以使当前页面跳转到其他的页面<a>
链接的文字</a>
属性
href
指向链接跳转的目标地址,可以是一个相对路径
还可以是#id属性值,这样当点击超链接以后,将会跳转到当前页面的指定位置
可以使用mailto:来创建一个发送电子邮件的超链接
target
指定在哪个窗口中打开链接
可选值
_self
默认值,默认在当前窗口打开链接
_blank
在新窗口中打开链接
内联框架的name属性值
在指定的内联框架中打开链接
语法
注释
<!-- 注释内容 -->
注释中的内容不会在页面中显示,但是会在源码中显示,我们可以通过注释来说明网页的代码
也可以通过注释隐藏一些页面中不想显示的内容
实体
在HTML页面中一些特殊符号是不能直接使用,需要使用实体来代替这些特殊符号
实体也可以称为转义字符
实体的语法
&实体名;
常用的实体
空格
Non-Breaking Space” 的缩写,
<<
、>>
、版权符号©©
图片标签
使用图片标签可以向页面中引入一个外部图片
属性
src
指向一个外部图片的路径,可以使用相对路径
alt
指定一个在图片无法加载时对图片的描述
搜索引擎主要通过该属性来识别图片的内容
如果不写该属性则搜索引擎会对图片进行收录
width
设置图片的宽度
height
设置图片的高度
图片的格式
JPEG
颜色丰富的图片,如,照片
GIF
颜色单一,简单透明的图片,动态图
PNG
颜色丰富,复杂透明的图片
图片选择的原则
效果一致,用小的
效果不一致,用效果好的
相对路径
相对于当前资源所在的目录的路径
可以使用../返回一级目录,返回几级使用几个../
xHtml语法规范
1.HTML中不区分大小写,但是尽量使用小写
2.HTML的注释不能嵌套
3.标签必须结构完整
要么成对出现
要么自结束标签
4.标签可以嵌套但是不能交叉嵌套
5.属性必须有值,且值必须加引号,单引号双引号都可以
文本标签
`<em>`
表示语气上的强调
`<strong>`
表示内容的重要性
`<i>`
表示单纯的斜体
`<b>`
表示单纯的加粗
`<small>`
表示细则一类的内容
`<cite>`
表示参考的内容,凡是加书名号的都可以使用cite
`<q>`
短引用,行内引用
< blockquote>
长引用,块级引用
<sup>
上标<sub>
下标<del>
删除的内容<ins>
插入的内容
< pre>
预格式标签,可以保留代码中空格换行这些格式< code>
表示程序代码