四川省建设网站电子签章,网站规划与建设需求分析,比较好的公司网页制作,怎么建立一个公司网站目录 引言一、html基础模板内容二、html文档流三、html 标签1.块级元素2.行内元素3.功能性元素4.标签嵌套 四、html编码习惯五、总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容#xff0c;并不代表这部分内容不… 目录 引言一、html基础模板内容二、html文档流三、html 标签1.块级元素2.行内元素3.功能性元素4.标签嵌套 四、html编码习惯五、总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容并不代表这部分内容不重要只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端细节技巧性内容可以在后续的开发工作中自行发现并掌握。 本篇介绍html的相关内容包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
有关html的详细介绍请参考HTML 基础 一、html基础模板内容
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv块级元素/divspan行内元素/spanspan行内元素/span
/body
/html当使用vscode编辑器时在新建了html文件后输入英文符号 !会提示按下tab键即可初始化一个html基础代码。 在学习前端初期阶段你不需要关心这个模板文件里的大部分内容只需要关注你的编写区域
前端页面所展示的内容都会编写在 body 标签中你所编写的内容也都会使用标签包裹起来就像如下代码 div块级元素/divspan行内元素/spanspan行内元素/span二、html文档流
简单来说可以把网页理解为word文档。你在html中编写的页面内容会像文档一样从左至右、从上至下填充到文档流中并逐行排布。每一行的高度由当前行最高的那个元素决定。 三、html 标签 标签的作用其实是把你填写在文档流的内容进行区域划分方便后期管理比如动态插入、设置样式等。 在业界执行了html5标准之后现在有大量可供选择的语义化标签。对于初学者而言你不需要按部就班的每样都了解一下后期用的不多的类型都会逐渐遗忘。不需要投入太多精力在区分这些标签的含义以及熟悉其内置的样式。建议在入门前端半年到一年后根据自身需求去选择性使用语义化标签。
语义化标签的优缺点
优势点 自带样式可以更快速的构建页面。代码结构更加清晰易读性更高有利于团队开发。有利于搜索引擎SEO优化。 缺点 语义化标签均赋予了特定的默认样式在项目开发时仍然需要对样式进行复写以满足UI设计稿。对初学者快速上手实际项目不够友好。 根据标签占据文档流位置的特征作为划分我们将html标签分为 块级元素 和 行内元素 两类。 首先明确一个概念在不考虑标签元素层级提升的情况下默认所有的页面标签元素都在一张平面容器中默认指代body标签。每次添加一个标签元素就会往平面容器中推入该元素就像是word文档一样自左而右、自上而下的方向堆放。
1.块级元素 不论设置了该元素多少宽度都会独占一行除了一些特殊情况本篇不做展开之后的块级元素或行内元素只能排在下一行自上而下排列。 这里不推荐使用除了 div 之外的任何块级元素标签这个观点可能不太合适, 仅供大家批判讨论。
我清楚大佬们都更推荐使用语义化标签。但是相信我真的在开发的时候只会觉得div更好用没有什么会比在一张白纸上画画更爽的事情了。
在你有更多的开发经验之后还是建议去了解一下例如p、h系列标签、aside、article、section、footer、header等标签。会对你未来的开发技能提升有所帮助。
2.行内元素 当宽度不超过平面容器的总宽度则放在当前行的最左侧。下一个行内元素紧挨着依次向右排列当前行的行内元素宽度总和大于平面容器的总宽度时最后一个元素默认出现在下一行继续重复如上排列方式。 这里不推荐使用除了 span 之外的任何行内元素标签理由同块级元素。
在你有更多的开发经验之后还是建议去了解一下例如b、i、u、del、sub、sup等标签。会对你未来的开发技能提升有所帮助。
3.功能性元素
之前推荐的块级元素标签div 和 行内元素标签span。这两个标签都有一个特点是无任何特殊属性仅仅作为包裹内容的元素根据自身占据文档流位置的特性能够在没有css介入的情况下大体上将页面内容进行规整。
除此还有一些功能性的元素标签例如img、input等。 他们各自拥有一定的特性
img: 将项目相对路径的图片地址或者公网可访问的图片链接填入标签src属性即可将图片插入文档流。从占据文档流位置的特征来划分属于行内元素。 举例: divspan图片/spanimg stylewidth: 100px src./logo.png altlogo //divinput: 可以通过修改标签type属性用作输入文本、上传文件等。从占据文档流位置的特征来划分属于行内元素。 举例 divspan输入文本/spaninput typetext //divdiv stylemargin-top: 50pxspan上传附件/spaninput typefile //div除此之外还有其他特殊功能标签iframe 、video 、canvas 等。暂时接触不到可以入门后自行探索研究。
4.标签嵌套
这里可以将页面理解为一个容器前文提到了平面容器我们编写的页面元素作为子元素按照文档流规则填充进入容器中一般指代body标签。我们可以将某一个编写的页面元素抽象理解为一个子容器同样是平面容器它的内部同样按照文档流的规则填充孙子元素。理论上可以无限嵌套但都要遵守文档流规则。
继续去想象随着孙子元素越来越多他会将子容器越撑越大那么子容器会在页面中占据更多的位置但依然遵守文档流规则。无论子元素承载多少孙子元素他对于父元素都是表现为一个整体。稍微理解一下这里的抽象关系。
至此你可以随意发挥编写标签元素并去嵌套他们。
// 用div作为子元素包裹span和img两个孙子元素
// div整体作为一个子元素插入body标签中。divspan图片/spanimg stylewidth: 100px src./logo.png altlogo //div四、html编码习惯
在这里强调一点不论是html、css、js或是其他编程语言我都建议优先编辑注释伪代码进而补充实际代码。
通过注释的形式先将页面整体结构划分清楚。进而根据实际需求填写页面元素。在学习了组件化开发思想后使用例如vue、react等前端框架进行项目开发时可以依据划分好的页面结构结合项目需求封装为组件。使各部分独立维护、互不影响同时页面结构更加清晰。
举一个表单填写的例子
先写注释
body!-- 表单头部 --!-- 表单主体 --!-- 表单底部按钮 --/body再补充代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbody!-- 表单头部 --div classtitleimg stylewidth: 30px src./logo.png altlogo /span表单标题/span/div!-- 表单主体 --div classcontainerdivspan输入1/spaninput typetext //divdivspan输入2/spaninput typetext //divdivspan附件/spaninput typefile //div/div!-- 表单底部按钮 --div classfooterbutton取消/buttonbutton确认/button/div/body
/html 看下代码结构 使用 vscode 的 live server 插件启动预览。在编辑器右下角找到 Go Live 点击启动服务默认端口为 5500 。会默认启动浏览器预览如果没有自动弹出浏览器可以自行在浏览器输入http://localhost:5500预览。 五、总结
以上我们介绍完了html对于前端初学者来说的基础内容到这里为止你应该可以编写一个不带样式但是具备基本页面结构的前端页面了。 这些内容只是html的一小部分当你逐渐深入前端领域后会有更多的内容需要学习探索。
再接再厉~
