最近两天看了饥人谷的HTML网课,结合mdn文档写了篇博客,分享给大家。如有错误之处,欢迎指正!(没有奖励)
a标签
属性:
href:超链接
target:打开超链接窗口方式
(http-server -c-1或着parcel+文件名来打开vscode网址)
download 下载网页(很多浏览器不支持)
rel=noopener(防止一个bug,以后会讲)
a的href取值:
-
网址:
https://网址
http://网址
//网址(最高级,推荐。查看:开发者工具,勾选preserve log,浏览器自动补全跳转)
路径
/a/b/c以及a/b/c(当前目录下查找)
index.com以及./index.com(都是当前目录下查找)
a的targe取值:
-
内置名字:
_blank(在新窗口打开)
_self(在当前窗口打开)
_top(在最顶层窗口打开)
_parent(在父级窗口打开)
xxx(有xxx窗口就使用,没有就在新窗口打开就命名新窗口为xxx,多链接看效果)
iframe标签:
内嵌窗口,已经很少使用,现在都用ajax方式。
table标签
table内只能有thead,tbody,tfoot标签,包括:
tr:table一行
th:table表头
td:table数据
table三个标签可以不按顺序写,浏览器自动纠正顺序。
相关样式:
- table-layout:
用于布局单元格,行和列的算法。其属性:
auto:浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
fixed:表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。
-
border-collapse:用来决定表格的边框是分开的还是合并的。
collapse:合并,相邻的单元格共用同一条边框。
separate:分开,默认值。每个单元格拥有独立的边框。
img标签:
发出get请求,展示一张图片。
属性:
src:必须存在,包含图片的网络地址或文件路径。
alt:不一定存在,包含对图像的文本描述,加载失败会提示代替的文本。
weight:只写高度,宽度会自适应。
height:只写宽度,高度会自适应。
note:永远不要让图片变形!可以只写高度或宽度。
js事件:
onload/onerror:监听图片是否加载成功。
响应式:
先所有元素css reset,加句
img{max-width:100%}
form标签:
表单标签,内一般含有输入框和提交按钮(input标签)。作用:发送一个get或post请求,然后刷新页面。
属性:
action:处理此表单信息所在的URL。
method:可使用 HTTP post或get方式来提交表单。
autocomplete:浏览器自动填充,使用on或off来打开或着关闭此功能。
target:在提交表单之后,在哪个页面显示收到的回复,包括_self,_blank,_top和_parent。
事件:
onsubmit:用户点击提交按钮后触发。提交按钮可使用value更改提交按钮名称。
例如:
或者。
note:两个区别input内不能再加其他标签,只能是纯文本,而button可以,甚至可以加图片。例如:。
input标签:
为了让用户输入内容。
常用属性:
text:单行文本框,默认type。
color:颜色控件。
password:值被遮盖的单行文本字段。
radio:单选按钮,name 属性使用同一个值可实现二选一。
checkbox:多选按钮,name 属性使用同一个值,使其在同一数组中。
file:选择文件,多选文件可添加multiple属性。
hidden:隐藏的控件,用于js自动填入id,字符串之类的。
image:图片提交按钮。可以使用 height 和 width 属性定义图片的大小。
事件:
onchange:用户输入改变时触发。
onfocus:用户鼠标集中时触发。
onblur:用户鼠标离开时触发。
验证器:
HTML5新增功能。例如必须提交文本:
注意事项:
一般不监听input的click事件。
form内的input要有name。
form内放一个type=submit才能触发submit事件。
其他标签:
- textarea:多行文本框。固定文本框大小可用
具体大小可用width,height属性固定。
-
select:选择标签,例如: