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"`  顶级窗口关上，最上层的iframe4. `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来做。