HTML常见标签
文章目录
- 一、标题标签
- 二、段落标签
- 三、列级标签
- 四、超链接标签
- ①href
- ②target
- 五、多媒体标签
- 六、表格标签
- 七、表单标签
- 复选框 checkbox
- 文本域 textArea
- 下拉框 select
- 文件上传框 file
一、标题标签
标题 h1 - h6
<body><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body>二、段落标签
| 标签名称 | 功能 |
|---|---|
| p | 段落 |
| br | 换行 |
| hr | 横线换行 |
<p>There is clearly a need for CSS to be taken seriously by graphic artists.<br>The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list.</p><p>Clicking on any one will load the style sheet into this very page.<hr>The code remains the same, the only thing that has changed is the external .css file. Yes, really.</p>三、列级标签
| 标签名称 | 功能 |
|---|---|
| ol | 有序列表 |
| ul | 无序列表 |
| li | 列表项 |
代码如下（示例）：
<body><!-- 无序--><ul><li>数据类型</li><li>变量</li><li>函数</li></ul><!--有序--><ol><li>数据类型</li><li>变量</li><li>函数</li></ol><!--嵌套--><ul><li>java</li><ol><li>数据类型</li><li>变量</li><li>函数</li></ol><li>c</li><li>python</li></ul></body></html>四、超链接标签
点击后带有链接跳转的标签，也叫做a标签
| 超链接标签 | 功能 |
|---|---|
| a | |
| href | 用于定义要跳转的目标资源的地址 |
| target | 用于定义目标资源打开方式 |
①href
- 完整的url http://www.atguigu.com/
- 相对路径 以当前资源的所在路径为出发点去找目标资源
- 绝对路径 无论当前路径在哪里，使用固定的位置作为出发点去找目标资源
②target
_self 连接当前窗口打开目标资源
\_blank 开启新窗口打开目标资源
五、多媒体标签
| 标签名称 | 功能 |
|---|---|
| src | 用于定义图片的连接 |
| title | 用于定义鼠标悬停时显示的文字 |
| alt | 用于定义图片加载失败时显示的提示文字 |
六、表格标签
| 标签 | 功能 |
|---|---|
| table | 代表表格 |
| thead | 代表表头 可不写 |
| tbody | 代表表体 可不写 |
| tfoot | 代表表尾 可不写 |
| tr | 代表一行 |
| td | 代表行内的一格 |
| th | 自带加粗和居中效果的td |
<h3style="text-align:center;">员工技能竞技评分表</h3><tableborder="1px"style="margin:0px auto;width:300px;"><thead><tr><th>排名</th><th>姓名</th><th>分数</th></tr></thead><tbody><tr><td>1</td><td>张晓梅</td><td>100</td></tr><tr><td>2</td><td>李晓东</td><td>99</td></tr></tbody></table><h3style="text-align:center;">员工技能竞技评分表</h3><tableborder="1px"style="margin:0px auto;width:300px;"><thead><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr></thead><tbody><tr><td>1</td><td>张晓梅</td><td>100</td><tdrowspan="5">升值加薪</td></tr><tr><td>2</td><td>李晓东</td><td>99</td></tr><tr><td>总人数</td><tdcolspan="2">200</td></tr><tr><td>平均分</td><tdcolspan="2">96</td></tr><tr><td>及格率</td><tdcolspan="2">80%</td></tr></tbody></table>七、表单标签
| 标签 / 属性 | 类型 | 说明 | 取值 / 子项 |
|---|---|---|---|
| <form> | 表单容器标签 | 用于包裹所有表单项，实现用户信息输入与提交 | - |
| action | <form> 属性 | 定义表单数据提交到的服务器地址 | 服务器 URL |
| method | <form> 属性 | 定义表单数据的提交方式 | get：数据拼接在 URL 后，以?开头，参数用&分隔,post：数据通过请求体发送，不显示在 URL |
| <input> | 表单项标签 | 用于定义各类可输入的表单控件 | - |
| name | <input> 属性 | 定义提交到服务器的参数名称 | 自定义参数名 |
| type | <input> 属性 | 定义表单控件的类型 | text：文本输入框 password：密码输入框（内容隐藏） submit：提交按钮 reset：重置按钮 |
<formaction="welcome.html"method="get"><!-- 添加表单项标签 用户输入信息的标签-->用户名：<inputtype="text"/><br>密码：<inputtype="password"/><br><inputtype="submit"value="登录"><inputtype="reset"value="清空"></form>
###单选框 radio
radio多个选项选其一
多个单选框使用相同的name属性值，则就会有互斥效果
checked默认选项
可写作 checked=“true” 或 checked=“checked” 或 checked
若写了多个互斥的checked 则以最后一个为主
复选框 checkbox
checkbox多个里面选多个
<formaction="welcome.html"method="get"><!-- 添加表单项标签 用户输入信息的标签-->用户名：<inputtype="text"name="username"/><br>密码：<inputtype="password"name="userPwd"/><br>性别：<inputtype="radio"name="gender"value="0"checked="true">男<inputtype="radio"name="gender"value="1">女<br>爱好：<inputtype="checkbox"name="hobby"value="1">篮球<inputtype="checkbox"name="hobby"value="2">足球<inputtype="checkbox"name="hobby"value="3">羽毛球<inputtype="checkbox"name="hobby"value="4">乒乓球<br><inputtype="submit"value="登录"><inputtype="reset"value="清空"></form>文本域 textArea
多行文本框
下拉框 select
option 用于定义选项
<formaction="welcome.html"method="get">籍贯：<selectname="pro"><optionvalue="1">京</option><option>津</option><option>冀</option></select><br><inputtype="submit"value="登录"><inputtype="reset"value="清空"></form>文件上传框 file
选择头像：<inputtype="file">