HTML常用标签

最新推荐文章于 2024-07-25 11:26:35 发布

一生注定学霸命

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量161

点赞数

分类专栏： HTML与CSS基础文章标签： html

本文链接：https://blog.csdn.net/qq_40282016/article/details/112644488

版权

HTML与CSS基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

本章重点：

a标签
img标签
table标签
form标签
input标签

1. a 标签的用法

1.1 属性

href 超链接
<a href="//google.com">超链接</a>
a的href取值：
a.网址：一般选用 //google.com（会自动继承浏览器的http，然后不断跳转到正确的网站，会自动适配选择http还是https，不会错误。）
b.路径：
1. /a/b/c :这里选择的绝对路径是相对于当前文件所在的目录
2. a/b/c :相对路径
3. 直接写文件名：index.html
c.伪协议
1. javascipt代码：点击后什么都不做，页面也不会刷新.
2. ID:跳转到页面指定位置
3. mailto：邮箱
4. tel：电话

<a href="//google.com">超链接</a>
<a href="a/b/index.html">跳转到目录内文件</a>
<a href="./index.html">跳转到文件</a>
<a href="javascript:;">点击无反应</a>
<a href="#xxx">跳转到指定位置</a><!--需在指定位置写下相应 id="xxx"-->
<a href="mailto:liuzhiyan138@163.com">发邮件给用户</a><!--会自动呼起邮件-->
<a href="tel:12345678">打电话给用户</a><!--自动呼起通话界面并填充-->

超链接网页预览：
法一：http-server . -c-1（网址后面加上 /文件名）缩写为 hs -c-1
法二：parcel a-href.html(文件名)

target 窗口，在哪个窗口打开连接
<a href="https://google.com target=""_blank">超链接</a>

a的target取值：
1 .内置名字
_blank ：新页面打开
_top ：最顶层页面打开
_parent ：多个iframe嵌套时，在上一级窗口打开
_self ：默认值，在当前页面打开
2 .程序员命名
window的name：第二次打开的链接会覆盖第一个链接，均在命名的窗口打开。
iframe的name：给iframe命名，链接在对应的frame上打开。

download：下载网页，没用
rel=noopener：了解

<a href="//google.com" target="_blank">新页面打开</a>
<a href="//google.com" target="xxx">在窗口名为xxx的打开</a>
<!--有就直接打开，没有就创建一个窗口命名为xxx-->

1.2 作用

跳转到外部页面
跳转到内部锚点：id
跳转到邮箱或者电话等：mailto、tel

2. img 标签的用法

<img src="xz.png" alt="一个大帅比"/>

作用
发出一个get请求，展示一张图片
属性
1.alt：图片加载不出来时，显示的文字
2.height和width(不是css，就是img的属性)：只写其中一个，另一个参数会自适应，当同时固定宽高时，注意不能让图片变形。
<img width="400" src="xz.png" alt="一个大帅比"/>
事件
onload/onerror：监听图片是否加载成功，可以在图片加载失败的时候进行挽救。

<body>
    <img id="xxx" width="400" src="xz.png" alt="一个大帅比"/>
    <script>
        xxx.onload = function(){
            console.log("图片加载成功");
        };
        xxx.onerror = function(){
            console.log("图片加载失败");
            xxx.src = "/404.png";
        };
    </script>
</body>

响应式：图片大小随着窗口的改变自适应大小
在head中添加：

<style>
*{
margin 0;
padding 0;
box-sizing : border-box;
};
img{
max-width: 100%;
};

3. table 标签的用法

3.1 table中三个常用标签
thead 表头、 tbody表身、tfoot表层

3.2 其他标签

tr：table里的一行，table row
th：表头，table head
td：数据，table data

    <table>
        <tr><th>英语</th><th>翻译</th></tr>
        <tr><th>80</th><th>90</th></tr>
        <tr><th>70</th><th>60</th></tr>
    </table>

3.3两个表头的表

<table>
    <thead>
        <tr>
            <th></th>
            <th>小红</th>
            <th>小明</th>
            <th>小李</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>数学</th>
            <td>80</td>
            <td>70</td>
            <td>60</td>
        </tr>
    </tbody>
    </table>
    <!--还是按照一行一行的写下来，只是第二行时注意第一个是th，后面是td-->

3.4 相关样式

table-layout
auto：自动计算每一行尺寸大小，字越多越宽
fixd：尽量平均元素的宽度

    <style>
        table{
            width: 600px;
            table-layout: auto;
        }
    </style>

table-spacing和table-collapse：表格外边框线

    <style>
        table{
            width: 600px;
            table-layout: auto;
            border-spacing: 0px;
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid blue;
        }
    </style>
    <!--其中collapse是合并，spacing是表格间隙-->
    <!--td,th外边框-->

4. form标签表单

作用
发get或post请求，然后刷新页面
属性
action：相当于img的source，往哪里发送，请求哪个页面
method：控制是get还是post
autocomplete：是否自动填充，会在输入框建议用户名
target：提交到哪个页面
事件
一个表单必须含有一个type=“submit” 这个表单才可以提交（其中button不写type时，系统会默认为提交）
input submit和botton submit有什么区别：
input里面不能有其他内容，而button里面可以有任何东西（例图片）。

<body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
        <input name="username" type="text">
        <input type="submit">
        <button type="submit">
            <strong>提交</strong>
            <img width="100" src="xz.png" alt="">
        </button>
    </form>
</body>

5. input标签

作用
属性
事件
验证器
HTML5自带验证器
注意事项
一般不监听input的click事件
form里面的input要有name
form里面要放一个 type=submit 才能出发submit事件

<body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
        <input name="username" type="text">
        <input type="submit">
        <input type="color">
        <hr>
        <input type="password"><!--类似密码的小圆点-->
        <hr>
        <input name="gender" type="radio">男
        <input name="gender" type="radio">女<!--单选，命名为同一个，则只选一个-->
        <hr>
        <input name="hobby" type="checkbox">唱歌
        <input name="hobby" type="checkbox">跳舞<!--多选，命名为同一个，则表示一个组合-->
        <hr>
        <input type="file"><!--选择文件，是一个整体，multiple表示可以多选，去掉则只能选一个-->
        <hr>
        隐藏按钮：<input type="hidden"><!--用来给js自动填写id的-->
        <hr>
        <textarea style="resize: none; width: 50%; height: 300px;"></textarea><!--多行文本输入框，resize：none表示不能拖动大小-->
        <hr>
        <select>
            <option value="">-请选择-</option>
            <option value="1">星期一</option>
            <option value="2">星期二</option>
        </select><!--value是真正的值，后面是给用户看的值-->
    </form>
</body>

一生注定学霸命

关注

0
点赞
踩
0

收藏

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

1. a 标签的用法1.1 属性href 超链接<a href="https://google.com">超链接</a>a的href取值：1 .网址：一般选用 //google.com2 .路径3 .伪协议target 打开窗口<a href="https://google.com target=""_blank">超链接</a>a的target取值：1 .内置名字_blank ：新页面打开_top ：最顶层页面打开_pare
复制链接

扫一扫