--- title: "光速入门HTML" id: "3231" type: "post" slug: "html%e5%9f%ba%e7%a1%80" published_at: "2021-09-22T07:40:58+00:00" modified_at: "2021-09-25T03:47:57+00:00" url: "https://seq.ink/all/coding/3231.html" markdown_url: "https://seq.ink/all/coding/3231.html.md" excerpt: "HTML基础本文内容过多推荐使用typora阅读器打开文档，获取更优质的阅读体验。文档下载配套Demo [TOC] HTML是什么超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用于 ..." taxonomy_category: - "Coding代码堆" taxonomy_post_tag: - "hntml" --- # HTML基础本文内容过多推荐使用typora阅读器打开文档，获取更优质的阅读体验。 [文档下载](https://www.aliyundrive.com/s/bzZZZMjPcWp) [配套Demo](https://www.aliyundrive.com/s/xvPiptToSJu) [TOC] ## HTML是什么 > **超文本标记语言**（英语：**H**yper **T**ext **M**arkup **L**anguage，简称：**HTML**）是一种用于创建[网页](https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5) > 的标准[标记语言](https://zh.wikipedia.org/wiki/%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80) > 。HTML是一种基础技术，常与[CSS](https://zh.wikipedia.org/wiki/CSS) > 、[JavaScript](https://zh.wikipedia.org/wiki/JavaScript) > 一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。[网页浏览器](https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E6%B5%8F%E8%A7%88%E5%99%A8) > 可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非[编程语言](https://zh.wikipedia.org/wiki/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80) > 。 > > [HTML元素](https://zh.wikipedia.org/wiki/HTML%E5%85%83%E7%B4%A0) > 是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和[语义](https://zh.wikipedia.org/wiki/%E8%AF%AD%E4%B9%89) > 。HTML的语言形式为[尖括号](https://zh.wikipedia.org/wiki/%E6%8B%AC%E5%8F%B7) > 包围的HTML元素（如``），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。 > > HTML可以嵌入如[JavaScript](https://zh.wikipedia.org/wiki/JavaScript) > 的[脚本语言](https://zh.wikipedia.org/wiki/%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80) > ，它们会影响HTML网页的行为。网页浏览器也可以引用[层叠样式表](https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8) > （CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织[万维网联盟](https://zh.wikipedia.org/wiki/%E4%B8%87%E7%BB%B4%E7%BD%91%E8%81%94%E7%9B%9F) > （W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。 > > 引用自[维基百科](https://zh.wikipedia.org/wiki/HTML) ## HTML文档结构 ``` HELLO WORLD ``` 首先要明白html文档是以标签组合编写的标签又分为**单闭合标签**以及**双闭合标签**，以上面的Demo `meta`等，**单独存在的就是单闭合标签**,**成对出现的则是多闭合标签**例如 `html` `head` `body`等。但请注意 `!doctype` 声明不属于 HTML 标签他是一条指令告诉浏览器编写页面使用的HTML版本。 ### doctype ``` ``` 声明必须位于 HTML5 文档中的第一行，也就是位于html标签之前。该标签告知浏览器文档所使用的 HTML 规范。虽然在本文档中所提及的代码均是HTML4规范但是这里依然使用了HTML5的声明，其原因是文档标准可以**向下兼容**。而且HTML4的文档声明又吃臭又长即： ``` ``` 这只是其中一种，还有两种不展开了也没必要。 ### html ``` ... ``` 此元素可告知浏览器其自身是一个 HTML 文档。 `` 与 `` 标签限定了文档的开始点和结束点，在它们之间是文档的头部 `head` 和主体 `body`。 `lang="zh-CN"`用法为标签属性与属性值，也就是html可以定义语言属性告知浏览器您的网站主体内容是什么语言编写（有的浏览器会检测本地语言与网页语言定义不一致会触发翻译功能例如chrome浏览器）。其中 `lang` 是属性 `zh-CN` 为属性值，即为中文。 [ISO 语言代码](https://www.w3school.com.cn/tags/html_ref_language_codes.asp) [HTML ISO 国家/地区代码参考手册](https://www.w3school.com.cn/tags/html_ref_country_codes.asp) ### head ``` HELLO WORLD ``` head中一般是进行声明或者引用的地方，例如声明网页的字符集合，网站标题，引入css、js等（当然js最好放置到文档末端以防止js载入阻塞影响网页视图）。可以这么抽象理解 head里的内容就是一个人的姓名年龄血型等虽然不能直接识别出来，但事实上是存在且起作用的。 #### meta ``` ... ``` `` 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，字符集设定等。 `` 标签位于文档的头部，不包含任何内容。`` 标签的属性定义了与文档相关联的名称/值对。在以上demo中使用了 `charset`属性设置文档字符集为 `UTF-8` 不设定字符集可能会导致文本异常出现乱码，所以必须声明。 [关于meta其他属性用法](https://www.w3school.com.cn/html5/tag_meta.asp) [关于字符集](https://help.aliyun.com/document_detail/99716.html) #### title ``` HELLO WORLD ... ``` title标签定义了网页在浏览器中tab标签上的文本 ### body body中包含网页中所有可见元素。如果head是人的抽象属性body则是一个人的具体属性例如性别头发长度眼睛大小等。 ``` ... ``` ## 文本级标签指在网页中显示文本作用的标签 ### 标题标签 HTML中可以定义6种不同程度的标题标签他们的默认文本的大小，粗细都不一致，例如： ``` 标题标签使用

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

``` ### 段落标签 p标签全称paragraph译为段落 ``` 段落标签

我是一个段落可以帮助你给内容分段～

哦,楼上你我确实分段了！

``` 与标题标签组合demo： ``` 段落标签

赤壁赋

【作者】苏轼

壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。

于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。

苏子愀然，正襟危坐而问客曰：“何为其然也？”客曰：“月明星稀，乌鹊南飞，此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？况吾与子渔樵于江渚之上，侣鱼虾而友麋鹿，驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，羡长江之无穷。挟飞仙以遨游，抱明月而长终。知不可乎骤得，托遗响于悲风。”

苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎!且夫天地之间，物各有主,苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也，而吾与子之所共适。”

客喜而笑，洗盏更酌。肴核既尽，杯盘狼籍。相与枕藉乎舟中，不知东方之既白。

``` 注意代码中的换行并不会让网页视图中文本换行，这是html的一个空白折叠特性导致的。 #### 空白折叠在源代码中的连续空白字符（空格、换行、制表符tab），在页面显示时，会被折叠为一个空格。在`

`标签中中的内容不会出现空白折叠，会按照源码中的格式显示到页面上，一般用来显示代码。 demo： ``` 段落标签

赤壁赋

【作者】苏轼

壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。
苏子愀然，正襟危坐而问客曰：“何为其然也？”客曰：“月明星稀，乌鹊南飞，此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？况吾与子渔樵于江渚之上，侣鱼虾而友麋鹿，驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，羡长江之无穷。挟飞仙以遨游，抱明月而长终。知不可乎骤得，托遗响于悲风。”
苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎!且夫天地之间，物各有主,苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也，而吾与子之所共适。”客喜而笑，洗盏更酌。肴核既尽，杯盘狼籍。相与枕藉乎舟中，不知东方之既白。

``` 这种方法会在网页中按照源码内容缩进空格等展示，但是这种方法会破坏文档结构使其难以维护，并不推荐用来展示常规文本内容！如果想要在内容中插入连续多个空格可以使用转移字符，例如： ``` 段落标签

芙兰达

``` 这里的 ` ` 就是一个转义字符指代空格，更多[转义字符](## 转移字符)在下边有提到。 ### span标签 `span` 标签被用来组合文档中的行内元素。 ```

壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。

``` 如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。我们可以给span单独设置样式，达到重点的效果。（这一部分使用到了内联css） ```

壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。

``` ### 强调标签在网页中想突出某几个字可以使用强调标签。em表示强调 strong表示更强烈的强调，多用于关键词提醒，价格等。 #### strong ```

推理根本没有什么高低，更没有什么胜负。这是因为……因为真相永远只有一个！

``` 被strong包裹起来的部分加粗了。 #### em ```

推理根本没有什么高低，更没有什么胜负。这是因为……因为真相永远只有一个！ ----江户川柯南

``` 被em包裹起来的部分变成斜体了。 ### 图像标签 ``` 图像载入失败

``` 关于html中路径用法在下方[关于路径](##%E5%85%B3%E4%BA%8E%E8%B7%AF%E5%BE%84) 中有提到。 `src` 属性填写图像地址 `alt`属性则为读取图像失败后提示文本。其他常用属性例如 `width` `height` 调整图像宽高。 ### 超链接标签 a标签即anchnro锚点，指的是一个位置到另外一个位置的跳转关系，多用于跳转至其他网站或者页面或本页面特定位置。基本使用 ``` 百度一下 ``` 在 `a` 标签内使用 `href` 属性指定要跳转的协议以及地址。在上面这个案例当中 `https` 是访问协议其他的还有例如 `http:` `ftp:` `file:` `javascript:`等等… 后面的部分则是执行结果渲染的页面。在基本使用中简单的理解成，跳转的位置即可。使用 `target` 属性，使页面在浏览器中新的页面打开。 ``` 百度一下 ``` #### 使用锚点在页面中跳转要想看出效果得先撑高页面高度，这里直接使用css。 ``` 超链接使用页面内跳转

我在这里～

``` 要跳转的目标首先帮顶一个 `id` 属性，其次在 `a` 标签内 `href` 属性内填写 `#id` 即可。 #### 使用协议让超链接进行不同的行为使用不同的协议可以使a标签表现不同的行为，例如发送邮件，拨打电话，下载文件等等… ``` 发送邮件拨打电话 ``` ## 排版级标签指在网页中帮助布局排版的标签 ### 换行/分割标签 `br`换行，`hr`分割 #### br br可以指定内容进行换行，不会产生空白折叠现象。 ``` 换行与分割标签使用

月下独酌四首·其一

李白

花间一壶酒，独酌无相亲。
举杯邀明月，对影成三人。
月既不解饮，影徒随我身。
暂伴月将影，行乐须及春。
我歌月徘徊，我舞影零乱。
醒时相交欢，醉后各分散。
永结无情游，相期邈云汉。

``` br在想要换行的位置添加即可换行，但请注意 `br` 是一个单闭合标签。 #### hr hr标签可以插入一个分割线，区分上下文或布局。 ``` 换行与分割标签使用

月下独酌四首·其一

李白

``` ### 列表标签 HTML支持有序列表、无序列表、定义列表三种，在开发过程中多用于内容展示或排版。 #### 无序列表无序列表会在列表项前追加一个实心圆圈。 ``` 列表标签使用

2020十大傻雕新闻

一大仙在公安局“跳大神” 对周围人发功说：“你今晚必死无疑”
广西两男子为博领导赏识，多次挖领导祖坟盗尸骨，说是想等领导找不到时拿出来“邀功”
男子爬到山顶举起手杖指天大喊:赐予我力量吧结果被雷劈了
男子与情人同居2年卷走15万把钱全都上交老婆称是工资
江苏男子连偷三晚玉米没工具纯靠手捧了2400多趟总共偷走1200余斤
女子女扮男装与2任女友同居5年诈骗100多万元
小偷夜晚入室盗窃想学影视剧用“手刀”敲晕主人结果给人打醒了
男子嫌上次关押时间短没学会缝纫技术遂再次盗窃回去学技术
安徽一女子因家里人多厕所不够用偷走移动公厕
“强迫症”犯人被判9年8个月当庭上诉要求判十年整

``` 使用 `ul` 定义无序列表，内嵌套 `li` 定义列表项目。 #### 有序列表有序列表会根据代码自上而下的顺序自动追加顺序数字，从1开始。 ``` 列表标签使用

2020十大傻雕新闻

一大仙在公安局“跳大神” 对周围人发功说：“你今晚必死无疑”
广西两男子为博领导赏识，多次挖领导祖坟盗尸骨，说是想等领导找不到时拿出来“邀功”
男子爬到山顶举起手杖指天大喊:赐予我力量吧结果被雷劈了
男子与情人同居2年卷走15万把钱全都上交老婆称是工资
江苏男子连偷三晚玉米没工具纯靠手捧了2400多趟总共偷走1200余斤
女子女扮男装与2任女友同居5年诈骗100多万元
小偷夜晚入室盗窃想学影视剧用“手刀”敲晕主人结果给人打醒了
男子嫌上次关押时间短没学会缝纫技术遂再次盗窃回去学技术
安徽一女子因家里人多厕所不够用偷走移动公厕
“强迫症”犯人被判9年8个月当庭上诉要求判十年整

``` 使用 `ol` 定义无序列表，内嵌套 `li` 定义列表项目。 #### 定义列表定义列表就相对抽象一点，`dl`声明一个定义列表，内嵌套 `dt` 定义列表中的项目 `dd` 描述列表中的项目。一个定义列表可以嵌套多组列表项和项目。例如下图的苹果官网的footer部分就使用了定义列表（实际上是lable实现的，但是定义列表或者table标签结合css也可以达到同样的效果）。 ``` 列表标签使用

选购及了解: Mac; iPad; iPhone; Watch; Music; AirPods; HomePod mini; iPod touch; AirTag

``` ### 表格标签在hrml中想要实现类似于excel表格效果或者更为复杂的表格例如淘宝的购买清单，可以使用 `table` 标签一个完整的表格需要四部分组成分别是 `table` `tr` `th` `td` ``` 表格标签使用

产品名称	品牌	数量	入库时间
电视机	海尔	500	2021-10-1
手机	三星	600	2021-10-1
自行车	上海	1000	2021-10-1

``` `table`声明一个表格 `tr` 指每一行的内容 `th` 表示单元格表头 `td`表示单元项目。 #### 表格属性我们也可以使用table标签属性 border添加表格边框 ``` 表格标签使用 ...

``` 但是请注意 `border` 熟悉已被web标准**弃用**，并且推荐使用css方式添加。虽然已经被弃用，但是一些浏览器仍然可以使用该属性，**可以但不推荐** [相关链接](https://developer.mozilla.org/zh-CN/docs/web/html/element/table#attr-border) 。使用 `cellspacing` 熟悉定义边框间距。 ``` 表格标签使用 ...

``` 同样这个属性也被弃用了，并且推荐使用css方式修改，[相关链接](https://developer.mozilla.org/zh-CN/docs/web/html/element/table#attr-cellspacing) 。 ##### 1px表格实现上面的两个熟悉确实是把两条线的边框变成一条线了，但是实际上我们是通过调整两条边框之间的间距实现的，事实上边框是2px很不美观。要实现1px边框必须借助css，这里就简单的写一些css。 ``` 表格标签使用

产品名称	品牌	数量	入库时间
电视机	海尔	500	2021-10-1
手机	三星	600	2021-10-1
自行车	上海	1000	2021-10-1

``` 相比之前的demo我们在 `head` 中添加了一个 `style` 标签用于编写该页面的样式表，随后使用 `border` `cellspacing` 两个属性调整边框大小以及间距，最后在css中添加背景色。感觉上出现了1px的边框实际上是边距+背景色的实现效果。关于css这里不过多展开。 #### 表格标题使用 `caption` 标签为你的表格添加标题。 ``` 表格标签使用

商品列表
产品名称	品牌	数量	入库时间
电视机	海尔	500	2021-10-1
手机	三星	600	2021-10-1
自行车	上海	1000	2021-10-1

``` #### 合并行列使用 `colspan` 进行列合并使用 `rowspan` 进行行合并 ``` 表格标签使用

商品清单
产品名称	品牌	数量和入库时间
电视机	海尔	500	2021-10-1
手机	三星	600	2021-10-1
自行车	三星	1000	2021-10-1

``` 两个属性的属性值均为合并的单元格数量。 ### 表单标签表单通常用户将前台数据发送至后端进行操作，需要一些服务器相关知识，这里不过多展开。这里只介绍相关展示控件为后续铺路。使用form标签声明一块表单域，在表单域中使用表单组件 ``` 表单使用 ``` 注意 form标签有两个常用属性分别是 `action` 指你要把这些数据提交到哪里。 `method`指的是请求方式，通常就两种请求方式 `GET` 和 `POST`。将数据以post的方式提交至bilibili就像如下： ``` ``` 在form表单中使用input标签定义一个表单项，使用value制定项目类型。例如上方的demo,分别是一个文本输入框text和表单提交按钮submit。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 #### 输入框输入框常用于搜集用户输入信息，例如账户密码等等…. ``` ``` placeholder是输入值为空时的提示，placeholder中的内容不会被提交至服务器。 #### 单选框常用于在一定规定范围内单选选择，例如性别，血型等.. ``` ``` 需要注意必须给radio组件设置name属性设置相同属性值才能产生互斥效果。上面的demo使用了div标签辅助布局将两个单选框归类以方便后期维护排版。 #### 复选框常用于在一定规定范围内多选，例如“选出你最喜欢的几个作品” "兴趣爱好"等等… ``` ``` #### 下拉列表常用于在一定范围内选择且数据量大不方便展示时，例如地区选择。 ``` ``` 下拉列表是一个独立的标签并不是input的一个属性需要注意。select声明列表框，option声明列表项。可以在select上添加`multiple="multiple"` 属性实现多选。 #### 多行文本输入常用于大量文本输入，例如文章编辑，个人介绍等等… ``` ``` textarea标签定义一个文本域，输入内容可以自动换行，自行放大缩小。可以使用`cols` `rows`指定默认的宽高 #### formButton 在表单中有两种按钮可以使用分别是`type=submit`的提交行为按钮，另外一种就是 `type=resect` 的重置表单行为按钮。 ``` ``` 使用value可以指定按钮文本。 #### lable标签应用 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 `label` 标签的for 属性应当与相关元素的 id 属性相同。 ``` ``` 完整表单 ``` 表单使用 ``` ### 容器标签 div标签没有直接的视觉效果，他的主要作用是进行“分类”，可以把文档内容分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。在之前的表单demo中有使用过。 ## 转移字符在段落一节中我们使用过转意字符去解决html中无法输入连续的空格问题。转义字符有很多，但是不用完全记住，只需要记住几个常用的就好，剩余的用到了再查询。 > 在 HTML 中，某些字符是预留的。 > > 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。 > > 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用转义字符（character entities）。 > > 引用自 [w3school](https://www.w3school.com.cn/html/html_entities.asp) ！但请注意转义字符对**大小写敏感**，例如 `&COPy;` 就是一个错误写法。 ### 常用转义字符 | 字符 | 十进制 | 转义字符 | | --- | --- | --- | | " | " | " | | & | & | & | | < | < | < | | > | > | > | | 不断开空格(non-breaking space) | | | | 版权声明 | © | © | [全部转义字符对照表](https://www.w3school.com.cn/charsets/ref_html_8859.asp) ## 关于路径 [相对路径与绝对路径](https://blog.csdn.net/qq_34769573/article/details/80445681) ## 关于语义化标签语义化即“什么情况下使用此标签合理” 举个例子：? 网页中文章标题可以使用标题标签即h1~h6标签，文章段落放置到p标签内，文章中使用强调语气尽量使用em或者strong标签等等… 当然H5（HTML5）标准引入了更多语义化标签，这里不过多展开，以上标签配合CSS足够使用。说了这么多语义化，他到底有什么好处？ - 更容易被搜索引擎收录 - 更容易让屏幕阅读器读出网页内容 - 更易于开发者后期维护 ## 标签的作用 - 使网站结构更加清晰 - 网站制作的基石 - 被搜索引擎收录 ## 题外话 Q：为什么不介绍H5标签？ A：本文档仅帮助新手快速入门，H5标签虽然不多也不复杂，但是想用好H5标签多半需要JS去操作，例如媒体标签虽然是“开箱及用”但是真正的企业项目大多数都要用js封装重新操作一遍，以维持不同浏览器下的样式或迁就业务逻辑等。还有绘图标签canvas等，没有js基础根本玩不了，徒增学习压力，没必要。至于H5的文章会写但不是现在。 Q：没有编程基础或者不是相关专业是不是学起来很难？ A：并没有我艺术生大学专业数字媒体虽然也有前端网页制作的课程但是讲的很浅，说实话真的不如再寝室自己学，事实上我大部分都是在寝室自学。课上内容作为入门确实可以，但是进阶还是得靠自己。假如课堂上没有相关课程可以自己去网上搜索教程入门这里我推荐一个up主 [小马哥_老师](https://space.bilibili.com/405541217) 我的文档内容也多半来源于这位老师的课程。 Q：既然有视频了我为什么要看文档or写文档？ A：确实新手入门看视频是最好的选择，因为我觉得编程这个东西入门和精通很难，但是会确实是很简单的。没有一个人引导你入门，自己找方向是很困难的。至于文档是提升的手断，毕竟看视频获取信息速度慢，而且身为一个程序员也得锻炼自己看文档的能力，包括我现在总结写出来的文档，都是锻炼提升的过程。 Q：关于更新频率 A：H4的内容很少大概一天就能完事，但是css js的内容会很多，不可能一天之内更新出来。但是博客和公众号会保持一天一更的频率更新，会定期分享一些代码片段。 ## 结束作者：[F_picacho](https://seq.ink/) 校验：[F_picacho](https://seq.ink/) 团队：登阳自行车研发中心首发于：[F_picachoの领域](https://seq.ink/) 同步发表：登阳自行车研发中心微信公众号感谢：[刘建伟老师](http://111.40.56.19:9280/YSSJX/detail/438/2472.htm) 、[小马哥老师](https://space.bilibili.com/405541217) 、[白菜](https://seq.ink/) 、洋洋洋、Web-Tian、此刻你不在。对我在技术之路上的指导。 [《某科学的超电磁炮》](https://www.bilibili.com/bangumi/play/ss425/?from=search&seid=7556673237571377302&spm_id_from=333.337.0.0) 、[《精灵宝可梦》](https://www.bilibili.com/bangumi/play/ss23795/?from=search&seid=5214867021158409946&spm_id_from=333.337.0.0) 系列动画陪伴我无聊的时光。