html重点标签详解

买米当卡思思酱

已于 2022-08-25 15:17:01 修改

阅读量430

点赞数

文章标签： html 前端数据库

于 2022-08-04 05:59:35 首次发布

本文链接：https://blog.csdn.net/yulingpan123/article/details/126152114

版权

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.事件