HTML常用标签

最新推荐文章于 2024-07-13 15:41:17 发布

坐在马路边的大男孩

最新推荐文章于 2024-07-13 15:41:17 发布

阅读量108

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Skfeng520/article/details/111385678

版权

这里写自定义目录标题

a标签
img标签
iframe标签
table标签
form标签
input标签
button标签
textare标签
select标签
其他标签

a标签

作用

可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接

常用属性

href 属性：超链接指向的 URL 或其片段

值	描述
http://google.com	打开 http 协议的网址，协议错误可能无法打开
https://google.com	打开 https 协议的网址，协议错误可能无法打开
//google.com	协议自动继承，推荐使用该方法
路径	链接本地路径并打开
JavaScript:js代码；	点击执行JavaScript代码
ID值	自动跳转到 ID 值的位置
mailto:邮件地址	发送邮件到该邮箱
tel:电话号码	点击手机会自动打开拨号界面

    <!-- 点击跳转到百度 -->
    <a href="http://baidu.com">跳转到百度</a>

    <!-- 点击跳转到百度 -->
    <a href="https://baidu.com">跳转到百度</a>

    <!-- 点击跳转到百度 -->
    <a href="//baidu.com">跳转到百度</a>


    <a href="./1.jpg">点击查看图片</a>

    <!-- 点击执行JavaScript代码 -->
    <a href="JavaScript:alert('1');">点击弹窗</a>

    <!-- 快速定位到页面中id为 v 的元素 -->
    <a href="#v">点击跳转</a>

    <!-- 发送邮件,自动填写收件人地址 -->
    <a href="mailto:123456@qq.com">发送邮件</a>

    <!-- 手机页面显示拨号界面，并且把号码自动输入 -->
    <a href="tel:13800138000">点击跳转到拨号界面</a>

target 属性：链接的的打开方式

值描述
_blank 新页面打开
_top 在顶层窗口打开（如果没有，则与self一致）
_parent 在父级窗口打开（如果没有，则与self一致）
_self 当前页面打开（默认值）
download：下载网页（基本作废）

值	描述
_blank	新页面打开
_top	在顶层窗口打开（如果没有，则与self一致）
_parent	在父级窗口打开（如果没有，则与self一致）
_self	当前页面打开（默认值）

img标签

作用

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

img属性

属性	值	描述
src	URL	图片路径(必要参数)
alt	text	图片无法显示时候显示的文字
width	px	图片宽度（只设置宽度，高度等比缩放）
height	px	图片高度（只设置高度，宽度等比缩放）

<img src="./1.jpg" alt="图片1" width=400px>

注意事项

同时设置width 和 height 时，必须按照比例，否则会导致图片变形

常见img事件

onload：图片加载成功
onerror：图片加载失败

<img src="./logo.jpg" id="xxx" >

<script>
    xxx.onload = function(){
        console.log("图片加载成功");
    };
    xxx.onerror = function(){
        console.log("图片加载失败");
    };
</script>

img响应式

max-width 100% 该属性值会对元素的宽度设置一个最高限制，适用于多尺寸设备完整显示图像。

<style>
img {
max-width: 100%;
    }
</style>

<body>
   <img src="./1.jpg" > 
</body>

iframe标签

内嵌窗口，现在基本不用

table标签

创建一个表格

组成标签

区域划分

<thead></thead>：表头标签
<tbody></tbody>：表格主体(不可省略)
<tfoot></tfoot>：表格底部

内容书写

<tr></tr>：表示一行
<th></th>：表头单元格，文字加粗并居中
<td></td>：普通单元格

<table>
    <thead>
        <!-- 一个tr表示一行 -->
        <tr>
            <th>第一行第一列</th>
            <th>第一行第二列</th>
            <th>第一行第三列</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
    </tbody>
    <tfooter>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </tfooter>
</table>

table属性

属性	值	描述
table-layout	auto	列宽：根据单元格文字自动匹配
	fixed	列宽：等宽显示
border-spacing	px	单元格之间的间距
border-collapse	collapse	边框合并

form标签

作用

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

form属性

属性	值	描述
action	URL	请求的页面地址
method	POST	post请求
method	GET	get请求
autocomplete	on	开启自动建议填充内容
autocomplete	off	关闭自动建议填充内容
target	_self	在当前页面加载（默认值）
target	_blank	在新的窗口加载
target	_parent	在父级窗口打开（如果没有，则与self一致）
target	_top	在顶层窗口打开（如果没有，则与_self一致）

input标签

input 控件

属性	值	说明
type	“text”	单行文本框
type	password	密码框
type	checkbox	复选框
type	radio	单选框，必须添加name属性才生效
type	file	上传文件（单文件选择），添加属性 multiple 可以多文件选择，无值。添加accept可限制上传文件类型
type	submit	提交按钮
type	reset	重置按钮
type	image	图形提交按钮
type	button	普通按钮
checked	checked	默认选中
type	hidden	隐藏表单

常见事件

onchange：当用户输入改变的时候触发
onfocus：鼠标集中到上面的时候触发
onblur：鼠标离开的时候触发

button标签

按钮标签

type属性

属性	值	描述
type	submit	提交按钮（默认值）
	button	普通按钮

input的提交按钮和 button的提交按钮的区别

button里面可以有其他标签，input只能在value设置纯文本内容

textare标签

多行文本输入，默认用户可以拖拽大小，通过resize:none来禁用拖拽功能

<textarea style="resize:none;width:50%;height:300px"></textarea>

select标签

下拉选择框
option内容是文本内容，只是提供给用户看
value的值是真正的值，操作时候用到

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

其他标签

video：视频标签
audio：音频标签
canvas：绘画标签（有兼容性问题）
svg

坐在马路边的大男孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML常用标签

这里写自定义目录标题a标签img标签iframe标签table标签form标签input标签button标签textare标签select标签其他标签a标签作用可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接常用属性href 属性：超链接指向的 URL 或其片段值描述http://google.com打开 http 协议的网址，协议错误可能无法打开https://google.com打开 https 协议的网址，协议错误
复制链接

扫一扫