likes
comments
collection
share

HTML常用标签

作者站长头像
站长
· 阅读数 32

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范例

HTML常用标签

    <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也会在浏览器自动纠错

两个表头如何实现

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来做。