10. HTML重难点

10. HTML重难点

1. 英语小课堂 a标签

hyper超级

target目标

reference引用

frame边框，框架

error错误

blank空白

parent父母

self自己

load加载

canvas画布

HTML重点标签

a标签

属性

href：作用就是写一个网址

yarn global add http-server
$http-server . -c-1   //-c-1 -c代表cache -1代表不要缓存
//上面这个在VSCode没用，npx http-server可以使用，或者直接右键"Open with live server"

target：指定在哪个窗口打开链接, targer="_blank"

download：很多浏览器不支持这个属性

rel=noopener：这个用来防止某个bug，学js的时候会再提到

a的href的取值

网址

https://google.com

http://google.com

以上两种如果网址写错就会有bug，但是如果写成下面这样

//google.com

会自动选择使用http还是https

路径

/a/b/c以及a/b/c:

index.html以及./index.html:在当前目录找index.html，两种写法都一样

伪协议

Javascript:代码

<a href="javascript:alert(1)">javascript伪协议</a>
<a href="javascript:;">javascript空协议</a>//创建一个什么都不做的a标签

其他的a标签，比如href什么都不加，点击“空标签”会自动刷新页面

<input type="text">
<a href="">空标签</a>

a tag blank

又比如，点击#标签，页面会自动跳到最上面一行. 批量打30个p标签：p{$}*30

    <p>1</p>
    <p>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>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <p>25</p>
    <p>26</p>
    <p>27</p>
    <p>28</p>
    <p>29</p>
    <p>30</p>
    <a href="#">#标签</a>
    

a tag jump

id:href=#xxx

跳到指定位置

<p>1</p>
   <p>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>
   <p>11</p>
   <p>12</p>
   <p>13</p>
   <p>14</p>
   <p id="15">15</p>
   <p>16</p>
   <p>17</p>
   <p>18</p>
   <p>19</p>
   <p>20</p>
   <p>21</p>
    <a href="#15">跳到15</a>

a tag jumptoid

mailto:发邮件

<a href="mailto:[e-mail]">发邮件给自己</a>

Tel：打电话

<a href="tel:[phone]">给我打电话</a>

a的target

_black 空白页面打开

_top:需要用到iframe，在当前页面的最顶层打开

_parent：在当前页面的iframe的上一层打开

_self：在自己的页面打开

google不允许任何iframe指向它

window的name

<a href="//google.com" target="xxx">google</a>
<a href="//baidu.com" target="xxx">baidu</a>
//会先打开google.com，然后点baidu会在同一个窗口打开百度
//打开开发者工具，输入window.name,会显示xxx

Screen Shot 2021-11-14 at 12.14.07 PM

iframe的name

<a href="//google.com" target="xxx">google</a>
    <a href="//baidu.com" target="xxx">baidu</a>
    <hr>
    <iframe 
    style="border:none;width: 100%;height:800px"
    src=""  
    name="xxx" 
    frameborder="0"></iframe>

baidu也禁止iframe指向它了

正常的效果应该如下图

Screen Shot 2021-11-14 at 12.20.11 PM

2. iframe标签 table标签

iframe标签

内嵌窗口，已经很少使用，还有些老系统在用

table标签

相关的标签

   //正确写法
   <table>
        <thead>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        </tfoot>
    </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>

Screen Shot 2021-11-14 at 5.12.45 PM

  <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>97</td>
                <td>87</td>
            </tr>
        </tbody>
        <tfoot>
            <th>总分</th>
            <td>200</td>
            <td>200</td>
            <td>200</td>
        </tfoot>
    </table>

Screen Shot 2021-11-14 at 5.12.32 PM

HTML有超强的纠错能力，如果只写td或者th，浏览器会自动加上tbody，th

相关的样式

table-layout

auto:自动 根据内容调整宽度，内容长的更宽

fixed:根据表格的宽度，会等宽

border-collapse

border-collapse:collapse表格边框合并

Screen Shot 2021-11-14 at 5.23.50 PM

border-spacing

Border-spacing: 20px 表格边框间距

Screen Shot 2021-11-14 at 5.23.37 PM

3.img标签

<img src="" alt="">

作用

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

属性

alt/height/width/src

alt：替代图片的文字

永远不要让图片变形，只写height/width，会自适应任一个

src：图片的地址

事件

Unload / onerror

<body>
    <img id="xxx" src="https://images.unsplash.com/photo-1636909798741-42d59f0265b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80" alt="">

<script>
xxx.onload = function(){
    console.log("图片加载成功")
}

xxx.onerror = function(){
    console.log("图片加载失败")
}
</script>
</body>

响应式

max-width:100%

加了这个在css中，图片在任何设备中都是响应式的。

可替换元素

考试可能会问，被问概率30%

4.form标签 input标签

form标签

作用

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

属性

action

<form action="/xxx" method="GET">这里action请求的地址，就是form提交后的地址
        <input type="text"/>
        <input type="submit"/>
</form>

autocomplete method target

<body>
    <form action="/xxx" method="POST" autocomplete="on" target="_blank">
        <input name="username" type="text"/>
        <input type="submit" value="提交"/>
        <button type="submit">搞起</button>
    </form>
</body>

input和button的区别

button可以接着加别的标签，但是input不可以

**form必须要有一个type=“submit”**的按钮，否则表单无法提交，如果type不写，默认就是submit，如果改成type="button"，这个表单就无法提交

事件

onsubmit

input标签

作用

让用户输入内容

属性

类型type:

button checkbox email file hidden number password radio search submit tel text

其他name:

autofocus checked disabled maxlength pattern value placeholder

				<input type="color">
        <hr/>
        <input type="password">
        <hr/>
        <input name="gender" type="radio">Male
        <input name="gender" type="radio">Female
//input type为radio，如何只能选择一个？name是同一个即可。就只能选一个
				<input type="checkbox">dance
        <input type="checkbox">sing
        <input type="checkbox">rap
//如何让type为checkbox为一组，也是拥有同一个name即可
<textarea name="" id="" cols="30" rows="10" style="resize:none;width:50%; height:300px"></textarea>
//想要固定textarea可使用style="resize:none;width:50%; height:300px"
        <hr>
        <select>
            <option value="">请选择</option>
            <option value="1">星期一</option>
            <option value="2">星期二</option>
        </select>

事件

onchange onfocus onblur

验证器

HTML5自带验证器

其他输入标签

select + option

textarea

label

注意事项：一般不监听input的click事件

form里面的input要有name

form里要放一个type=submit才能出发submit事件

其他标签

video audio canvas svg

注意事项

这些标签的兼容性一定要查看文档

后续我们会在JS课程里专门讲这些标签

5.总结

6.测试 HTML重难点标签