玉林网站开发,做进口产品的网站好,巩义建设网站,电商网站开发模块HTML学习
1.网页基本信息 DOCTYPE:是一种规范#xff0c;告诉浏览器我们要使用什么规范 head标签代表网页头部 title标签代表网页标题 body标签代表网页主体 下面是创建的第一个网页的源代码(在IDEA创建一个html文件会直接生成#xff0c;我这个其实只改了网页标题)
告诉浏览器我们要使用什么规范 head标签代表网页头部 title标签代表网页标题 body标签代表网页主体 下面是创建的第一个网页的源代码(在IDEA创建一个html文件会直接生成我这个其实只改了网页标题)
!-- DOCTYPE:是一种规范告诉浏览器我们要使用什么规范 --
!DOCTYPE html
html langen
!-- head标签代表网页头部 --
headmeta charsetUTF-8!-- title标签代表网页标题 --titlesxc的第一个网页/title
/head
!-- body标签代表网页主体 --
body
/body
/html 2.网页基本标签
2.1标题标签
!--标题标签--
h1一级标签/h1
h2二级标签/h2
h3三级标签/h3
h4四级标签/h4
h5五级标签/h5
2.2 段落标签
!--段落标签--
psxc sxc/p
p大帅逼 大帅逼/p
2.3水平线标签
!--水平线标签--
hr/
2.4换行标签
!--换行标签--
sxc sxcbr/
大帅逼 大帅逼br/
2.5粗体and斜体
!--粗体斜体--
h1字体样式标签/h1
粗体 stronglove you/strong
br/
斜体 emlove you/em
br/
2.6特殊符号
空格 lovenbsp;nbsp;nbsp;nbsp;nbsp;you
br/
大于 gt;
br/
小于 lt;
br/
版权符号 copy;版权所有sxc
下面是完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title基本标签学习/title
/head
body
!--标题标签--
h1一级标签/h1
h2二级标签/h2
h3三级标签/h3
h4四级标签/h4
h5五级标签/h5
!--段落标签--
psxc sxc/p
p大帅逼 大帅逼/p
!--水平线标签--
hr/
!--换行标签--
sxc sxcbr/
大帅逼 大帅逼br/
!--粗体斜体--
h1字体样式标签/h1
粗体 stronglove you/strong
br/
斜体 emlove you/em
br/
!--特殊符号--
空格 lovenbsp;nbsp;nbsp;nbsp;nbsp;you
br/
大于 gt;
br/
小于 lt;
br/
版权符号 copy;版权所有sxc
/body
/html
下面是网页的展示效果 3.图像标签 src图片地址 相对路径推荐使用绝对路径 ../ 代表上一级目录 alt: 图片名字必填 !DOCTYPE html
html langen
headmeta charsetUTF-8title图像标签学习/title
/head
body
!--img学习
src图片地址相对路径推荐使用绝对路径../ 代表上一级目录
alt: 图片名字必填
--
img src../html/resource/image/1.jpg alt库里帅照 title悬停文字 width300 height500
/body
/html
4.超链接标签及应用
4.1 a标签 href必填表示跳转到哪个页面 target表示窗口在哪里打开 _blank:在新标签中打开 _self在自己的网页中打开
4.2锚链接
锚链接实现页面内的跳转 需要一个锚标记 跳转到标记 #
4.3功能性链接
邮件链接mailto:
!DOCTYPE html
html langen
headmeta charsetUTF-8title链接标签学习/title
/head
body
!--a标签
href必填表示跳转到哪个页面
target表示窗口在哪里打开_blank:在新标签中打开_self在自己的网页中打开
--
!--使用name作为标记--
a nametop/a
a hrefhttps://www.baidu.com target_blank点击我跳转到百度/a
br/
a hrefweb01.htmlimg src../html/resource/image/1.jpg alt库里帅照
/a
pa hrefweb01.htmlimg src../html/resource/image/1.jpg alt库里帅照/a
/p
pa hrefweb01.htmlimg src../html/resource/image/1.jpg alt库里帅照/a
/p
!--锚链接实现页面内的跳转
1.需要一个锚标记
2.跳转到标记 #
--
a href#top回到顶部/a
!--功能性链接
邮件链接mailto:
--
a hrefmailto:1735591043qq.com点击联系我/a
/body
/html 5.列表标签
5.1有序列表
!--有序列表--
olliJava/liliPython/liliC/li
/ol 5.2无序列表
!--无序列表--
ulliJava/liliPython/liliC/li
/ul
5.3自定义列表
!--自定义列表
dl:标签
dt列表名称
dd列表内容
一般用在公司网站底部
--
dldt学科/dtddJava/ddddPython/ddddC/dd
/dl
下面是完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title列表学习/title
/head
body
!--有序列表--
olliJava/liliPython/liliC/li
/ol
hr/
!--无序列表--
ulliJava/liliPython/liliC/li
/ul
hr/
!--自定义列表
dl:标签
dt列表名称
dd列表内容
一般用在公司网站底部
--
dldt学科/dtddJava/ddddPython/ddddC/dd
/dl
/body
/html
结果如下图所示 6.表格标签
!DOCTYPE html
html langen
headmeta charsetUTF-8title表格学习/title
/head
body
!--表格table
行 tr
列 td
--
table border1pxtr
!--colspan 跨列--td colspan21-1/tdtd colspan21-2/td/trtr
!--rowspan 跨行--td rowspan22-1/tdtd2-2/tdtd2-3/tdtd2-4/td/trtrtd3-1/tdtd3-2/tdtd3-3/td/tr
/table
/body
/html
下面是呈现结果 7.媒体元素
音频和视频 src:资源路径 controls控制条 autoplay自动播放
!DOCTYPE html
html langen
headmeta charsetUTF-8title媒体元素学习/title
/head
body
!--音频和视频
src:资源路径
controls控制条
autoplay自动播放
--
video src../html/resource/video controls autoplay/video
audio src../html/resource/audio controls autoplay/audio
/body
/html 8.页面结构分析
!DOCTYPE html
html langen
headmeta charsetUTF-8title页面结构分析/title
/head
body
headerh2网页头部/h2
/header
sectionh2网页主体/h2
/section
footerh2网页脚部/h2
/footer
/body
/html 9.iframe内联框架
iframe内联框架 src地址 w-h宽度 高度
!DOCTYPE html
html langen
headmeta charsetUTF-8titleiframe内联框架/title
/head
body
!--iframe内联框架
src地址
w-h宽度 高度
--
iframe src namehello frameborder0 width800px height1000px/iframe
a hrefweb01.html targethello点击跳转/a
/body
/html 10.表单post和get提交
表单form action:表单提交的位置可以是网站也可以是一个请求处理的地址 methodpostget提交方式 get提交方式我们可以在url中看到提交的信息不安全高效 post提交方式我们不可以在url中看到提交的信息安全
!DOCTYPE html
html langen
headmeta charsetUTF-8title表单学习/title
/head
body
h1注册/h1
!--表单form
action:表单提交的位置可以是网站也可以是一个请求处理的地址
methodpostget提交方式get提交方式我们可以在url中看到提交的信息不安全高效post提交方式我们不可以在url中看到提交的信息安全
--
form actionweb01.html methodget
!--文本输入框input typetext--p名字input typetext nameusername/p!--密码框input typepassword--p密码input typepassword namepwd/ppinput typesubmitinput typereset/p
/form
/body
/html 11.单选框与多选框
11.1单选框
单选框标签 input typeradio value单选框的值 name表示组 p性别input typeradio valueboy namesex/男input typeradio valuegirl namesex/女/p
注意name这个地方值必须相同否则页面中两个选项都可以被选择
11.2多选框
p爱好input typecheckbox valuesleep namehobby睡觉input typecheckbox valueeat namehobby吃饭input typecheckbox valueplay namehobby玩input typecheckbox valuechat namehobby聊天
/p
11.3按钮
input typebutton 普通按钮 input typeimage 图像按钮 input typesubmit 提交按钮 input typereset 重置按钮
p按钮input typebutton namebtn1 value点击变长input typeimage src../html/resource/image/1.jpg/p
pinput typesubmitinput typereset/p 12.列表框文本域与文件域
12.1下拉框
p国家select name列表名称option value选项的值中国/optionoption value选项的值美国/optionoption value选项的值德国/optionoption value选项的值巴西/option/select
/p
12.2文本域
p反馈textarea nametextarea cols50 rows10文本内容/textarea
/p
12.3文件域
pinput typefile namefilesinput typebutton nameupload value上传
/p 13.搜索框滑块和简单验证
13.1邮箱验证
p邮箱input typeemail nameemail
/p
13.2URL
pURLinput typeurl nameurl/p
13.3数字
p数字input typenumber namenumber max100 min0 step10/p
13.4滑块
p滑块input typerange namevoice max100 min0 step10/p
13.5搜索框
p滑块input typesearch namesearch/p 14.表单的应用 隐藏域hidden 只读readonly 禁用disabled 15.表单初级体验 提示信息placeholder 非空判断必填字段required 正则表达式pattern 16.总结(脑图)
