![1449382bfe85aab53974bea009087358.png](https://i-blog.csdnimg.cn/blog_migrate/a78f55579fe863210d3e8b07713665f3.png)
a标签
HTML<a>
元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
<body>
<div>
<h1>我是a标签</h1>
<a href="//baidu.com">点击访问百度</a>
<a href="/a/a.html">链接a.html</a>
<a href="javascript:alert(1)" ;>点击我有惊喜</a>
<a href="mailto:renshisan@qq.com">发邮件给荏狸十三</a>
<a href="https://google.com" target="_top">google</a>
<div>
<iframe src="/a/a.html" frameborder="0"></iframe>
</div>
</div>
</body>
属性
href //超级链接,链接到一个地址
target //新窗口打开超级链接。
Img标签属性
HTML的 lmg标签主要是插入一张图片。作用是发出一股get请求,展示一张图片。
<div>
<img id=xxx width="200" src="qianduan.png" alt="前端图片">
<script>
xxx.onload = function () {
console.log("图片加载成功");
}
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.png";
};
</script>
</div>
属性:
alt //裂图或者图片加载失败则会显示alt里面的文字内容。
height //高度。
width //宽度,所有的图片最大化100%有利于手机之间的预览。
src //图片加载失败的时候进行挽救,当判断到图片加载失败的时候则运行“src”语句调用404替换图片
Onload //加载成功则调用Onload的代码
Onerror //加载失败则调用Onerror的代码
table标签属性
HTML的
table
元素表示表格数据 — 即通过二维数据表表示的信息。表格标签,table标签里面只能有三个标签,是一个块级容器标签。所有的表格内容都要放在这个标签里面。
<div>
<h1>对比参数</h1>
<table>
<thead>
<th></th>
<th>荏狸十三</th>
<th>肉球</th>
<th>周一</th>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>100</td>
<td>45</td>
<td>60</td>
</tr>
<tr>
<th>语文</th>
<td>100</td>
<td>60</td>
<td>80</td>
</tr>
<tr>
<th>英语</th>
<td>99</td>
<td>100</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
</tfoot>
</table>
</div>
</body>
table //
thead //表格头部,表示一组定义表格的列头的行。
tbody //内容主体封装了一组表行(<tr>元素),表示它们包含表的主体(<table>)。
tfoot //表格尾部,定义了一组表格中各列的汇总行。
tr //表示tbody里面的一行
th //表示表格的头部。
td //表格的内容。
样式
border-spacing: 0px; //表示表格间距为0,调整表格的间隙。
table-layout: auto; //auto表示会自动计算每一排的列和行的间距。
border-collapse: collapse; //让表格合并。
个人感想
个人觉得htnl是一个非常强大的标记语言,拥有别的语言做不到强大的纠错能力。初学者非常容易上手一学就懂。
以上就是我整理的html入门笔记起手式,好多的描述不是很到位希望大家多多理解。
![e0a5e126d538a2f99ef8ad060e3b01a9.png](https://i-blog.csdnimg.cn/blog_migrate/b5dd3e79761de92e69c73b3826298c8f.png)
如果觉得本篇文章对你有帮助欢迎点击下方地址查看更多的前端学习笔记!
荏狸十三的GitHub主页github.com 荏狸十三的知乎主页www.zhihu.com![8467d30e3a56671006cdcc791e6ac0eb.png](https://i-blog.csdnimg.cn/blog_migrate/f1191acdee6558febbd5f94a9736383b.jpeg)