网页设计（HTML）

一、基础知识

网页

文字、照片、音频、视频、超链接

网页背后是代码；

代码是通过浏览器转化（解析和渲染）的；

五大浏览器

IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器、欧朋浏览器

web标准的构成

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	javaSciipt	网页模型的定义与页面交互

我要变粗
<strong>我要变粗</strong>

HTML页面固定结构

html标签：网页的整体

head标签：网页的头部

body标签：网页的身体

网页中的固定结构是要通过特点的HTML标签进行描述的

<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
		网页的主体
	</body>
</html>

HTML的语法规范

HTML注释

浏览器执行代码会忽略注释

HTML标签的结构

开始标签和结束标签组成双标签

<strong>文字要变粗</strong>

标签的属性

<strong class="one">文字要变粗</strong>
属性名=“属性值”

HTML标签与标签之间的关系

嵌套关系（父子关系）

<head>
	<title></title>
</head>

并列关系（兄弟关系）

<head></head>
<body></body>

二、HTML标签学习

排版标签

标题标签：h系列标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

从上到下逐级递减

文字都有加粗，都有变大，独占一行

标题标签有六个，一级到六级

段落标签

<p>我是一段文字</p>

段落之间有间隙，独占一行

换行标签

<br>

单标签，让文字强制换行

水平标签

<hr>

单标签，在页面显示水平

文本格式化标签

标签	标签	说明
b	strong	加粗
u	ins	下划线
i	em	倾斜
s	del	删除线

媒体标签

图片标签

<img src="" alt="">

单标签

网页和图片在同一文件夹中 src=“路径”

alt属性替换文本当图片加载失败时

title属性：当鼠标悬停时会显示的文本

width属性宽度；height属性高度（如果设置一个，比例会不变，照片不会变形。）

标签	功能
src	图片路径
alt	替换文本
title	当鼠标悬停时会显示文本
width	宽度
height	高度

路径

绝对路径：目录下的绝对位置

<img are="路径" >

相对目录

1.同级目录：

<img src="图片名">
<img src="./图片名">

2.下级目录：

<img src="目标文件夹/目标文件名">

3.上级目录：

<img src="../目标文件名">

音频标签

<audio src="音频路径" controls></audio>

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

视频标签

<voied src="视频路径" controls></voied>

属性	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

链接标签

a标签，超链接，锚链接

<a href="./目标网页.html">目标网页</a>

a标签默认文字有下划线；未点击默认蓝色，点击过默认为紫色，

链接的target标签

目标网页的打开方式

取值	效果
_self	默认值（覆盖原网页）
_blank	再新窗口中跳转（保留原网页）

空链接

点击后回到顶部；可以占个位置。

<a href="#">回到顶部</a>