0101_初识的html.pptx

Day01_初识HTML翡翠教育网页布局WEB标准化组成查看网页源代码项目案例设计总结结构、显示、行为WEB标准化布局的三个组成部分——WEB标准网页布局组成————查看网页中的源代码——目录什么是HTMLHTML编辑工具HTML基本结构HTML基础入门什么是HTMLHTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML文件的扩展名为.html 或 .htm——什么是HTML——HTML编辑工具DreamweaverSublimeHbuilderFrontPage文本文档.txt——HTML编辑工具————Dreamweaver软件————Dreamweaver编辑界面——HTML基本结构HTML基础入门块级别元素内联元素行内对象HTML基础入门 html 根控制标记 head 头控制标记 title标题/title 标题标记 /head 头控制标记（尾） body 网页内容 内容显示区域 /body /html 根控制标记(尾)——HTML基本结构——头部区域Html网页主体区域标记名 单一型,无设置值的。 例如：我想学做网页br是呀！我也想学！标记名称 属性=”属性值” 单一型，有设置值的。 例如：如：hr width=”80%”标记名…/标记名称 对称型，无设置值。 例如： title我的第一个页面/title 标记名 属性名=“属性值”文本/标记名 对称型，有设置值。 例如： body bgcolor=”red”…/body font size=”7”…/font——HTML基本标记—— html…/html:网页内容以html开始/html结束 以下所有标记或标记对都必须嵌入此标记中 head…/head(网页头部) (1)title…title标记 单纯的文件标题声明 (2)link标记 link href=“style.css” rel=“stylesheet” type=“text/css” 用于载入外部CSS文件——HTML基本标记—— (3)meta_/标记 meta name= keywords content= 淘宝,网上购物,在线交易,交易市场 / meta name= description content= 淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、…… / meta 元素可提供有关页面的元信息（meta-information）。 meta 标签的属性定义了与文档相关联的名称/值对。——HTML基本标记—— (4)script…script标记 script src=“abc.js”/script 在当前网页载入一个 abc.js文件 (5)style…style标记 在此标记之间定义本网页的CSS样式 ——HTML基本标记——body…/body标记 body 元素定义文档的主体。 body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） body bgcolor=”red”…/body——HTML基本标记————主体内容body——设置页面背景——bgcolor设置页面边距——topmargin、leftmargin、rightmargin、bottommargin设计正文颜色——text——设置页面背景bgcolor ——基本语法 body bgcolor=””语法说明利用body标记中的bgcolor属性，可以设置网页的背景颜色。—— 设置页面背景bgcolor ——实例代码—— 设置页面背景bgcolor ——设置背景蓝色——页面边距语法说明——页面边距设置显示——设置页面边距——基本语法 body topmargin=value leftmargin=value rightmargin=value bottomnargin=value ——页面边距语法说明——通过设置topmargin/leftmargin/rightmargin/bottommargin不同的属性值来设置显示内容与浏览器的距离：topmargin设置到顶端的距离leftmargin设置到左边的距离rightmargin设置到右边的距离bottommargin设置到底边的距离。——页面边距语法说明——实例代码——设计正文颜色text ——基本语法 body text=”” /body语法说明在body标记中，利用text属性设置文档的颜色时，还可以进行其他的设置，例如：背景、字体等。——设计正文颜色text ——实例代