HTML重点标签

胖虎256
508 阅读4分钟

HTML重点标签

a标签

1.常见属性

  • href (常用)
  • target（常用）
  • download
  • rel=noopener

href取值：

1.网址：

<a href="https://baidu.com">百度1</a> 
<a href="http://baidu.com">百度2</a>
<a href="//baidu.com">百度3</a>

2.路径：

<a href="/a/b/c.html">index.html</a>
<a href=".a/b/c.html">index.html</a>
<a href="./index.html">index.html</a>
<a href="index.html">index.html</a>

/a/b/c.html，a前面的/表示http服务的根目录，不代表盘的根目录
.a/b/c.html,是指当前目录下，a/b/文件夹里的c.html
./index.html(index.html),在当前目录下找index文件

3.伪协议:

<a href="javascript:alert(1);">弹出1</a>
<a href="javascript:;">JavaScript伪协议</a>
<a href="mailto:123@qq.com">发邮件给我</a>
<a href="tel:123">打电话给123</a>

javascript:代码; 【需要写冒号和分号】

  1. 应用场景：希望点击a标签之后页面不刷新也不返回到顶部，什么也不做：
  2. <a href="javascript:;"></a>
  3. 这就相当于执行一段没有意义的js代码

4.id跳转：

给标签添加id，然后通过href跳转
例如

<p id="xxx">跳过来</p>
<a href="#xxx">从这里跳过去</a>

这样就可以通过a链接跳转定位到这个p标签

target取值：

1.内置名字：

<a href="http://qq.com" target="_blank">topQQ</a>在新的页面打开链接
<a href="http://qq.com" target="_top">topQQ</a>在顶级
<a href="http://qq.com" target="_parent">parentQQ</a>在父级（在当前链接的上一层打开
<a href="http://qq.com" target="_self">topQQ</a>在当前窗口打开链接（默认值）

2.自己命名：

  • window 的 name
  • iframe 的 name
<a href="http://qq.com" target="abc">QQ</a>
<a href="http://baidu.com" target="abc">百度</a>

在一个abc的窗口打开链接，如果没有则创建一个abc的窗口！

<a href="http://baidu.com" target="abc">百度</a>
<iframe name="abc"></iframe>

如果iframe的name和a链接的target一致，则a标签的链接会在iframe的内嵌窗口里面打开

Download属性

<a href="xxx.jpg" download="xxx">

其中 download 属性后面接的名字就是下载后默认设置好的文件下载名称，对于这个值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

table标签

table标签包含的元素有：

  • thead 表头
  • tbody 表格体
  • tfoot 表格尾部
  • tr table row 一行
  • th table head 表头
  • td table data 数据 thead和tfoot在一张表中都只能有一个，而tbody可以有多个
小红小明
数学102
语文93
英语34
<table>
    <thead>
        <tr>
            <th></th>
            <th>小红</th>
            <th>小明</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>数学</th>
            <td>10</td>
            <td>2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th>语文</th>
            <td>9</td>
            <td>3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>英语</th>
            <td>3</td>
            <td>4</td>
        </tr>
    </tfoot>
</table>

table相关的样式

  1. table-layout——通常有auto或fix，auto根据内容设置表格大小，fix会平均表格大小。
  2. border-collapse——单元格边框是否合并，通常为collapse。
  3. border-spacintg——单元格间距，通常为0

img标签

img标签相关的属性

  1. src——相对路径、绝对路径，图片地址
  2. alt——不显示图片时，代替的文字
  3. height——高 width——宽
  4. max-width：设置最大宽度，主要用于响应式显示，例如在移动端。
  • 切记：不能改变一张图片的原始比例，也就是不能同时设定一张图片的具体宽和高
  • 但是只写高或者宽，另一半会自动适应，不会让图片变形

img标签的作用：

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

img标签的相关事件

  • onload/onerror：监听图片是否加载成功
<body>
<img id="xxx" src="1.png" alt="图片1">
<script>
    xxx.onload = function(){
        consolo.log("图片加载成功");
    };
    xxx.onerror = function(){
        consolo.log("图片加载失败");
        xxx.src = "./2.png" <!--如果图片加载失败，则显示当前目录下的图片2-->
    };
</script>
</body>

响应式

  • max-width: 100%

form 标签

作用

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

属性

  • action(请求哪个页面）
  • autocomplete （是否自动填充）
  • method(用get还是用post方法）
  • target （与a标签类似，表示要跳转的页面位置）
<form action="/xxx" method="GET" autocomplete="on" target="_blank">
        <input name="username" type="text">
        <input type="submit" value="搞起">
        <button type="submit">提交</button>
</form>

事件

  • onsubmit
<input type=”submit“ value="提交">与
<button type="submit">提交</button>有什么区别？
  • input标签里面不能有其他标签，button标签可以有其他标签

input标签

属性

  • button：按钮
  • checkbox：复选框，同一组用同一name
  • radio：单选框，同一组用同一name
  • submit：提交按钮。如果input不写type，默认是submit
  • file：文件上传，multiple上传多个文件
  • number：只能输入数字
  • password：输入密码，不可见
  • text：输入文本
  • tel：输入电话号码
  • email：输入邮箱
  • hidden：隐藏，通常用于js提交无需重复输出的数据，例如用户id
  • search：搜索框
  • color：颜色选择
  1. 其他
  • name 一般form表单里面的所有input必须要有这个属性，方便数据的传递
  • autofocus 自动聚焦
  • checked 默认选中 多用于下拉框 或者 单选和多选
  • disabled 不可点击
  • maxlength 规定输入字段的最大长度，以字符个数计
  • pattern 规定用于验证输入字段的模式。 正则表达式等
  • value 值
  • placeholder 占位符

事件

  1. onchange——用户输入改变
  2. onfocus——获得焦点
  3. onblur——失去焦点

验证器

  • required HTML5 自带验证器 不输入内容会提示输入内容后才可提交

textarea标签属性

<textarea style="resize:none;width:50%;height:300px"></textarea>

表示用户可以多行输入，规定了样式：输入框大小不能改变，宽度50%，高度300像素
resize: none常用来使该标签用户不可缩放

select + option 标签属性

<select>
      <option value="1">阴天</option>
      <option value="2" selected>晴天</option>
      <option value="3">雨天</option>
 </select>

晴天是默认勾选的

其他输入标签

  • label

注意：
1.不要使用onclick监听input事件，不好用
2.form标签的里面必须要有一个type="submit"属性的按钮（input或者button）
3.form标签里面的input要有name

avatar
文章
阅读
粉丝