关于html5:HTML常用标签

a标签

a标签的属性

1.herf

a链接的地址,取值:

  1. 网址
    举荐应用//www.baidu.com 这一种写法,放进浏览器会主动补全
  2. 门路

    • 绝对路径:/a/b/c,
    • 相对路径:index.html和./index.html

    3.伪协定
    利用场景:心愿点击a标签之后什么也不做,页面不刷新也不返回到顶部
    具体用法:`
    这就相当于执行一段没有意义的,只有分号的js代码

  3. id: href=#id名,能够跳转到id名为Id的标签
    <p id="xxxx"></p>, <a href="#xxx"></a>就能够定位到这个p标签
2.target
  • 决定是在本页面还是新开一个页面关上链接
  • 零碎自带的取值:

    1.  `target="_blank"`  关上新页面
    2. `target="_self"`  在以后页面关上
    3. `target="_top"`  顶级窗口关上,最上层的iframe
    4. `target="_parent"`  在父级页面关上, 3和4实用于有Iframe内嵌窗口的状况
  • 也能够程序员本人命名target="xxx"与iframe 标签的name对应
  • 没有iframe的话,target="xxx"就会关上一个window.name为xxx的标签(浏览器控制台输出window.name能力看到名字),如果曾经存在就间接笼罩。

a标签的作用

  • 跳转到内部页面
  • 跳转到外部锚点
  • 跳转到邮箱或电话

img

作用:
收回GET申请,展现图片

属性

  1. src:=”地址 “
  2. alt=”提醒文字” 如果图裂了,无奈加载,会显示这个alt属性中的文字,提醒用户这个图片是什么
  3. width 如果只写宽度,高度会自适应
  4. height 如果只写高度,宽度会自适应
    一个合格的前端不能让图变形!所以就只写宽度或者高度

事件
onload 加载胜利
onerror 加载失败

响应式
要害就是`max-width: 100%;
这样图片就能够自适应不同的屏幕大小

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

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

表格table

  • tr 是 table row 的缩写
  • th 是 table head
  • td 是 table data

table范例

    <table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>超级</td>
            </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>

有些人不写<thead> <tbody><tfoot>,或者程序搞错了, html也会在浏览器主动纠错

两个表头如何实现

如图所示,这里有两个表头,别离是小红小明小颖这一行和 数学语文英语这一列

表头都用`<th></th>

数据都用`<td></td>

    <table>
        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小明</th>
                <th>小强</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>79</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>100</td>
                <td>91</td>
                <td>86</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>200</td>
                <td>200</td>
                <td>200</td>
            </tr>
        </tfoot>
    </table>

table的款式

table-layout:

  • table-layout: auto; auto示意依据内容来计算宽度
  • table-layout: fixed; fixed示意定宽,尽可能地让宽度均匀

border-collapseborder-spacing用来调整表格Border的距离
个别会设置为:

<style>
  table {
     table-layout: auto;
     border-collapse: collapse;
     border-spacing: 0;
  }
</style>

input标签

JS事件:

  • onchange 用户输出扭转的时候
  • onblur 用鼠标从输出界面进去
  • onfocus 鼠标集中到下面
属性

type的取值:

  • text 输出文本
  • password 输出明码
  • radio 单选
    怎么样实现两个radio类型的Input二选一
    让这两个Input有雷同的name即可
    比方,咱们想实现男女性别二选一

     <input type="radio" name="gender"> 男
     <input type="radio" name="gender"> 女
       
  • checkbox 多选
    同样的,也须要给同类型的多选框写上雷同的Name

    <input type="checkbox" name="hobby" id="">唱
    <input type="checkbox" name="hobby" id="">跳
    <input type="checkbox" name="hobby" id="">rap
    <input type="checkbox" name="hobby" id="">篮球
    
  • file 上传文件
    上传一个文件 `<input type=”file”>
    上传多个文件 `<input type=”file” multiple>
  • hidden
    用于给js主动填写id、字符串之类的货色
  • textarea 文本框
    须要文本框不能自在拖动,固定大小
    `<textarea style=”resize:none; width:50%; height:300px;”></textarea>
  • select 抉择

    <select name="week" id="">
    <option value="">- 请抉择 -</option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
    <option value="3">星期三</option>
    </select>
    

注意事项

  1. 个别不监听input的click事件
  2. form里的input要有name
  3. form里必须有一个type=submit的input或者button,能力触发submit事件

一些感触

  • HTML+CSS+JS是前端的三大支柱,从入门的第一天就反复一直的听到这句话,随着学习深刻,越来越能领会到为什么说“HTML=构造,CSS=款式,JS=行为”。
  • HTML提供了很好的web网页架构,然而其标签内置的属性格调繁多,操作繁冗,而且与css独特应用易使得代码可读性变差,款式重叠,给前期批改造成很大累赘,所以HTML尽量只用来进行网站构造的搭建,而对于外观的丑化交由css和js来做。

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据