整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文介绍了网页编程中的按钮使用方法。按钮是网页中最常用的控件之一，点击后会触发某些程序。即使没有学习过编程，大家也应该知道按钮的概念。按钮的最大功能是点击后触发程序。这篇文章主要介绍了如何在网页中插入按钮，并讲解了按钮的属性和使用方法。
先来看看今天的实例效果。页面被分为三部分：按钮、按钮和按钮的共有属性。
首先是普通按钮，点击后文本框的内容发生了变化，但页面并没有刷新。接着是重置按钮，点击后文本框的内容恢复到初始状态，但页面仍然没有刷新。提交按钮点击后，页面重新加载，提交了表单中的内容。
接着是按钮，点击后文本框的内容发生了变化，但页面没有刷新。按钮包含一个图片且为灰色状态，无法点击。
现在来看看实现的代码。
输入和按钮的写法非常相似，这里只展示了最基本的写法。对于初学者来说，看一眼就明白了。
按钮有三个类型：普通、重置和提交。按钮的名称和值会提交到服务器端。
提交时提交的是按钮的值。ID和name是控制按钮的命名。
点击按钮时会触发onclick事件。autofocus属性会在页面加载完成后自动获取焦点。
disabled属性可以设置按钮是否可用，不设置时默认可用。
form属性用于设置提交到哪个URL、是否绕过验证、以及表单的相关设置。
相关属性的优先级高于在表单中设置的属性。
以上就是今天的分享内容，希望对大家有所帮助。import和button在网页中插入按钮的功能是相同的，两者的外观也没有明显的区别，但是它们的属性设置却存在一定的重叠。
为什么需要这两个标签呢？而阿里巴巴标签是HTML 5中新增加的标签，它的必要性体现在哪里呢？同学们要注意，阿里巴巴标签不是input，它不是一个封闭的标签，而是一个唯一的标签，可以包含文字或其他标签。
例如，可以使用阿里巴巴标签来插入图片。注意，由于用户使用的浏览器不同，底层的type值是必须填写的，绝对不能使用默认值。
今天的分享就到这里，希望各位同学能够认真练习，做到不看视频也能够正确地写出代码。所有的案例和相关文档都可以向我索取，下期再见，想学编程就关注我吧。
HTML代表超文本标记语言（Hypertext Markup Language）。它是一种用于构建网页的标记语言。HTML文件包含一组标签，这些标签用于定义网页的结构和内容。浏览器读取HTML文件，并根据标记中的指示呈现网页内容。
HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式，并提供交互元素，例如表单和按钮。
每个HTML文档都应该遵循以下基本结构：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<!-- 内容在这里 -->
</body>
</html>
让我们逐步解释这个结构：
HTML标签是由尖括号括起来的名称，例如<p>表示段落，<img>表示图像。标签通常成对出现，有一个开始标签和一个结束标签。例如：
<p>这是一个段落。</p>
<p>是开始标签，</p>是结束标签，文本位于两个标签之间。标签定义了元素的类型和结构。
有些HTML标签是自封闭的，不需要结束标签，例如<img>用于插入图像。
在HTML中，你可以使用注释来添加说明性文字，注释不会在浏览器中显示。HTML注释使用<!--开头和-->结尾，如下所示：
<!-- 这是一个注释 -->
注释通常用于添加文档说明、调试代码或标记未来的修改。
HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素：
示例：
<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>
要在网页中插入图像，可以使用<img>标签。它是一个自封闭标签，需要指定图像的src属性来指定图像文件的路径。
示例：
htmlCopy code
<img src="image.jpg" alt="图像描述">
通过使用<a>标签，可以在网页中创建链接。链接通常包含在文本或图像中，并使用href属性指定目标URL。
示例：
<a href="https://www.example.com">访问示例网站</a>
HTML支持有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。
无序列表使用<ul>标签定义，每个列表项使用<li>标签。
示例：
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
有序列表使用<ol>标签定义，每个列表项使用<li>标签。
示例：
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
定义列表使用<dl>标签定义，每个定义项目使用<dt>标签定义术语，使用<dd>标签定义描述。
示例：
<dl>
<dt>术语1</dt>
<dd>描述1</dd>
<dt>术语2</dt>
<dd>描述2</dd>
</dl>
HTML表单允许用户与网页进行交互，提交数据。以下是HTML表单的基本元素：
<form>元素用于创建表单，可以包含文本字段、复选框、单选按钮、下拉列表等。
示例：
<form action="submit.php" method="post">
<!-- 表单元素在这里 -->
</form>
输入字段用于接收用户输入的数据，常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。
文本框使用<input>标签，type属性设置为"text"。
示例：
<input type="text" name="username" placeholder="用户名">
密码框使用<input>标签，type属性设置为"password"。
示例：
htmlCopy code
<input type="password" name="password" placeholder="密码">
单选按钮使用<input>标签，type属性设置为"radio"。
示例：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
复选框使用<input>标签，type属性设置为"checkbox"。
示例：
<input type="checkbox" name="subscribe" value="yes">订阅新闻
下拉列表使用<select>和<option>标签创建。<select>定义下拉列表，而<option>定义选项。
示例：
<select name="country">
<option value="us">美国</option>
<option value="ca">加拿大</option>
<option value="uk">英国</option>
</select>
HTML用于定义网页的结构和内容，但要使网页看起来更吸引人，需要使用CSS（层叠样式表）。CSS允许你定义字体、颜色、布局等样式。
可以在HTML元素内部使用style属性来定义内联样式。
示例：
<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>
外部样式表将样式规则保存在独立的CSS文件中，并通过<link>标签将其链接到HTML文档。
示例（style.css）：
/* style.css */
p {
color: blue;
font-size: 16px;
}
在HTML中链接外部样式表：
<link rel="stylesheet" type="text/css" href="style.css">
这使得可以在整个网站上共享相同的样式。
HTML是构建现代网页的基础。通过学习HTML的基本语法和元素，你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单，HTML提供了丰富的工具来呈现内容和实现用户交互。
这篇文章提供了HTML的基础知识，但HTML是一个广泛的主题，还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助，让你能够开始创建自己的网页。继续学习和实践，你将成为一个熟练的网页开发者。
浏览器更好用，自然离不开万能的《油猴插件》（戳这里），通过脚本实现去广告、绕过二次跳转、自动翻页、悬停看图、扒下载链接等功能。虽说AC-baidu这类的脚本自带更改页面样式，
但由于是1对1的，没法改所有网站的面貌，这时候就要用到另一个插件“Stylus”了，它可以让绝大多数网页都变得工工整整（赶上时代）。
▌用上Stylus
插件可以直接诶从Chrome浏览器插件商店安装，或者网上直接下一个。
样式可以点击插件中[查找更多样式]，
接下来会列出所在网页可用的所有样式，供你选择，包含源链接、发布日期、本周/所有下载数据等。
装好的样式可以在顶部选择开关，也可以组合搭配使用（可能有bug冲突），比方说：
这一步可能需要梯子，不然可能加载不出来...你也可以到Stylish的网站userstyles.org下载安装。
点击[选项]进入设置界面，它支持Dropbox、Google Drive、Onedrive云同步功能，一键在其他电脑上同步使用，不再需要一个个手动重新添加。
▌样式推荐
百度：Baidu Lite 百度轻
谷歌：Google Search - Material Design
IT之家：IT之家去广告,优化阅读
贴吧：TieBa Maverick
知乎：Flat Zhihu 扁平化知乎
微博：Weibo v6 简约微博
斗鱼：Douyu Cleaner清爽斗鱼
夜读：NightShift - eye care 全局夜间模式
字体：ForceMyFonts 全局字体美化
如果你恰巧会一点CSS，那么可以自定义修改任意样式，也可以从头自己做。
▌什么是CSS（层叠样式表）？
Stylus的原理也不复杂，通过CSS层叠样式表改变网页样式，什么字体、背景、边框、网页布局，统统在它的掌控之中，就像整形一样，换个鼻子、调个眼睛什么的，还是全程无痛。
CSS很复杂，但是Stylus简单好用、没啥学习成本，所以这部分只是当简单的拓展讲一下：
那它是如何诞生的呢？这还得从1993年说起，早期网页使用的是RRP样式，仅支持一个样式表，只能显示文字，看网页的体验可能还不如看报纸来的丰富。之前在《浏览器的辉煌发展史》（戳这里）中咱们提到过一款Mosaic（马赛克）浏览器，
开始采用HTML标签实现样式表达，支持了书签、图标按钮、图片显示这些革命性的功能、沿用至今。网景最早支持HTML框架显示，也就是最简单的table布局，
可以调整内外边距，网页看着更舒服，优点是兼容性高，但既要负责图文内容、又要负责排版样式，注定了他的样式不够美观。
魏培源开发的ViolaWWW浏览器用了有层次嵌套性的样式表，率先支持用<Link>标签引用外部样式表（可以简单理解为：你请了个美工帮你改善改善）。但各家浏览器各用各的，岂不是乱了套？1994年，以万维网之父老李为首的W3C万维网联盟，开始提供网络标准化建议。
同年老莱（Håkon W Lie）提出层叠HTML样式表（CHSS）支持用户自定义样式，网页作者可以自己DIY版面，不同的规则用不同的百分比呈现，这也是CSS的雏形。隔壁的波斯正在做一款Argo浏览器，两人相谈盛欢、打算合作。
1996年底出现了一种和CSS语法很像的表现指明语言，PSL 96，可以根据不同的浏览器信息，自动判断用什么样式。年底，CSS已经完成，支持改变字体大小、字形、颜色、间距、排列、表格、边框、id、class等等，如果说普通网页是你刚买到手的毛坯房，那么CSS就是你给它做装修。
但由于早期网页设计师滥用HTML导致了“tagsoup标签汤”问题，哪怕微软在IE上逐步实现CSS，但BUG依然不少（
果然BUG是微软祖传BUFF）。
隔壁对手网景则推出了JS（JavaScript）语言，浏览器大战没有胜者，当时的网页设计师被迫要为IE和网景分别设计一套网页，头都气秃了...
于是民间团体WaSP（网页标准计划）发动水军推动W3C 标准化，怒喷那些不加盟的厂商。在1998年出台CSS2，他们之中的7位主要成员成立了CSS 武士团（CSS Samurai），催厂商们改善对CSS的支持，Opera照做了，但微软依旧无动于衷。
可能也是因为大家看不到CSS的优势，觉得没必要，但2003年，Dave Shea推出了CSS 禅意花园（CSS Zen Garden）来展示样式效果，也就是搭了个“样板房”，让设计师们热血沸腾起来。
在2006~2009年间，DIV+CSS布局开始取代传统表格布局，CSS3引入了简单动画等功能，插了JS一脚，还有灵活的flex弹性布局，沿用至今，而2011年开始设计的CSS4特性目前支持的还太少。
▌其他浏览器
你说为啥不直接用Stylish呢？因为3年前原作者卖给SimilarWeb之后，它涉嫌窃取用户浏览历史，被Chrome和Firefox下架。而Stylus是Stylish 1.5.2的开发分支，也是原作者维护的最后一个版本，作为GH上的开源项目，代码公开审查，可以安心食用啦。
除了Chrome外，Firefox、Opera也都支持，Safari可以用FreeStyler（你也要来一段说唱吗），同类插件还有xStyle。当然，由于win的字体渲染并不美观，还可以搭配MacType使用，关于它的配置方法，咱们以后继续说。
参考&引用：
sspai.com/post/40485
sspai.com/post/45537
github.com/openstyles/stylus
zhihu.com/search?type=content&q=css
zhihu.com/question/24826065/answer/194294438
zh.wikipedia.org/wiki/层叠样式表?oldformat=true
*请认真填写需求信息，我们会在24小时内与您取得联系。
