HTML常用标签

Annabelle134
153 阅读4分钟
  • a 标签的用法
  • img 标签的用法
  • table 标签的用法
  • form 标签的用法
  • input 标签的用法
  • 其他标签

一、 a 标签的用法

a标签是可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL 的超链接；属性包括：href、target、download`rel=noopener。

1、 href的取值（hyper reference）

    <a href="https://baidu.com">百度</a>
  • 路径：①/a/b/c以及a/b/c ②index.html以及./index.html
    <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>
  • 伪协议：①javascript：代码; ②mailto:邮箱 ③tel:手机号
    <a href="javascript:alert(1);">javascript伪协议</a>
    下面用Javascript伪协议做一个点击之后没有动作的a标签，也就是说点击之后页面没有任何反应
    <a href="javascript:;">空的伪协议</a>

    <a href="mailto:1235432112@qq.com">发邮件给朋友</a>
    <a href="tel:13443212345">打电话给我</a>
  • id: ①href=#xxx
    <p>1</p>    
    <p id="xxx">2</p>  
    <p>3</p>
    <p>4</p>    
    <p>5</p>    
    <p>6</p>
    <p>7</p>    
    <p>8</p>    
    <p>9</p    
    <p>10</p>
    <a href="#xxx">查看xxx</a>

2、 target的取值

target指定在何处显示链接的资源：取值包括：_self 、_blank、_top 、_parent

  • _self （默认值，点击链接在当前页打开）
    <a href="https://qq.com" target="_self">腾讯</a>
  • _blank （点击链接在新窗口打开）
    <a href="https://baidu.com" target="_blank">百度</a>
  • _top（有两个窗口才有作用，在顶级窗口打开）
    <a href="https://sougou.com" target="_top">搜狗</a>
 <div>
        <iframe width="800" 
                high="800"
                src="a-target-iframe.html" frameborder="0">
        </iframe>
    </div>
  • _parent （在当前链接所在的iframe上一层打开）
    <a href="//baidu.com" target="_parent">百度</a>

3、 download

此属性指示浏览器下载URL而不是导航到它，因此将提示用户将其保存为本地文件。

<a href="http://www.xxx.com/xxx.exe" download>百度一下</a>

二、 img标签的用法

img标签用来展示图片

属性：alt、width、height、src

  • alt定义描述图像的替换文本。如果图像的URL是错误的、该图像不在支持的格式列表中、或者如果图像还没有被下载，用户将看到这个显示。
<img src="狗子.jpg" alt="图片加载失败" />
  • widthhight定义图像的宽高，如果只指定了一个值，则另一个会根据原始图像进行赋值。
  • src图像的 URL，这个属性对img元素来说是必需的。

img图片如何实现响应式

max-width 100%该属性值会对元素的宽度设置一个最高限制，适用于多尺寸设备完整显示图像。

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

三、 table标签

table元素表示表格数据

相关的标签：table、thead、tbody、tfoot、tr、td、th

常见的样式：

  • table-layout="auto" 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
  • table-layout="fixed" 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。
  • border-collapse属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
  • border-spacing属性指定相邻单元格边框之间的距离（只适用于边框分离模式 ）。相当于 HTML 中的cellspacing属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

一个完整的table代码：

<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>98</td>   <td>76</td>    <td>70</td>
            <tr>
            <tr>
                <th>英语</th>   <td>57</td>   <td>96</td>    <td>93</td>
            <tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>   <td>289</td>  <td>784</td>   <td>199</td>
            </tr>
        </tfoot>
    </table>

四、 form标签

1、 作用：发get或post请求，然后刷新页面

2、 **：action、method、autocomplete、target

  • action 相当于img的src，给个路径，但该路径是后台给的（通俗来讲，就是要请求的那个页面的地址）
  • method控制用GET还是POST来请求，这两个值通常是大写
  • autocomplete 两个值，on和off，值为on时点击输入框浏览器会自动给出提示
  • target 与a标签的target用法一样，提交到哪个页面，哪个页面需要刷新
<form action="/xxx"method="POST"autocomplete="on"target="_blank">
          <input type="text" >
          <input type="submit" >
</form>

3、 事件：onsubmit

五、 input标签常见属性

1、 作用：让用户输入内容

2、 属性：

  • ①类型type：button/checkbox/email/file/hidden/number/password/radio/search/tel/text
  • ②其他 ：name/autofocus/checked/disabled/maxlength/pattern/value/placeholder 举例：
        <hr>颜色<input type="color">
        <hr>输入变成小圆点<input type="password">
        <hr>选择<select>
                    <option value="">-请选择-</option>
                    <option value="1">星期一</option>
                    <option value="2">星期二</option>
                </select>
        <hr>选择男女，这个是同时选择<input type="radio">男<input type="radio">女
        <hr>选择男女，二选一<input name="gender" type="radio">男
                         <input name="gender" type="radio">女
        <hr>多选，想要知道这几个爱好是一组的，加hobby
               <input type="checkbox" name="hobby">唱
               <input type="checkbox" name="hobby">跳
               <input type="checkbox" name="hobby">看书
               <input type="checkbox" name="hobby">写字
        <hr>上传文件<input type="file">
            想选择多个文件<input type="file" multiple>
        <hr>隐藏提交框，一般是给机器用的<input type="hidden">
        <hr>输入内容,输入框可以改变大小<textarea ></textarea>
        输入框不可以改变大小<textarea style="resize:none;" ></textarea>
        固定输入框大小<textarea style="resize:none; width:50%; height: 300px;"  ></textarea>

3、 事件

  • onchange:当用户输入内容改变时触发的事件
  • onfocus：鼠标聚焦内容的事件
  • onblur：失去聚焦内容的事件

4、 验证器

HTML5新增功能

六、 其他输入标签

1、标签

  • select+option/textrea/label

2、 注意事项

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

七、 其他标签

1、标签

  • video/audio/canvas/svg

2、 注意事项

  • 这些标签的兼容性一定要查看文档
  • 后续在js课程学习
avatar
文章
阅读
粉丝