2017网站趋势,wordpress固定连接加密,上海企业网站建设公司,深圳华大基因公司简介项目代码 https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/html 零、网页的组成 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息#xff0c;可以包含文字、图片视频等。
CSS样式是表现。就像网页的外衣。比如#xff0c;标题字体、… 项目代码 https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/html 零、网页的组成 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息可以包含文字、图片视频等。
CSS样式是表现。就像网页的外衣。比如标题字体、颜色变化或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解有动画的有交互的一般都是用JavaScript来实现的
一、HTML介绍
1.HTML是什么
1). HTML ( HyperText Mark-up Language)即超文本标签语言(可以展示的内容类型很多)
2). HTML文本是由HTML标签组成的文本可以包括文字、图形、动画、声音、表格、链接等
3). HTML的结构包括头部(Head)、主体(Body)两大部分其中头部描述浏览器所需的信息.
2.HTML的两种打开方式
本地运行
远程运行 二、HTML快速入门
HTML 教程
1.创建HTML文件 !--文档类型的说明 注释--
!DOCTYPE html
!--使用语言的地区 en 表示英国美国 en-us --
html langen
!--html头--
head!--charset文件字符集--meta charsetUTF-8!--文件标题--titleTitle/title
/head
!--body体 主题部分--
body!--内容--hello,world
/body
/html
注意事项和细节
1. HTML文件不需要编译直接由浏览器进行解析执行
2.可以选择的浏览器是你电脑安装有的浏览器如果没有安装这个浏览器会报错
2.HTML基本结构 三、HTML标签
html的标签/元素说明
1. HTML标签用两个尖括号括起来
2. HTML标签一般是双标签 如b和/b前一一个标签是起始标签后一个标签为结束标签
3.两个标签之间的文本是htmI元素的内容
4.某些标签称为单标签,因为它只需单独使用就能完整地表达意思如br/ hr/
5. HTML元素指的是从开始标签到结束标签的所有代码。 !--文档类型的说明 注释--
!DOCTYPE html
!--使用语言的地区 en 表示英国美国 en-us --
html langen
!--html头--
head!--charset文件字符集--meta charsetUTF-8!--文件标题--titleTitle/title
/head
!--body体 主题部分--
body
!--内容--
hello,world
!--单标签--
hr/
marybr/ !-- br/ 代表换行 --
smith
/body
/html
htmI标签注意事项和细节
1.创建D:\idea_ java_ projects\hspedutemp200\tag-detail.html 说明标签使用的细节(html命名规范xx.yy.htmI xx-yy.html xx_ .yy.html 根据公司规范要求即可)
!DOCTYPE html
html langen
headmeta charsetUTF-8title标签使用细节/title
/head
body
!--标签使用细节:1.标签不能交叉嵌套2.标签必须正确关闭3.注释不能嵌套4. html 语法不严谨。有时候标签不闭合属性值不带””也不报错
--
!--标签不能交叉嵌套--
!--divspantom/div/span 错误用法--
divspantom/span/div!--标签必须正确关闭--
spanjack/span!--注释不能嵌套 --!--html 语法不严谨。有时候标签不闭合属性值不带””也不报错--
font colorred张飞/font
font colorblue关羽/font
br/
/body
/html1.forn字体标签
!DOCTYPE html
html langen
headmeta charsetUTF-8titlefont标签/title
/head
body
!-- 字体标签应用实例 1在网页上显示 北京 并修改字体为 微软雅黑颜色为蓝色。font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)(1)color 属性修改颜色(2)face 属性修改字体(3)size 属性修改文本大小多说一句对应标签的属性顺序不做要求
--
font size40px face微软雅黑 colorred北京/font
/body
/html2.字符实体
1.在网页上显示一些特殊的符号称为字符实体(也叫符号实体)。
2.应用实例创建将hr /标签以文本方式显示在页面
!DOCTYPE html
html langen
headmeta charsetUTF-8title字符实体/title
/head
body
!-- 特殊字符 应用实例把 hr / 变成文本 显示在页面上常用的特殊字符: : lt; : gt;空格 : nbsp;
--
jack
!--浏览器会将 hr/解析成一条线--
hr/
lt;hr/gt;
smith smith2 hspbr/
smith smith2nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;hsp
/body
/html3.字符实体一览 4.标题标签
1.标题使用h1 - h6标签进行定义。h1定义最大的标题。h6 定义最小的标题
2.应用实例创建title.html
!DOCTYPE html
html langen
headmeta charsetUTF-8title标题标签/title
/head
body
!-- 标题标签
应用实例演示标题 1 到 标题 6 的
h1 - h6 都是标题标签 h1 : 最大 h6 : 最小
align: 属性是对齐属性
left: 左对齐(默认)
center :居中
right : 右对齐
--
h1标签1/h1
h2标签2/h2
h3 aligncenter标签3/h3
h4标签4/h4
h5标签5/h5
h6 alignright标签6/h6
/body
/html5.超链接标签
1.超链接是指从一个网页指向一个目标的链接关系这个目标可以是另一一个网页也可以是相同网页上的不同位置还可以是一个图片一个电子邮件地址一一个文件甚至是一一个应用程序。
2.应用实例创建link.html;链接到搜狐
!DOCTYPE html
html langen
headmeta charsetUTF-8title超链接标签/title
/head
body
!--老韩说明:a 标签是 超链接href 属性设置连接的地址target 属性设置哪个目标进行跳转_self : 表示当前页面(默认值), 即使用当前替换目标页_blank : 表示打开新页面来进行跳转点击超链接打开邮件
--
a hrefhttp://www.sohu.com搜狐/abr/
a hrefhttp://www.sohu.com target_blank搜狐2/abr/
a hrefmailto:tomsohu.com联系管理员/a
/body
/html6.无序列表 !DOCTYPE html
html langen
headmeta charsetUTF-8titleul li标签/title
/head
body
!--ul : 表示无序列表li : 列表项type属性指定列表项前的符号
--
h1五虎将/h1
ul typecirclelijack/lilitom/lilismith/lilimary/lilimilan/li
/ul
/body
/html7.有序列表 !DOCTYPE html
html langen
headmeta charsetUTF-8title有序列表ol-li/title
/head
body
!--ol : 表示有序列表li : 列表项type属性指定列表项前排序方式type 设定数目款式其值有五种默认为 start1。i可以取以下值中的任意一个1 阿拉伯数字 1, 2, 3, ...a 小写字母 a, b, c, ...A 大写字母 A, B, C, ...i 小写罗马数字 i, ii, iii, ...I 大写罗马数字 I, II, III, ... 。
--
h1五虎将/h1
ol typeI start3lijack/lilitom/lilismith/lilimary/lilimilan/li
/ol
/body
/html
8.图像标签
1.img标签可以在html页面上显示图片
2.应用实例:创建img.html:如图
!DOCTYPE html
html langen
headmeta charsetUTF-8title图像标签/title
/head
body
!--应用实例使用 img 标签显示一张美女的照片。img: 标签是图片标签,用来显示图片src: 属性可以设置图片的路径width: 属性设置图片的宽度height: 属性设置图片的高度border: 属性设置图片边框大小alt: 属性设置当指定路径找不到图片时,用来代替显示的文本内容相对路径:从工程名开始算绝对路径:盘符:/目录/文件名路径在 web 中路径分为相对路径和绝对路径两种相对路径: . 表示当前文件所在的目录.. 表示当前文件所在的上一级目录文件名 : 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略绝对路径: 正确格式是: http://IP地址:port/工程名/资源路径 即使用url方式定位资源错误格式是: 盘符:/目录/文件名
--
h1图片标签的演示/h1
!-- ./imgs/1.png 表示当前路径下的 imgs文件夹下的 1.png--
!-- 在进行图片缩放时建议指定 width 或者 height 即可浏览器会按照比例显示--
img src./imgs/1.png height150 width400 br/
img src./imgs/1.png height150 border10pxbr/
img src./imgs/2.png alt美女找不到br/
/body
/html9.表格table标签 !DOCTYPE html
html langen
headmeta charsetUTF-8title表格标签/title
/head
body
!-- 说明table 标签是表格标签 border 设置表格边框width 设置表格宽度 height 设置表格高度align 设置表格相对于页面的对齐方式cellspacing 设置单元格间距tr 是行标签 th 是表头标签 td 是单元格标签align 设置单元格文本对齐方式 b 是加粗标签px:表示像素 - java 坦克大战ctrl shift 下光标--table width500 border6 aligncenterh1 aligncenter表格标签的使用/h1trth名字/thth住址/thth邮件/th/trtrtd第1行第1列/tdtd第1行第2列/tdtd第1行第3列/td/trtrtd第2行第1列/tdtd第2行第2列/tdtd第2行第3列/td/trtrtd第3行第1列/tdtd第3行第2列/tdtd第3行第3列/td/tr
/table
/body
/html10.表格标签 - 跨行跨列表格
!DOCTYPE html
html langen
headmeta charsetUTF-8title表格(跨行跨列)/title
/head
body
!--column列合并列 : colspan列数合并行 : rowspan行数cellspacing : 指定单元格间的空隙大小 :0 表示没有空隙bordercolor: 指定表格边框的演示border: 表格边框width 表格的宽度思路:1. 先把整个表格的完整的行和列展示出来5*32. 在使用合并的技术来处理3. 如果是16进制的颜色前面#
--
table border1 height250 bordercolor#E87EFA cellspacing0 width500tr!--合并了3列--td aligncenter colspan3第1行第1列/td/trtr!-- 合并行跨行 row行--td rowspan2第2行第1列/tdtd第2行第2列/tdtd第2行第3列/td/trtrtd第3行第2列/tdtd第3行第3列/td/trtr!--合并行跨行 row行--td rowspan2第4行第1列/tdtd第4行第2列/tdtd第4行第3列/td/trtrtd第5行第2列img srcimgs/2.png width100/tdtd第5行第3列/td/tr
/table
/body
/html11.form表单标签 !DOCTYPE html
html langen
headmeta charsetUTF-8title表单登录/title
/head
body
!--1. form 表示表单2. action: 提交到哪个页面3. method 提交方式 ,常用 get 和 post4. input typetext 输入框5. input typepassword 密码框6. input typesubmit 提交按钮7. input typereset 重置按钮老韩小技巧: 为了个汉字对齐输入全角的空格即可多说一句: method 不写默认是get
--
h1登录系统/h1
form actionok.html methodget用户名:input typetext nameusernamebr/密 码:input typepassword nameusernamebr/input typesubmit value登录 input typereset value重新填写
/form
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8title登录成功/title
/head
bodyh1恭喜你登录OK/h1
/body
/html1.input标签/元素 2.select/option/textarea标签
value是提交的 用户看不到 !DOCTYPE html
html langen
headmeta charsetUTF-8title表单综合案例/title
/head
body
!--form 标签就是表单input typetext : 是文件输入框 value 设置默认显示内容input typepassword 是密码输入框 value 设置默认显示内容input typeradio 是单选框 name 属性可以对其进行分组checkedchecked表示默认选中inputtypecheckbox 是复选框 checkedchecked表示默认选中input typereset 是重置按钮 value 属性修改按钮上的文本input typesubmit 是提交按钮 value 属性修改按钮上的文本input typebutton 是按钮 value 属性修改按钮上的文本input typefile 是文件上传域input typehidden 是隐藏域当我们要发送某些信息而这些信息不需要用户参与就可以使用隐藏域提交的时候同时发送给服务器select 标签是下拉列表框option 标签是下拉列表框中的选项selectedselected设置默认选中textarea 表示多行文本输入框 起始标签和结束标签中的内容是默认值rows 属性设置可以显示几行的高度cols 属性设置每行可以显示几个字符宽度老师提醒一定一定使用form 标签将input元素包起来一定一定要给input元素设置 name属性否则数据提交不到服务器注意checkbox是复选框如果希望是同一组 保证name属性一致注意在checkbox select radio 提交数据的时候是value属性的值
--
form用户注册信息br/用户名称: input typetext nameusernamebr/用户密码: input typepassword namepwd1br/确认密码: input typepassword namepwd2br/选择你喜欢的运动项目:input typecheckbox namesport valuelq篮球br/input typecheckbox namesport valuezq checked足球br/input typecheckbox namesport valuesq checked手球br/请选择性别 :input typeradio namegender valuemale男br/input typeradio namegender valuefemale女br/请选择城市:select namecityoption--选择--/optionoption valuecd成都/optionoption valuebj北京/optionoption valuesh上海/option/selectbr/自我介绍:textarea rows6 cols20/textareabr/选择你的文件(头像)input typefile namemyfilebr/input typesubmit value提交/ input typereset value重置/
/form
/body
/html3.表单格式化 !DOCTYPE html
html langen
headmeta charsetUTF-8title表单格式化/title
/head
body
!--form 标签就是表单input typetext : 是文件输入框 value 设置默认显示内容input typepassword 是密码输入框 value 设置默认显示内容input typeradio 是单选框 name 属性可以对其进行分组checkedchecked表示默认选中inputtypecheckbox 是复选框 checkedchecked表示默认选中input typereset 是重置按钮 value 属性修改按钮上的文本input typesubmit 是提交按钮 value 属性修改按钮上的文本input typebutton 是按钮 value 属性修改按钮上的文本input typefile 是文件上传域input typehidden 是隐藏域当我们要发送某些信息而这些信息不需要用户参与就可以使用隐藏域提交的时候同时发送给服务器select 标签是下拉列表框option 标签是下拉列表框中的选项selectedselected设置默认选中textarea 表示多行文本输入框 起始标签和结束标签中的内容是默认值rows 属性设置可以显示几行的高度cols 属性设置每行可以显示几个字符宽度老师提醒一定一定使用form 标签将input元素包起来一定一定要给input元素设置 name属性否则数据提交不到服务器注意checkbox是复选框如果希望是同一组 保证name属性一致注意在checkbox select radio 提交数据的时候是value属性的值
--
formh1用户注册信息/h1table width400trtd用户名称: /tdtdinput typetext nameusername/td/trtrtd用户密码: /tdtdinput typepassword namepwd1/td/trtrtd确认密码: /tdtdinput typepassword namepwd2/td/trtrtd选择你喜欢的运动项目:/tdtdinput typecheckbox namesport valuelq篮球 input typecheckbox namesport valuezq checked足球 input typecheckbox namesport valuesq checked手球/td/trtrtd请选择性别 :/tdtdinput typeradio namegender valuemale男 input typeradio namegender valuefemale女/td/trtrtd请选择城市:/tdtdselect namecityoption--选择--/optionoption valuecd成都/optionoption valuebj北京/optionoption valuesh上海/option/select/td/trtrtd自我介绍:/tdtdtextarea rows6 cols20/textarea/td/trtrtd选择你的文件(头像)/tdtdinput typefile namemyfile/td/trtrtdinput typesubmit value提交//tdtdinput typereset value重置//td/tr/table
/form
/body
/html4.表单的细节 表单细节
1. action表示将form表单的数据提交给哪个url,即服务器的哪个资源(servlet)
2. method 表示提交的方式 主要是get / post, 默认是get
3. 如果form表单的元素没有写name属性则数据不会提交
4. 对应select checkbox radio 标签提交的数据是value指定的值
5. 对应checkbox 复选框可以提交多个字但是name是统一的都是sport sprotxxsportyy
6. 提交的数据一定要放在 form标签内否则数据不会提交
Get 和 Post 的区别简述
1. Get 请求数据是显示在浏览器地址栏http://localhost:63342/html/ok.htmlusernamejackpwd1111pwd211sportlqsportsqgendermalecitybjmyfile
2. Get 请求不安全的而且数据是有长度限制的, 建议有重要信息不要使用Get
3. Post 请求数据是和http传输的在http体中相对安全
4. Post 传输的数据长度理论上没有限制但是在实际的应用中也不能太大 , 即合理即可
12.div标签
1. div标签可以把文档分割为独立的、不同的部分
2. div是一个块级元素。它的内容自动地开始一一个新行。
!DOCTYPE html
html langen
headmeta charsetUTF-8titlediv 标签/title
/head
body
!--1. div 标签可以把文档分割为独立的、不同的部分2. div 是一个块级元素。它的内容自动地开始一个新行, 不需要写br/style 样式- CSS 详细介绍, 先简单的使用混个眼熟
--
hello,world
divh3 stylecolor: bluethis is a h3/h3a hrefhttp://www.baidu.comgoto 百度/a
/div
/body
/html13.p标签
1. p标签定义段落
2.p元素会自动在其前后创建一些空白。
!DOCTYPE html
html langen
headmeta charsetUTF-8title段落标签/title
/head
body
!--1. p 标签定义段落2. p 元素会自动在其前后创建一些空白
--
hello,world
p段落1/p
p段落2/p
p段落3/p
/body
/html14.span标签
1.span标签是内联元素不像块级元素(如: div标签、p标签等)有换行的效果。
2.如果不对span应用样式span标签没有任何的显示效果
3.语法: span内容/span
!DOCTYPE html
html langen
headmeta charsetUTF-8titlespan标签/title
/head
body
!--1. span标签是内联元素不像块级元素如div标签、p标签等有换行的效果。2. 如果不对span应用样式span标签没有任何的显示效果3. 语法span内容/span老韩说明:(1) span标签是内联元素(内嵌元素, 行内元素), 没有换行效果(2) 如果不对span应用样式span标签没有任何的显示效果(3) 往往是为了单独的去控制某个关键的内容
--
您的购物车有sapn stylecolor: red;font-size: 40px10/sapn个商品
/body
/html四、课堂测试
HTML 测验 五、课后作业
1. !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1 aligncenter雇员列表/h1
table bordercolor blue aligncenter width 800 border10h1 tr aligncenterth编号/thth名字/thth性别/thth薪水/thth职位/ththemail/th/trtr aligncentertd111/tdtd松江/tdtd男/tdtd1000/tdtd总裁/tdtd643013242qq.com/td/trtr aligncentertd111/tdtd松江/tdtd男/tdtd1000/tdtd总裁/tdtd643013242qq.com/td/trtr aligncentertd111/tdtd松江/tdtd男/tdtd1000/tdtd总裁/tdtd643013242qq.com/td/tr/h1
/table
/body
/html 2. !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h4 aligncenter课表/h4
table bordercolor blue aligncenter width 800 border10h1 tr aligncenterth项目/thth colspan5 aligncenter上课/thth colspan2 aligncenter休息/th/trtr aligncenterth星期/thth星期一/thth星期二/thth星期三/thth星期四/thth星期五/thth星期六/thth星期天/th/trtr td rowspan4 aligncenter上午/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd rowspan4 aligncenter休息/td/trtr td语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/td/trtr td语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/td/trtr td语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/td/trtr cellspacing 2td rowspan2 aligncenter下午/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd rowspan2 aligncenter休息/td/trtr td语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/tdtd语文/td/tr/h1
/table
/body
/html
