a标签的用法
href的用法
- 最常见的用法是取值为一个网址时,网页上点击google会弹出取值里的网站
<a href="//google.com" >google</a>
- 打开一个路径,可以用这种方法打开c.html
<a href="/a/b/c.html">c.html</a>
- 跳转到内部锚点,此时点击a链接页面锚点变为aaa,使用锚点可以实现当前页面的跳转。具体可以举个例子,比如说你网页写了很多个P标签,你想实现点击aaa这个连接可以直接跳转回你写的第10个P标签,就可以用这个功能
<p10 id="xxx">10</p>
<a href="#aaa">aaa</a>
4.伪协议
<a href="javascript: alert(1);"></a>
会执行href中的JavaScript代码
<a href="javascript:;"></a>
将不会执行任何操作
target用法
- _self:加载当前页面,如果没有指定属性,则此值为默认
- _top:加载响应进入顶层页面,如果没有父级框架或页面,效果与self相同
- _parant:在父级页面打开地址
- _blank:在新窗口打开
target属性的部分值需要有iframe配合使用。
- table 标签的用法
table标签的学习直接上实例,比如说你想做一个这样的表格
以下是实现代码
<body>
<table>
<thead>
<th></th>
<th>xixi</th>
<th>haha</th>
</thead>
<tbody>
<th>数学</th>
<th>99</th>
<th>87</th>
</tbody>
<tbody>
<th>英语</th>
<th>87</th>
<th>88</th>
</tbody>
</table>
</body>thead:表头
tbody:表格内容
tfoot:表格底部(实例没有)
tr: 元素定义表格行(实例没有)
th: 元素定义表头
td: 元素定义表格单元(实例没有)
简单来说就是先用thead、tbody、tfoot定好框架,在每个框架里写th代表这个框架里的第一行元素,框架可以看作狭义的列。
相关的样式有
table-lyout:定义了用于表格单元格行列的算法,说白了就是设置数据怎么对齐之类的
border-collapse:设置边框
border-spacing:定义边框之间的距离
比如想做这样一个表格:
只要加上相应的样式就可以实现,样式多种,可以自行尝试
table { table-layout: auto; border-spacing: 20px; border-collapse: ; /**表格合并的话在冒号后加collapse*/ } th { border: 1px solid chocolate; }img标签
- 作用:发出get请求,展示一张图片
- 属性:
src:图片路径
alt:图片加载失败的时候显示的文字
height/width:设置宽高(一般只设置宽,高度会自适应)
<img width="" src="xxx.png" alt="" />- 响应式:若想图片在PC和手机端自适应,可以加这段操作
<style> * { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; } </style>这些主要的属性还会有各种小分支,是关于细节方面的,多去了解尝试会做出更好看的页面。