想学好HTML就必须理解标签的语义化,一味的div和span是不行的。
html结构主要分为<head></head>和<body></body>,规范中说head标签可以不写,因为不写的话,浏览器会补全。
一.语义化HTML标签:
1. a: anchor 描点,用于跳转到别的链接;target中可以选_blank空页面打开,_self自己当前页面打开,_parent父页面打开,_top顶层页面打开,也可添加download属性。
2. h1:一级标题,标题中最大的;
3. p:paragraph段落,段落标签;
4. ul: un-ordered-list 无序表标签;
5. ol: ordered-list 有序表标签;
6. li: list item列表项标签,用于ul和ol中嵌套的子标签;
7. small: 不重要的字;
8. strong:重要的字;
9. div: divide分块,主要用于区域划分,没有实际意义;
10. span: 行内标签;
11. kbd: 键盘按键标签;
12. video: 视频标签;
13. audio:音频标签;
14. svg: 不规则图形标签;
15. nav: navigation导航标签;
16. img: 图片标签,src属性表示图片的地址,alt属性是alternative,图片没找到的替代内容;
17. main: 主要部分标签;
18. dl: discription list,描述列表;
19. dt: term描述项;
20. dd: difenition描述定义,dl dt dd需要搭配使用;
21. footer:脚标签;
22. hr:水平分割线标签;
23. br:强制换行标签;
24. form:表单标签,可以发GET和POST请求,表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。
24. iframe:嵌套页面标签;
25. input: 输入标签,这个标签的type属性中,有很多种类型,text是输入文本,password是输入密码,button是按钮,submit是提交按钮,checkbox是多选框,radiobox是单选框。
这里需要注意两点:如果页面中只有一个button,那么会自动升级为submit提交按钮,如果在input中被type指定是button的话,那就只能是button按钮了。
26. select:选择按钮,在select下可以嵌套option按钮,写详细选项,赋予value值;
27. table:表格标签,表格标签中有很多子孙标签,thead,tbody, tfoot,tr ,td。这些可以组成一个完成的表格。
二.用到的一些Emmet语法
div.banner
a[herf=#]*7
img[src=#][alt="..."]
ol>li*3
.small*2