HTML常用标签

用户4265708537203
213 阅读2分钟

前言

不要双击打开html

  1. 使用http-server打开页面

    $ http-server . -c-1

  2. 使用parcel

    $ parcel xxx.html

标签

一、a标签

1. 属性

①href 超链接

②target 页面跳转方式

③download 下载网页

④rel=nonopener用来防止一个bug

2. 作用

① 跳转到外部页面

② 跳转到内部锚点

③ 跳转到邮箱或电话等

3.a的href的取值

1> 网址
 http://google.com
 https://google.com
 //google.com    //无协议网址，尽量采用这种写法

eg.

<a href="//google.com" target="_blank">该链接在新窗口打开</a>
2> 路径

  • /a/b/c以及a/b/c /a/b/c是绝对路径，用http=server打开时，根目录是http的根目录； a/b/c.html 是相对路径，表示在当前目录下找

  • index.html 和./index.html 两者都是在当前目录下的文件

3> 伪协议

① javascript:代码；

<a href="javascript:alert(1);">执行js后面的内容</a>
<a href="javascript:;">点击链接页面没有变化</a>

② mailto: 邮箱

<a href="mailto:xxxxxx@qq.com">发邮箱给XXX</a>

③ tel: 手机号

<a href="tel:12323455511">打电话给XXX</a>

④ id：指向内部锚点

   <div>1</div>
   <div id="xxx">2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   < a href="#xxx">点击链接时跳到2处</a>

4.target取值

1> 内置名字
  • _blank 在新窗口中打开
  • _top 在顶级窗口中打开
  • _parent 在父母标签（上一级标签）中打开
  • _self 默认，在当前页面中打开
2> 程序员命名
  • window的nametarget="xxx",但会被一直覆盖
  • iframe的name可以实现goog-bai网站

二、table标签

1. 相关标签

thead tbody tfoot

tr td th

2. 相关样式

  • table-layout

    auto:根据内容设置宽度

    fixed: 宽度平均，与内容多少无关

  • border-collapse: 合并

  • border-spacing : border和border之间的距离

代码

<style>
    table {
       width: 600px;
       table-layout: auto;
       border-collapse: collapse;
       border-spacing: 0;
    }
    td,
    th {
        border: 1px solid red;
    }
 <style>
 
 
 <body>
     <thead>
         <tr>
             <th></th>
             <th>小红</th>
             <th>小明</th>
             <th>小方</th>
          </tr> 
      </head>
      <tbody>
         <tr>
            <th>数学</th>
            <td>23</td>   
            <td>23</td>
            <td>23</td>
          </tr>
           <tr>
            <th>数学</th>
            <td>23</td>   
            <td>23</td>
            <td>23</td>
          </tr>
           <tr>
            <th>数学</th>
            <td>23</td>   
            <td>23</td>
            <td>23</td>
          </tr>
      </tbody>
      <tfoot>
         <tr>
            <th>总分</th>
            <td>123</td>
            <td>123</td>
            <td>123</td>
         </tr>
      </tfoot>
  </table>

代码效果图

图片效果

三、image标签

1. 作用

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

2.属性

  • alt：图片显示失败时显示的内容
  • width/height: 设置图片的宽度和高度
  • src: 图片地址

3.事件

onload/onerror：监听图片是否加载成功

4.响应式

max-width:100%

代码

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

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

四、form标签

1.作用

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

2.属性

  • action: 控制请求哪个页面
  • autocpmplete: 是否自动填充（输入框会显示历史记录）,值on/off
  • method: 属性控制由get或post来请求
  • target: 把页面变成action指示的页面

代码

<form action="/xxx" method="POST" autocomplete="on" target="_blank">
  <input type="text" >
  <input type="submit" >
</form>

3.事件

onsubmit: 当用户提交时触发

代码

<input type="submit" value="搞起">

<button type="submit">
    <strong>搞起</strong>
    <img src="dog.png" width="100" alt="">
</button>
  • 两者区别是input里不能有其他标签，只能有纯文本，而button可以再添加其他标签
  • 一个表单必须有一个type="submit"，input或button，否则不能触发submit事件

五、input标签

1.作用

让用户输入内容

2.属性

① type:

  • text:文本

  • color:颜色

  • password：密码

  • radio：单选，同一类型选项的拥有同一个name

<input name="gender" type="radio">男
<input name="gender" type="radio">女
  • checkout 多选，拥有同一个name为一组
 <input type="checkbox" name="hobby"> 唱
 <input type="checkbox" name="hobby"> 跳
 <input type="checkbox" name="hobby"> Rap
  • file 上传文件
<input type="file" multiple>  //multiple表示可以多选文件
  • hidden隐藏（一般给机器输入） ② 其他标签
  • textarea:多行文本
 <textarea style="resize: none; width: 50%; height: 300px;" ></textarea>
  • select+option :下拉选框
<select>
     <option value="">-请选择-</option>
     <option value="1">星期一</option>
     <option value="2">星期二</option>
 </select>
  • label

3.事件

  • onchange: 用户发生改变时触发
  • onfocus: 集中在身上
  • onblur: 移出

4.验证器

HTML5新增功能

required自带验证

六、注意

  • 一般不监听input的click事件
  • form里面的input要有name
  • form 里要放一个type=submit才能触发submit事件

七、其他

  • video
  • audio
  • canvas
  • svg

注意标签的兼容性

avatar
文章
阅读
粉丝