HTML 前端基础笔记一、Web 前端三大核心技术技术全称作用定位HTML超文本标记语言搭建网页结构、展示内容内容层CSS层叠样式表美化页面、控制布局表现层JavaScriptJS 脚本语言实现交互、动态效果行为层二、网页基础概念HTTP超文本传输协议负责传输网页内容DNS域名系统将域名解析为 IP 地址URL统一资源定位符网页地址网页HTML 代码文件后缀.html首页网站默认首页面常用名index.html/default.html网站多个网页组成的页面集合三、HTML 基础结构!DOCTYPEhtmlhtml!-- 头部配置信息、标题、引入资源 --headmetacharsetUTF-8title网页标题/title/head!-- 身体网页可见内容 --body页面内容/body/html!DOCTYPE html文档类型声明告诉浏览器用 HTML5 解析html根标签 head页面配置区body页面内容区四、head 内常用标签!-- 字符编码 --metacharsetUTF-8!-- 网页标题 --title标题/title!-- 关键词SEO --metanamekeywordscontent关键词!-- 页面描述SEO --metanamedescriptioncontent描述!-- 引入外部 CSS --linkrelstylesheethrefstyle.css!-- 内部 CSS --styleh1{color:red;}/style!-- 引入 JS --scriptsrcxx.js/scriptSEO 三大标签 TDKTitle页面标题搜索结果标题Description页面描述搜索结果摘要Keywords关键词权重较低五、HTML 常用基础标签文本标签h1~h6六级标题 p段落自动换行、留白 span行内文本容器 br换行 hr水平线 div:盒子 a超链接img图片列表标签!-- 无序列表 -- ul li列表项/li /ul !-- 有序列表 -- ol li列表项/li /ol六、图片标签 imgimg src图片路径 alt加载失败提示 title鼠标悬浮提示 width200 height100属性src图片路径必填绝对路径从根目录出发的完整路径不依赖当前位置相对路径从当前位置出发的路径依赖当前目录路径./ 当前目录…/ 上一级目录alt图片无法显示时的替代文字title鼠标悬浮提示width/height宽高路径./ 当前目录…/ 上一级目录七、超链接标签aa href目标地址 target_blank链接文字/a 属性 href跳转目标必填 target打开方式 _self当前页默认 _blank新标签页链接分类普通链接a hrefxxx.html 锚链接同一页面 / 跨页面跳转到指定位置 !-- 设置锚点 -- a nameanchor/a !-- 跳转锚点 -- a href#anchor回到顶部/a 功能性链接javascript:alert(提示)八、表格标签 tabletable border1 cellspacing0 cellpadding5 tr !-- 行 -- td单元格/td !-- 列 -- /tr /table属性border边框cellspacing单元格间距cellpadding内容与边框距离colspan合并列rowspan合并行九、表单标签 form作用收集用户信息注册、登录、问卷form action提交地址 method提交方式 表单元素 /form提交方式get数据拼在 URL 后速度快、不安全post数据放在请求体安全、适合传文件常用表单元素!-- 文本框 -- input typetext placeholder请输入 !-- 密码框 -- input typepassword !-- 单选框 -- input typeradio namesex value男 !-- 复选框 -- input typecheckbox namehobby value游泳 !-- 下拉菜单 -- select option选项/option /select !-- 文本域 -- textarea rows5 cols20/textarea !-- 文件域 -- input typefile !-- 按钮 -- input typesubmit value提交 input typereset value重置 input typebutton value普通按钮 注意表单元素必须加 name 才能提交数据十、内嵌框架 iframe作用在当前页面嵌入另一个网页iframe srcxxx.html width500 height300 frameborder0/iframe属性src嵌入页面地址width/height宽高frameborder边框0 无边框name框架名scrolling是否显示滚动条十一、HTML / XHTML / XML 区别HTML语法宽松用于展示网页XHTMLHTML 严格版语法更规范XML自定义标签用于存储 / 传输数据
HTML前端基础
发布时间：2026/5/23 18:54:08
HTML 前端基础笔记一、Web 前端三大核心技术技术全称作用定位HTML超文本标记语言搭建网页结构、展示内容内容层CSS层叠样式表美化页面、控制布局表现层JavaScriptJS 脚本语言实现交互、动态效果行为层二、网页基础概念HTTP超文本传输协议负责传输网页内容DNS域名系统将域名解析为 IP 地址URL统一资源定位符网页地址网页HTML 代码文件后缀.html首页网站默认首页面常用名index.html/default.html网站多个网页组成的页面集合三、HTML 基础结构!DOCTYPEhtmlhtml!-- 头部配置信息、标题、引入资源 --headmetacharsetUTF-8title网页标题/title/head!-- 身体网页可见内容 --body页面内容/body/html!DOCTYPE html文档类型声明告诉浏览器用 HTML5 解析html根标签 head页面配置区body页面内容区四、head 内常用标签!-- 字符编码 --metacharsetUTF-8!-- 网页标题 --title标题/title!-- 关键词SEO --metanamekeywordscontent关键词!-- 页面描述SEO --metanamedescriptioncontent描述!-- 引入外部 CSS --linkrelstylesheethrefstyle.css!-- 内部 CSS --styleh1{color:red;}/style!-- 引入 JS --scriptsrcxx.js/scriptSEO 三大标签 TDKTitle页面标题搜索结果标题Description页面描述搜索结果摘要Keywords关键词权重较低五、HTML 常用基础标签文本标签h1~h6六级标题 p段落自动换行、留白 span行内文本容器 br换行 hr水平线 div:盒子 a超链接img图片列表标签!-- 无序列表 -- ul li列表项/li /ul !-- 有序列表 -- ol li列表项/li /ol六、图片标签 imgimg src图片路径 alt加载失败提示 title鼠标悬浮提示 width200 height100属性src图片路径必填绝对路径从根目录出发的完整路径不依赖当前位置相对路径从当前位置出发的路径依赖当前目录路径./ 当前目录…/ 上一级目录alt图片无法显示时的替代文字title鼠标悬浮提示width/height宽高路径./ 当前目录…/ 上一级目录七、超链接标签aa href目标地址 target_blank链接文字/a 属性 href跳转目标必填 target打开方式 _self当前页默认 _blank新标签页链接分类普通链接a hrefxxx.html 锚链接同一页面 / 跨页面跳转到指定位置 !-- 设置锚点 -- a nameanchor/a !-- 跳转锚点 -- a href#anchor回到顶部/a 功能性链接javascript:alert(提示)八、表格标签 tabletable border1 cellspacing0 cellpadding5 tr !-- 行 -- td单元格/td !-- 列 -- /tr /table属性border边框cellspacing单元格间距cellpadding内容与边框距离colspan合并列rowspan合并行九、表单标签 form作用收集用户信息注册、登录、问卷form action提交地址 method提交方式 表单元素 /form提交方式get数据拼在 URL 后速度快、不安全post数据放在请求体安全、适合传文件常用表单元素!-- 文本框 -- input typetext placeholder请输入 !-- 密码框 -- input typepassword !-- 单选框 -- input typeradio namesex value男 !-- 复选框 -- input typecheckbox namehobby value游泳 !-- 下拉菜单 -- select option选项/option /select !-- 文本域 -- textarea rows5 cols20/textarea !-- 文件域 -- input typefile !-- 按钮 -- input typesubmit value提交 input typereset value重置 input typebutton value普通按钮 注意表单元素必须加 name 才能提交数据十、内嵌框架 iframe作用在当前页面嵌入另一个网页iframe srcxxx.html width500 height300 frameborder0/iframe属性src嵌入页面地址width/height宽高frameborder边框0 无边框name框架名scrolling是否显示滚动条十一、HTML / XHTML / XML 区别HTML语法宽松用于展示网页XHTMLHTML 严格版语法更规范XML自定义标签用于存储 / 传输数据
 + JDK Mission Control(JMC) 生产级性能排查全指南：从原理到线上低侵入诊断实战)
