HTML常用标签a 标签属性： href 用于跳转到外部网页，里面是地址 target 用于指定在哪个窗口打开页面 d

a 标签

属性：

href 用于跳转到外部网页，里面是地址
target 用于指定在哪个窗口打开页面
download 不靠谱，一般不用
rel=noopener

作用：可跳转到外部网页、内部锚点、邮箱或电话等

1、 a 标签的href 取值

网址

baidu.com
baidu.com
//baidu.com
建议多使用第3种写法，包容性更高

路径

/a/b/c或者a/b/c
index.html或者./index.html

伪协议

javascript:(); ()部分可写可以执行的js代码，也可以直接什么都不写，写成javascript:;则代表什么都不做的 a标签
mailto:1919325005@qq.com 可直接跳到发送邮箱界面
tel:123456789 可直接跳转到拨号页面且电话号已经输好了

id href=#xxx 其中xxx既锚点，可以直接跳到锚点位置

2、a 标签的target 取值

内置名字

_blank 用新页面打开该链接
_top 在最顶层页面打开该链接
_parent 在当前链接的上一层打开该链接
_self 默认值在当前页面打开该链接

当两个或当两个或以上页面的taeget属性为xxx时，命名相同的页面会自动覆盖上一次打开的页面。

iframe(内嵌窗口)标签: 在一个页面引用另一个页面

程序员命名

window的name
iframe的name

table 标签定义表格

里面只能有三个大标签，分别为:thead，tbody，tfoot

table的属性与用法：th 定义表格的表头，tr 定义表格的行，td 定义表格的列

border 用于设置表格边框的宽度不加border属性：

<table></table>

添加border属性：

<table border="1"></table>

width和height用来设置表格的宽度与长度(可以使用像素和百分比两种方式)

<table border="1" width="100" height="80%"></table>

align 设置表格的对齐方式，属性值有left(左对齐(默认))、center(居中)、right(右对齐)三种

<table border="1" width="100" height="60" align="center"></table>

相关的样式

table-layout 可选auto（根据表格内容预测相应宽度）和fixed（尽量平均宽度）

border-collapse 一般会设置为collapse 合并表格中间的空隙

border-spacing 可以设置表格每个格子之间的空隙，一般设置为0 一般会设置为如下代码

border-collapse:collapse;
border-spacing:0;

img 标签

作用发起一个get请求，展示
属性 alt . height . width . src
事件 onload . onerror

可提升用户体验

<img id="xxx" src="2.webp" alt="一张图片" width="400" />
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "/1.webp";
      };
    </script>

响应式 max-width:100% 在css当中写上则可实现响应式布局

img{
max-width:100%;}

form 标签

作用发get或者post请求，然后刷新页面
属性

action 控制请求打开页面
method 控制是用get还是post来请求
autocomplete 可选On和off

    <form action="/yyy" method="post" target="a" autocomplete="on">
      <input name="username" type="text" />
    </form>

则会实现自动建议功能，用户输入时会提示过去的一些用户名

target 把哪个页面变成刷新后的页面

事件onsubmit

from里面要放一个type='submit'才能触发submit事件

from里面的input要有name

input 标签

作用：让用户输入内容
属性
面试常问问题

input 和button的区别： input里面不能加任何东西，button里面可以加各种标签

<input type="submit" value="搞起" />
<button type="submit">
      <strong>搞起</strong>
      <img src="1.webp" alt="" />
</button>

实现单选功能代码如下（同一姓名name即可）

<input type="radio" name="gander" id="" />男
<input type="radio" name="gander" id="" />女

实现多选功能代码如下（同一类型type即可）

<input type="checkbox" />唱歌
<input type="checkbox" />跳舞
<input type="checkbox" />看书
<input type="checkbox" />旅游

若是<input type="file" name="" id="" />，则会出现选择文件框，可选择一个文件

若是<input type="file" multiple />，则会出现选择文件框，可选择多个文件

textarea 文本框

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

select 选择框

      <select name="" id="">
        <option value="">-请选择-</option>
        <option value="1">周一</option>
        <option value="2">周二</option>
        <option value="3">周三</option>
      </select>

可替换元素

考试30%可能性会问，详情见 url

其他知识点

切记不要双击打开html，可以通过以下方式

用http-server打开终端安装代码yarn global add http-server，输入http-server回车，选择网页链接即可
用parcel打开终端安装代码yarn global add parcel，输入parcel后接命令名回车，选择网页链接即可

HTML常用标签