Web前端包含了许多内容，其中HTML是前端的重要基础之一，这篇文章主要对HTML做了一些基本介绍，同时列出了一些常见的标签。
一、HTML是什么？
- 作用： 负责搭建页面结构和内容 （盖房子 房）
- HyperTextMarkupLanguage： 超文本标记语言
- 超文本： 指不仅仅是纯文本，还包括字体和多媒体（图片，音频，视频）
- 标记语言： 标签体
二、常见标签
1.文本标签
- 内容标题：h1-h6，特点： 独占一行， 字体加粗， 自带上下间距
- 水平分割线：hr
- 段落标签：p，特点： 独占一行 自带上下间距
- 换行： br
- 加粗：b
- 斜体：i
- 下划线：u
- 删除线：s
2.列表标签
- 无序列表： ul和 li
- 有序列表： ol和li
- 列表嵌套： 有序列表和无序列表可以任意无限嵌套
3.图片标签img
- src：资源路径
- 相对路径：访问站内资源使用
- 图片和页面在同级目录： 直接写图片名
- 图片在页面的上级目录： `../图片名`
- 图片在页面的下级目录： 文件夹名/图片名
- 绝对路径： 访问站外资源使用, 称为图片盗链,存在找不到图片的风险
- alt： 当图片不能正常显示时显示的文本
- title: 鼠标在图片上悬停时显示的文本
- width/height:设置图片的宽高, 两种赋值方式: 1. 像素 2. 百分比 如果只设置宽度高度会等比例缩放
- 无序列表： ul和 li
- 有序列表： ol和li
- 列表嵌套： 有序列表和无序列表可以任意无限嵌套
4.超链接a
- 无序列表： ul和 li
- 有序列表： ol和li
- 列表嵌套： 有序列表和无序列表可以任意无限嵌套
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body><a id=\"top\" href=\"https://www.baidu.com\">超链接1</a><a href=\"02简历练习.html\">超链接2</a><a href=\"a.jpg\">超链接3</a><br><a href=\"http://www.tmooc.cn\"><img src=\"a.jpg\" width=\"100\"></a><br><img src=\"a.jpg\"><br><img src=\"a.jpg\"><br><a href=\"#top\">回到顶部</a></body></html>5.表格标签table
- 相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题
- 相关属性: border边框 colspan跨列 rowspan跨行
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body><table border=\"\"><caption>购物车</caption><tr><th>编号</th><th>商品名</th><th>价格</th></tr><tr><td>1</td><td>华为Mate 40 pro</td><td>6799</td></tr><tr><td>2</td><td>华为Mate 50 pro</td><td>6799</td></tr><tr><td>3</td><td>华为MatePad pro</td><td>4999</td></tr><tr><td>总价:</td><td colspan=\"2\">18,597元</td></tr></table></body></html>6.表单form
- 作用: 获取用户输入的各种信息并且把这些信息提交给服务器
- 需要学习form表单中的各种控件, 包括: 文本框,密码框,单选,多选,下拉选,日期选择器,文件选择器, 各种按钮等
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body><form action=\"https://www.baidu.com\">用户名:<input type=\"text\" name=\"username\" maxlength=\"5\" value=\"abc\" readonly>密码:<input type=\"password\" name=\"password\"></input><br>性别:<input type=\"radio\" name=\"gender\" checked value=\"m\" id=\"r1\"><label for=\"r1\">男</label><input type=\"radio\" name=\"gender\" value=\"w\">女<br>兴趣爱好:<input type=\"checkbox\" name=\"hobby\" value=\"cy\">抽烟<input type=\"checkbox\" name=\"hobby\" checked value=\"hj\">喝酒<input type=\"checkbox\" name=\"hobby\" value=\"tt\">烫头<br>生日:<input type=\"date\" name=\"birthday\"><br>靓照:<input type=\"file\" name=\"pic\"><br>所在地:<select name=\"city\"><option value=\"bj\">北京</option><option value=\"sh\">上海</option><option value=\"gz\">广州</option><option value=\"sjz\" selected>石家庄</option></select><br><input type=\"submit\" value=\"注册\"></form></body></html>7.分区标签
- 作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理
- 块级分区标签div: 特点是独占一行
- 行内分区标签span: 特点是共占一行
- 页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域
- HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签
- header头
- footer脚
- main主体
- section区域
- nav 导航
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title></head><body><div>块级分区标签1</div><div>块级分区标签2</div><div>块级分区标签3</div><span>行内分区标签1</span><span>行内分区标签2</span><span>行内分区标签3</span><div>头</div><div>体</div><div>脚</div></body></html>总结
本文介绍了比较常用的html标签及分区的概念。
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 97552693@qq.com 举报，一经查实，本站将立刻删除。本文链接：https://teaffka.com/n/6309.html
