用vue element

当前位置： 首页 > news >正文

用vue element-ui做的网站,数据中心托管,忻州市中小企业局网站,如何提升wordpress的打开速度文章目录 1.超链接标签2.跳锚点3.图片标签4.表格5.表格的方向属性6.子窗口7.音视频标签8.表单9.文件上传10.input属性 html修炼必经之路—各种类型标签详解加展示#xff0c;关注点赞加收藏#xff0c;防止迷路哦 1.超链接标签 !DOCTYPE html html langen… 文章目录 1.超链接标签2.跳锚点3.图片标签4.表格5.表格的方向属性6.子窗口7.音视频标签8.表单9.文件上传10.input属性 html修炼必经之路—各种类型标签详解加展示关注点赞加收藏防止迷路哦 1.超链接标签 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlea 超链接标签/title /head body!– GET - 从服务端请求数据 (可以携带参数来获取数据,参数会暴露在地址栏上,不太安全。传参大小受浏览器限制,控制在2k8k范围内,显式传值) POST - 向服务端发送数据 (发送数据时候不限制发送数据的大小,隐式传值) –!– target_self 代表本页面跳转 target_blank 新窗口跳转 默认是_self –1、target“_self”, 它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。(此处就是实现你的每次跳转都在同一个窗口的核心点) 2、target“_blank” ,浏览器总在一个新打开、未命名的窗口中载入目标文档。
a href./2.html target_self点我1/a通过相对路径跳转到当前目录下的2.html。链接地址跳转都是get方式 a hrefhttp://www.baidu.com target_blank点我2/aa hrefhttp://www.baidu.com/s?wd王文 target_blank点我3/a百度搜索是把搜索框的搜索内容当参数传递给地址栏
我们可以自己传参实现点击即搜索
点击 点我3 实现跳转搜索
!– 实现跳转获取页面的时候把参数传进去 –a href./2.html?a1b2c3d4 target_blank点我4/a !–地址栏传值 - get显式传值–用 拼接不同参数get方式传参
!– 刷新页面 a标签herf空表示点击刷新页面– a href点5/a!– 不刷新页面 用户填表单的时候不要刷新不然数据丢失– a href#点6/a点击没任何反应
!– 把数据扔到a连接中的href属性中 , 默认下载操作 – a hrefVSCodeUserSetup-x64-1.51.0.exe点7/a/body /html2.跳锚点 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title a链接 跳锚点 /title /head bodyul!– 跳锚点要通过a链接来跳href #a1 不刷新跳跳到id a1的位置 – lia href#a1第一章/a/lilia href#a2第二章/a/lilia href#a3第三章/a/li/ul点击相应章节就会跳到相应章节位置 a ida1第一章内容/ap stylewidth:500px;height:1000px;background-color: silver;孙悟空三打白骨精/pa ida2第二章内容/ap stylewidth:500px;height:1000px;background-color:skyblue;孙悟空怒锤红孩儿/pa ida3第三章内容/ap stylewidth:500px;height:1000px;background-color:tan;孙悟空大闹凌霄殿/p!– href# 表示回到顶部 – a href#回到顶部/a /body /html3.图片标签 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleimg 图片标签/title /head body!– img 单独调整width或者height可以随着比例进行缩放,如果同时指定有可能失真; title属性设置图片的提示功能 –a hrefhttps://baike.baidu.com/item/%E5%91%A8%E6%98%9F%E9%A9%B0/169917?fraladdinimg srczhouxingchi1.jpg width200px height200px; title周星驰 //aimg srczhouxingchi1.jpg width200px height200px; / /body /htmla标签href填地址不写target默认target是 _self 本窗口跳转 px像素图像最小显示单位为1个像素 可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素它是以一个单一颜色的小格存在 [1] 。 每一个点阵图像包含了一定量的像素这些像素决定图像在屏幕上所呈现的大小。 把img标签放在a标签里面实现点击图片跳到相应链接title属性设置图片的提示功能当鼠标放在图片上时会出现title设置的字段提示。用于 当浏览器图片不能显示时的提示
img src / src填写图片路径一般是本地路径也可以是网络图片。a标签是行内块状元素不用通过css可以直接针对img标签设置大小4.表格 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title table 表格标签/title /head body!– ### part1 table 表格 border 表框 width 宽度设置tr 表示一行th 表示标题加粗td 表示一个单元格 –table border1 width1000px;thead stylebackground-color: tan;trth姓名/thth年龄/thth薪水/thth部门/th/tr/theadtbody stylebackground-color: teal;trtd王文/tdtd18/tdtd10万/tdtdpython/td/trtrtd王伟/tdtd20/tdtd11美元/tdtd开发部门/td/trtrtd王致和/tdtd22/tdtd100万/tdtd臭豆腐研发部门/td/tr/tbodytfoot stylebackground-color: thistle;trtdlianxi1/tdtdlianxi2/tdtdlianxi3/tdtdlianxi4/td/tr/tfoot /table分割线 hr stylewidth:20px;height:100px;/!– colspan 横向合并rowspan 纵向合并 –table border1 width1000px;thead stylebackground-color: tan;trth姓名/thth年龄/thth薪水/thth部门/th/tr/theadtbody stylebackground-color: teal;trtd colspan2123/tdtd10万/tdtd rowspan3销售/td/trtrtd王伟/tdtd20/tdtd11美元/td/trtrtd王致和/tdtd22/tdtd100万/td/tr/tbodytfoot stylebackground-color: thistle;trtd colspan4lianxi1/td/tr/tfoot/table/body /html5.表格的方向属性 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titletable 表格的方向属性/title /head body!– 水平方向设置 align : left center right 垂直方向设置 valign: top middle bottom cellspacing td 与td 之间的间距cellpadding td 与其中内容之间的间距 一般不用这俩控制而是用css–table border1 width1000px; height200px; cellspacing 10 cellpadding10tr aligncenter valigntoptd王致和/tdtd蓝色/tdtd踢球/tdtd江西/td/trtr aligncenter valignmiddletd王致和/tdtd蓝色/tdtd踢球/tdtd江西/td/trtr aligncenter valignbottomtd王致和/tdtd蓝色/tdtd踢球/tdtd江西/td/tr/table水平方向设置 align : left center right
垂直方向设置 valign: top middle bottom在tr中设置
cellspacing td 与td 之间的间距 cellpadding td 与其中内容之间的间距 在table中设置
/body /html6.子窗口 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title iframe 子窗口/title /head bodyiframe src nameisme width1000px height200px;/iframehr /a hrefhttp://www.baidu.com targetisme点我跳转百度/aa href3.html targetisme点我跳转3.html/aa href4.html targetisme点我跳转4.html/a /body /htmliframe标签生成一个指定区域在该区域中嵌入其他网页出现个小窗口
点击按钮相应页面在小窗口显示目前百度拒绝在小窗口访问了 7.音视频标签 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head body!– https://www.w3school.com.cn/html/index.asp w3c school 手册 –video srcceshi.mp4 controls controls stylewidth:100px;抱歉! 您的浏览器不支持,该扔了/videoaudio src潮汐-她的城市.mp3 controls controls抱歉~! 您的浏览器不支持,该扔了/audio /body /html显示控件 controls “controls”。如果浏览器不支持在标签之间写上描述文字告诉用户不支持
8.表单 input标签一定要套在form表单里面提交不然只有前端样式没有提交功能 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleform表单/title /head body!– action 表示提交的数据地址method 表示数据以什么样的形式提交get 显式获取数据(参数在地址栏上,参数大小在2k8k左右) 不写默认是get请求post 隐式提交数据(参数不在地址栏,参数大小没有限制) input 是行内块状元素type 指定input的类型name 指定input的名字必须写value 指定input的默认值–一表单属性 表单一共有五个重要属性name 、 action、 method 、target和enctype属性 1 name 属性 一个页面上的表单可能不止一个为了区分这些表单就需要name 属性给表单命名通常与id属性值相同。需要注意的是表单名称中不能包含特殊字符和空格 要想提交数据必须带name属性 2 action属性 用于指定表单数据提交到哪个地址进行处理。 3 method属性 作用是告诉浏览器指定将表单中的数据使用哪一种HTTP提交方法取值为get 或者 post。 其中get 是默认值表单中的数据被传送到action 属性指定的URL然后这个新的URL 被传送到处理程序上。 post表单数据被包含在表单主体中然后被传送到处理程序上。 两者区别 get该请求会将请求参数的名和值转换成字符串然后拼接到URL 之后因此在地址栏等地方可以看到请求的参数但是安全性差并且安全性差传输的数量比较小在URL中的最大长度是2048个字符。 post该请求方式通过HTTP的post 机制将所有的请求参数的名和值放在HTML的header 中传输并且安全性号传输的数量也大。 GET请求中URL的最大长度限制总结 浏览器 1、IE IE浏览器Microsoft Internet Explorer 对url长度限制是20832K53超过这个限制则自动截断若是form提交则提交按钮不起作用。 2、firefox firefox火狐浏览器的url长度限制为 65 536字符但实际上有效的URL最大长度不少于100,000个字符。 3、chrome chrome谷歌的url长度限制超过8182个字符返回本文开头时列出的错误。 4、Safari Safari的url长度限制至少为 80 000 字符。 5、Opera Opera 浏览器的url长度限制为190 000 字符。Opera 9 地址栏中输入190 000字符时依然能正常编辑。 服务器 1、Apache Apache能接受url长度限制为8 192 字符 2、IIS Microsoft Internet Information Server(IIS)能接受url长度限制为16 384个字符。 这个是可以通过修改的IIS7configuration/system.webServer/security/requestFiltering/requestLimitsmaxQueryStringsetting. 3、Perl HTTP::Daemon Perl HTTP::Daemon 至少可以接受url长度限制为8000字符。Perl HTTP::Daemon中限制HTTP request headers的总长度不超过16 384字节(不包括post,file uploads等)。但当url超过8000字符时会返回413错误。 这个限制可以被修改在Daemon.pm查找16×1024并更改成更大的值。 4、ngnix 可以通过修改配置来改变url请求串的url长度限制。 client_header_buffer_size 默认值client_header_buffer_size 1k large_client_header_buffers默认值 large_client_header_buffers 4 4k/8k 由于jsonp跨域请求只能通过get请求url长度根据浏览器及服务器的不同而有不同限制。 若要支持IE的话url长度限制为2083字符若是中文字符的话只有2083/9231个字符。 若是Chrome浏览器支持的最大中文字符只有8182/9909个。 4 target属性 该属性与a标签的target 属性一样都是来指定目标窗口的打开方式。 取值 _self: 默认值表示在当前的窗口打开页面。 _blank:在新的窗口打开页面。 _top: 表示页面载入到包含该链接的窗口取值在当前的窗口中的所有页面。 _parent: 在父级窗口打开页面。 5 enctype属性 用于设置表单信息提交的编码方式 取值 application / x-www-form-urlencoded :默认编码方式 multipart / form-data : MIME 编码对于“上传文件” 这种表单必须选择该值 text / plain: 空格转换为加号但不对特殊字符编码。 二表单对象 就是放在form 标签内的各种标签有input、textarea、select、option、button、label、otpgroup等。 1 input标签 type属性的值 默认类型是text。 text单行文本框 password: 密码前端输入页面不显示输入内容 value 定义文本框的默认值也就是文本框内的文字。 size定义文本框的长度单位是一字符。 maxlength 设置文本框最多可以输入的字符数。 radio单选按钮name 和 value 是单选按钮中的必要的两个属性必须要设置。并且同一组单选按钮中各个选项中的 name 属性值必须一样。 checkbox 普通按钮checked 属性表示该选项在默认情况下已经被选中。 button普通按钮 value 属性的取值就是显示在按钮上的文字onclick 是普通按钮的事js submit 提交按钮value 属性的取值就是显示在按钮上的文字实现将表单内容提交给服务处理。 resrt重置按钮value 属性的取值就是显示在按钮上的文字单击可清除用户在页面当前表单中输入的信息。 file:文件上传当使用文件域file 时必须在form标签中指明编码方式enctype“multipart/form-data”,以确保服务器正常接收数据。 image图片域拥有按钮的特点也拥有图像的特点不常用。 hidden隐藏字段不常用。
input标签的其他属性 checked设置单选框、复选框初始状态是选中属性值仅有checked。 disabled设置首次加载禁用该元素属性值仅有disabled表示该元素被禁用。 maxlength设置文本框输入的最大字符数。 readonly只读表示文本框的内容不允许用户直接进行修改。 size设置该元素的宽度。 src设置图像域所显示的图像的URL。 2 多行文本textarea rows指定可输入的行数。 cols指定可输入的列数。 readonly用于指定该文本只读该属性的值只能是readonly。
4 表单控件元素button 用于定义一个按钮元素内部可包含普通文、文本格式化元素、图片等。提供了更加丰富的显示内容和视觉效果。 type属性智能有button、resert、submit 3种。 5 表单控件元素label标签 用于对其他表单控件元素进行说明主要用于单机元素生成标签浏览器会自动将焦点转移到和标签相关的表单控件上。 实现点击选项也能选中 label标签和表单控件关联的方式有两种 使用label标签和for属性指定为关联表单控件元素的id即可 将说明和表单控件一起放在label 元素内部即可。 form action method手机号:input typetext namephone value王文 /br /密码: input typepassword namepwd value李四 stylewidth:200px;height:50px; /br / input typesubmit value提交 //form /body /htmlinput是行内块状元素可以设置宽高 input 的name必须写不然后台无法获取表单值
method不写默认是get方法点击提交将默认值传到地址栏 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title单选框 , 复选框 , 下拉框/title /head bodyform action method!– 单选框 radio 多选一 name名字要一致 checked:默认选中 –input typeradio namesex valuem idsex1 / label forsex1 男性/labelinput typeradio namesex valuew idsex2 checked / label forsex2 女性/labelhr /!– 复选框 checkbox 多选多 name名字要一致 –input typecheckbox namefood valuebanana checked /香蕉input typecheckbox namefood valuehuanggua /黄瓜input typecheckbox namefood valueqiezi checked /茄子input typecheckbox namefood valuedonggua /冬瓜hr /!– 下拉框 select 多选一 selected 默认选中, disabled 无法选中–select namecity option valuebeijing 北京人/optionoption valuexian selected西安人/optionoption valuedalian 大连人/optionoption valuefuzhou福州人/optionoption valuezhengzhou disabled 郑州人/option/selecthr / input typesubmit value点我 //form/body /htmlradio单选框默认只能点击圆圈才能选中
添加上label标签点击男性女性 选项也能选中。label要与 input标签中的id关联 同一组radio选项中name的值要相同checked默认选中 label 标签的 for 属性应当与相关元素的 id 属性相同 复选框中name一定要指定而且值也要一致。 服务器取值的时候取的是value的值所以value也一定要指定下拉框行内元素selected默认选中 disabled的灰色不能选
9.文件上传 涉及到文件上传method一定得是post 编码类型 enctype“multipart/form-data” !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title 文件上传 /title /head bodyform action methodpost enctypemultipart/form-data!– 文件上传 –头像:input typefile namemyfile /hr/!– 大段文本框 –textarea nameinfo stylewidth:100px;height:100px;background-color:tan; 请填写相关数据/textareahr/!– 隐藏的表单框 隐藏要修改的数据id。方便用户填错数据方便程序员后台修改 –input typehidden namesid value13 /hr/input typesubmit value提交//form/body /html 10.input属性 input一定要套在form表单里面 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleinput属性/title /head body!– placeholder 灰色输入提示有需要输入的框中在输入之前有提示当光标放上去输入内容之后提示消失required 必填项readonly 数据只能读不能改 可以被提交disabled 数据只能读不能改 不会被提交size 设置输入框的大小可以控制输入框的大小但一般我们用css来调整maxlength 输入框最多可以输入多少字符minlength 输入框最少需要输入多少字符autofocus 自动获取焦点, 整个页面只能有一个。进入页面光标默认所在位置tabindex 设置tab的切换顺序 按table键鼠标的光标切换顺序–form action method 用户名:input typetext nameusername placeholder请输入用户名 tabindex5 /br / 密码: input typepassword namepwd tabindex4 required / br /密码字段设为必填字段后不填不让提交 年龄: input typetext nameage value18 readonly tabindex3 /br /邮箱: input typetext nameemail value123463922qq.com disabled /br /班级: input typetext nameclassroom size100 maxlength 5 minlength2 tabindex2/br /国籍: input typetext namecountry autofocus tabindex1 /br /input typesubmit/form年龄设为只读不让修改按键盘输入不进去 设为光标锁定autofocus 打开页面光标就在该位置 tabindex1 按tab键鼠标光标切换的顺序。 tabindex 有三个值0-N(通常是-1)N(正值) tabindex0该元素可以用tab键获取焦点 且访问的顺序是按照元素在文档中的顺序来focus即使采用了浮动改变了页面中显示的顺序依然是按照html文档中的顺序来定位 tabindex-1该元素用tab键获取不到焦点但是可以通过js获取 这样就便于我们通过js设置上下左右键的响应事件来focus 取值 -1-999 之间没有区别但为了可读性和一致性考虑推荐使用 -1 tabindex1该元素可以用tab键获取焦点而且优先级大于tabindex0 不过在tabindex1时数字越小越先定位到 如果多个元素拥有相同的 tabindex 他们的相对顺序按照他们在当前DOM中的先后顺序决定
/body /html