时间：2023-09-26 05:42:01 | 来源：网站运营
时间：2023-09-26 05:42:01 来源：网站运营
你需要知道的HTML知识：前端三大件：
在线咨询
HTML+CSS+JSHTML，可能很多人觉得这个太简单了，就是平常写网页的一堆元素。然而越是基础的东西人们越容易忽略，所以特意梳理了下相关知识，希望加深对它的理解。HTML（HyperText Markup Language）超文本标记语言。顾名思义，它是一门语言，用来标记文档结构的语言。就像你写 word 一样，有各种格式和大纲，HTML描述了网页文档的结构，标记各种区块。<!-- HTML4.01 --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!-- XHTML --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">上面分别是 HTML4 和 XHTML 的声明部分，其中的DTD规定了可用的元素和属性，这样浏览器才能正确地渲染网页。HTML4/4.01(SGML)时代，语法较为随意，比如标签可以不闭合/大写/属性可为空等，所以各大浏览器会有语法容错机制，自动补全标签闭合等。到了后来，大家觉得这并不是浏览器该做的事情，所以有更为严格的XHTML（xml）：必须小写/闭合/属性带引号等等。但是XHTML愈加严格繁琐的语法让人不耐烦了，所以 HTML4 的下一个版本也即HTML5横空出世，轻松的语法，更多语义化的元素以及表单增强等等。<!-- HTML 5 声明 --><!DOCTYPE html>注：HTML5是主流和未来，所以下文内容均是以 HTML5 为参考。HTML 文档由各种元素和属性组成，描述了网页的结构。HTML文档元素从上至下包括：doctype:文档声明head部分：包含页面设定，标题，引用资源等 metatitlestylelinkscriptbasebody部分：网页呈现出来的部分 div/section/article/aside/header/main/footerpspan/em/strong/itable/thead/tbody/th/tr/tdaform/input/select/button/textareablock: 独占一行或多行,可以设置宽高及对齐等属性inline：不占独立区域，靠自身内容支撑结构，和相邻元素和睦相处，宽高无效，但水平方向可以设置padding和margininline-block：和其它inline元素同行显示，同时也可以设置宽高/margin/padding（水平和垂直）<!-- 块级元素可以包含内联元素 --><div><span></span></div><!-- 块级元素可以包含某些块级元素 --><section><div></div></section> <!--正确--><p><div></div></p> <!--错误--><!-- form/a 不能再嵌套自身 --><a><a></a></a><!-- 内联元素一般不能嵌套块级元素 --><body><a><div></div></a><body> <!--HTML4中不合法（但浏览器支持）/但HTML5中是合法的-->其中关于HTML4的嵌套规则可以参考这里, 而HTML5中对元素重新做了分类，嵌套关系根据元素的content model进行合法确定。比如上面的a>div在HTML5中就是合法的。参考HTML5中的a定义,它的内容模型定义为transparent(透明),透明的意思就是在计算合法性的时候，会忽略a本身，嵌套关系需要根据a的父标签来决定。请看下面嵌套：<!--第一种嵌套--><div> <a> <div></div> </a></div><!--第二种嵌套--><p> <a> <div></div> </a></p>第一种是合法嵌套，因为相当于div嵌套div，而第二种则不合法，因为相当于p嵌套div,浏览器会进行猜测解析，不妨在浏览器测试一下哦。<!--使用万能div--><div class="header"></div><div class="left"></div><div class="container"> <div class="content"></div></div><div class="footer"></div><!--不使用div--><header></header><nav></nav><main> <article></article> <aside></aside></main><footer></footer>对于上面两种写法，第二种就是HTML语义化。可能有人觉得这两种写法没什么太大区别呀，结构都很清晰，但是如果脱了css这层外衣，你觉得哪种写法更容易理解呢？所谓HTML语义化，就是用最恰当的元素标签标记内容结构。div和span；div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；b、font、u等，改用css设置。strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；fieldset标签包起来，并用legend标签说明表单的用途；input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。body默认有一定的margin,下拉框/按钮等都有默认的外观。然而，这些默认的样式某些情况下会带来问题，比如我们想要定制下拉框的外观，那就需要花费精力去处理默认样式，提高了定制成本。css reset的话，可以在网络上找到一些简单的代码或者简单的通过以下来重置样式：html *{ margin:0; padding:0 ...}我的学习交流群点击：web前端学习交流群关键词：知识
