Html元素和属性解读.pptx

Html元素和属性（一） 前端技术总结 2016.10.12 Html文件结构 页面属性标记 常用页面元素标记 表格 表单 目录 团队组织架构 视觉设计 前端开发 交互设计 标记与属性 Html文件结构 前端页面实现 1.1 Html文件结构 前端开发 视觉设计 交互设计 1、标记及属性 标记：为了使所要显示的内容达到一定的效果，在内容中加入的特定标识。 标记 受标记影响的内容/标记 说明： 每个标记都用“”(小于号)和“”（大于号）围住； “”、“”与标记之前不能留有空格或其他非标记字符； 在标记前加“/”是结束标记； 标记字母不区分大小写； 对于同一段要标记的内容，可以使用多个标记来共同作用，各个标记之间的顺序 是任意的。 前端开发 视觉设计 交互设计 标记及属性 属性：标记通过属性来精确控制信息，以便制作出各种效果。 标记 属性1=“属性值” 属性2=“属性值”…内容/标记 说明： 并不是每一个标记都有属性； 可以根据需要使用标记的所有属性或几个属性，属性之间没有顺序； 属性和标记一样，也不区分大小写。 前端开发 视觉设计 交互设计 2、Html5基本框架 html head title网页的标题/title /head body 网页的内容 /body /html 说明： 以html开头，以/html结尾； 包括头部（head）和主体（body）两大部分； head…/head:网页题头，说明文件命名与文件本身的相关信息； title…/title:网页标题，在浏览器的标题栏显示； body…/body:网页的正文。 前端开发 视觉设计 交互设计 常用的头部标记 titleTitle of the document./title link rel=“stylesheet” href=“style.css” meta charset=“UTF-8” 前端开发 视觉设计 交互设计 Html5页面一般框架 便于维护和修改，对搜索引擎更友好，预留扩展，无障碍浏览功能 分区级语义元素： header article aside figure figcaption hgroup nav section footer 前端开发 视觉设计 交互设计 Html5页面一般框架 !DOCTYPE html html lang = en head meta charset = utf-8 titleHTML5 Demo/title /head body headerh1/h1h2/h2/header navulli/lili/li/ul/nav section article/article article/article /section aside/aside footer/footer /body /html 前端开发 视觉设计 交互设计 header元素 header元素：代表“网页”或“section”的页眉。 通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。 整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素。 header使用注意： 可以是“网页”或任意“section”的头部部分； 没有个数限制； 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。 header hgroup h1网站标题/h1 h1网站副标题/h1 hgroup /header 前端开发 视觉设计 交互设计 hgroup元素 hgroup元素：代表“网页”或“section”的标题。 当元素有多个层级时，该元素可以将h1-h6元素放在其中，譬如文章的主标题和副标题的组合。 hgroup使用注意： 如果只需要一个h1-h6标签，就不要用hgroup； 如果有连续多个h1-h6标签，就要使用hgroup； 如果有连续多个标签和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签中。 hgroup h1语义化标签/h1 h1HTML5/h1 /hgroup 前端开发 视觉设计 交互设计 nav元素 nav元素：代表页面的导航链接区域，用于定义页面的主要导航部分。 规范上说，nav只能用在页面主要导航部分上；页脚区域中的链接列表，虽然指向不同