网页设计培训课.pptx

HTML、HTML5基础及实操训练课题目标访问网页过程客户端服务端浏览器Web服务器软件页面设计相关语言及相互区别HTMLCSSJavaScript直译式脚本语言是一种动态类型、弱类型、基于原型的语言，内置支持类型用来给HTML网页增加动态功能层叠样式表能够真正做到网页表现与内容分离的一种样式设计语言CSS 1、2、3位置排版精确控制，样式编辑能力，初步交互设计超文本标记语言是一种规范，一种标准HTML 2.0、3.2、4.1、5通过标记符号来标记要显示的网页中的各个部分。仅有HTML的网页仅有HTML+CSS的网页正常网页网页中的HTML、CSS、JavaScriptSublime TextHTMLbutton元素开始标签（包含各项属性，及事件）内容结束标签CSS选择器属性值声明JavaScriptHTML 基础教程HTML 元素HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。HTML 元素语法button元素HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性br空元素开始标签（包含各项属性，及事件）结束标签内容HTML 基础教程HTML 属性HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=value。属性总是在 HTML 元素的开始标签中规定。属性值描述classname1 name2 …规定元素的一个或多个类名（引用样式表中的类）。idid规定元素的唯一 id（标识符）。stylestyle_definition规定元素的行内样式（inline style）titletest规定元素的额外信息（可在工具提示中显示，或鼠标悬停）hiddenNULL规定元素仍未或不再相关。（即，显示隐藏）………HTML 基础教程HTML 标题标题（Heading）是通过 h1 - h6 等标签进行定义的。h1 定义最大的标题。h6 定义最小的标题。Tips：1、浏览器会自动地在标题的前后添加空行。 2、默认情况下，HTML 会自动地在块级元素前后添加一个额 外的 空行，比如段落、标题元素前后。HTML 水平线hr / 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。HTML 基础教程HTML 注释可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。Tips：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边 的括号）不需要。HTML 如何查看源代码如果您想查看浏览器未编译的源代码，只需要单击右键，然后选择“查看源文件”（IE）或“审查元素”（Chrome），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。HTML 基础教程HTML 段落 段落是通过 p 标签定义的。Tips：1、浏览器会自动地在段落的前后添加空行。（p 是块级元素） 2、不要忘记结束标签！省略结束符浏览器不会有错误提示，但会产生意想不到的结果和错误，且在未来的 HTML 版本中，不允许省略结束标签。HTML 折行如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 br / 标签Tips：1、您也许发现 br 与 br / 很相似，但在未来的HTML版本中不允许 使用没有结束标签（闭合标签）的 HTML 元素。 2、即使 br 在所有浏览器中的显示都没有问题，使用 br / 也是更长远的保障。HTML 基础教程HTML 文本格式化 /tiy/t.asp?f=html_textformatting文本格式化 此例演示如何在一个 HTML 文件中对文本进行格式化；/tiy/t.asp?f=html_preformattedtext预格式文本 此例演示如何使用 pre 标签对空行和空格进行控制；/tiy/t.asp?f=html_computeroutput“计算机输出”/tiy/t.asp?f=html_computeroutput标签 此例演示不同的“计算机输出”标签的显示效果；/tiy/t.asp?f=html_address地址 此例演示如何在 HTML 文件中写地址；/tiy/t.asp?f=html_abbracronym缩写和首字母/tiy/t.asp?f=html_abbracronym缩写 此例演示如何实现缩写或首字母缩写；/tiy/t.asp?f=html_bdo文字/tiy/t.asp?f=html_bdo方向 此例演示如何改变文字的方