HTML常用标签
站长
· 阅读数 35
a标签
a标签的属性
1.herf
a链接的地址，取值：
- 网址 推荐使用//www.baidu.com 这一种写法，放进浏览器会自动补全
路径
- 绝对路径：/a/b/c,
- 相对路径：index.html和./index.html
3.伪协议 应用场景：希望点击a标签之后什么也不做，页面不刷新也不返回到顶部 具体用法：` 这就相当于执行一段没有意义的，只有分号的js代码
- id: href=#id名，可以跳转到id名为Id的标签 如
<p id="xxxx"></p>, <a href="#xxx"></a>就可以定位到这个p标签
2.target
- 决定是在本页面还是新开一个页面打开链接
系统自带的取值：
1. `target="_blank"` 打开新页面 2. `target="_self"` 在当前页面打开 3. `target="_top"` 顶级窗口打开，最上层的iframe 4. `target="_parent"` 在父级页面打开， 3和4适用于有Iframe内嵌窗口的情况- 也可以程序员自己命名
target="xxx"与iframe 标签的name对应 - 没有iframe的话，
target="xxx"就会打开一个window.name为xxx的标签（浏览器控制台输入window.name才能看到名字），如果已经存在就直接覆盖。
a标签的作用
- 跳转到外部页面
- 跳转到内部锚点
- 跳转到邮箱或电话
img
作用：发出GET请求，展示图片
属性
- src:="地址 "
- alt="提示文字" 如果图裂了，无法加载，会显示这个alt属性中的文字，提示用户这个图片是什么
- width 如果只写宽度，高度会自适应
- height 如果只写高度，宽度会自适应一个合格的前端不能让图变形！所以就只写宽度或者高度
事件onload 加载成功onerror 加载失败
响应式关键就是`max-width: 100%;这样图片就可以自适应不同的屏幕大小
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>表格table
- tr 是 table row 的缩写
- th 是 table head
- td 是 table data
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>有些人不写<thead> <tbody><tfoot>，或者顺序搞错了， html也会在浏览器自动纠错
两个表头如何实现
如图所示，这里有两个表头，分别是小红小明小颖这一行和 数学语文英语这一列
表头都用`<th></th>
数据都用`<td></td>
<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>91</td>
<td>86</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
</tfoot>
</table>
table的样式
table-layout:
- table-layout: auto; auto表示根据内容来计算宽度
- table-layout: fixed; fixed表示定宽，尽可能地让宽度平均
border-collapse 和 border-spacing用来调整表格Border的间隔一般会设置为：
<style>
table {
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
</style>
input标签
JS事件：
- onchange 用户输入改变的时候
- onblur 用鼠标从输入界面出来
- onfocus 鼠标集中到上面
属性
type的取值:
- text 输入文本
- password 输入密码
radio 单选 怎么样实现两个radio类型的Input二选一 让这两个Input有相同的name即可 比如，我们想实现男女性别二选一
<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女checkbox 多选同样的，也需要给同类型的多选框写上相同的Name
<input type="checkbox" name="hobby" id="">唱 <input type="checkbox" name="hobby" id="">跳 <input type="checkbox" name="hobby" id="">rap <input type="checkbox" name="hobby" id="">篮球- file 上传文件 上传一个文件 `<input type="file"> 上传多个文件 `<input type="file" multiple>
- hidden 用于给js自动填写id、字符串之类的东西
- textarea 文本框 需要文本框不能自由拖动，固定大小`<textarea style="resize:none; width:50%; height:300px;"></textarea>
select 选择
<select name="week" id=""> <option value="">- 请选择 -</option> <option value="1">星期一</option> <option value="2">星期二</option> <option value="3">星期三</option> </select>
注意事项
- 一般不监听input的click事件
- form里的input要有name
- form里必须有一个type=submit的input或者button，才能触发submit事件
一些感触
- HTML+CSS+JS是前端的三大支柱，从入门的第一天就重复不断的听到这句话，随着学习深入，越来越能体会到为什么说“HTML=结构，CSS=样式，JS=行为”。
- HTML提供了很好的web网页架构，但是其标签内置的属性风格单一，操作繁杂，而且与css共同使用易使得代码可读性变差，样式重叠，给后期修改造成很大负担，所以HTML尽量只用来进行网站结构的搭建，而对于外观的美化交由css和js来做。
转载自:https://segmentfault.com/a/1190000041935333