深圳龙华网站开发,做网站表示时间的控件用哪个,wordpress相同字段调用,搜索引擎优化服务文章目录 一.HTML基本框架二.标题标签三.段落标签四.换行与水平线标签五.文本格式化标签(加粗、倾斜、下划线、删除线)六.图像标签扩展#xff1a;相对路径,绝对路径与在线网址 七.超链接标签八.音频标签九.视频标签十.列表标签十一.表格标签扩展#xff1a;表格结构标签合并… 文章目录 一.HTML基本框架二.标题标签三.段落标签四.换行与水平线标签五.文本格式化标签(加粗、倾斜、下划线、删除线)六.图像标签扩展相对路径,绝对路径与在线网址 七.超链接标签八.音频标签九.视频标签十.列表标签十一.表格标签扩展表格结构标签合并单元格 十二.表单标签1.input标签input占位文本属性(提示信息)单选框radio属性表单如何上传多个文件多选框checkbox属性 2.下拉菜单3.文本域4.label标签4.按钮 十三.布局标签div和span十四.字符实体空格大于小于符号 使用环境 VS Code编译器浏览器(谷歌或Microsoft Edge) 注释 注释标签 !-- … – VsCode注释快捷键 Ctrl /
一.HTML基本框架
如何快速生成VS Code基本框架在VS Code中输入’!并回车生成一个HTML基本骨架
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/htmlhtml:整个网页head:网页头部存放给浏览器看的代码例如CSSbody:网页主体存放给用户看的代码例如图片、文字等title:网页标题
二.标题标签
标签名 h1~h6双标签显示特点文字加粗且标签数字越大标题的文字大小越小一个标题标签独占一行注意h1标签在一个网页中只能用一次而h2~h6标签没有使用次数的限制 代码示例 h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6结果展示 三.段落标签
标签名p双标签 显示特点独占一行段落之间存在间隙 代码示例 p我我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我/pp你你你你你你你你你/pp她她她她她她她她她她她她她她她她她她她/p运行结果
四.换行与水平线标签
换行br单标签水平线hr 单标签 代码示例 bodyh1这里展示换行与水平线标签/h1hr第一行内容br第二行内容br第三行内容
/body
运行结果
五.文本格式化标签(加粗、倾斜、下划线、删除线)
加粗strong或b倾斜em或i下划线ins或u删除线del或s 代码示例 bodyh1这里展示文本格式化标签/h1strong加粗标签/strongb加粗标签/bbrem倾斜标签/emi倾斜标签/ibrins下划线标签/insu下划线标签/ubrdel删除线标签/dels删除线标签/s
/body结果展示
六.图像标签
作用在网页中插入图片语法 img src “图片的URL”
src用于指定图像的位置和名称是img的必须属性 代码示例 bodyh1这里展示图片的标签/h1brimg src./map.jpg alt !--这里用的是相对路径--
/body运行结果 常用属性 扩展相对路径,绝对路径与在线网址
相对路径从当前文件位置出发查找目标文件绝对路径从盘符出发查找目标文件在线网址路径为网址的形式
相对路径./map.jpg
绝对路径C:\imges\map.jpg
在线网址srchttps://www.baidu.com/images/logo.png七.超链接标签
作用跳转到其他页面标签名a(双标签)必须属性href-跳转地址
开发时如果不知道超链接的跳转地址则href属性值写#表示空链接点击不会跳转
默认是点击链接在当前页面打开网址如果想新建页面打开网址则需要添加属性 target“_blank” 代码示例 bodyh1这里展示超链接跳转标签/h1a hrefhttps://www.baidu.com点击我跳转到百度/a
/body 八.音频标签
标签名audio(双标签) 常用属性 属性作用说明src(必须属性)音频URL支持格式MP3,Ogg,Wavcontrols显示音频控制面板loop循环播放autoplay自动播放通常禁用 代码示例 audio src./music.mp3 controls loop autoplay/audio运行结果 九.视频标签
标签名video(双标签) 常用属性 属性作用说明src(必须属性)视频URL支持格式MP4,WebM,Oggcontrols显示视频控制面板loop循环播放muted静音播放autoplay自动播放 代码示例 video src./music.mp4 controls loop autoplay/video十.列表标签
列表的分类无序列表有序列表定义列表无序列表标签ul嵌套li,ul是无序列表li是列表条目。ul标签里面只能包含li标签li标签里面可以包裹任何内容有序列表标签ol嵌套li,ol是有序列表li是列表条目。ol标签里面只能包含li标签li标签里面可以包裹任何内容定义列表标签dl嵌套dt和dd,dl是定义列表dt是定义列表的标题dd是定义列表的描述。dl里面只能包含dt和dd,dt和dd可以包含任何内容 代码示例 bodyh2展示无序列表/h2ulli第一项/lili第二项/lili第三项/li/ulh2展示有序列表/h2ulol第一项/olol第二项/olol第三项/ol/ulh2展示定义列表/h2dldt列表标题/dtdd第一项/dddd第二项/dddd第三项/dddt第二标题/dtdd第一项/dddd第二项/dddd第三项/dd/dl
/body运行结果
十一.表格标签
语法table嵌套tr,tr嵌套td/th
标签名说明table表格tr行th表头单元格td内容单元格
表格默认没有边框线加属性border添加边框线 代码示例 bodyh2展示表格不加边框线/h2tabletrth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/tr/tableh2展示表格加边框线/h2table border1trth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/tr/table
/body运行结果
扩展表格结构标签
作用用表格结构标签把内容划分区域便于代码开发展示给用户看的部分不变
标签名含义thead表格头部tbody表格主体tfoot表格底部 代码展示 bodytable border1theadtrth姓名/thth语文/thth数学/thth总分/th/tr/theadtbodytrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/tr/tbodytfoottrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr/tfoot/table/body用户看到的表格结果不变
合并单元格
将多个单元格合并成一个单元格以合并同类信息。 可以跨行合并也可以跨列合并
跨行合并保留最上单元格添加属性rowspan跨列合并保留最左单元格添加属性colspan** rowspan和colspan的属性值是数值为合并单元格的个数** 代码示例 bodyh2展示跨行合并单元格/h2table border1theadtrth姓名/thth语文/thth数学/thth总分/th/tr/theadtbodytrtd张三/tdtd99/tdtd rowspan2100/tdtd199/td/trtrtd李四/tdtd98/td!-- td100/td --td198/td/tr/tbodytfoottrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr/tfoot/tableh2展示跨列合并单元格/h2table border1theadtrth姓名/thth语文/thth数学/thth总分/th/tr/theadtbodytrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/tr/tbodytfoottrtd总结/tdtd colspan3全市第一/td!-- td全市第一/tdtd全市第一/td --/tr/tfoot/table/body运行结果
十二.表单标签
1.input标签 input标签的type属性值总结 type属性值说明特点text文本框输入单行文本输入什么就显示什么password密码框输入什么都是以点的形式显示radio单选框checkbox多选框file上传文件 代码展示 h2展示input标签/h2文本框 input typetextbr密码框 input typepasswordbr 单选框 input typeradiobr多选框 input typecheckboxbr上传文件 input typefileinput占位文本属性(提示信息)
属性 placeholder属性值提示信息 代码展示 h2展示input的占位属性值/h2文本框 input typetext placeholder这是一个文本框br密码框 input typepassword placeholder这是一个密码框单选框radio属性 属性值总结 属性名作用说明name控件名称控件分组同组只能选中一个单选功能checked默认选中属性名和属性值相同简写为一个单词 代码示例 h2展示redio属性值/h2br 性别 input typeradio namegender 男 input typeradio namegender checked 女表单如何上传多个文件
默认情况下文件上传表单控件只能上传一个文件添加multiple属性可以实现文件多选功能 代码示例 h2展示上传多个文件/h2br 上传文件 input typefile multiple 多选框checkbox属性
默认选中添加属性checked 代码示例 h2展示多选框的默认选中/h2br 我姓input typecheckbox 王input typecheckbox checked 李input typecheckbox 国2.下拉菜单
语法总结select嵌套option,select是下拉菜单整体option是下拉菜单的每一项
默认选择属性selected 代码示例 h2展示下拉菜单/h2请选择你所在的城市selectoption selected北京/optionoption上海/optionoption广州/optionoption深圳/optionoption武汉/option/select3.文本域 作用多行输入文本等待表单控件 标签textarea, 双标签 代码示例 h2展示文本域标签/h2textarea name id cols30 rows10输入评论/textarea4.label标签 作用网页中某个标签的说明文本。或用label标签绑定文字和表单控件的关系增大表单控件的点击范围。 如何使用label标签增大点击范围①设置label标签的for属性值和表单控件的id属性值相同 ②使用label标签包裹文字和表单控件 支持文本框密码框上传文件单选框多选框下拉菜单文本域等增大点击范围 代码示例 h2展示label标签增大点击范围/h2性别 input typeradio namegender idman label forman男/labelinput typeradio namegender checked 女4.按钮 标签button(双标签) 表单控件用form标签管理按钮才有对应的实际效果
如果botton标签省略type属性则默认功能为提交 type属性值总结 type属性值说明submit提交按钮点击后可以提交数据到后台默认功能reset重置按钮点击后将表单控件恢复默认值button普通按钮默认没有功能一般配合JS使用 代码展示 h2表单按钮标签/h2!-- action是发送数据的地址即要把数据提交到哪的位置 --form action用户名input typetext brbr密码input typepassword brbrbutton typesubmit提交/buttonbutton typereset重置/button/form十三.布局标签div和span 作用布局网页划分网页区域 div:独占一行双标签 span:不换行双标签 代码示例 div这是div标签,独占一行/divspan这是不换行的span标签/span十四.字符实体空格大于小于符号
作用在网页中显示预留字符
显示结果描述实体名称空格 nbsp小于符号 lt大于符号 gt 代码示例 h2展示HTML中的字符实体/h2这里是展示字符实体nbsp;nbsp;打两个空格。nbsp;nbsp;nbsp;打三个空格。br画一个小于符号lt;br画一个大于符号gt;
