《HTML常用标签》

劉学渣

已于 2022-03-15 15:53:44 修改

阅读量2.5k

点赞数

文章标签： html javascript vscode

于 2022-03-15 00:18:27 首次发布

本文链接：https://blog.csdn.net/zhaaaccc/article/details/123492054

版权

文章目录

一、a标签

作用：

跳转外部页面

跳转内部锚点

跳转到邮箱或电话等

href（超级引用）：超级链接

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://google.com">超链接</a>
</body>
</html>

小tip

不要双击打开html 打开方式如下：

✨方法一：

在vscode终端安装 yarn global add http-server
通过输入 http-server
出现链接按ctrl+单击
跳转后在网址输入要跳转的 html文件名

方法二：

在vscode终端安装 yarn global add parcel
直接在终端 parcel xxx.html
产生一个链接按ctrl+单击就是在浏览器中打开html

a标签href的取值

网址：

<a href="https://google.com">超链接1</a>
<a href="http://google.com">超链接2</a>
<a href="//google.com">超链接3</a>

https和http 以及都去掉的区别 http协议

https比http多一个s的含义是指的是Secure （安全），如果是http开头的网站，会有不安全的显示，如果是https开头的网站代表已经建立了安全连线，若需要输入个人资料信息，将会以加密的形式进行传输。

//google.com 是最高级网址可以自动选择是哪个网址。

路径

链接到不同目录的一个文件
<a href="/a/b/c.html">c.html</a>
<a href="a/b/c.html">c.html</a><!--这里有无/是相同含义-->
链接到同一目录的文件
<a href="index.html">index.html</a>
<a href="./index.html">index.html</a><!--这里有无./都是相同含义-->

注意：这里/a/b/c 的/ 不是根目录，而是相对于a.html，之前所有的路径都是基于文件的，而http协议里面的路径就不再是文件说法了，在这个浏览器的网址里其实是隐藏着http的。

这里其实是http://10.120.242.163:8080/a/b/c.html

并且如果我们开启了http服务，他的根目录就不是硬盘的根目录，而是在哪里开启了http服务哪里就是根目录，所以说a-href.html的根目录是 HTML-demo-02. 这也就解释了前面html文件为什么不能用双击打开，如果用双击打开，就相当于没有启动http服务，他的根目录就还是硬盘，就是以文件形式展示。

伪协议

<a href="javascript:alert(1);">javascript伪协议</a> 用来执行JavaScript命令 这里:; 不可以省略
<a href="javascript:;">javascript伪协议</a> 
若将:;中代码去掉，则这个标签没有意义

这里解释一下，为什么设置没有意义的Javascript标签？

如果我们直接不写，而是直接一个a标签，就会导致页面刷新，那么之前在页面上输入的东西将会消失，

<a href=""> javascript伪协议 </a>

而如果在a便签里面写一个# 则不会进行刷新而是会自动滚动到顶部。

<a href="#"> javascript伪协议 </a>

<p id=xxx>查看我</p>
<a href="#xxx"> 查看xxx </a> 查看xxx所在的行

<a href="mailto:liuxinyuucc@163.com"> 发邮件给欣宇 </a>

<a href="tel:18518103788"> 打电话给欣宇 </a>

target：指定在哪个窗口打开超链接

a标签target的取值

内置名字（_blank _self _top _parent,窗口名字，iframe名字）

✨<a href="https://google.com" target="_blank">google</a>空白页打开超链接
✨<a href="https://google.com" target="_self">google</a>在当前页面打开

✨<a href="https://google.com" target="_top">google</a>两个窗口时在最顶层打开页面
这里需要与iframe连用，iframe是通过在页面引入另一个页面。
<iframe src="a-traget-iframe.html" frameborder="0"></iframe>

为了明显一点，我们将a-traget-iframe文件设置鲜艳一些。

<body style="background: red;">
    我是iframe
    里面有一个a标签
    <a href="//google.com" target="_top">链接</a>
</body>

这样就是层级关系，外面包裹着红色里面。点击里面链接会变成白色窗口打开，因为最顶层的是白色窗口。（top意味着最顶层打开）

但是如果把_top 改成 _self 则其实就是应该在红色区域打开链接。

✨<a href="//google.com" target="_parent">parent</a>是在副级窗口打开

为了区别于top，这里再次引入iframe

新建文件是的a的target为_parent .

<body style="background: rgb(21, 255, 0);">
    我是iframe2
    <hr/>
    里面有一个a标签
    <a href="//google.com" target="_parent">parent</a>
</body>

我们在原来a-traget-iframe的基础上再次iframe引入刚建文件并且显示绿色

<iframe src="a-traget-iframe-2.html" ></iframe>

所以如果我们点开链接实际上是在红色窗口打开，因为是副级窗口

✨<a href="https://google.com" target="xxx">google</a>
    <a href="https://baidu.com" target="xxx">baidu</a>
如果有一个叫xxx的窗口，那么就在xxx里打开，如果没有xxx窗口就创建一个xxx窗口打开。

那么这就以为这如果你两个链接的target都是xxx，则在同一个窗口打开。

（可以重复利用同一窗口打开）

注意：如何查看这个窗口的名字？

在控制台，输入 window.name 就是这个窗口的名字

✨<body>可以设置iframe的名字，这样就可以实现嵌入式的跳转
    <a href="https://google.com" target="xxx">google</a>
    <a href="https://baidu.com" target="yyy">baidu</a>
    <hr>
    <iframe src="" name="xxx"></iframe>
    <hr>
    <iframe src="" name="yyy"></iframe>
</body> 
src 是source 的简写 一般接地址（网络地址，相对路径，绝对路径均可）

二、iframe 标签

iframe标签用来内嵌窗口

<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
<!--代码来自mdn-->

三、table标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
            <th>英语</th> 
            <th>翻译</th> <!--表头的一个单元格-->
            </tr> <!--table row 表格中一行-->
        </thead>
        <tbody>
            <tr>
            <td>hyper</td>
            <td>超级</td> <!--table data 表格数据 一个单元格-->
            </tr>
            <tr>
            <td>target</td>
            <td>目标</td> 
            </tr>
            <tr>
            <td>reference</td>
            <td>引用</td> 
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td> 
            </tr>
        </tfoot>
    </table>
</body>
</html>

有两个表头的情况下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
            <th></th>
            <th>小红</th>
            <th>小明</th>
            <th>小颖</th>
            </tr> <!--table row 表格中一行-->
        </thead>
        <tbody>
            <tr>
            <th>数学</th>
            <td>61</td>
            <td>91</td> 
            <td>85</td> <!--table data 表格数据-->
            </tr>
            <tr>
            <th>语文</th>
            <td>79</td>
            <td>82</td> 
            <td>92</td> 
            </tr>
            <tr>
            <th>英语</th>
            <td>100</td>
            <td>97</td> 
            <td>87</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>200</td>
                <td>200</td> 
                <td>200</td> 
            </tr>
        </tfoot>
    </table>
</body>
</html>

注意：

1、当我们在写代码时候不写，而直接写 / 时，会直接变成/里面的内容。

2、三者标签顺序无关，一定是按照头中脚来排列的。

表格相关样式：

table-layout:

<style>
    table{table-layout: auto; }
</style>        
大多数浏览器采用自动表格布局算法对表格布局，自动计算每一列和每一横排的宽和高，宽度取决于其包含等的内容。

<style>
    table{table-layout: fixed; }
</style>  
表格狠人列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定，在当前列中，该单元格所在行之后的行并不会影响整个列宽。尽量进行平均分布。

border-spacing

<style>
        table{
            width: 600px; <!--宽度-->
            table-layout: auto;
            border-spacing: 10px;  <!---->
        }
        th,td{
            border: 1px solid blue;
        
        }
</style>
是指相邻单元格边框之间的距离

border-collapse

<style>
        table{
            width: 600px;
            table-layout: auto;
            border-collapse: collapse; 
            border-spacing: 0;

        }
        th,td{
            border: 1px solid blue;
        }
</style>
是指合并相邻单元格边框，通常情况下与border-spacing:0; 连用

四、img标签

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

属性：

src：图片的链接，（可以是绝对路径，也可以是相对路径，或者网址）

alt：可选的，替换的如果图片加载失败，所显示的东西

height/width：图片的高和宽，这里单位只支持像素，如果你只设置宽度，高度会自适应。

<body>
    <img width=400 height=600 src="dog.png" alt="一只狗狗">
</body>

事件

onload/onerror 用来监督图片是否加载成功成功则为onload 不成功为onerror，可以在图片失败的时候进行挽救。

<body>
    <img id="xxx" width=400 src="dog.png" alt="一只狗狗">
<script>
    xxx.onload = function(){
        console.log('图片加载成功')
    }
    xxx.onerror= function(){
        console.log('图片加载失败')
    }
</script>
</body>

在控制台可以查看这一信息，在网页中不会显示出来。如何挽救？

找一张备用图，在提示加载失败后面添加src属性

<body>
    <img id="xxx" width=400 src="dog.png" alt="一只狗狗">
<script>
    xxx.onload = function(){
        console.log('图片加载成功')
    }
    xxx.onerror= function(){
        console.log('图片加载失败')
    xxx.src = "/404.png"
    }
</script>
</body>  <!--这样如果成功显示则会出来，图片加载成功，如果失败则会显示图片加载失败，并且显示备用图-->

响应式：设置图片宽度可以满足手机要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0 padding:0 box-sizing: border-box
        }
        img{

            max-width: 100%;  ✨<!--就是设置宽度一直符合页面宽度-->
        }
    </style>
</head>
<body>
    <img id="xxx"  src="dog.png" alt="一只狗狗">
<script>
    xxx.onload = function(){
        console.log('图片加载成功')
    }
    xxx.onerror= function(){
        console.log('图片加载失败')
    xxx.src = "/404.png"
    }
</script>
</body>
</html>

五、form标签

表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。必须有一个type="submit"这个按钮

表单标签作用：发一个get/post请求，刷新页面。

属性：

action：用于向web服务器提交表单。

<body>
    <form action="/xxx"> <!--向这个地址提交表单，就会请求到哪个页面-->
        ****************************************
         <form action="/xxx" method="POST"> <!--就会以post的形式提交表单-->
        <input type="text"> <!--输入txt 这个类型-->
        <input type="submit"><!--设置一个提交按钮-->
</body>

autocomplete：是否自动填充

用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。可能的值有：

off：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见自动填充属性和登录）
on：浏览器可自动补全条目

 <body>
    <form action="/xxx" method="POST" autocomplete="on">
        <input name=username <!--推荐建议用户名-->
        type="text">
        <input type="submit">
</body> 
     打开自动填充，用户名或者密码

method：浏览器使用这种 HTTP 方式来提交表单。

target：表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：

_self：默认值。在相同浏览上下文中加载。
_blank：在新的未命名的浏览上下文中加载。
_parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。

_top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。

<body>
    <form action="/xxx" method="POST" autocomplete="on" target="a"> <!--在a里打开-->
        <input name=username
        type="text">
        <input type="submit"> <!--如果使用submit 但是在网页里显示提交，是因为网页可以自动识别你能看懂的文字，如果是英语，则直接显示submit-->
    </form>
    <iframe name ="a" src="a-traget-iframe.html"> </iframe>   
    <!--a 是一个在此页面上的另外一个页面 iframe是插入另一个页面窗口的意思-->
</body>

可以对<input type="submit">进行更改，<input type="submit" value="发送">在后面加入一个 value，就可以实现对其显示的更改。

或者加入一个<button> 也可以实现，二者选其一。

🤡<input type="submit">与<button type="submit"></button>区别：input里面不可以再加入其他内容，但是button 可以加入其他内容，button里面可以含有样式标签，比如<strong> 可以使得字体加粗

button里面如果不写 type=submit则就会默认是submit

事件：

onsubmit：当用户点提交的时候就会触发这个事件

六、input标签是自闭合标签

用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件

属性：

类型 type

txt：<input type="txt"/>可输入文本类型
color：<input type="color"/>可以选择颜色
password：<input type="password"/> 可以输入密码，不展示具体内容，保护密码
radio：单选

<input type="radio"/>男 <input type="radio"/> 女 
注意：如果单纯这样设置会导致，都可以进行选择，而不是单选。
让这两个radio拥有同一个name，可以实现二选一
<input name=gender type="radio"/>男 <input name=gender type="radio"/>女

checkbox：可以实现多选

<input type="checkbox"/>唱 
<input type="checkbox"/>跳 
<input type="checkbox"/>rap 
<input type="checkbox"/>表演 
如何让这几个选项是一组的，就是一类的，在input加上name属性 就可以实现

file：上传文件

<input type="file"/> 只能上传一个文件
<input type="file" multiple/> 可以上传多个文件

hidden：看不见的input，常用做机器输入，给js自动填入字符串和id信息

<input type="hidden"/>

事件：

onchange：当用户输入改变的时候，会触发事件

onfocus：当把鼠标集中到这个选项的时候，就会触发事件

onblur：当用户鼠标从选项中出来的时候，就会触发事件

验证器：

**required:**就是要求客户必须填写此表单，否则无法提交。

<input type="text" required/> 意味着客户必须填写text 才能提交。

七、其他标签

textarea：用户可输入内容 style 是css 可以对textarea进行修饰

<textarea style="resize: none; width: 52%; height: 300px;"></textarea> 这里的resize：none 就是指不可以对输入框进行拖动。

select：就是可以一框进行选择

<select>
        <option value="">-请选择-</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
</select>

label：表示用户界面中某个元素的说明。

将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

<label for="username">Click me</label>
<input type="text" id="username">

另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在：

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

注意事项：

一般不监听input的click事件

form里面的input要有name

form里要放一个type=submit 才能触发submit 事件

一句话

多看多查mdn，里面有很全的解释。

劉学渣

关注

0
点赞
踩
0

收藏

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

文章目录一、a标签二、iframe 标签三、table标签四、img标签五、form标签六、input标签是自闭合标签七、其他标签一句话一、a标签作用：跳转外部页面跳转内部锚点跳转到邮箱或电话等href（超级引用）：超级链接<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
复制链接

扫一扫