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