核心内容摘要
《男人女人一起愁愁愁》：一首唱尽人间百态的时代旋律
HTMLHyperText Markup Language是构建网页的标准标记语言用于定义网页的结构和内容。
标签分类
1 双标签成对出现双标签由开始标签和结束标签组成内容写在两个标签之间。
标签说明示例p段落p这是一个段落/ph1~标题1最大6最小h1主标题/h1a超链接/锚点a hrefurl链接文字/adiv块级容器div内容区域/divspan行内容器span行内文字/span 超链接a详解ahref网址target_blanktitle鼠标悬停提示链接文字/a常用属性属性说明可选值href链接地址URL、#页面顶部、#id锚点跳转target打开方式_self当前窗口默认_blank新窗口_parent父框架_top顶层窗口title悬停提示文本任意文字
2 单标签自闭合标签单标签不需要结束标签独立使用。
标签说明示例input输入框input typetextbr换行文字br换行后文字hr水平分割线hrimg图片img src图片路径
路径说明
1 绝对路径完整的资源地址包含协议、主机名等信息。
格式协议://主机名:端口/路径 示例https://www.example.com/images/logo.png小知识http默认端口 80https默认端口 443通常可省略
2 相对路径相对于当前文件位置的路径。
符号含义示例./当前目录./images/logo.png../上一级目录../css/style.css直接写文件名当前目录index.html项目结构示例 ├── index.html ├── css/ │ └── style.css └── images/ └── logo.png 在 index.html 中引用 - CSS文件./css/style.css 或 css/style.css - 图片./images/logo.png 或 images/logo.png
文本相关标签
1 引用标签blockquote这是一段引用文字会产生缩进效果/blockquote
2 行内容器无语义span用于设置部分文字样式常配合 CSS 使用/span
3 预格式标签pre保留空格、换行 按原始格式显示/pre
表格 table
1 基本结构tableborder1cellpadding10cellspacing0theadtrth表头1/thth表头2/th/tr/theadtbodytrtd数据1/tdtd数据2/td/tr/tbody/table标签说明标签说明table表格容器thead表头区域tbody表体区域tr表格行table rowth表头单元格加粗居中td数据单元格table data常用属性属性说明border边框粗细cellpadding单元格内边距cellspacing单元格间距align对齐方式建议用 CSS 代替
2 合并单元格属性说明示例rowspan跨行合并td rowspan2跨2行/tdcolspan跨列合并td colspan3跨3列/td
图片 imgimgsrc图片路径alt替代文本title悬停提示width200height100属性详解属性说明是否必需src图片资源路径✅ 必需alt图片加载失败时显示的文字也利于 SEO 和无障碍访问✅ 推荐title鼠标悬停时的提示文字可选width图片宽度可选height图片高度可选最佳实践图片常嵌套在a标签中实现点击跳转ahrefhttps://example.comimgsrclogo.pngalt公司Logo/a
表单 form
1 form 基本结构formaction提交地址methodpostnamemyform!-- 表单控件 --/form属性说明属性说明常用值action表单提交的目标 URL服务器地址method提交方式get默认数据在 URL 中、post数据在请求体中name表单名称自定义名称
2 常见表单控件 文本输入!-- 普通文本 --inputtypetextplaceholder请输入用户名!-- 密码输入内容隐藏 --inputtypepasswordplaceholder请输入密码 单选框 radiop性别/plabelinputtyperadionamesexvaluemalechecked男/labellabelinputtyperadionamesexvaluefemale女/label⚠️注意同一组单选框需要相同的name才能实现互斥checked表示默认选中☑️ 复选框 checkboxp爱好/plabelinputtypecheckboxnamehobbyvalueweb前端开发/labellabelinputtypecheckboxnamehobbyvaluejavaJava开发/labellabelinputtypecheckboxnamehobbyvaluepythonPython/label 下拉选择 select!-- 单选下拉 --selectnamecourseoptionvalue请选择课程/optionoptionvaluehtmlHTML/optionoptionvaluecssCSS/optionoptionvaluejsselectedJavaScript/option/select!-- 多选下拉按住 Ctrl/Shift 多选 --selectnameskillsmultipleoptionvaluehtmlHTML/optionoptionvaluecssCSS/optionoptionvaluejsJavaScript/option/select 多行文本 textareatextarearows5cols30placeholder请输入内容.../textarea 按钮类型inputtypesubmitvalue提交inputtyperesetvalue重置buttontypebutton普通按钮/button️ label 标签提升用户体验!-- 方式1for 关联 id --labelforusername用户名/labelinputtypetextidusername!-- 方式2直接包裹 --label用户名inputtypetext/label 使用label后点击文字也能聚焦到输入框
文本样式标签表现类标签效果示例b加粗b加粗文字/bstrong加粗有强调语义strong重要内容/strongi斜体i斜体文字/iem斜体有强调语义em强调内容/emu下划线u下划线文字/us删除线s删除线文字/sdel删除线有语义del已删除/del特殊字符HTML 实体显示代码说明空格nbsp;不换行空格lt;小于号gt;大于号amp;和号quot;双引号
列表
1 无序列表 ul常用于导航ulli列表项 1/lili列表项 2/lili列表项 3/li/ul
2 有序列表 ololli第一步/lili第二步/lili第三步/li/ol
3 定义列表 dldldt术语/标题/dtdd描述/解释/dddtHTML/dtdd超文本标记语言/dd/dl
区块标签
1 块级容器 divdivclasscontainer!-- 用于布局和分组本身无语义 --/div
2 HTML5 语义化标签推荐使用标签说明header页眉nav导航main主体内容article文章section区块aside侧边栏footer页脚header网站头部/headernav导航栏/navmainarticle文章内容/articleaside侧边栏/aside/mainfooter页脚信息/footer
开发技巧
1
1 Emmet 快捷语法输入输出!或html:5HTML5 文档结构div.containerdiv classcontainer/divulli*33个 li 的 ul 列表p*6lorem6个带随机文本的段落div#maindiv idmain/div
1