HTML入门笔记2：HTML常用标签

HTML入门笔记2：HTML常用标签

a标签的基础知识

1.作用

跳转到外部页面
跳转到内部锚点
跳转到邮箱或者电话

2. 属性

• href ：是跳转的地址，可以填写网址或者路径或者页面的别的元素的名字

下为跳转到谷歌

<a href="//google.com">超链接</a>

路径

<a href="/a/b/c.html">c.html</a>

别的元素的名字：

<p id="xxx">19</p>
<a href="#xxx">xxx</a>

点击则会跳转到id为xxx的19这个地方

• target：哪个页面进行跳转。

_blank：在新窗口打开

<a href="//google.com" target="_blank">超链接</a>

self：在本窗口打开

<a href="//google.com" target="_blank">超链接</a>

parent：在父级窗口打开
top：在顶部窗口打开

若不填则默认在本窗口打开

• download：下载该页面

  不是所有浏览器都支持这个功能

ifram标签

内嵌窗口，现在已经用的很少了

table标签

即为表格。其中相关标签有

thead:表的上部分

tbody:表的中部分

tfoot : 表的下部分

tr: table row即为行

td: table data即数据

th: table head即表头

其中thead、tbody、tfoot这三个标签无论代码顺序如何，在页面上总是以上中下来排列的

img标签

即为图片标签

1. 作用

发出get请求，展示一张图片

2. 属性

alt：可替换的

如果该图片加载失败，则会加载alt里面的东西

height：高

定制图片高度，若只填了高度则宽度会自适应

width：宽

定制图片宽度，若只填了宽度则高度会自适应

若宽高两者都填写则图片会拉伸

src：图片地址

3. 事件

onload：监听图片加载成功时调用

onerror：监听图片加载失败时调用

4. 响应式

max-width:100%
图片自适应页面宽度。若改成height则为自适应页面高度

form标签

1. 作用

发get或者post请求，然后刷新页面

2. 属性

action:请求对象

autocomplete:自动补全

method:控制用get还是post来请求

默认为get

target:哪个页面来进行请求动作

规则跟a标签的target相同

3. 事件

onsubmit:可提交

若不写则默认存在。若强行改变则无法提交请求

注意必须要在form里面加入一个type=submit才能触发submit事件

input标签

1. 作用

让用户输入内容

2. 属性

类型属性：type

• button:按钮
• checkbox：多选框
• radio：单选框
• email:邮箱
• file:文件。默认只能选择一个文件，弱项选择多个文件则需要再写一个 multiple
• hidden:隐藏
• number:只能输入数字
• password:密码。用户输入的内容会变成小圆圈
• textarea:可换行的输入框

• select:下拉选择框

<select>
	<option value="1">星期一</option>
	<option value="2">星期二</option>
</select>

若option的value为空的话，则没有选择的默认值会变成那个option的内容

事件

• onchange:当用户输入改变的时候就会触发
• onfocus:鼠标移入
• onblur:鼠标移出