网页设计（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>

单标签，在页面显示水平

文本格式化标签

标签标签说明
bstrong加粗
uins下划线
iem倾斜
sdel删除线

媒体标签

图片标签
<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>
# html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟