一个网站推广,网站建设 模块,深圳南山区网站建设公司,做的网站提示不安全以下转载和参考自#xff1a;HTML 表单。
1、表格 可以通过 CSS 设置表格的样式#xff1a; 如下为将上面table.lamp th,td样式中的padding注释掉#xff0c;开启table.lamp中的padding的效果#xff1a; 2、列表 3、导航栏 导航栏使用ul列表实现#xff0c;…以下转载和参考自HTML 表单。
1、表格 可以通过 CSS 设置表格的样式 如下为将上面table.lamp th,td样式中的padding注释掉开启table.lamp中的padding的效果 2、列表 3、导航栏 导航栏使用ul列表实现以下为一个垂直导航栏 可以为导航栏添加边框通过添加ul的borderli的border-bottom同时将li:last-child的border-bottom设为none以防止最下面的边框线成为两行 以下为一个全高的固定侧导航栏 上面使用到的overflow属性规定如何处理超出元素框的内容如下为其值及对应的处理以及一个使用示例 以下为实现了一个水平导航栏如果想要其固定在底部显示的话将ul的top属性修改为bottom属性 以下实现了一个粘性导航栏鼠标滚动的时候导航栏也跟着滚动但最多到顶部后就固定了 如下实现了一个带下拉菜单的导航栏 4、表单 表单用于收集用户的输入如下图所示form 用来定义表单表单中的元素有input 元素如text文本输入、radio单选按钮、submit提交按钮、单选按钮、文本输入框等。提交按钮用来向表单处理程序提交表单表单处理程序通常是包含处理数据的页面表单的 action 属性指定提交表单时执行的动作表单处理程序通常表单会被提交到 web 服务器上的网页如果省略 action 属性则 action 会被设置为当前页面。表单中的input元素必须指定name否则提交的时候会忽略该输入元素。 method指定使用的HTTP方法GET或POST。如果不指定method属性默认采用的是GET其它的还有target属性设置设置提交表单后在何处显示响应默认为_blank在新选项卡_self为在当前页面其它值还有_parent、_top、framenameaccept-charset设置表单使用的字符集编码默认为使用页面字符集autocomplete设置是否打开自动完成功能即输入的时候是否显示用户的历史输入默认为on即开启enctype指定HTTP请求的Content-Type默认为application/x-www-form-urlencoded。novalidate属性设置为novalidate的话表示提交表单时不对其进行验证即不会验证表单的输入。 以下为一些其它input元素的示例以及相关属性的说明其中一些属性是布尔属性不需要设置其值如readonly、disabled 以下为下拉列表、文本输入框、按钮、datalisthtml5新增这些表单元素的使用示例 如下为上面代码的效果其中图1为点击按钮时的效果图2为点击最后一个input元素时的效果 元素的formaction属性会覆盖form的action属性formaction属性适用于 type submit 以及 type image 其规定当提交表单时处理该输入元素的URL。如下所示有两个提交按钮并且其提交动作不同 5、canvas HTML5的canvas画布元素拥有绘制字符、圆形、图像、路径的能力画布是一个矩形区域可以控制其每一像素。canvas 本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成 6、绘制矢量图 矢量图是使用数学公式描述图形的图像。矢量图具有可编辑性可以对其中的元素进行修改和调整当我们观察一张矢量图时我们可以看到它由许多数学方程描述的几何形状组成。不是像素点的集合所以其文件相对于位图较小。矢量图是基于数学公式的描述而不是像素点的集合其在放大或缩小时能保持图像的清晰度和质量不会失去细节或出现像素化而位图在放大时会变得模糊因为每个像素都会变得更大导致失去细节。一般logo会经常使用矢量图。常见的矢量图格式包括SVG可缩放矢量图形、AI、EPS。 html中使用svg标签定义一个矢量图如下所示 SVG与Canvas HTML中的SVG使用 XML 来描述 2D 图形因为基于 XML这意味着 SVG DOM 中的每个元素都是可用的可以为某个元素添加JavaScript 事件处理器。在 SVG 中每个被绘制的图形均被视为对象如果 SVG 对象的属性发生变化那么浏览器能够自动重现图形。SVG不依赖分辨率支持事件处理器适合大型区域渲染比如谷歌地图复杂度高会减慢渲染速度任何过度使用 DOM 的应用都不快不适合游戏应用。 Canvas 是逐像素进行渲染的依赖分辨率。一旦图形被绘制完成它就不会继续得到浏览器的关注。如果其位置发生变化那么整个场景也需要重新绘制。Canvas不支持事件处理器适合图像密集型的游戏其中的许多对象会被频繁重绘。
7、HTML5 HTML5 是最新的 HTML 标准它是跨平台的被设计为在不同类型的硬件PC、平板、手机等之上运行。使用!DOCTYPE html声明的文档类型就表示使用HTML5HTML5 中默认的字符编码是 UTF - 8。HTML5新增了许多标签元素如header、dialog新增了许多表单控件如日期、日历新增了一些API比如用本地存储取代 cookie。HTML5也废弃了一些标签元素如下所示
acronymappletbasefontbigcenterdirfontframeframesetnoframesstrikett
8、XHTML XHTML是以 XML 格式编写的 HTML它是更严格更纯净的 HTML 版本它与 HTML 4.01 几乎是相同的。HTML中对于一些书写错误也能正确标识比如缺少关闭标签属性值无引号等但是对于一些小型设备其往往缺乏解释“糟糕”的标记语言的能力所以就必须使用XHTML。XHTML中的文档类型声明!DOCTYPE ....是必须的head、title 以及 body 也是必须的。
9、响应式网页设计与BootStrap 响应式网页设计WRDResponsive Web Design)指的是能够以可变尺寸传递网页即一个网站能够针对多个类型的终端PC、移动、平板提供不同的显示样式而不是针对每个终端制作一个特定的版本。 BootStrap是一个前端开发工具包前端开发框架基于html、css和javascript主要用于构建响应式网站并且是移动优先原则。BootStrap也提供了很多css样式和js插件使得web开发更加便捷这块与vue相比的话BootStrap的缺点是如果使用BootStrap现成的插件进行开发的话会很快但是想对于组件进行订制就不太方便自定义标签或部件的话需要一些额外的代码或查找额外的插件而vue则适合开发自定义功能和交互比较多的web。 目前最新的BootStrap 5已经从jQuery依赖切换到了使用原生的JavaScript。 Bootstrap 5 与所有现代浏览器兼容Chrome、Firefox、Edge、Safari 和 Opera。 有两种获得Bootstrap的方法一种是引用来自 CDN 的 Bootstrap 5一种是从其官网 https ://getbootstrap.com/)下载 Bootstrap 5后自己托管来引用。比如我们可以使用W3School为Bootstrap 的 CSS 和 JavaScript 提供的CDN这样用户请求的时候会从最近的缓存中获取Bootstrap加载时间更短。如下所示为通过第一种方式来引用Bootstrap并对其使用 Bootstrap 5 的JavaScript 用于不同的组件如模态、工具提示、弹出框等如果只使用 Bootstrap 的 CSS 部分的话可以不引用Bootstrap JS。
