计算机的基础计算机的五大部分输出设备、输入设备、存储器【内存(读写速度快、硬盘读写速度慢】、CPU运算、控制软件系统软件、应用软件 ------- c/s b/s c:client s:server b:brower前端代码------浏览器渲染常见的浏览器360、ie、谷歌、火狐第一次网景 、微软的ie第二次网景的火狐第三次谷歌网页网站的基本单位有文字、图片、音频、链接htmlhtml超文本标记语言写网页的语言超不只有文件还有文本、图片、视频、音频超——超链接标记已经有其表示的意思可以直接使用语言标记的写法读音使用规则后缀名区分文件的类型比如.html .txt .pdf .png.htmlhtml文件浏览器解析html的样式英文字母开始标签标签体/结束标签 大部分情况标签 少部分情况标签的属性1、该标签提供额外的信息或者设置 属性名属性值2、一个标签可以有多个属性多个属性之间用空格隔开3、一般在开始标签之后通过空格开始写属性4、不同的表情有不同的属性不能互相混用5、当属性名属性值时可以简写例如disableddisabled 可以写成disabled 或disabled 或disabledtrue开发工具记事本、sublimit、VScode解析前端代码浏览器谷歌骨架先按shift 然后按enter!DOCTYPE html---- 进行文档声明声明使用html版本显示网页默认是h5html langen-------lang属性声明当前文档所显示的语言类型 en表示英文 zh-cn表示中文head------字符编码a—z A—Zmeta charsetUTF-8------UTF-8万国码 charset解码 编码格式和解码格式必须保持一致否则会出现乱码meta nameviewport contentwidthdevice-width, initial-scale1.0----移动适配titleDocument/title/headbody注释!-- -- 注释的快捷键是ctrl//body/html标题框架标题标签hn/hn n1,2,3,4,5,6 h1到h6逐级减小 h标签独占一行段落标签p段落内容1/pp段落内容2/p水平线标签hr换行标签br文本格式化标签加粗标签strong/strong b/b倾斜标签i/i em/em下划线标签u/u删除线标签del/del预格式化标签pre/pre上标标签xsup2/sup下标标签ysub2/sub插入图片常见图片格式GIF图片可以动图片透明颜色少只有256色JPG1600以上色PNGBMP资源路径绝对路径从计算机的顶级目录盘符开始的文件路径相对路径从当前文件所在位置作为参考点建立的路径插入图片img /src属性指向图片的路径的img src / ../表示的是上一级目录 ./表示当前目录 下一级的直接喊宽和高width height 单位是px控制文字和图片的位置align aligntop顶部 alignbottom底部 alignmiddle中间alignleft左对齐 alignrigft右对齐控制文字与图片的水平距离hspace 单位是px控制文字与图片的垂直距离vspace 单位是px如果图片无法正常加载出来alt里面的文字救护代替图片全局属性所有的标签都具有该属性title用来显示描述的文字的 title是全局属性如果没有alt属性那么alt的属性值就是title的属性值超链接超链接可以完成页面之间的跳转超链接a/a 要有提示字和指定的跳转对象#表示这是一个空连接点击之后不会跳转会把当前页面刷新一次href指定链接跳转的地址a href“#”/a 刷新a链接内可以放任何其他标签超链接默认是在当前的窗口跳转到指定的页面的如果想要更改利用属性target target-blank表示去新的窗口跳转到指定的页面锚链接id全局属性 是标签的唯一表示同一网页内id属性值不能重复标签视频标签视频标签video/videosrc属性指明视频所在的位置video src controls/videoloop循环播放autoplay自动播放muted静音autoplay和mute配合使用音频标签音频标签audio/audioaudio src“” controlsaudioloop循环播放列表标签无序列表布局排列整齐的不需要规定顺序的区域 ulli ul无序列表li列表的子项ulli/lili/li/ulul只能包含li标签li可以包含任何内容有序列表olliolli/lili/li/ol自定义列表:dl只能包含dt和dddt和dd能包含任何内容dldt/dt 标题dd/dd 选项dd/dd 选项/dl表格标签table/table表格的范围tr/tr行td/td列table border1 cellspacing0trth/thth/thtd/td/trtrtd/tdtd/tdtd/td/tr/table 表示两行三列th/th表示表头单元格bordern 边框属性 n0表示没有边框 不为0表示有边框边框的宽度为n像素cellspacing 细胞间隙 指两个单元格之间的间隙默认值为2pxalign属性表示表格的对齐方式水平方向 alignleft左 right右 center居中valign属性表示表格的对齐方式垂直方向 valigntop顶 bottom底 middle居中bgcolor背景颜色 bgcolor#cccbackgroung背景为图片 backgroungwidth30% height50% 范围为0%到100% 或使用 px表格的跨行与跨列1、明确合并的目标2、保留最左最上的元素添加对应的跨行跨列的属性3、删除掉其他被跨行跨列的单元格table border1 width500px height400pxtrth/thth/thth/thth/th/trtrtd rowspan2/tdtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/trtrtd /td!-- 跨列 --td colspan3/td/tr/tablerowspan跨行colspan跨列无语义标签div/div div独占一行span/span span不会独占一行有语义的标签header/header 网页头部footer/footer 网页底部nav/nav 导航栏字符实体lt 小于号gt 大于号nbsp; 空格quot 双引号表单标签表单标签 formaction指定表单数据要交给哪个页面处理method:http请求中的那种提交方式 默认的属性值是getget、post、put、head……enctype:告诉服务器如何去解析这次的请求post上传文件、图片 enctypemultipart/form-dataenctypeapplication/x-www-form-urlencoded 默认input、下拉菜单 、文本域type表单类型value元素值readonly :只读属性form action#input typetext id value这是你不能改的 input typepassword nameusername性别input typeradio namesex id value男男input typeradio namesex id value女女 brchecked 默认选中你喜欢的食物有 input typecheckbox namehobby id value吃饭吃饭input typecheckbox namehobby id value睡觉 checked睡觉input typecheckbox namehobby id value打豆豆打豆豆input typesubmit name id value上传input typeresetinput typebutton name id value普通按钮input typefilecdkjcnsjcdscdinput typehidden namehidden id valuecdcdcdcdcdinput typeemaildisabled 禁用button disabled按钮/buttonget和post的http协议规定不同get请求安全性极差直接把提交的数据以键值对的形式显示在url中post相对比较安全get允许的最多是2kpost无要求下拉框form action#收货地址multiple :以列表的形式显示下拉框selected 表示的是下拉框里面的默认选中select nameaddress option value广州广州/optionoption valueaaa selected南京/optionoption value陕西陕西/option/selectbutton提交/buttonmaxlength 字符的最大个数input typetext nameusername id maxlength6文本域form action#textarea cols20 rows20 namehobby /textareainput typetime nameusername id placeholder请输入用户名/formcols列rows行placeholder 背景提示框架标签框架标签iframe 不受同源策略的约束 同源策略指 协议、端口、主机名iframe srchttps://www.baidu.com frameborder1/iframea hrefhttps://www.taobao.com targetw去淘宝/aiframe namew/iframedetailssummary下面是图片的详细信息/summary这是详细描述内容/detaillabel :扩大域form action#1. labelinput typeradio namesex valuenan男/label2. input typeradio namesex valuenv idnvlabel fornv女/label 
长河君 · 2026/10/16 5:37:59 · 阅读 1.2k 作业（html）
计算机的基础计算机的五大部分输出设备、输入设备、存储器【内存(读写速度快、硬盘读写速度慢】、CPU运算、控制软件系统软件、应用软件 ------- c/s b/s c:client s:server b:brower前端代码------浏览器渲染常见的浏览器360、ie、谷歌、火狐第一次网景 、微软的ie第二次网景的火狐第三次谷歌网页网站的基本单位有文字、图片、音频、链接htmlhtml超文本标记语言写网页的语言超不只有文件还有文本、图片、视频、音频超——超链接标记已经有其表示的意思可以直接使用语言标记的写法读音使用规则后缀名区分文件的类型比如.html .txt .pdf .png.htmlhtml文件浏览器解析html的样式英文字母开始标签标签体/结束标签 大部分情况标签 少部分情况标签的属性1、该标签提供额外的信息或者设置 属性名属性值2、一个标签可以有多个属性多个属性之间用空格隔开3、一般在开始标签之后通过空格开始写属性4、不同的表情有不同的属性不能互相混用5、当属性名属性值时可以简写例如disableddisabled 可以写成disabled 或disabled 或disabledtrue开发工具记事本、sublimit、VScode解析前端代码浏览器谷歌骨架先按shift 然后按enter!DOCTYPE html---- 进行文档声明声明使用html版本显示网页默认是h5html langen-------lang属性声明当前文档所显示的语言类型 en表示英文 zh-cn表示中文head------字符编码a—z A—Zmeta charsetUTF-8------UTF-8万国码 charset解码 编码格式和解码格式必须保持一致否则会出现乱码meta nameviewport contentwidthdevice-width, initial-scale1.0----移动适配titleDocument/title/headbody注释!-- -- 注释的快捷键是ctrl//body/html标题框架标题标签hn/hn n1,2,3,4,5,6 h1到h6逐级减小 h标签独占一行段落标签p段落内容1/pp段落内容2/p水平线标签hr换行标签br文本格式化标签加粗标签strong/strong b/b倾斜标签i/i em/em下划线标签u/u删除线标签del/del预格式化标签pre/pre上标标签xsup2/sup下标标签ysub2/sub插入图片常见图片格式GIF图片可以动图片透明颜色少只有256色JPG1600以上色PNGBMP资源路径绝对路径从计算机的顶级目录盘符开始的文件路径相对路径从当前文件所在位置作为参考点建立的路径插入图片img /src属性指向图片的路径的img src / ../表示的是上一级目录 ./表示当前目录 下一级的直接喊宽和高width height 单位是px控制文字和图片的位置align aligntop顶部 alignbottom底部 alignmiddle中间alignleft左对齐 alignrigft右对齐控制文字与图片的水平距离hspace 单位是px控制文字与图片的垂直距离vspace 单位是px如果图片无法正常加载出来alt里面的文字救护代替图片全局属性所有的标签都具有该属性title用来显示描述的文字的 title是全局属性如果没有alt属性那么alt的属性值就是title的属性值超链接超链接可以完成页面之间的跳转超链接a/a 要有提示字和指定的跳转对象#表示这是一个空连接点击之后不会跳转会把当前页面刷新一次href指定链接跳转的地址a href“#”/a 刷新a链接内可以放任何其他标签超链接默认是在当前的窗口跳转到指定的页面的如果想要更改利用属性target target-blank表示去新的窗口跳转到指定的页面锚链接id全局属性 是标签的唯一表示同一网页内id属性值不能重复标签视频标签视频标签video/videosrc属性指明视频所在的位置video src controls/videoloop循环播放autoplay自动播放muted静音autoplay和mute配合使用音频标签音频标签audio/audioaudio src“” controlsaudioloop循环播放列表标签无序列表布局排列整齐的不需要规定顺序的区域 ulli ul无序列表li列表的子项ulli/lili/li/ulul只能包含li标签li可以包含任何内容有序列表olliolli/lili/li/ol自定义列表:dl只能包含dt和dddt和dd能包含任何内容dldt/dt 标题dd/dd 选项dd/dd 选项/dl表格标签table/table表格的范围tr/tr行td/td列table border1 cellspacing0trth/thth/thtd/td/trtrtd/tdtd/tdtd/td/tr/table 表示两行三列th/th表示表头单元格bordern 边框属性 n0表示没有边框 不为0表示有边框边框的宽度为n像素cellspacing 细胞间隙 指两个单元格之间的间隙默认值为2pxalign属性表示表格的对齐方式水平方向 alignleft左 right右 center居中valign属性表示表格的对齐方式垂直方向 valigntop顶 bottom底 middle居中bgcolor背景颜色 bgcolor#cccbackgroung背景为图片 backgroungwidth30% height50% 范围为0%到100% 或使用 px表格的跨行与跨列1、明确合并的目标2、保留最左最上的元素添加对应的跨行跨列的属性3、删除掉其他被跨行跨列的单元格table border1 width500px height400pxtrth/thth/thth/thth/th/trtrtd rowspan2/tdtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/trtrtd /td!-- 跨列 --td colspan3/td/tr/tablerowspan跨行colspan跨列无语义标签div/div div独占一行span/span span不会独占一行有语义的标签header/header 网页头部footer/footer 网页底部nav/nav 导航栏字符实体lt 小于号gt 大于号nbsp; 空格quot 双引号表单标签表单标签 formaction指定表单数据要交给哪个页面处理method:http请求中的那种提交方式 默认的属性值是getget、post、put、head……enctype:告诉服务器如何去解析这次的请求post上传文件、图片 enctypemultipart/form-dataenctypeapplication/x-www-form-urlencoded 默认input、下拉菜单 、文本域type表单类型value元素值readonly :只读属性form action#input typetext id value这是你不能改的 input typepassword nameusername性别input typeradio namesex id value男男input typeradio namesex id value女女 brchecked 默认选中你喜欢的食物有 input typecheckbox namehobby id value吃饭吃饭input typecheckbox namehobby id value睡觉 checked睡觉input typecheckbox namehobby id value打豆豆打豆豆input typesubmit name id value上传input typeresetinput typebutton name id value普通按钮input typefilecdkjcnsjcdscdinput typehidden namehidden id valuecdcdcdcdcdinput typeemaildisabled 禁用button disabled按钮/buttonget和post的http协议规定不同get请求安全性极差直接把提交的数据以键值对的形式显示在url中post相对比较安全get允许的最多是2kpost无要求下拉框form action#收货地址multiple :以列表的形式显示下拉框selected 表示的是下拉框里面的默认选中select nameaddress option value广州广州/optionoption valueaaa selected南京/optionoption value陕西陕西/option/selectbutton提交/buttonmaxlength 字符的最大个数input typetext nameusername id maxlength6文本域form action#textarea cols20 rows20 namehobby /textareainput typetime nameusername id placeholder请输入用户名/formcols列rows行placeholder 背景提示框架标签框架标签iframe 不受同源策略的约束 同源策略指 协议、端口、主机名iframe srchttps://www.baidu.com frameborder1/iframea hrefhttps://www.taobao.com targetw去淘宝/aiframe namew/iframedetailssummary下面是图片的详细信息/summary这是详细描述内容/detaillabel :扩大域form action#1. labelinput typeradio namesex valuenan男/label2. input typeradio namesex valuenv idnvlabel fornv女/label