一、a标签
属性
-
href
hyper reference超链接
可安装工具parcel,利用parcel打开链接,切勿双击html
λ yarn global add parcel
λ parcel index.html
Server running at http://localhost:1234
√ Built in 4.43s.
a的href的取值:
1.网址
- //google.com 书写此种网址,不用https或http防止报错
2.路径
- /a/b/c.html及a/b/c.html(在同一根目录下,绝对路径和相对路径都相同)
- index.html同于./index.html(同一根目录下)
3.伪协议
- javascrip:代码; (可以制作一个没有反应的a标签,空代码)
javascrip伪协议,javascrip:填写代码;
- mailto:邮箱
邮件联系YDZ
- tel:手机号
电话联系YDZ
- id
href=#xxx
HTML中a标签中href="#xxx",当点击后,页面会跳转到标签中id="xxx"的地方。 -
target
指定在哪个窗口打开超链接
target的取值:
- _blank
前往搜索
在新的页面打开链接
- _self
前往搜索
在当前页面打开链接
- _top
前往搜索
如果没有框架,跟_self效果一样,在当前的浏览器窗口打开超链接;
如果有框架就跟_self不一样,_self会在超链接所在的框架中打开超链接,而_top会在所在浏览器窗口(浏览器窗口包含了框架)打开连接
- _parent
target="_parent" ,属性作用使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
- 自己命名window.name
前往搜索
前往搜索
命令会新打开页面并且命名为“YDZ”,可以让某些链接同样在YDZ页面打开(例如上图baidu)
- 自己命名iframe.name
前往搜索
前往搜索
上例在一个页面又可以谷歌又可以百度
-
download
下载当前页面(多数浏览器不支持)
-
rel=noopener
用于解决被恶意利用安全漏洞。利用target="_blank"
打开新标签页面后,JS功能将会赋予新窗口一些权限来操作原Tab页,新页面的window对象上有一个属性opener,它指向的是前一个页面的window对象,恶意网站会利用window.opener.location.replace
来更改原网站URL
二、iframe标签
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。内嵌窗口。(现在很少用)
三、table标签
HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。
//table row
班级
//table head
姓名
第一名
高三八班
//table data
鱼大杂
第二名
高三八班
马大哈
第三名
高三八班
猴大雷
统计
3名八班学生
3名学生
观察上述实例与注释(table、thead、tbody、tfoot、tr、td、th)
相关样式
-
table-layout
table-layout CSS属性定义了用于布局表格单元格,行和列的算法。
取值:
大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。
使用 “fixed” 布局方式时,整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染,但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow
属性控制是否允许内容溢出。
-
border-collapse
border-collapse
CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。
取值:
合并(collapsed )模式下,表格中相邻单元格共享边框。在这种模式下,CSS属性border-style
的值 inset 表现为槽,值 outset 表现为脊。
分隔(separated)模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing
来确定的。
-
border-spacing
border-spacing
属性指定相邻单元格边框之间的距离(只适用于 边框分离模式 )。相当于 HTML 中的 cellspacing
属性,但是第二个可选的值可以用来设置不同于水平间距的垂直间距。
border-spacing
值也适用于表格的外层边框上,即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的(水平的或垂直的) 边框间距(border-spacing)和相应的(上,右,下或左)内边距之和。
该属性只适用于 border-collapse
值是 separate
的时候。
取值:
length
描述单元格之间的水平和垂直距离的一个
值。它只在单值语法下使用。
horizontal
描述相邻两列的单元格之间的水平距离的一个
值。它只在双值语法下使用。
vertical
描述相邻两行的单元格之间的垂直距离的一个
值。它只在双值语法下使用。
inherit
一个表示父元素的 border-spacing
的计算值的关键字,其父元素必须应用了border-spacing
。
四、img标签
HTML 元素将一份图像嵌入文档。它可以发出一个get请求,然后展示图片。
属性:
src 属性是必须的,它包含了你想嵌入的图片的文件路径。
alt 属性包含一条对图像的文本描述,这不是强制性的,但对可访问性而言,它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义。如果由于某种原因无法加载图像,普通浏览器也会在页面上显示alt 属性中的备用文本:例如,网络错误、内容被屏蔽或链接过期时。
其他的属性:
Referrer/CORS 控制,保证安全与隐私:详见 crossorigin
属性和 referrerpolicy
属性。
使用 width
、height
和 intrinsicsize
(不常使用) 设置 原始分辨率:这将设置图像应占用的空间,以确保图像被加载之前页面的布局是稳定的。
使用 sizes
和 srcset
设置响应式图像(亦可参考 元素和我们的响应式图像教程)。
事件
onload/onerror
可以在图片加载失败后用备用图片显示
响应式
max-width:100%
max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大
注:max-width
会覆盖width
设置, 但 min-width
设置会覆盖 max-width
。
img
上代码可以使手机用户浏览图片有更好的体验
注:box-sizing 属性可以被用来调整这些表现:
content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
五、form标签
HTML