全屏响应式网站,网站后台验证码出不来,网站建设合同合同期限,短视频营销系统前端页面 Web页面 PC端程序页面 移动端APP页面 ... HTML页面 HTML超文本标记页面 超文本#xff1a;文本#xff0c;声音#xff0c;图片#xff0c;视频#xff0c;表格#xff0c;链接 标记#xff1a;由许多标签组成 HTML页面运行到浏览器上面 vscode便捷插件使用 vs…前端页面 Web页面 PC端程序页面 移动端APP页面 ... HTML页面 HTML超文本标记页面 超文本文本声音图片视频表格链接 标记由许多标签组成 HTML页面运行到浏览器上面 vscode便捷插件使用 vscode运行
自动刷新页面
!DOCTYPE html//指定当前html版本5
html langen//指定当前页面内容为英文headmeta charsetUTF-8//浏览器解码规则meta http-equivX-UA-Compatible contentIEedge//IE浏览器渲染效果按照IE浏览器最高版本展示meta nameviewport contentwidthdevice-width, initial-scale1.0//移动端适配titlehello/title
/headbodyhello world
/body/html htmlhtml文件根标签 head编写页面相关的属性 title页面标题 body页面内容展示信息 head和body是兄弟标签 head和title是父子标签 html
标签标题段落换行注释
注释
!-- 这是注释 --//ctrl/
标题标签 h1/h1 h2/h2 ... h6/h6 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyh1这是h1标签/h1h2这是h2标签/h2h3这是h3标签/h3h4这是h4标签/h4h5这是h5标签/h5h6这是h6标签/h6
/body/html 段落标签 p/p每行存在可察的间隙 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触Bonsai CSS的新手来说建议按照官方文档中的指导逐步操作确保所有依赖项都已正确安装并验证工具链是否正常工作1。/pp使用CSS Hooks管理样式表,CSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的CSS布局原理,理解CSS布局的核心在于掌握如何定义元素尺寸宽度/高度及其定位方式浮动、绝对定位等。/p
/body/html 换行标签 br或者/br实现段落换行间隙小于段落间隙 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触Bonsai CSS的新手来说建议按照官方文档中的指导逐步操作确保所有依赖项都已正确安装并验证工具链是否正常工作1。/pp使用CSS Hooks管理样式表,,brCSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细br检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的CSS布局原理,理解CSS布局的核心在于掌握如何定义元素尺寸宽度/高度及其定位方式浮动、绝对定位等。/p
/body/html 标签加粗倾斜删除线下划线 加粗strong b 倾斜em i 删除线del s 下划线ins u 前者起强调作用 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触strongBonsai/strongCSS的新手来说b建议按照s官方文档/s中的指导逐步操作/b确保所有ins依赖项/ins都已正确安装并验证工具链是否u正常/u工作1。/pbr使用CSS Hooks管理样式表,,/brCSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细br检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的emCSS布局原理/em,理解CSS布局的核心在于i掌握如何定义元素尺寸/i宽度/高度及del其定位方式浮动、绝对定位等/del。/p
/body/html 图像 srctitlealtheight/weightborder
img标签_src属性 img src./baidu.png img标签必须搭配src使用指定图片路径 绝对路径 图片路径 网络上的图片资源 相对路径 ./xxx.png当前路径 ./img/xxx.png某个文件夹下 ../xxx.png上一层路径 本地图片插入
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触strongBonsai/strongCSS的新手来说b建议按照s官方文档/s中的指img src./baidu.png/b确保所有ins依赖项/ins都已正确安装并验证工具链是否u正常/u工作1。/pbr使用CSS Hooks管理样式表,,/brCSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细br检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的emCSS布局原理/em,理解CSS布局的核心在于i掌握如何定义元素尺寸/i宽度/高度及del其定位方式浮动、绝对定位等/del。/p
/body/html 网络图片插入
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触strongBonsai/strongCSS的新手来说b建议按照s官方文档/s中的指img src./baidu.png/b确保所有ins依赖项/ins都已正确安装并验证工具链是否u正常/u工作1。/pbr使用CSS Hooks管理样式表,,/brCSS Hooks提供了简化的方式去管理和增强CSS的功能当面对环境配置难题时应仔细br检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的emCSS布局原理/em,理解imgsrchttps://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpgi掌握如何定义元素尺寸/i宽度/高度及del其定位方式浮动、绝对定位等/del。/p
/body/html img标签_alt属性 img src alt图片加载失败... border1px width100px height100px alt替换文本当文本不能正确显示时会显示一个替换的文字 title提示文本鼠标放到图片上就会有提示 width/height控制宽度高度高度和宽度一般该一个就行另外一个会等比例缩放否则图片会失衡 border边框参数是宽度的像素但是一般使用css设定 超链接标签
a_herfa_target a href target /a href必须具备表示点击会跳转到哪个页面 target打开方式默认是_self. 如果是_blank 则用新的标签打开 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya hrefhttps://www.baidu.com/跳转到百度/aa href20241225.html跳转到html页面/aa href#在当前页面/aa hrefhttps://www.baidu.com/img srcbaidu.png alt title跳转到百度/a
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title这是页面标签/title
/headbodyp对于初次接触strongBonsai/strongCSS的新手来说b建议按照s官方文档/s中的指img src./baidu.png title这是一张百度图片border2px/b确保所有ins依赖项/ins都已正确安装并验证工具链是否u正常/u工作1。/pbr使用CSS Hooks管理样式表,,/brCSS Hooks提供了ahrefhttps://www.baidu.com/s?ieutf-8f8rsv_bp1tn39042058_26_oem_dgwd%E7%99%BE%E5%BA%A6oq%25E6%25AD%25B9%25E6%25AF%2592rsv_pqc049e1db002d548frsv_td34dAccK%2BMxkf%2Bu6RAUck6LsIGwU3XAhvhXOF0K3mxNmrBu7Z6jtUQdO4SYLYJD%2BbePlATiDQ6ELrqlangcnrsv_dltbrsv_sug38rsv_enter1rsv_sug16rsv_sug7100rsv_sug20rsv_btypetinputT1164rsv_sug42928targethttps://www.baidu.com/简化的方式去管理和增强/abr检查Node.js版本以及npm包管理器的状态确认它们满足最低要求后再继续其他步骤2。/pp掌握基本的emCSS布局原理/em,理解img srchttps://www.keaitupian.cn/cjpic/fombd/2/253/1659552792/3869332496.jpgalt图片加载失败...i掌握如何定义元素尺寸/i宽度/高度及del其定位方式浮动、绝对定位等/del。/p
/body/html 表格tabletrtdththeadalignbordercellpaddingcellspacingwidth/height table表示整个表格 tr表示表格的一行 td表示一个单元格 th表示表头单元格会居中加粗 thead表格的头部区域注意和th区分范围是比th要大的 thead里面的内容居中加粗显示 align十单元格相对于周围元素的对齐方式. aligncenter不是内部元素的对齐方式 border表示边框1表示有边框数字越大边框越粗 表示没边框 cellpadding内容距离边框的距离默认1像素 cellspacing单元格之间的距离默认是2像素 width/height设置尺寸 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0tr aligncentertd姓名/tdtd性别/tdtd年龄/td/trtr aligncentertd张三/tdtd男/tdtd3/td/trtr aligncentertd李四/tdtd男/tdtd4/td/trtr aligncentertd王五/tdtd女/tdtd5/td/tr/table
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0theadtr aligncenterth姓名/thth性别/thth年龄/th/tr/theadtr aligncentertd张三/tdtd男/tdtd3/td/trtr aligncentertd李四/tdtd男/tdtd4/td/trtr aligncentertd王五/tdtd女/tdtd5/td/tr/table
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0theadtr aligncenterth姓名/thth性别/thth年龄/th/tr/theadtr aligncentertd姓名/tdtd性别/tdtd年龄/td/trtr aligncentertd张三/tdtd男/tdtd3/td/trtr aligncentertd李四/tdtd男/tdtd4/td/trtr aligncentertd王五/tdtd女/tdtd5/td/tr/table
/body/html 格式书写 thead/thead tbody/tbody !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0theadtr aligncenterth姓名/thth性别/thth年龄/th/tr/theadtbodytr aligncentertd张三/tdtd男/tdtd3/td/trtr aligncentertd李四/tdtd男/tdtd4/td/trtr aligncentertd王五/tdtd女/tdtd5/td/tr/tbody/table
/body/html
合并单元格水平/竖直 rowspan 竖直方向上 colspan 水平方向 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500px height300px cellspacing0theadtr aligncenterth姓名/thth性别/thth年龄/th/tr/theadtbodytr aligncentertd姓名/tdtd性别/tdtd年龄/td/trtr aligncentertd张三/tdtd rowspan2男/tdtd3/td/trtr aligncentertd李四/td!-- td男/td --td4/td/trtr aligncentertd colspan2王五/女/td!-- td女/td --td5/td/tr/tbody/table
/body/html 列表
无序列表ulli
type属性 disc实心圆浏览器默认展示方式 square实心方块 circle空心圆 快捷键 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1这是一个无序列表/h1ulli这是内容1/lili这是内容2/lili这是内容3/li/ul
/body/html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1这是一个无序列表/h1ul typecircleli这是内容1/lili这是内容2/lili这是内容3/li/ul
/body/html 有序列表olli
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1这是一个无序列表/h1ul typecircleli这是内容1/lili这是内容2/lili这是内容3/li/ulh1这是一个有序列表/h1olli这是有序列表1/lili这是有序列表2/lili这是有序列表3/lili这是有序列表4/li/ol
/body/html typestart属性 type start h1这是一个有序列表/h1ol typeA start3li这是有序列表1/lili这是有序列表2/lili这是有序列表3/lili这是有序列表4/li/ol 自定义列表dldtdd
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1这是一个无序列表/h1ul typecircleli这是内容1/lili这是内容2/lili这是内容3/li/ulh1这是一个有序列表/h1ol typeA start3li这是有序列表1/lili这是有序列表2/lili这是有序列表3/lili这是有序列表4/li/olh1这是一个自定义列表/h1dldt自定义列表显示内容dd自定义列表内容1/dddd自定义列表内容2/dddd自定义列表内容3/dd/dt/dl
/body/html 表单inputformlabelselect 表单标签完成服务器的一次交互 表单域包含表单元素的区域重点是form标签 form action/form 表单控件输入框提交按钮重点是input标签必须搭配表单域完成 可以通过对type进行对应的取值来控制input类型 input 文本框input typetext 单行输入 密码框input typepassword 单选框input typeradio namesex checkedcheckedname相同时只能点中一个checkedchecked标记性别默认为该值 复选框input typecheckbox 普通按钮input typebutton value我是个按钮 οnclickalert(hello)onclick表示点击出现什么反应 提交按钮input typesubmit 清空按钮input typereset 提交文件input typefile !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform action姓名input typetextbr密码input typepasswordbr性别input typeradio namesex男input typeradio namesex checkedchecked女br爱好input typecheckbox吃饭input typecheckbox睡觉input typecheckbox玩游戏brinput typebutton value我是个按钮 onclickalert(hello)input typesubmitinput typeresetinput typefile/form
/body/html 提交
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform actionhttps://www.baidu.com/课程input typetext namecourseinput typesubmit/form
/body/html label label formale男/label input typeradio namesex idmale bodyinput typeradio namesex男input typeradio namesex女//点击按钮才能选中
/body bodylabel formale男/labelinput typeradio namesex idmalelabel forfemale女/labelinput typeradio namesex idfemale//点击文字也可选中
/body select默认展示第一个 select name id option value selectedselected/option /select !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodylabel formale男/labelinput typeradio namesex idmalelabel forfemale女/labelinput typeradio namesex idfemaleselect name idoption value---请选择年份---/optionoption value---1991---/optionoption value---1992---/optionoption value---1993---/optionoption value---1994---/option/select
/body/html select name idoption value---请选择年份---/optionoption value selectedselected---1991---/option//展示该选项option value---1992---/optionoption value---1993---/optionoption value---1994---/option/select textarea内容框 textarea name id cols30 rows10/textarea 无语义标签divspan 没有固定的用途 div 是独占一行的是一个大盒子 span 不占一行是一个小盒子 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydivdivspan吃饭/spanspan睡觉/spanspan玩游戏/span/divdivdiv吃饭/divdiv睡觉/divdiv玩游戏/div/div/div
/body/html 实践项目---简历书写 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1某某某/h1divh2基本信息/h2img srcyy.jpg alt width200 height200spanp求职意向:Java开发/p/spanspanp联系电话:xxx-xxx-xxx/p/spanspanp个人邮箱:xxx-xxx163.com/p/spanspanpa hrefhttps://gitee.com/我的Gitee/a/p/spanspanpa hrefhttps://csdnnews.blog.csdn.net/article/details/130333678?spm1000.2115.3001.5927我的博客/a/p/span/divdivh2教育背景/h2olli小学/lili初中/lili高中/lili大学/li/ol/divdivh2专业技能/h2ulli掌握Java编程/lili掌握数据结构/lili掌握前端相关技能,html,css,JavaScript/li/ul/divdivh2个人项目/h2olh3li留言墙/li/h3p开发时间:2023年4月1日~2023年4月28日/pp功能介绍/pulli支持留言发布/lili支持匿名留言/li/ul/ololh3li学习小助手/li/h3p开发时间:2023年5月1日~2023年5月28日/pp功能介绍/pulli错词检测/lili支持同学探讨/li/ul/ol/divdivh2个人评价/h2p热爱生活,热爱编程/p/div
/body/html
个人简历页面填写 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytabletheadh2请填写简历信息/h2/theadtbodytrtd姓名/tdtdinput typetext/td/trtrtd性别/tdtdinput typeradio idmale namesexlabel formale男/labelinput typeradio idfemale namesexlabel forfemale女/label/td/trtrtd出生日期/tdtdselect name idoption value selectedselected---请选择年份---/optionoption value---2004---/optionoption value---2005---/optionoption value---2006---/optionoption value---2007---/option/selectselect name idoption value---请选择月份---/optionoption value---1月---/optionoption value---2月---/optionoption value---3月---/optionoption value---4月---/optionoption value---5月---/optionoption value---7月---/optionoption value---8月---/optionoption value---9月---/optionoption value---10月---/optionoption value---11月---/optionoption value---12月---/option/selectselect name idoption value---请选择日期---/optionoption value---1号---/optionoption value---2号---/optionoption value---3号---/optionoption value---4号---/optionoption value---5号---/optionoption value---6号---/option/select/td/trtrtd就读学校/tdtdinput typetext/td/trtrtd应聘岗位/tdtdinput typecheckbox前端开发input typecheckbox后端开发input typecheckbox测试开发input typecheckbox运维开发/td/trtrtd掌握的技能/tdtdtextarea name id cols30 rows10/textarea/td/trtrtd项目经历/tdtdtextarea name id cols30 rows10/textarea/td/trtrtd/tdtdinput typecheckbox我已仔细阅读过公司的招牌要求/td/trtrtd/tdtda hrefhttps://www.baidu.com/查看我的状态/a/td/trtrtd/tdtdh3请应聘者确认/h3/td/trtrtd/tdtdulli以上信息真实有效/lili能够尽早去公司实习/lili能接受公司的加班文化/li/ul/td/tr/tbody/table
/body/html
