HTML入门笔记2(常用标签)
详细介绍HTML的a,img,table和form标签
HTML入门笔记2
- 详细介绍HTML的a,img,table和form标签
-
- 一 ==a标签==
-
- 1 href
-
- 1.1 网址
- 1.2 路径
- 1.3 伪协议
- 1.4 id锚点
- 1.5 邮箱等
- 2 a的 target 属性
-
- 2.1 _blank
- 2.2 _top
- 2.3 _parent
- 2.4 _self
- 2.5 xxx
- 二 ==img标签==
-
- 1 属性
-
- 1.1 alt
- 1.2. height和width
- 1.3. src
- 2 事件
- 3 响应式
- 三 ==table标签==
-
- 1 属性值
- 2 相关样式
- 四 ==form表单==
-
- 1 input属性
-
- 1.1 action
- 1.2 method
- 1.3 autocomplete
- 1.4 target
- 2 textarea
- 3 select
- 4 属性
- 5 验证器
- 6 注意事项：
- 7 其他标签：
一 a标签
a标签属性：href，taiget，download，rel=noopener。
a标签作用：主要是用来跳转到外部页面，内部页面或者电话邮箱等等。
代码类似这样
i
1 href
注释：href是输入地址，可以输入 1.1 网址 ，1.2 路径，1.3 伪协议，1.4 id锚点，1.5 邮箱等
- 注意：永远也不要双击打开html，用户都是输入网址进去，我们要像用户一样使用网页输入打开。
- 用输入网址打开，方法一：终端输入安装
yarn gloal add http-server
安装好后输入http-server . -c-1
这里"."可忽略，-c是缓存，-1是不要缓存。推荐用yarn。
然后会出现几个地址，复制地址或直接打开后在地址栏接上要打开的文件。- 方法二：终端输入安装
yarn global add parcel
安装好后直接parcel xxx.html
xxx是打开文件名称
1.1 网址
href可输入网址，取值例如：
- https://baidu.com
- http://baidu.com
- //baidu.com
注意：最好选用//baidu.com，即无协议网址，点击链接时，会自动跳转选择适用http还是https，防止选错http，还是https而出错。
查看具体怎么传的可以打开网页开发工具(F12)在netwok里选中Preserve log进行查看
1.2 路径
href可输入路径，例如：
- /a/b/c
- a/b/c
注意：/a/b/c，"/"难道不是根目录吗？
答：当我们使用http后就不再是文件了，在哪里开的服务，哪里就是根目录。
开发时，如果双击打开链接页面的话，是以文件形式，会在file根目录下寻找，链接失效，绝对路径就错了。要用网页形式打开
1.3 伪协议
什么是伪协议呢，是点击a标签就会执行href里的代码，叫JavaScript伪协议。
<a href="javascript:alert(1);">javascript伪协议a>
1.4 id锚点
可以通过点击a标签内容实现页内跳转
<p id="xxx">你点击了查看p>
<a href="">查看（页面会刷新）a>
<a href="#">查看(页面不会刷新，会跳到页面顶部)a>
<a href="#xxx">查看（通过id跳转到指定的标签，锚点)a>
<a href="javascript:;">查看（这才是什么也不会做的a标签）a>
1.5 邮箱等
- 跳转邮箱
<a href="mailto:[email protected]">发邮件给我a>
效果：发邮件给我
- 跳转电话
<a href="tel:13258378250">请打电话给我a>
效果：请打电话给我
2 a的 target 属性
target是"目标"的意思。target有以下几种常用取值：
2.1 _blank
新打开个窗口打开
2.2 _top
有多个网页嵌套的情况下，会在最顶层上的窗口打开。可以用
iframe嵌套网站。
2.3 _parent
在当前链接的上一层打开
2.4 _self
在自己这一层打开
2.5 xxx
注释：xxx是taiget="xxx"时，xxx是id，可以随便取，有xxx时就打开，没有xxx时就创建一个窗口，把它叫做xxx。
注意：有两个链接都叫xxx时，点击相同xxx不同链接，每一次点击都会在xxx窗口执行点击的链接。
二 img标签
img标签的作用：发出get请求，展示一张图片。
属性有：alt / height / width / src
事件：onload / onerror
响应式：max-width: 100%;
可替换元素
1 属性
1.1 alt
alt是图片加载失败时，显示alt内容的文字来提示用户
1.2. height和width
图片高宽。只写宽或高，图片的高或宽就会自适应，宽高一起写会让图片变形。
注意:永远不能让图片变形
1.3. src
英文source，来源。图片地址。
2 事件
onload和onerror
用来监听图片是否加载成功 ,成功就执行onload，失败就执行onerror。是一种用户补救措施。
<body>
<img id="xxx" width="400" src="1.gif" alt="加油动图" />
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/图片加载失败.png";
};
// id测试时用，平时别用
script>
body>
成功效果如下：
失败效果如下：
3 响应式
响应式添加一下 图片的 max-width: 100%;样式图片就可以适应手机了
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
style>
三 table标签
1 属性值
table标签里能用的只有三个标签，分别是thead，tbody和tfoot，三者写的顺序无关，排列只会是头，身体和脚。三者里又可以写tr(table row，表示table里的一行)，td(内容数据)，th(表示表头).
话不多说看代码
<body>
<table>
<thead>
<tr>
<th>英语th>
<th>翻译th>
tr>
thead>
<tbody>
<tr>
<td>hypertd>
<td>超级td>
tr>
<tr>
<td>targettd>
<td>目标td>
tr>
<tr>
<td>referencetd>
<td>引用td>
tr>
tbody>
<tfoot>
<tr>
<td>空td>
<td>空td>
tr>
tfoot>
table>
body>
效果如图：
2 相关样式
相关样式：table-layout,table-collapse,border-spacing。一般用来清楚table样式。
<style>
table {
table-layout: auto; /*计算每行宽高，由内容大小决定宽高*/
/* table-layout: fixed;尽量每一行平均 */
border-collapse: collapse;
/* collapse合并边框 */
border-spacing: 0;
/* border和border之间的距离 */
}
style>
四 form表单
作用：发送get或者post请求，然后刷新页面。
属性：action / autocomolete / method / target
事件：onsubmit
注意:一个form表单必须要含有type等于"submit"才可以提交，如果写了按钮不写submit，默认就是submit。
如果type=“button”,则提交不了。input每一个都要有name。
1 input属性
1.1 action
相当于img的src，是请求往哪发。用来控制到哪个页面，action里面写什么，请求就到哪个页面。
<body>
<form action="/xxx">
<input name="username" type="text" />
<input type="submit"/>
form>
boody>
type="text"类型是一个文本框，type="submit"是个提交。
1.2 method
用来控制请求是post还是get。
<form action="/xxx" method="POST">form>
1.3 autocomplete
自动填充。鼠标移入后会有历史输入提示。
<form action="/xxx" method="POST" autocomplete="on">
<input name="username" type="text" />
<input type="submit" />
效果如下：
1.4 target
提交到哪个页面，哪个页面就会刷新。
type属性有很多，type=color(改变颜色)，password(输入为*号的输入框)，checkbox和raido(多选框和单选框，要让拥有同一个name的表示一组)，file(可加multipe表示可以选择多个文件)，hidden(隐藏)
2 textarea
<textarea style="resize: none; width: 50%; height: 300px">textarea>
可以不加样式，可自由拉动。
3 select
<select>
<option value="">-请选择-option>
<option value="1">一option>
<option value="2">二option>
<hr />
<input type="text" required />
select>
选择框，value是真正的值。一，二是给用户看的值
效果如下：
4 属性
- onchange 当用户输入改变时触发
- onfocus 当用户把鼠标集中在这时触发
- onblur 用鼠标出来就onblur
5 验证器
HTML 5新功能
<input type="text" required />
当输入框里没有东西就提交的话，不允系提交，自带验证。
效果如下
6 注意事项：
一般不监听input的click事件。
form里的input要有name，没有就错了。
form里放一个 type="submit"才能触发submit事件。
表单提交和按钮提交有什么区别？
<form action="/xxx" method="POST" autocomplete="off" target="a">
<input name="username" type="text" />
<input type="submit" value="搞起" />
<button type="submit"><strong>搞起strong> <img src="1.gif" />
button>
form>
input里面不支持其他标签，只能纯文本，button里面可以加任何东西。
7 其他标签：
- video 视频
- audio 音频
- anvas 画画
- svg 矢量化
一般兼容存在问题，这些标签兼容性一定要看文档！
学习前端从入门到入土，我正在路上。您的每一次浏览点赞留言收藏，就是对我学习路上最大的鼓励，一起努力吧！
欢迎留下您宝贵的意见。
最后
领域展开 无量空处
