2026/8/21 6:54:02
FEATURED · 精选文章 
目录1. 文档的基本组成部分2. 用于构建内容的HTML3. HTML布局元素细节3.1 无语义包装器3.2 换行与水平分割线4. 规划一个简单的网站参考1. 文档的基本组成部分网页的外观多种多样除了全屏视频或游戏或艺术作品页面或只是结构不当的页面以外都倾向于使用类似的标准组件页眉通常是一个横跨顶部的大条带上面有一个大标题、徽标或许还有一个标语。这通常在网站的各个页面上保持不变。导航栏指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏导航栏通常应在所有网页之间保持一致否则会让用户感到疑惑甚至无所适从。许多web设计人员认为导航栏是页眉的一部分而不是独立的组件但并不是一个必要条件还有人认为两者独立可以提供更好的无障碍性因为屏幕阅读器可以更清晰地分辨二者。主内容中心的大部分区域是当前网页大多数的独有内容例如视频、文章、地图、新闻等。这些内容是网站的一部分且会因页面而异。侧边栏一些外围信息、链接、引用、广告等。通常与主内容相关还可能存在其他的重复元素如辅助导航系统。页脚横跨页面底部的条带通常包含细小文字、版权声明或联系信息。它是放置常用信息的地方但通常这些信息对网站本身并不重要。页脚有时也用于搜索引擎优化提供快速访问热门内容的链接。2. 用于构建内容的HTML为了实现语义化标记HTML提供了明确这些区段的专用标签页眉header。导航栏nav。主内容main。主内容中还可以有各种子内容区段可用article、section和div等元素表示。侧边栏aside。经常放置在main中。页脚footer。!doctypehtmlhtmllangzh-CNheadmetacharsetutf-8/title我的页面标题/titlelinkhrefhttps://fonts.googleapis.com/css?familyOpenSansCondensed:300|SonsieOnerelstylesheet/linkrelstylesheethrefstyle.css//headbody!-- 本站所有网页的统一主标题 --headerh1页眉/h1/headernavulliahref#主页/a/liliahref#我们的团队/a/liliahref#项目/a/liliahref#联系方式/a/li/ul!-- 搜索栏是站点内导航的一个非线性的方式。 --forminputtypesearchnameqplaceholder要搜索的内容/inputtypesubmitvalue搜索//form/nav!-- 网页主体内容 --main!-- 一篇文章 --articleh2文章标题/h2p但我得向你解释所有这些谴责快乐和颂扬痛苦的错误观念是如何产生的。为此我会向你一五一十地说明这一体系并阐述伟大的真理探索者、人类幸福的杰出建设者的真实教义。/psectionh3子章节/h3p没有人因为快乐是快乐而拒绝、厌恶或回避快乐本身而是因为不知道如何理性地追求快乐的人会遭遇极其痛苦的后果。也没有人因痛苦是痛苦而喜欢或追求或渴望获得痛苦本身但也偶有辛劳和痛苦能带来极大的快乐的情景。/pp举个微不足道的例子若不是从中获得好处我们当中有谁会进行艰苦的体育锻炼但是倘若没有恼人的后果谁有权利指责选择享受快乐的人呢或者倘若得不到相应快乐谁能谴责选择避免痛苦的人呢/p/sectionsectionh3另外一个子章节/h3p另一方面我们以正义的愤慨谴责并厌恶那些被及时行乐迷惑得萎靡不振被欲望蒙蔽得看不见大难临头的人因意志软弱而不能履行职责的人也应受到同样的谴责这无异于在辛劳和痛苦前退缩。这些情况非常简单且容易区分。闲暇时当我们的选择权不受限制当没有什么可以阻止我们做自己最喜欢的事情时任何快乐都应该受到欢迎任何痛苦都应该避免。但是在某些情况下由于责任或商业义务的要求不时会有不得不拒绝享乐而接受烦恼的情况。/pp因此智者在这些事情上总是坚持选择的原则拒绝快乐以获得更大的快乐或者忍受痛苦以避免更重的痛苦。/p/section/article!-- 辅助内容也可以嵌套在主要内容中 --asideh2相关内容/h2ulliahref#哦我喜欢海边/a/liliahref#哦我也喜欢海边/a/liliahref#尽管在英格兰北部/a/liliahref#也永远不会停止下雨/a/liliahref#哦好吧……/a/li/ul/aside/main!-- 本站所有网页的统一页脚 --footerp© 2050 某某保留所有权利/p/footer/body/html/* || General setup */html, body{margin:0;padding:0;}html{font-size:10px;background-color:#a9a9a9;}body{width:70%;margin:0 auto;}/* || typography */h1, h2, h3{font-family:Sonsie One,cursive;color:#2a2a2a;}p, input, li{font-family:Open Sans Condensed,sans-serif;color:#2a2a2a;}h1{font-size:4rem;text-align:center;color:white;text-shadow:2px 2px 10px black;}h2{font-size:3rem;text-align:center;}h3{font-size:2.2rem;}p, li{font-size:1.6rem;line-height:1.5;}/* || header layout */nav, article, aside, footer{background-color:white;padding:1%;}nav{height:50px;background-color:#ff80ff;display:flex;margin-bottom:10px;}nav ul{padding:0;list-style-type:none;flex:2;display:flex;}nav li{display:inline;text-align:center;flex:1;}nav a{display:inline-block;font-size:2rem;text-transform:uppercase;text-decoration:none;color:black;}nav form{flex:1;display:flex;align-items:center;height:100%;padding:0 2em;}input{font-size:1.6rem;height:32px;}input[typesearch]{flex:3;}input[typesubmit]{flex:1;margin-left:1rem;background:#333;border:0;color:white;}/* || main layout */main{display:flex;}article{flex:4;}aside{flex:1;margin-left:10px;background-color:#ff80ff;}aside li{padding-bottom:10px;}footer{margin-top:10px;}3. HTML布局元素细节main存放本页面独有的内容。每个页面上只能用一次main且直接位于body中。最后不要把它嵌套进其他元素。article包围的内容即一篇文章与页面其他部分无关。section与article类似但section更适合页面使其按功能分块。一般的最佳用法是以标题作为开头也可以将一篇article分成若干部分并分别置于不同的section中也可以把一个区段section分成若干部分并分别置于不同的article中取决于上下文。aside包含的内容于主要内容没有直接关系但可以提供于主要内容间接相关的附加信息。header是简介形式的内容。如果它是body的子元素那么就是网站的全局页眉。如果它是article或section的子元素那么它就是这些部分特有的页眉。nav包含页面主导航功能其中不应包含二级链接等内容。footer包含了页面的页脚部分。3.1 无语义包装器对于一些要组织的项目或要包装的内容现有的语义元素均不能很好对应。有时你可能只想将一组元素组合在一起用CSS或JavaScript将它们作为一个整体加以影响。为了应对这种情况HTML提供了div和span元素。应配合使用class属性提供一些标签使这些元素能易于定位。span是一个行级无语义元素最好只用于无法找到更好的语义元素来包含内容时或者不想增加特定的含义时。p国王喝得酩酊大醉在凌晨 1 点时才回到自己的房间踉跄地走过门口。spanclasseditor-note[编辑批注此刻舞台灯光应变暗]/span。/pdiv时一个块级无语义元素应仅用于找不到更好的块级元素时或者不想增加特定的意义时。divclassshopping-carth2购物车/h2ullipahrefstrong银耳环/strong/a$99.95/pimgsrc../products/3333-0985/alt银耳环//lili……/li/ulp总消费$237.89/p/div3.2 换行与水平分割线br可在段落中进行换行br是唯一能够生成多个短行结构的元素p从前有个人叫小高br/他说写 HTML 感觉最好br/但他写的代码结构语义一团糟br/他写的标签谁也懂不了。/phr元素在文档中生成一条水平分割线表示文本中主题的变化。一般就是一条水平的直线。p原来这唐僧是个慈悯的圣僧。他见行者哀告却也回心转意道“既如此说且饶你这一次。再休无礼。如若仍前作恶这咒语颠倒就念二十遍”行者道“三十遍也由你只是我不打人了。”却才伏侍唐僧上马又将摘来桃子奉上。唐僧在马上也吃了几个权且充饥。/phr/p却说那妖精脱命升空。原来行者那一棒不曾打杀妖精妖精出神去了。他在那云端里咬牙切齿暗恨行者道“几年只闻得讲他手段今日果然话不虚传。那唐僧已此不认得我将要吃饭。若低头闻一闻儿我就一把捞住却不是我的人了。不期被他走来弄破我这勾当又几乎被他打了一棒。若饶了这个和尚诚然是劳而无功也。我还下去戏他一戏。”/p4. 规划一个简单的网站规划一个简单的网站参考1、构建文档
7、HTML入门——构建文档
目录1. 文档的基本组成部分2. 用于构建内容的HTML3. HTML布局元素细节3.1 无语义包装器3.2 换行与水平分割线4. 规划一个简单的网站参考1. 文档的基本组成部分网页的外观多种多样除了全屏视频或游戏或艺术作品页面或只是结构不当的页面以外都倾向于使用类似的标准组件页眉通常是一个横跨顶部的大条带上面有一个大标题、徽标或许还有一个标语。这通常在网站的各个页面上保持不变。导航栏指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏导航栏通常应在所有网页之间保持一致否则会让用户感到疑惑甚至无所适从。许多web设计人员认为导航栏是页眉的一部分而不是独立的组件但并不是一个必要条件还有人认为两者独立可以提供更好的无障碍性因为屏幕阅读器可以更清晰地分辨二者。主内容中心的大部分区域是当前网页大多数的独有内容例如视频、文章、地图、新闻等。这些内容是网站的一部分且会因页面而异。侧边栏一些外围信息、链接、引用、广告等。通常与主内容相关还可能存在其他的重复元素如辅助导航系统。页脚横跨页面底部的条带通常包含细小文字、版权声明或联系信息。它是放置常用信息的地方但通常这些信息对网站本身并不重要。页脚有时也用于搜索引擎优化提供快速访问热门内容的链接。2. 用于构建内容的HTML为了实现语义化标记HTML提供了明确这些区段的专用标签页眉header。导航栏nav。主内容main。主内容中还可以有各种子内容区段可用article、section和div等元素表示。侧边栏aside。经常放置在main中。页脚footer。!doctypehtmlhtmllangzh-CNheadmetacharsetutf-8/title我的页面标题/titlelinkhrefhttps://fonts.googleapis.com/css?familyOpenSansCondensed:300|SonsieOnerelstylesheet/linkrelstylesheethrefstyle.css//headbody!-- 本站所有网页的统一主标题 --headerh1页眉/h1/headernavulliahref#主页/a/liliahref#我们的团队/a/liliahref#项目/a/liliahref#联系方式/a/li/ul!-- 搜索栏是站点内导航的一个非线性的方式。 --forminputtypesearchnameqplaceholder要搜索的内容/inputtypesubmitvalue搜索//form/nav!-- 网页主体内容 --main!-- 一篇文章 --articleh2文章标题/h2p但我得向你解释所有这些谴责快乐和颂扬痛苦的错误观念是如何产生的。为此我会向你一五一十地说明这一体系并阐述伟大的真理探索者、人类幸福的杰出建设者的真实教义。/psectionh3子章节/h3p没有人因为快乐是快乐而拒绝、厌恶或回避快乐本身而是因为不知道如何理性地追求快乐的人会遭遇极其痛苦的后果。也没有人因痛苦是痛苦而喜欢或追求或渴望获得痛苦本身但也偶有辛劳和痛苦能带来极大的快乐的情景。/pp举个微不足道的例子若不是从中获得好处我们当中有谁会进行艰苦的体育锻炼但是倘若没有恼人的后果谁有权利指责选择享受快乐的人呢或者倘若得不到相应快乐谁能谴责选择避免痛苦的人呢/p/sectionsectionh3另外一个子章节/h3p另一方面我们以正义的愤慨谴责并厌恶那些被及时行乐迷惑得萎靡不振被欲望蒙蔽得看不见大难临头的人因意志软弱而不能履行职责的人也应受到同样的谴责这无异于在辛劳和痛苦前退缩。这些情况非常简单且容易区分。闲暇时当我们的选择权不受限制当没有什么可以阻止我们做自己最喜欢的事情时任何快乐都应该受到欢迎任何痛苦都应该避免。但是在某些情况下由于责任或商业义务的要求不时会有不得不拒绝享乐而接受烦恼的情况。/pp因此智者在这些事情上总是坚持选择的原则拒绝快乐以获得更大的快乐或者忍受痛苦以避免更重的痛苦。/p/section/article!-- 辅助内容也可以嵌套在主要内容中 --asideh2相关内容/h2ulliahref#哦我喜欢海边/a/liliahref#哦我也喜欢海边/a/liliahref#尽管在英格兰北部/a/liliahref#也永远不会停止下雨/a/liliahref#哦好吧……/a/li/ul/aside/main!-- 本站所有网页的统一页脚 --footerp© 2050 某某保留所有权利/p/footer/body/html/* || General setup */html, body{margin:0;padding:0;}html{font-size:10px;background-color:#a9a9a9;}body{width:70%;margin:0 auto;}/* || typography */h1, h2, h3{font-family:Sonsie One,cursive;color:#2a2a2a;}p, input, li{font-family:Open Sans Condensed,sans-serif;color:#2a2a2a;}h1{font-size:4rem;text-align:center;color:white;text-shadow:2px 2px 10px black;}h2{font-size:3rem;text-align:center;}h3{font-size:2.2rem;}p, li{font-size:1.6rem;line-height:1.5;}/* || header layout */nav, article, aside, footer{background-color:white;padding:1%;}nav{height:50px;background-color:#ff80ff;display:flex;margin-bottom:10px;}nav ul{padding:0;list-style-type:none;flex:2;display:flex;}nav li{display:inline;text-align:center;flex:1;}nav a{display:inline-block;font-size:2rem;text-transform:uppercase;text-decoration:none;color:black;}nav form{flex:1;display:flex;align-items:center;height:100%;padding:0 2em;}input{font-size:1.6rem;height:32px;}input[typesearch]{flex:3;}input[typesubmit]{flex:1;margin-left:1rem;background:#333;border:0;color:white;}/* || main layout */main{display:flex;}article{flex:4;}aside{flex:1;margin-left:10px;background-color:#ff80ff;}aside li{padding-bottom:10px;}footer{margin-top:10px;}3. HTML布局元素细节main存放本页面独有的内容。每个页面上只能用一次main且直接位于body中。最后不要把它嵌套进其他元素。article包围的内容即一篇文章与页面其他部分无关。section与article类似但section更适合页面使其按功能分块。一般的最佳用法是以标题作为开头也可以将一篇article分成若干部分并分别置于不同的section中也可以把一个区段section分成若干部分并分别置于不同的article中取决于上下文。aside包含的内容于主要内容没有直接关系但可以提供于主要内容间接相关的附加信息。header是简介形式的内容。如果它是body的子元素那么就是网站的全局页眉。如果它是article或section的子元素那么它就是这些部分特有的页眉。nav包含页面主导航功能其中不应包含二级链接等内容。footer包含了页面的页脚部分。3.1 无语义包装器对于一些要组织的项目或要包装的内容现有的语义元素均不能很好对应。有时你可能只想将一组元素组合在一起用CSS或JavaScript将它们作为一个整体加以影响。为了应对这种情况HTML提供了div和span元素。应配合使用class属性提供一些标签使这些元素能易于定位。span是一个行级无语义元素最好只用于无法找到更好的语义元素来包含内容时或者不想增加特定的含义时。p国王喝得酩酊大醉在凌晨 1 点时才回到自己的房间踉跄地走过门口。spanclasseditor-note[编辑批注此刻舞台灯光应变暗]/span。/pdiv时一个块级无语义元素应仅用于找不到更好的块级元素时或者不想增加特定的意义时。divclassshopping-carth2购物车/h2ullipahrefstrong银耳环/strong/a$99.95/pimgsrc../products/3333-0985/alt银耳环//lili……/li/ulp总消费$237.89/p/div3.2 换行与水平分割线br可在段落中进行换行br是唯一能够生成多个短行结构的元素p从前有个人叫小高br/他说写 HTML 感觉最好br/但他写的代码结构语义一团糟br/他写的标签谁也懂不了。/phr元素在文档中生成一条水平分割线表示文本中主题的变化。一般就是一条水平的直线。p原来这唐僧是个慈悯的圣僧。他见行者哀告却也回心转意道“既如此说且饶你这一次。再休无礼。如若仍前作恶这咒语颠倒就念二十遍”行者道“三十遍也由你只是我不打人了。”却才伏侍唐僧上马又将摘来桃子奉上。唐僧在马上也吃了几个权且充饥。/phr/p却说那妖精脱命升空。原来行者那一棒不曾打杀妖精妖精出神去了。他在那云端里咬牙切齿暗恨行者道“几年只闻得讲他手段今日果然话不虚传。那唐僧已此不认得我将要吃饭。若低头闻一闻儿我就一把捞住却不是我的人了。不期被他走来弄破我这勾当又几乎被他打了一棒。若饶了这个和尚诚然是劳而无功也。我还下去戏他一戏。”/p4. 规划一个简单的网站规划一个简单的网站参考1、构建文档 
