Java EE 进阶：2.1 HTML

目录1.HTML1.1 HTML基础1.1.1 什么是HTML1.1.2 认识 HTML 标签1.1.3 HTML 文件基本结构1.1.4 标签层次结构1.2 HTML 快速入门1.2.1 开发工具1.2.2 快速开发1.3 HTML 常见标签1.3.1 标题标签 h1-h61.3.2 段落标签p1.3.3 换行标签br1.3.4 图片标签img1.3.5 超链接a1.4 表格标签1.5 表单标签1.5.1 form 标签描述了要把数据按照什么方式提交到哪个页面中1.5.2 input 标签补充知识1.5.3 select 标签1.5.4 textarea1.6 无语义标签div span1.7 综合练习用户注册更多实操样例参考下面这篇博客前端基础-HTML入门保姆级课堂笔记本节目标1.认识 HTML 的基本结构学习常用的 HTML 标签2.掌握 CSS 基本语法规范和 CSS 选择器的各种用法熟练使用 CSS 的常用属性3.了解什么是 JavaScript学习 JavaScript 的常见操作以及使用 JQuery 完成简单的页面元素操作1.HTML1.1 HTML基础1.1.1 什么是HTMLHTMLHyper Text Markuo Language超文本标记语言超文本比文本要强大通过链接和交互式方式来组织和呈现信息的文本形式不仅仅有文本还可能包含图片音频或者自已经审阅过它的学者所加的评注、补充或脚注等等闲聊我们作为程序员会经常用到一些文本编辑工具因为我们要是次次都使用 VSCode 打开的话虽然也能编辑但是往往会卡一会儿但是使用记事本的话虽然打开快但是什么标记都没有所以我们会经常使用一些轻量的文本编辑器这个没有要求限制你自己使用着舒服就行了我比较习惯用Sublime Text标记语言由标签构成的语言HTML 的标签都是提前定义好的使用不同的标签表示不同的内容类似飞书文档Word 文档如果选中文本点击标题1就会使用标题1的样式来显示文本上述标题1就是一个“标签”比如下方代码h1我是一级标题/h1 h2我是二级标题/h2 h3我是三级标题/h3经过浏览器解析后的效果如下上面代码中的h1h2h3就是标签学习 HTML 主要就是学习标签1.1.2 认识 HTML 标签HTML 代码是由“标签”构成的形如h3我是三级标题/h3标签名body放到 中大部分标签成对出现h3为开始标签/h3为结束标签少数标签只有开始标签称为“单标签”开始标签和结束标签之间写的是标签的内容开始标签中可能会带有“属性”id 属性相当于给这个标签设置了一个唯一的标识符身份证号码h3 idmyId我是三级标题/h31.1.3 HTML 文件基本结构html head title第一个页面/title /head body hello world /body /htmlhtml 标签是整个 html 文件的根标签最顶层标签head 标签中写页面的属性body 标签中写的是页面上显示的内容title 标签中写的是页面的标题上述代码运行效果如下1.1.4 标签层次结构父子关系兄弟关系html head title第一个页面/title /head body hello world /body /html其中head 和 body 是 html 的子标签html 就是 head 和 body 的父标签title 是 head 的子标签head 是 title 的父标签head 和 body 之间是兄弟关系可以使用 chrome 的开发者工具查看页面的结构F12 或者右键审查元素开启开发者工具切换到 Elements 标签就可以看到页面结构细节标签之间的结构关系构成了一个 DOM 树DOM 是 Document Object Mode文档对象模型的缩写1.2 HTML 快速入门1.2.1 开发工具HTML 可以使用系统自带的记事本来编写但是非常不方便我们课程中使用前端专业的开发工具Visual Studio CodeVisual Studio Code简称“VS Code”是 Microsoft 在 2015年4月30日 Build 开发者大会上宣布的一款跨平台源代码编辑器。可以运行在 WindowsmacOS 和 Linux 上它具有对 JavaScriptTypeScript 和 Node.js 的内置支持并具有丰富的其他语言例如 CC#JavaPythonPHPGo官网Visual Studio Code - The open source AI code editor | Your home for multi-agent development进行加载安装即可1.2.2 快速开发在 VS Code 中创建文件 xxx.html直接输入按 Enter 或 Tab 键此时能自动生成代码的主体框架!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body /body /html细节解释了解即可不必深究!DOCTYPE html称为 DTD文档类型定义描述当前的文件是一个 HTML5 的文件html langen其中 lang 属性表示当前页面是一个“英语页面”这里暂时不用管有些浏览器会根据此处的声明提示是否进行自动翻译meta charsetUTF-8描述页面的字符编码方式没有这一行可能会导致中文乱码meta nameviewport contentwidthdevice-width,initial scale1.0nameviewport其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域contentwidthdevice-width,initial-scale1.0在设置可视区和设备宽度等宽并设置初始缩放为不缩放这个属性对于移动端开发更重要一些在body/body标签中任意书写文字按 Ctrl S 保持文字通过浏览器访问即可如!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body 第一个HTML页面 /body /html浏览器运行结果如下1.3 HTML 常见标签1.3.1 标题标签 h1-h6有 6 个从 h1 - h6数字越大则字体越小h1hello/h1 h2hello/h2 h3hello/h3 h4hello/h4 h5hello/h5 h6hello/h61.3.2 段落标签p在 HTML 中段落换行符空格 都会失效如果需要分成段落需要使用专门的标签p 标签表示一个段落这是一个段落 这是一个段落 这是一个段落注意p 标签描述的段落前面没有缩进未来 CSS 会学自动根据浏览器宽度来决定排版html 内容首位处的换行空格均无效在 html 中文字之间输入的多个空格只相当于一个空格html 中直接输入换行不会真的换行而是相当于一个空格HTML特殊转义字符列表1.3.3 换行标签br想要完成换行的话也可以通过br/标签来实现br 是 break 的缩写表示换行br 是一个单标签不需要结束标签br 标签不像 p 标签那样带有一个很大的空隙br/是规范写法不建议写成br这是一个br标签br / 这是一个br标签br / 这是一个br标签br /展示结果观察br标签和p标签的区别1.3.4 图片标签imgimg 标签必须带有 src 属性表示图片的路径img srcrose.jpg此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中img 标签的其他属性width/height控制宽度高度高度和宽度一般改一个就行另外一个会等比例缩放否则就会图片失衡border边框参数是宽度的像素但是一般使用 CSS 来设定img srcrose.jpg width500px height800px border5px注意1.属性可以有多个不能写到标签之前2.属性之间用空格分割可以是多个空格也可以是换行3.属性之间不分先后顺序4.属性使用“键值对”的格式来表示关于目录结构对于目录结构对于一个复杂的网站页面资源很多这种情况可以使用目录把这些文件整理好1.相对路径以 html 所在位置为基准找到图片的位置同级路径直接写文件名即可或者 ./下一级路径image/1.jpg上一级路径../image/1.jpg2.绝对路径一个完整的磁盘路径或者网络路径例如磁盘路径 D:/rose.jpg最好使用 / 不要使用 \网络路径https://img2.baidu.com/it/u3359649605,3626874592fm253fmtautoapp138fJPEG?w500h7521.3.5 超链接ahref必须具备表示点击后会跳转到哪个页面target打开方式默认是 _self如果是 _blank 则用新的标签页打开a hrefhttp://www.baidu.com百度/a链接的几种形式外部链接href 引用其他网站的地址a hrefhttp://www.baidu.com百度/a内部链接网站内部页面之间的链接写相对路径即可在一个目录中先创建一个 1.html再创建一个 2.html!-- 1.html -- 我是 1.html a href2.html点我跳转到 2.html/a !-- 2.html -- 我是 2.html a href1.html点我跳转到 1.html/a空链接使用 # 在 href 中占位a href#空链接/a闲聊也可以把文件放在链接里面这样就能够触发下载文件的操作了1.4 表格标签table 标签表示整个表格tr表示表格的一行td表示一个单元格thead表格的头部区域tbody表格的主体区域table包含 trtr 包含 td表格标签有一些属性可以用于设置大小边框等但是一般使用 CSS 方式来设置这些属性都要放到 table 标签中align 是表格相对于周围元素的对齐方式aligncenter不是内部元素的对齐方式border 表示边框1 表示有边框数字越大边框越粗表示没边框cellpadding内容距离边框的距离默认 1 像素cellspacing单元格之间的距离默认为 2 像素width / height设置尺寸注意这几个属性vscode 都提示不出来table aligncenter border1 cellpadding20 cellspacing0 width500 height500 tr th姓名/th th性别/th th年龄/th /tr tr td张三/td td男/td td10/td /tr tr td李四/td td女/td td11/td /tr /table1.5 表单标签表单是让用户输入信息的重要途经分成两个部分表单域包含表单元素的区域重点是 form 标签表单控件输入框提交按钮等重点是 input 标签1.5.1 form 标签form actiontest.html ... [form 的内容] /form描述了要把数据按照什么方式提交到哪个页面中关于 form 需要结合后端代码来进一步理解后面再详细研究1.5.2 input 标签各种输入控件单行文本框按钮单选框复选框type必须要取值种类很多buttoncheckboxtextflieimagepasswordradio 等name给 input 起了个名字尤其是对于 单选按钮具有相同的 name 才能多选一valueinput 中的默认值checked默认被选中用于单选按钮和多选按钮下面介绍一些常用的类型1.文本框input typetext2.密码框input typepassword3.单选框性别 input typeradio namesex男 input typeradio namesex checkedchecked女注意单选框之间必须具有相同的 name 属性才能实现 多选一 效果4.复选框爱好 input typecheckbox 吃饭 input typecheckbox 睡觉 input typecheckbox 打游戏5.普通按钮input typebutton value我是个按钮当前点击了没有反应需要搭配 JS 后使用后面会重点研究input typebutton value我是个按钮 onclickalert(hello)6.提交按钮form actiontest.html input typetext nameusername input typesubmit value提交 /form提交按钮必须放到 form 标签内点击后就会尝试给服务器发送请求get从服务端获取资源post向服务端发送资源!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body form actiontest1.html methodget 用户名: input typetext size30br/ 密码: input typepasswordbr/ 性别: input typeradio namegender idgender1 label forgender1男/label input typeradio namegender idgender2 label forgender2女/label input typeradio namegender idgender3 label forgender3保密/labelbr/ 兴趣: input typecheckbox name id 篮球 input typecheckbox name id 足球 input typecheckbox name id 排球 input typecheckbox name id 乒乓球 br/ !-- button这是button标签/button -- input typebutton name id value按钮 input typesubmit value提交 /form /body /html上述代码运行后的页面效果点击“提交”后就会把 form 这个表单域的交互内容给到 test1.html 里当我们勾选以下内容时对应的网址如下我们发现其余内容都能在网址上正常显示但是性别和兴趣却都显示的 on无法分辨出哪个是哪个咋办需要加个 value 标签form actiontest1.html methodget 用户名: input typetext size30 nameusernamebr/ 密码: input typepassword namepasswordbr/ 性别: input typeradio namegender idgender1 value1 label forgender1男/label input typeradio namegender idgender2 value2 label forgender2女/label input typeradio namegender idgender3 value0 label forgender3保密/labelbr/ 兴趣: input typecheckbox namehobby id value1 篮球 input typecheckbox namehobby id value2 足球 input typecheckbox namehobby id value3 排球 input typecheckbox namehobby id value4 乒乓球 br/ !-- button这是button标签/button -- input typebutton name id value按钮 input typesubmit value提交 /form这下我们的信息就可以完整显示出来了后端拿到数据就可以进行工作了~~补充知识button标签的按钮可跳转input typebutton 不能跳转1.5.3 select 标签下拉菜单option 中定义 selectedselected表示默认选中select option北京/option option selectedselected上海/option /select要是想显示在跳转后的网址上同样也是加 value 标签跟上述一样~~1.5.4 textareatextarea rows3 cols50 /textarea文本域中的内容就是默认内容注意空格也会有影响rows 和 cols 也都不会直接使用都是用 CSS 来改的1.6 无语义标签div spandiv 标签division 的缩写含义是分割span 标签含义是跨度就是两个盒子用于网页布局div 是独占一行的是一个大盒子span 不独占一行是一个小盒子div span咬人猫/span span咬人猫/span span咬人猫/span /div div span兔总裁/span span兔总裁/span span兔总裁/span /div div span阿叶君/span span阿叶君/span span阿叶君/span /div1.7 综合练习用户注册用户注册界面提示使用表格进行整体布局使用各种 input 标签实现页面中的输入控件h1用户注册/h1 用户名 input typetext placeholder请输入用户名 手机号 input typetext placeholder请输入手机号 密码 input typetext placeholder请输入密码 div input typebutton value注册 span已有账号/spana href#登录/a /div优化后!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body h1用户注册/h1 table tr td用户名/td tdinput typetext placeholder请输入用户名/td /tr tr td手机号/td tdinput typetext placeholder请输入手机号/td /tr tr td密码/td tdinput typepassword placeholder请输入密码/td /tr /table div button注册/button span已有账号?/span a href#登录/a /div /body /html以上内容加入 div 和 span 都是为了更好的应用 CSS~~