HTML常用标签
(一)a
1.属性:
- href(hyper reference:超级链接)
- target
- download
- rel=noopener
2.作用
- 跳转到外部页面
- 跳转内部锚点
- 发邮件、打电话
3.取值:
href:
- 网址:①http(s)://www.baidu.com ②//google.com
- 路径:① /a/b/c以及a/b/c ②index.html
- 伪协议:①javascript: 代码 ; ②mailto: 邮箱 ③tel: 手机号
- id:href="# xxx" (跳转内部锚点)
target:
(二)table
相关标签:
<table> <thead> <tbody> <tfoot> <tr> table row <td> table data <th> table head
相关的样式:
table-layout: auto:表格及单元格根据其包含的内容自动调整宽度 fixed:表格和列的宽度通过表格的width值来设置 border-collapse: collapse; 相邻单元格之间边缘合并 border-spacing:单元格之间的空隙宽度
- 正确结构:
<table> <thead> <tr> <th>title 1</th> <th>title 2</th> </tr> <tr> <td>sth 1</td> <td>sth 2</td> </tr> </thead> <tbody></tbody> <tfoot></tfoot> </table>
- 画表格的方法:先在纸上画出表格图形,再对照着敲代码。
(三)img
作用:发出GET请求,展示一张图片
属性:
- alt:若图片加载失败,则显示alt的内容
- height:若只给定高度,则宽度自适应
- width:若之给定宽度,则高度自适应
- src(sourc):图片地址
事件:
- onload:js相关
- onerror:js相关
响应式:
- max-width:100%,则在移动端图片也会根据比例缩放,充满屏幕
- 为img 可替换元素
- !! 永远不要让图片变形
(四)form
- 作用:发送GET或POST请求,然后刷新页面
属性:
- action:发送请求的路径
- autocomplete(是否自动填充):默认为off,给出取值建议
- method(请求类型):POST/GET,默认值为GET
- target(打开方式):_blank / xxx
- 基本格式:
<form action="/xxx"> <input type="text"> <input type="submit"> </form>
- 事件:onsubmit:
- <button type="submit">xxx</button>和<input type="submit" value="xxx">区别:
前者双标签,中间可以加其他内容,后者单标签
(五)input:
- 作用:让用户输入内容
属性:
type:
- text(默认):普通文本
- button:按钮
file:提交文件
- <input type="file">上传一个文件
- <input type="file" multiple>上传多个文件
- hidden:供计算机使用,使用js输入提交
- number
- password:不展示具体内容(以小圆点代替)
radio:单选
- (实现方法:多个type="radio" 的input标签,使用相同的name)
checkbox:多选
- (实现方法:多个type="checkbox"的input标签并列,使用相同的 选项名称跟在标签后边 )
- 如:<input type="checkbox" name="hobby"> 唱 <input type="checkbox" name="hobby"> 跳
- search:查找
- submit:提交
- tel
- color:颜色
- name:
- autofocus
- checked
- disabled
- maxlength
- pattern
- value
- placeholder
事件:
- onchange
- onfocus
- onblur
- 验证器:HTML5的新功能
注意事项:
- 一般不监听input的click事件
- form里的input要有name
- form里要放一个type=submit才能触发submit事件
(六)一些感触
- HTML+CSS+JS是前端的三大支柱,从入门的第一天就重复不断的听到这句话,随着学习深入,越来越能体会到为什么说“HTML=结构,CSS=样式,JS=行为”。
- HTML提供了很好的web网页架构,但是其标签内置的属性风格单一,操作繁杂,而且与css共同使用易使得代码可读性变差,样式重叠,给后期修改造成很大负担,所以HTML尽量只用来进行网站结构的搭建,而对于外观的美化交由css和js来做。
- HTML不是一项难以理解的技术,它的难度在于布局的合理有效性,和大量标签的理解度、记忆度和运用程度,我认为HTML相关的学习是一个经验积累的过程,在不难的技术里重复打磨进而精通,也可称匠人。
- 越努力越幸运。
相关推荐
行吟阁 2020-07-05
卖小孩的咖啡 2020-07-21
chensen 2020-11-14
lwnylslwnyls 2020-11-06
ATenhong 2020-10-15
yanzhelee 2020-10-13
佛系程序员J 2020-10-10
guojin0 2020-10-08
佛系程序员J 2020-10-08
bluewelkin 2020-09-16
wwzaqw 2020-09-04
zhongdaowendao 2020-09-02
favouriter 2020-08-18
奎因amp华洛 2020-08-15
一青年 2020-08-13
千锋 2020-08-10
nangongyanya 2020-08-09
dongxurr 2020-08-08
明天你好 2020-08-03