网页的组成:结构、表现、行为
结构 HTML 搭建页面结构 主要针对 标题、段落、图片、超链接等
表现 CSS 用于控制页面中元素的样式 主要针对 字体大小、颜色、背景等
行为 JavaScript 用于相应用户的操作
网页定义格式如下:
<!doctype html> 声明html5版本
<html>
<head>
<meta charset ="utf-8"/>
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>Ι
</html>
元素:将一个完整的标签称为元素。
<h1>一级标题</h1>
<p>我是一个<em>段落</em></p> p也是一个标签,em是p的子元素,p是em的父元素
<!-- --> 注释标签
<p></p> 段落标签
<br/> 换行
<hr/> 水平线
实体(转义字符)
语法:&实体名字
如:< <
> >
空格  
版权符号 ©
编码与解码 都需要字符集,字符集就是编码和解码所采用的规则 ASCⅡ ISO-8859-1 GBk GB2312 utf-8
img标签来向网页中引入一个外部图片 img是一个自结束标签
属性值:src:设置一个外部图片的路径
alt:设置在图片不能显示时对图片的描述,搜索引擎可以通过alt属性来识别不同的图片
如果不写alt属性,则搜索引擎不会对img中的图片进行收录
width:修改图片的宽度,px做单位
height:修改图片的高度,px做单位
宽高两个属性若设置一个,另一个会等比例调整大小,若同时设置,则按指定值调整
<img src="1.gif" alt="这是一只狗" width=“200px” height="100px"/>
meta标签还可以用来设置页面的关键字、指定页面进行描述
如:<meta name="keywords" content="HTML5,Java"/>
如:<meta name="description" content="发布h5,js等前端相关的信息">
搜索引擎在检索页面的时候,会同时检索页面中的关键词和描述,但是这两个值不会影响页面在搜索引擎中的排名
使用meta标签还可以用来做请求的重定向
如:<meta http-equiv="refresh" content ="5";url="http://www.baidu.com"/>
使用iframe创建一个内联框架
<iframe src="demo2.html"></iframe>
使用a标签来创建一个超链接
属性值:href:指向链接跳转的目标地址,可以写一个完整的地址
<a href="#">李连杰</a>
如果将链接地址设置为#,则点击链接之后会自动跳转到当前页面的顶部。
html中有一个属性,每一个元素都可以设置,该属性可以作为标签的唯一标识,这个属性就是id
id属性在同一个页面中只能有一个,不能重复。
href="#id属性值" 如:href=“#bottom”
列表(相当于购物清单)
在html中可创建列表,有无序列表、有序列表、定义列表三种
<!--无序列表>使用ul标签创建一个无序列表
使用li在ul中创建一个列表项,一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
可选值:disc 默认值
square
circle
注:默认的项目符号一般不用,如果需要设置项目符号,则可以采用li设置背景图片的方式来设置
另外ul和li都是块元素
<!--有序列表> 与无序列表类似,用ol代替ul,ol也是块元素
列表之间可以相互嵌套,可在无序中放个有序列表,也可在有序列表中放个无序
<!--定义列表>用来对一些词汇或者内容进行定义,使用dl来创建一个定义列表
dl中有两个子标签:dt:被定义的内容
dd:对内容的描述
同样 dl ul ol 之间是可以相互嵌套的