乐趣区

关于html5:HTML常用标签

jiezi

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-collapse 和 border-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 来做。
退出移动版