HTML 常用标签总结
1 引言
静态网页技术
- 静态网页开发技术包括HTML、CSS、JavaScript。
- HTML用于搭建基础网页、展示页面内容。
- CSS用于美化页面、布局页面。
- JavaScript用于控制页面元素、让页面有一些动态效果，如轮播图等等。
HTML
- HTML是Hyper Text Markup Language的简称，表示“超文本标记语言”。
-
超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
-
标记语言：由标签(<标签名称>)构成的语言。 如 html，xml等都是标记语言。
- 注：标记语言不是编程语言，它不含逻辑性，写出的代码按顺序执行，不像编程语言有if-else判断等。
-
入门代码
<!DOCTYPE html> <html> <head> <title>HelloWorld</title> </head> <body> Hello World ! ! ! </body> </html>
2 常用标签
2.1 基础标签
| 标签 | 含义 | 备注 |
|---|---|---|
<!-- --> |
注释 | |
| h | 标题 | h1~h6 |
| p | 段落 | |
| br | 换行 | |
| hr | 水平线 |
2.2 格式标签
| 标签 | 含义 | 备注 |
|---|---|---|
| b | 加粗 | |
| i | 斜体 | |
| u | 下划线 | |
| center | 居中 | 常用属性：face(字体)、color、size |
| font | 字体 |
2.3 表格标签
| 标签 | 含义 | 备注 |
|---|---|---|
| table | 表格 | 常用属性：width、border、bgcolor、align |
| tr | 行 | |
| td | 列 | colspan：跨列、rowspan：跨行 |
| thead | 页眉 | |
| tbody | 主题 | |
| tfoot | 页脚 | |
| th | 表头 | 一般浏览器会加粗 |
| caption | 表格标题 |
2.4 表单标签
| 标签 | 含义 | 备注 |
|---|---|---|
| form | 表单 | method常用的两种方式：get、post |
| input | 输入 | type属性：text(placeholder)、password、radio、checkbox、file等 |
| label | 标签 | |
| button | 按钮 | submit、button、image等 |
| textarea | 多行文本框 | cols：指定列数，即每行几个字符 rows：指定行数 |
| select | 下拉框 | |
| option | 选择列表中选项 |
2.5 列表标签
| 标签 | 含义 | 备注 |
|---|---|---|
| ul | 无序列表 | |
| ol | 有序列表 | |
| li | 列表项 |
2.6 其他标签
| 标签 | 含义 | 备注 |
|---|---|---|
| img | 图片 | ./ 表示当前目录，../ 表示上一级目录 |
| a | 超链接 | |
| div | 块级标签 | 占一行 |
| span | 内联标签 | 不换行 |
<!-- 注：重连接有两种功能：(1)可以被点击，样式发生改变；(2)点击后跳转到href指定的url -->
<!-- 需求：保留上面第一种功能，去掉第二种功能 -->
<a href="http://www.baidu.com/">点我1</a>
<a href="javascript:void(0);">点我2</a>
- 更多标签内容详见 w3cschool官网
