建网站培训机构,wordpress搭建学校网站,wordpress主题安装失败下载失败,wordpress文件夹分类名称一、HTML 1、 HTML概念 网页#xff0c;是网站中的一个页面#xff0c;通常是网页是构成网站的基本元素#xff0c;是承载各种网站应用的平台。通俗的说#xff0c;网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件#xff0c;俗称 HTML文件。 2、…一、HTML 1、 HTML概念 网页是网站中的一个页面通常是网页是构成网站的基本元素是承载各种网站应用的平台。通俗的说网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件俗称 HTML文件。 2、 什么是HTML HTML全称Hyper Text Markup Language(超文本标记语言) 超文本:页面内可以包含图片、链接甚至音乐、程序等非文字元素 标记:标签不同的标签实现不同的功能 语言:人与计算机的交互工具 3、 HTML能做什么 HTML使用标记标签来描述网页,展示信息给用户 展现音频,视频,图片 表格,列表 超链接 4、 HTML书写规范 HTML标签是以尖括号包围的关键字 例如a img HTML标签通常是成对出现的有开始就有结束 HTML通常都有属性格式:属性‘属性值’(多个属性之间空格隔开) 属性放在开标签内 a href target /a HTML标签不区分大小写,建议全小写 HTML标签支持合理的嵌套 开闭标签之间加要展示的内容 文件后缀是html,写完后使用浏览器打开 !-- 例如 --
a hrefhttp://www.baidu.com target_blank超链接/a
5、 开发工具 VSCode (微软) (我们使用这款) HBuilderX (国产) WebStorm (IDEA家族的) Dreamweaver (考古队) 5.1 安装 VSCode 默认下一步下一步就可以. 建议勾选12345,这样可以在右键时有 一个提示使用VSCode打开文件
5.2 插件 安装插件 Chinese (Simplified)(简体中文) Auto rename tag (自动改标签名) Material lcon Theme (图标样式) open in browser (快速使用浏览器打开页面) 以上几个是非常墙裂建议安装!,在应用商店,输入以上几个的名字即可 5.3 使用vscode 使用VSCode,最好的方式 先在本地磁盘创建好一个前端项目(文件夹) 使用VSCode打开该文件夹 创建页面文件 5.4 运行 1 在磁盘中找到文件,使用浏览器打开 2 或者使用刚才我们安装的插件,有快捷键 altb,就会使用电脑的默认浏览器打开 二、HTML基本标签 1、 结构(骨架)标签[重要]
html:根标签 head网页头标签title/title:页面的标题 /head body/body网页正文
/html 以下属性了解 属性名代码描述text body text#f00/ body设置网页正文中所有文字的颜色bgcolor body bgcolor#00f/ body设置网页的背景色background body background1.png/ body设置网页的背景图 颜色的表示方式 第一种方式用表示颜色的英文单词例red green blue 第二种方式用16进制表示颜色例#000000 #ffffff #325687 #377405 第三种方式: 用三原色rgb(0,0,0) 数字取值0-255 2、 排版标签 [重要] 可用于实现简单的页面布局 注释标签!--注释-- 换行标签 br (单标签,没有行间距) 段落标签 p文本文字/ p 特点段与段之间有空行 (行间距比较大) 属性align对齐方式(left、center、right) 水平线标签: hr/ (单标签) 属性(了解): width水平线的长度(两种:第一种:像素表示第二种百分比表示) 像素单位px,长度固定 百分比单位% ,长度随着浏览器窗口会变化 size: 水平线的粗细 (像素表示例如10px) color:水平线的颜色 align:水平线的对齐方式 缩进(空格符) nbsp; 劝学 颜真卿
-----------
三更灯火五更鸡,
正是男儿读书时.
黑发不知勤学早,
白首方悔读书迟.
要求: 古诗名标题,作者要缩进,正文前有分割线,正文四句话换行 h2劝学/h2nbsp;nbsp;nbsp;nbsp;颜真卿hr width130px alignleft三更灯火五更鸡,br正是男儿读书时.br黑发不知勤学早,br白首方悔读书迟.brhr width130px alignleftp三更灯火五更鸡,/pp正是男儿读书时./pp黑发不知勤学早,/pp白首方悔读书迟./p 3、 块标签[重要] 使用CSSDIV是现下流行的一种布局方式 标签代码描述div div/ div行级块标签独占一行换行span span/ span行内块标签所有内容都在同一行
ps: 会用F12 浏览器开发者工具
4、 基本文字标签 font标签处理网页中文字的显示方式 属性名代码描述size font size7/ font用于设置字体的大小最小1号最大7号color font color#f00/ font用于设置字体的颜色face font face宋体/ font用于设置字体的样式
5、 标题标签[重要] 随着数字增大文字逐渐变小字体是加粗的内置字号默认占据一行 标签代码描述h1 h1/ h11号标题最大字号h2 h2/ h22号标题h3 h3/ h33号标题h4 h4/ h44号标题h5 h5/ h55号标题h6 h6/ h66号标题最小字号
6、 列表标签[重要] 无序列表 1 2 3 有序列表 day01 day02 day03 无序列表使用一组无序的符号定义 ul /ul ul typecircleli/li
/ul ul标签内,有属性type 属性值描述用法举例circle空心圆 ul typecircle /uldisc实心圆 ul typedisc /ulsquare黑色方块 ul typesquare /ul 有序列表使用一组有序的符号定义 ol /ol ol typea start1li/li
/ol ol标签内,有属性type 属性值描述用法举例1数字类型 ul type1 /ulA大写字母类型 ul typeA /ula小写字母类型 ul typea /ulI大写古罗马 ul typeI /uli小写古罗马 ul typei /ul 列表嵌套无序列表与有序列表相互嵌套使用 代码举例 olli/lili/liliulli/li/ul/li/ol
7、 图形标签[重要] 在页面指定位置处中引入一幅图片 img / 属性名描述src引入图片的地址width图片的宽度height图片的高度border图片的边框align与图片对齐显示方式alt提示信息 路径问题: ./ 当前文件夹 . ../ 上一层文件夹 olliimg width100px src../images/java1.jpg/liliimg width100px src../images/java2.jpg/liliimg width100px src../images/java3.jpg/li/ol 8、 超链接标签[重要] 在页面中使用链接标签跳转到另一页面 标签 a href /a 属性href:跳转页面的地址(跳转到外网需要添加协议) 设置跳转页面时的页面打开方式target属性 _blank在新窗口中打开 _self在原页面中打开 练习: 图片加链接(点击图片能跳转页面) !-- 图片背后是连接 --a hrefhttps://baike.baidu.com/item/Java/85979?frge_alaimg src../images/6.jpg width200px/a
练习: 列表加链接 ullia href#外长现场读宪法回应台湾问题热/a/lilia href#委员建议允许女职工哺乳期灵活办公/a/lilia href#十组数据看增进民生福祉/a/li/ul
9、 表格标签[重要]
表格标签非常重要,用于在项目中展示数据的,例如下方这个 普通表格(table,tr,td) table !-- 表格 --tr !-- table row 行 --td/td !-- table data单元格数据 --/tr
/table 表格的列标签(th)内容有加粗和居中效果 tablethead !-- 表头,一般用在第一行--th/th !-- table head--/thead
/table 表格的列合并属性(colspan)在同一行内同时合并多个列 column 列 tabletrtd colspan合并的列数/td/tr
/table 表格的行合并属性(rowspan)在同一列跨多行合并 tabletrtd rowspan合并的行数/td/tr
/table 三、HTML表单标签[最重要] html表单用于收集不同类型的用户输入数据 1、 form元素常用属性 action表示动作值为服务器的地址把表单的数据提交到该地址上处理 method:请求方式get 和post get: 地址栏,请求参数都在地址后拼接 path?name张三password23456 不安全 效率高 get请求大小有限制不同浏览器有不同但是大约是2KB一般情况用于查询数据 post 地址栏请求参数单独处理。 安全可靠些 效率低 post请求大小理论上无限一般用于插入删除修改等操作 enctype:表示是表单提交的类型 默认值application/x-www-form-urlencoded 普通表单 multipart/form-data 多部分表单(一般用于文件上传) 2、 input元素 作为表单中的重要元素可根据不同type值呈现为不同状态 属性值描述代码text单行文体框 input typetext/ 默认的password密码框 input typepassword/radio单选按钮 input typeradio/checkbox复选框 input typecheckbox/date日期框 input typedate/time时间框 input typetime/datetime日期和时间框 input typedatetime/email电子邮件输入 input typeemail/file文件上传 input typefile/hidden隐藏域 input typehidden/submit表单提交按钮 input typesubmit/button普通按钮 input typebutton/reset重置按钮 input typereset/ input标签中属性 value 输入框的值 name 输入框值的key,没有name属性,将来后台服务器没有办法接收数据 3、 select 元素(下拉列表) 单选下拉列表 select /select 默认选中属性selectedselected ps: HTML5以后,属性名等于属性值的属性,可以简写属性即可 selectoption selectedselected内容/option...option/option
/select 多选下拉列表属性 select/ select 多选列表multiplemultiple select multiplemultipleoption/option
/select
4、 textarea元素(文本域) 多行文本框 textarea cols列 rows行 /textarea 5、 综合示例
案例效果图
body!-- input的value属性,是输入框的默认值,很重要一般用在更新数据,在输入框回显数据用的input的属性,做输入框的背景提示
---------------------------------------------表单是干什么? 收集数据1) 点击提交按钮,就会提交数据到action指定的服务器2) 要给input,select设置name属性值,用来指定发送到服务器的数据的名字要不然,后端服务器无法获得表单中的数据3) 单选,复选,下拉框,还要设置value,用来指定数据值,否则提交到后端都是on,无意义4) 一般,在设计上,性别,学历,技能,不会设计成字符数据,都是数字例如1代表男,2代表女,这样节省数据库存储空间
------------------------------------------------method可以指定提交到服务器方式,默认是get另外一种: postget: 明文提交数据,所携带数据量较小(2-4k),快post: 隐藏提交数据,数据在请求体,携带数据大小不限,慢--form action/his methodpost用户名input typetext valueadmin nameusername placeholder6-10位 br密码input typepassword namepassword value123456 br性别input typeradio namesex value1男input typeradio namesex value2女 br技能input typecheckbox nameskill value1rap input typecheckbox nameskill value2唱跳input typecheckbox nameskill value3篮球br生日input typedate namebirthday br学历select nameeduoption value1大专/optionoption value2本科/optionoption value3研究生/option/select brinput typereset value重置 input typesubmit value提交 /form
/body
