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

网页设计基础（HTML）相关推荐

《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
HTML网页设计基础期末作业——绿色化妆品网页(HTML+CSS)
HTML网页设计基础期末作业--绿色化妆品网页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板 ...
HTML网页设计基础期末作业——仿Coco线上订奶茶饮料网站设计与实现6个页面(HTML+CSS+JavaScript)...
HTML网页设计基础期末作业--仿Coco线上订奶茶饮料网站设计与实现 6个页面(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
HTML网页设计基础——图文混排
HTML网页设计基础--图文混排案例: 分析:该题的属性有图片,加粗,斜体,下划线,还有水平线,还有空格的使用代码:
Dreamweaver Flash Photoshop网页设计基础与实例教程(职业白金版)
Dreamweaver & Flash & Photoshop网页设计基础与实例教程(职业白金版) 基本信息作者: 龙飞丛书名: 培训专家出版社:电子工业出版社 ISBN:978 ...
HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节内容第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章排列页面内容] 第3章 ...
《网页设计基础——HTML注释与CSS注释》
网页设计基础--HTML注释与CSS注释一.HTML注释: 格式:  例如: <html><head><title>H ...
《网页设计基础——表格与表单》
网页设计基础--表格与表单一.表格的基础框架: 规则: table:表示整个表格. caption:定义表格的标题 tr:表示表格的一行. td:表示行中的一个列,需要嵌套在 <tr> ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...

网页设计基础（HTML）