网上科普有关“HTML 简介 ”话题很是火热 ，小编也是针对HTML 简介寻找了一些与之相关的一些信息进行分析 ，如果能碰巧解决你现在面临的问题，希望能够帮助到您 。
HTML介绍分为3部分 ，第一部分是HTML简介及历史 ，第二部分是HTML元素，第三部分是实战及学习笔记 。
以下是第一部分：
参考资料：
w3.org, html 文档
HTML ，即Hypertext markup language是万维网的核心标记语言 ，最初HTML被设计作为一门语言，用于语言描述科学文档，后续则被拓展用于描述一系列不同类型的文档 ，甚至应用。
1990-1995 ，迅速发展，从CERN到IETF(国际互联网工作组)接管.
1995-1997, 随着W3C建立 ，又变成由W3C主导 ，期间推出了HTML 3.2 和HTML 4.01
1998-2000，W3C停止HTML版本推进 ，开始研究XHTML 1.0（XML-based HTML 4.01), 其没有添加任何新特性 ，反而更加地长篇累牍，更严格的检测标准等 。后续发布了XHTML 2.0 ，其与XHTML 1.0 ，HTTP 4.01不兼容 。
期间直到2003，HTML没有版本的变化 ，但期间出现了 DOM Level 1 & 2 ，提高了客户端的使用体验以及功能拓展。
2003，XForms(定位于下一代Web form)发布，其证明了很多它所拥有的新特性能拓展到HTML 4.01 ，Mozilla及Opera借此于2004年向W3C提出了更新HTML版本的提议 ，但W3C选择继续发展XML-based作为替代HTML 。
于是Mozilla, Opera联合Apple组成新实体WHATWG，发展HTML 的Living document ，对HTML继续进行拓展及新特性添加 ，直到后期W3C才转回HTML标准的制定，多谢WHATWG ，才有了我们今天基本采用的HTML 5 。
W3C与WHATWG于2008年一起发布了第一份草案 ，2014年正式发布HTML 5。
*MDN Web Docs 简介：Mozilla Developer Network的后续，致力于Web标准文档的发展以及Web开发资料分享 ，包括HTML5, JavaScript, CSS, Web APIs, Node.js以及网络扩展等
*HTML/XML/DOM等的语法上的一些区别：
namespaces不能用在HTML语法中 ，但可用作DOM及XHTML里；
<noscript>可被用在HTML里，但不能用在DOM,XHTML里 ，
-->仅仅能用在DOM里。
*Text: in the context of content models, means either nothing, or Text nodes. Text is sometimes used as a content model on its own, but is also phrasing content, and can be inter-element white space
Text nodes and attribute values must consist of Unicode characters
*<html> end tag, <head> start tag, end tag, <body> start tag, end tag等在满足一定条件情况下可以省略 ，更多可以省略的可以参考 这里 。
*块级及内联元素
块级元素会以可见的块呈现在页面上，其显示会与其前后的content有一行的间距，常用于呈现结构化的elements ，如paragraph, list, nav, footer等 ，块级元素不能被内嵌在内联元素之中，块通常只出现在<body>里 。
内联元素是包含在块里的 ，仅仅只包含一小部分内容 ，常呈现在段落里，如<a>, <em>, <strong>等。其存在将不会导致新的一行的产生 。
注意可以使用css display 属性 ，设置inline为block 。
*HTML parsing model
*<audio>, <canvas>, <embed>, <iframe>, 及MathTL, SVG里的元素为embeded元素
*元素是大小写不敏感的
本周我大概用了六天的时间完成了html和css的复习 、制作考核网页以及完成了学长布置的五个学习小任务 ，总的来说，虽然完成了这一周的学习 ，但是对于一些知识点掌握的不是很牢固 ，使用不太熟练，之后还需要多加练习 ，对于本周的学习我有如下总结：
对于写网页需要的基础知识一定要牢牢掌握 ，比如，每个网页都需要的导航栏，一定要熟练掌握；下拉菜单最常用的是 ul 和 li 标签 ，也就是列表元素；对于一些标签 ，一定要知道是块级元素还是行内元素，要掌握他们之间的转换方法 ，这个也是非常常用的。对于css的盒子模型 ，一定要认真地学习，并且能熟练的运用 。
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列 、 对齐和分配空白空间。
?弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器 。
?弹性容器内包含了一个或多个弹性子元素 。
?注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局 。
弹性子元素通常在弹性盒子内一行显示 。默认情况每个容器只有一行。
?当为父盒子设为flex布局 ，子元素的float、clear和vertical—align属性将失效
flex布局原理：通过给父盒子添加flex属性 ，来控制子盒子的位置好排列方式
? flex布局父项常见的属性：
1.flex-diretion:设置主轴的方向
?默认的主轴方向是x轴方向，水平方向；默认的侧轴方向是y轴方向 ，水平向下
属性值：row 默认值从左到右
row-reverse 从右到左
column 从上到下
column 从下到上
2.jusity-content:设置主轴上的子元素排列方式
属性值： flex-start 默认值从头开始 如果主轴是x轴 ，则从左到右
?flex-end ?从尾部开始排列
?center 在主轴居中对齐（如果主轴是x轴则水平居中）
?space-around平分剩余空间
?space-between 先两边贴边再平分剩余空间（重要）
3.flex-wrap:设置子元素是否换行
属性值： nowrap 默认子元素不换行 如果装不下，会缩小子元素的宽度 ，一块放到父元素中
wrap 换行
4.align-content:设置侧轴的子元素排列方式（多行 需要换行） 单行无效
属性值： flex-start 默认值在侧轴的头部开始排列
?flex-end ?在侧轴的尾部开始排列
?center 在侧轴中间显示
?space-around 子轴在侧轴平分剩余空间
?space-between 轴在侧轴先分布在两头 ，再平分剩余空间
?stretch ? 设置子项元素高度平分父元素高度
5.align-items:设置侧轴的子元素排列方式（单行）
属性值： flex-start 从上到下
?flex-end ?从下到上
?center 挤在一起（垂直居中）
?stretch ? 拉伸（默认值） 使用时子盒子不要给高度
例如：子元素居中 ?默认主轴是x轴
主轴居中 jusity-content:center
侧轴居中 align-items:center
6.flex-flow:复合属性，相当于同时设置了flex-diretion和flex-wrap
flex布局子项常见属性
1.flex定义子项目分配剩余空间，用flex来表示占多少份数
flex:<number>; 默认值 0
2.align-self控制子项自己在侧轴的排列方式
3.order属性定义子项的排列顺序（前后顺序）
?给父元素添加 display:grid
? display关于网格的取值分为两个 ，grid(块网格)和 inline-grid (行内网格 行内块)
? grid 容器从上向下排列
? inline-grid 容器从左向右排列
grid-template-row;规定行属性
grid-template-column;规定列属性
1.绝对大小（根据列数或者行数确定值得个数）
grid-template-row：200px 200px 200px
grid-template-column：200px 200px 200px
2.百分比（根据列数或者行数确定值得个数）
grid-template-row：33.33% 33.33% 33.33%
grid-template-column：33.33% 33.33% 33.33%
3.repeat函数
grid-template-rows: repeat(3,33.3%);
grid-template-columns: repeat(3,33.3%);
4.repead auto-fill ?自动填充
grid-template-rows: repeat(auto-fill,33.3%);
grid-template-columns: repeat(auto-fill,33.3%);
5.fr 片段 ?
grid-template-rows: 100px 1fr 300px;
grid-template-columns: 100px 1fr 300px
6.minmax
grid-template-rows:minmax(100px,200px) 200px 300px
grid-template-columns:200px 200px 200px
7.auto
grid-template-rows: 100px auto 300px;
grid-template-columns: 100px auto 300px
列间距
1.grid-row-gap: 10px;
? grid-column-gap: 10px;
? 复合写法
? grid-gap: 10px 10px;
指定区域
?1.grid-template-areas: 'a b c '
?'d e f'
'g h i';
区域合并时 ?需要让合并的区域名字相同
grid-template-areas: 'a a c '
?'d e f'
?'g h i';
.box div:nth-child(1){
grid-area: a;
}
以上两种网页布局方式是我制作网页时比较常用的 ，也是学习前端必须掌握的。
除了以上这些，还有很多是我们需要掌握的 ，加油吧继续学习！！！！！！下周分享js学习总结
关于“HTML 简介 ”这个话题的介绍 ，今天小编就给大家分享完了，如果对你有所帮助请保持对本站的关注！
本文来自作者[夏青]投稿，不代表石号立场，如若转载，请注明出处：https://s0429.com/cshi/202512-2125.html
评论列表（4条）
我是石号的签约作者“夏青”！
希望本篇文章《HTML 简介》能对你有所帮助！
本站[石号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“HTML 简介”话题很是火热，小编也是针对HTML 简介寻找了一些与之相关的一些信息进行分析，如果能碰巧解决你现在面临的问题，希望能够帮助到您。HTML介绍分为3...