1.英语小课堂
2.a超链接
1.href属性(hyper reference)
href=网址
- https://xxx.com,https安全超文本协议打开。例:<a href="https://xxx.com">
- http://xxx.com,http协议打开。例:<a href="http://xxx.com">
- //xxx.com(无协议网址),自动跳转。例: <a href="//xxx.com">
注:检察>Network>选中Preserve log(保留log),查看跳转过程。
href=路径
- /x/xxx,hs绝对路径。例:<a href="/a/b/c.html">
注:如果开启了http服务,/根目录就不是硬盘的根目录,开启服务的文件才是/根目录所在地址。此时/是http服务的根目录。
- x/xx/xxx,hs相对路径。例:<a href="a/b/c.html">
注:hs相对路径(没有/开头),表示在当前目录下的相对路径。
href=伪协议
- javascript:代码; ,javascript伪协议。例:<a href="javascript:alert(1);">
注:点击a标签直接执行这部分javascript代码。现在多用空的js伪协(<a>href="javascript:;">),点击之后没有任何动作,但是页面不会被刷新。
- mailto:邮箱地址,邮箱伪协议。例:<a href="mailto:13651621XX@qq.com">。
注:点击标签,发邮件给填写的地址。自动呼起邮件页面,并填写地址。
- tel:手机号,电话伪协议。例:<a href="tel:158582559XX">。
注:自动拨号,并填写号码。
href=id
- href=#xxx,锚点链接。例:<a href="#fifth">。指向页面中的锚,跳转到页面内部锚点。
2.target属性(如何展示链接页面)
- target='_self',默认,在当前页面进行跳转。例:<a href="xxx" target='_self'>(一般省略)
- target='_blank',在新标签页中打开。例:<a href="xxx" target='_blank'>
- target='_top',最顶层页面打开(多标签嵌套时)。例:<a href="xxx" target='_top'>
- target='_parent',父级窗口打开。例:例:<a href="xxx" target='_parent'>
- target='window的name'。例:<a href="xxx" target='yyy'>。(如果有一个叫yyy的标签页就在yyy打开,没有就创建一个新的标签页name值是yyy。此时的window.name='yyy'。)
- target='iframe的name'。例:<a href="xxx" target='aaa_iframe'>(在iframe的name='aaa_iframe'的iframe打开)
3.download属性
下载页面,(注:很多浏览器不支持download功能)。例:<a href="xxx" download>。
我的页面:JS Bin - Collaborative JavaScript Debugging
3.table表格
1.相关标签
- thead,表头
- tbody,表中间部分
- tfoot,表尾
- tr(table row),表行
- th(table head),表头。字体自动加粗。
- td(table data),表数据
注:当我们不使用thead,tbody,tfoot时,浏览器自动全写入tbody中。thead,tbody,tfoot不论代码位置,都按头部-中间-尾部来显示。
2.相关样式
- table-layout,设置列宽算法。(auto字多宽/fixed尽量均分/inherit)
- border-collapse,边框是否合并。(collapse合并/separate分离/inherit)
- border-spacing,边框间距。(单个像素:上下左右相同,两个像素:左右 上下)
我的页面:JS Bin - Collaborative JavaScript Debugging
4.img图像
1.功能:发出get请求,展示一张图片。
2.属性
- src(source来源),图像的url。必有属性。例: <img src="xxx.png" alt="pic1">
- alt(alternative替代的),图像替代文本。必有属性。
- height,高度。只写高度宽度自适应。例:<img src="xxx.png" alt="pic1" height="300">
- width,宽度。只写宽度高度会自适应。例: <img src="xxx.png" alt="pic" width="400">
注:height高度,width宽度,不是css属性而是html5标签属性,宽高只写一个另外一个会自适应。宽高都写会产生图片变形,所以通常只写一个,因为不能改变图片比例让它变形。
3.事件(监听图片是否加载成功)
- onload,图片加载成功。例:xxx.onload = function(){console.log('图片加载成功')}
- onerror,图片加载失败。例:xxx.onerror = function(){console.log('图片加载失败') xxx.src='/404.png'},一般会有一个加载失败的404图片替代,显示加载失败,提示重新加载。
注:onload一般用于测试。但是当加载失败onerror的代替src加载成功后,会重新触发onload事件。
4.响应式
- img { max-width: 100%; },页面图片响应式,最大宽度为屏幕宽度,多用于手机页面。
我的页面:JS Bin - Collaborative JavaScript Debugging
5.form表单
1.作用:发get/post请求,然后刷新页面。
form标签只负责定义表单模块,默认在页面上不做任何显示。收集用户填写的具体数据使用表单元素,例如input控件和一些其他的输入标签。
2.属性
- action,提交表单时向哪个目的地址(目标url)发送表单数据。例:<form action="/xxx">
- method,发送表单数据的 HTTP 方法。(GET/POST)例:<form action="/xxx" method='post'>
- autocomplete,自动填充。(on/off)例:<form action="/xxx" autocomplete='on'>
- target,如何打开提交数据目标页面(action-url)。(_self/_blank/_top/_parent/iframe的name/window的name)例:<form action="/xxx" target='_blank'>
3.事件
- onsubmit,提交表单事件。
注:
触发onsubmit的两种方式: <input type="submit">/<button type='submit'>提交</button>。
两者的区别:input不能再添加其他内容,而button可以添加其他任何内容。例:<button type='submit'><b>提交</b></button>。input的提交按钮只能是纯文本,但可以通过value值改变显示内容。例:<input type="submit" value="点我提交">。
一个form表单必须要有一个type='submit'才可以提交。如果表单内只有一个button时,会默type='submit'。
6.input控件
1.功能:
input表示用户可以输入数据的控件,单标签,是form的子标签。输入字段可通过 type 属性改变为多种方式。
2.type属性
- text,文本框。默认,例:<input type="text" >
- password,密码。
- radio,单选框。一组单选框必须使用同一个name值。
- checkbox,复选框。一组复选框必须使用同一个name值。
- submit,提交按钮。
- color,颜色。
- file,上传文件。例: <input type="file" multiple>,multiple(多数)属性上传多个文件。
- hidden,隐藏框。一般用于js的一些操作,而不是用户操作。
- number,数字框。
3.其他属性
- name,控件名。例:<input type="text" name='username' >
- placeholder(占位符),框内提示文字(用户填入后会被覆盖)。例:<input type="text" name='username' placeholder='username'>
- value,控件属性值。
- checked,默认被选中。
- required,必填字段。例:<input type="text" required>
4.事件
- onchange,用户输入改变触发这个事件。
- onfocus,对象获得焦点触发事件。
- onblur,对象失去焦点触发事件。
注:一般不监听input的click事件。form内的input都需要写name。
7.其他输入标签
1.textarea文本块
属性:
- cols(column列)文本框宽度
- rows(行)文本框行数。例:<textarea cols="60" rows="10">
默认可调整大小
- 固定大小,<textarea style='resize: none;'>
2.select+option(选择+选项)多选下拉框
我的页面:JS Bin - Collaborative JavaScript Debugging
8.使用http-server开启本地服务
使用场景:http-server 是一个简单的命令行 http服务器,用于本地测试和开发。
功能:启动本地服务。
安装命令:yarn global add http-server ,使用cmder安装http-server。
开启本地服务:http-server . -c-1,(-c-1禁止缓存,可以使用简写hs . -c-1)
手机访问:处于同一网络下,使用hs给出的地址加文件名,可以保证有一个能在移动端打开。
注:也可以使用parcel开启本地服务
安装命令:yarn global add parcel
开启服务:parcel index.html(目标文件)