Web前端开发（HTML5+CSS3+JavaScript） 课件汇总 严健武 第1--5章 WEB前端开发概述 ---盒子模型与文本格式.pptx

Web前端基础技术;;内容：HTML5CSS3JavaScript---Web前端开发基础

目标：使用H5+CSS3+JS构建合理布局、具有交互功能的前端页面。

方法：教程内容+上课内容+实践/模仿+资源扩展;1.Web前端开发;2.Web工作过程;3.基本概念;;4.Web前端开发相关技术;4.Web前端开发相关技术;4.Web前端开发相关技术;4.Web前端开发相关技术;5.Web前端开发工具;汉化VSCode：安装插件;创建Web页面;编辑Web页面，并打开;练一练;1.HTML文档是由[标记]构成的[文本]文件;本章目标：

1.了解本课程学习内容：H5+CSS3+JS，各自任务角色

2.理解前端开发的核心任务

3.理解基本概念：静态/动态网页的工作过程、WEB服务器、URL和超链接的概念

4.重点掌握开发工具的安装和使用;Web前端基础技术;;1.基本结构;1.head-头部;1.2meta标记:网页文档属性;;1.2meta标记:示例2-如何解析执行（了解）;1.3链接link标记:示例3-一些效果;2.body-主体;4.1文字标题h1-h6;4.2段落p/p;4.3换行br/;4.4横线hr/;5标记属性：设置HTML的基本效果;5标记属性，要求：记住列出的基本属性;属性名：align，表示段落文本的对齐方式

取值：left、right、center和justify，分别代表文本在段落中左对齐、右对齐、居中对齐和两端对齐。;两端对齐效果。palign=“justify”段落内容-拉伸为满行/p;5.2水平线属性;h4默认横线/h4

hr/

h4宽度为50%的红色横线/h4

hrwidth=50%color=#ff0000/

h4左对齐、宽度为50%、大小为10px的横线/h4

hrwidth=50%size=10color=redalign=left/

这是横线后面文字，自动分行了;5.3图片属性;示例：显示原始图片大小和缩小图片;示例：显示左右浮动的图片;6HTML注释;7HTML文档编写规范;7HTML文档编写规范;综合实例与练习;1.下面标记能显示网页内容的标记是：;本章目标：

1.熟悉HTML基本文档结构，各部分包含的具体内容

2.掌握基本标记含义及其常用属性：p/br/hr/h1~h6/img（当前只要先记住）

3.掌握HTML文档的规范要求;!DOCTYPEhtml

html

head

title百度搜索/title

linkrel=iconhref=baidu.png

/head

body

h3align=center百度一下，你就知道/h3

hrsize=2color=gray/

p

imgsrc=baidu.pngalign=leftwidth=200pxheight=100px/

nbsp;nbsp;百度（Baidu）是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。

br/

nbsp;nbsp;“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于

2000年1月1日在中关村创建了百度公司。

/p

/body

/html;目标体现：

二、使用合适的标记和属性显示如下的效果;Web前端基础技术;;1.特殊符号;尊敬的领导：br/

nbsp;nbsp;nbsp;nbsp;您好！

;2.格式化文本标记;示例：实现如下的文本效果;练习：请在页面上输出以下的效果：;2.2字体效果标记font：修饰任意所选择文本的字体、颜色和大小。;示例：格式化文本标记应用;素材和要求：

荣耀畅玩20(6号，蓝色，加粗)5000mAh超大电池续航6.5英寸大屏莱茵护眼4GB+64GB全网通幻夜黑

当前价：￥2999（红色，4号，下划线），

原价￥4999（2号，灰色，删除线）;本章目标：

掌握特殊字符输出：空格、大于、小于、，注册和版权符号。

掌握简单文本格式：粗体、斜体、下划线、删除线、上标下标等的用法；

字体font样式属性;Web前端基础技术;;1.列表概述;更多用途【局部布局】：结合CSS-导航；商品列表;2.无序列表(UnOrderList，符号