HTML重点标签

最近两天看了饥人谷的HTML网课,结合mdn文档写了篇博客,分享给大家。如有错误之处,欢迎指正!(没有奖励)

a标签


属性:

  • href:超链接

  • target:打开超链接窗口方式

(http-server -c-1或着parcel+文件名来打开vscode网址)

  • download 下载网页(很多浏览器不支持)

  • rel=noopener(防止一个bug,以后会讲)


a的href取值:

  • 网址:

    1. https://网址

    2. http://网址

    3. //网址(最高级,推荐。查看:开发者工具,勾选preserve log,浏览器自动补全跳转)

  • 路径

  1. /a/b/c以及a/b/c(当前目录下查找)

  2. index.com以及./index.com(都是当前目录下查找)

  • 伪协议

    1. Javascript:;为了直接执行js,现在常作点击之后无动作的a标签)

    2. mailto:邮箱

    3. tel:手机号(简历用)

  • id :(内部锚点,跳转到指定标签位置)


a的targe取值:

  • 内置名字:

    1. _blank(在新窗口打开)

    2. _self(在当前窗口打开)

    3. _top(在最顶层窗口打开)

    4. _parent(在父级窗口打开)

    5. xxx(有xxx窗口就使用,没有就在新窗口打开就命名新窗口为xxx,多链接看效果)


iframe标签:

内嵌窗口,已经很少使用,现在都用ajax方式。


table标签

table内只能有thead,tbody,tfoot标签,包括:

  • tr:table一行

  • th:table表头

  • td:table数据

table三个标签可以不按顺序写,浏览器自动纠正顺序。

相关样式:

  1. table-layout:

用于布局单元格,行和列的算法。其属性:

  • auto:浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。

  • fixed:表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。

  1. border-collapse:用来决定表格的边框是分开的还是合并的。

    • collapse:合并,相邻的单元格共用同一条边框。

    • separate:分开,默认值。每个单元格拥有独立的边框。


img标签:

发出get请求,展示一张图片。

属性:

  • src:必须存在,包含图片的网络地址或文件路径。

  • alt:不一定存在,包含对图像的文本描述,加载失败会提示代替的文本。

  • weight:只写高度,宽度会自适应。

  • height:只写宽度,高度会自适应。

note:永远不要让图片变形!可以只写高度或宽度。

js事件:

onload/onerror:监听图片是否加载成功。

image

响应式:

先所有元素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:选择标签,例如:

本文正在参与“写编程博客瓜分千元现金”活动,关注公众号“饥人谷”回复“编程博客”参与活动。

你可能感兴趣的:(HTML重点标签)