佛山企业手机网站建设,wordpress链接修改,云南手机网站开发,怎么建立网站免费的找往期文章包括但不限于本期文章中不懂的知识点#xff1a; 个人主页#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏#xff1a;速通前端 目录
HTML的介绍
如何创建HTML文件
HTML 文件基本结构
HTML常用标签
title标签
标题标签 h1-h6
段落标签 p
换行标签 b… 找往期文章包括但不限于本期文章中不懂的知识点 个人主页我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏速通前端 目录
HTML的介绍
如何创建HTML文件
HTML 文件基本结构
HTML常用标签
title标签
标题标签 h1-h6
段落标签 p
换行标签 br
图片标签 img
超链接 a
表格标签 table
表单标签
input 标签
form 标签
select 标签
textarea 标签
无语义标签 divspan
列表标签
综合练习用户登录 由于我们Java是属于后端开发的因此对于前端部分我们只需要简单了解达到认识与编写基本的代码即可。
HTML的介绍
HTML(Hyper Text Markup Language)超文本标记语言。
超文本比文本的功能要强大通过链接和交互式的方式来组织与呈现信息的文本形式。不仅仅有文本还可以包含图片、音频等。
标记语言由标签构成的语言。所有的代码都是包含标签的。这些标签都是提前定义好的不同的标签拥有不同的含义可以表示不同的内容。就类似于Markdown语法一样使用不同键有不同的功能例如ctrl b 是 对选中的文本进行加粗处理ctrl i 是对选中的文本进行斜体化处理。
学习HTML就是在学习这些标签的含义与使用。
如何创建HTML文件
编写HTML代码可以继续使用IDEA也可以使用VScode。
1、如果是继续使用IDEA的话分两种情况
一、如果是专业版 就可以直接在IDEA上面创建HTML文件然后开始编写HTML代码。
下面是 专业版 创建HTML文件的步骤
1创建HTML工程
2 创建具体的HTML文件
在上述步骤完成之后会弹出一个界面。
在上一步取完名字之后摁回车键就会生成下面的信息
上述就是一个最基本的HTML文件了。
二、如果是社区版就需要下载一些插件来配合使用。
例如 “HTML Tools” 等
2、如果是使用VScode的话就是直接将其下载下来之后在文件夹中创建一个.html 为后缀的文件然后在VScode中打开去编写代码即可可以使用 ! 回车就会自动补全代码出现下面这样的情景。
HTML 文件基本结构
标签与标签之间也是有关系的。
head 标签 与 body 标签 都是 html 标签的子标签反观html 标签就是它们的父标签而它们两个相互之间都是兄弟标签。这些关系是可以通过相互之间是否包含看出来的 html 标签是包含了 head 标签与 body 标签而 head 标签与 body 标签相互之间是无包含关系的也就是平等的关系。 HTML常用标签
下面我们就来学习具体的标签。
title标签
title 标签是一个页面名标签。我们可以往 title 标签内输入内容这些内容通过运行就会展示在浏览器的页面标题中。
标题标签 h1-h6
标题标签就和我们在阅读文章时所看到的标题类似。因为标题标签是在页面内部的因此标题标签所处的位置是在 body 部分的。 注意一共只有 六级 标题当我们写了七级或者八级标题之后虽然语法是错误的但是浏览器能够正常的显示出来也就是不会报错。浏览器会将错误的标题标签当成一个普通内容。 段落标签 p
在HTML中段落换行符空格都会失效如果需要分成段落需要使用专门的标签。 注意
1、p 标签描述的段落前面没有缩进。
2、html内容首尾处的换行,空格均无效。
3、在html中文字之间输入的多个空格只相当于一个空格。
4、html中直接输入换行不会真的换行而是相当于一个空格。
换行标签 br
想要完成换行的话也可以通过br/标签来实现br是一个单标签(不需要结束标签)。 图片标签 img
img 标签必须带有 src 属性表示图片的路径。这里的路径可以是相对路径也可以是绝对路径。
注意这里的绝对路径指的是网络中的路径而不是在文件操作中学习的绝对路径。例如下面这种就是网络路径https://blog.csdn.net/2301_80854132?typeblog 这里虽然将图片加载出来了但是尺寸是过大的我们得去缩小这个尺寸。
width / height控制宽度高度。高度和宽度一般改一个就行另外一个会等比例缩放。如果两个都改可能会出现图像失衡的情况。 我们也可以加上 alt 属性当图像无法显示时浏览器会显示 alt属性中的文本内容来替代图像。 注意属性之间使用空格来分隔。
超链接 a
a hrefhttps://blog.csdn.net/2301_80854132?typeblog个人主页/a!-- href 代表点击后跳转的页面 --
!-- target打开方式默认是_self如果是_blank则是打开新的标签页 --
运行结果 链接分为三种外部链接、内部链接、空链接。
外部链接是指跳转到当前网站的以外的页面例如百度跳转CSDN。上面的情况属于外部链接。
内部链接是指跳转到当前网站的本地页面例如百度跳转百度。
空链接是指跳转之后的页面为空。 内部链接其实本质与相对路径的写法差不多。
空链接是直接使用 # 来当作占位符的。 点击该链接通常会导致页面跳转到当前页面的顶部不会跳转到其他页面去。
表格标签 table
table 标签 表示整个表格tr 表示表格的一行td 表示一个单元格thead 表示表格的头部区域tbody 表示表格的主体区域。table 由 tr 组成tr 由 td 组成。
table!--第一行--tr!--第一列--td姓名/td!--第二列--td年龄/td!--第三列--td专业/td/tr!--第二行--tr!--第一列--td张三/td!--第二列--td18/td!--第三列--td计科/td/tr!--第三行--tr!--第一列--td李四/td!--第二列--td20/td!--第三列--td软工/td/tr
/table
table 标签只是创建了一个空表格这个表格里面的元素需要我们手动的去填充。表格是由一个一个的单元行组成因此表格里面写上 tr 标签单元行是由一个一个的单元格组成。 运行结果 上面的表格并没有设置各种属性只是一个雏形而已。
style属性可以设置 width / height 的大小border 表示边框表示有边框(数字越大,边框越粗 表示没边框默认也是没边框。cellspacing单元格之间的距离默认为 2像素。 align 设置表格相对于周围元素的对齐方式不是内部元素的对齐方式默认是居中对齐的。
下面使用属性来优化
!-- px是像素 --
table stylewidth: 500px; height: 400px; border1 cellspacing0 !--第一行--tr!--第一列--td姓名/td!--第二列--td年龄/td!--第三列--td专业/td/tr!--第二行--tr!--第一列--td张三/td!--第二列--td18/td!--第三列--td计科/td/tr!--第三行--tr!--第一列--td李四/td!--第二列--td20/td!--第三列--td软工/td/tr
/table
运行结果 上面主要是调整了长、宽设置了边框可见以及单元格之间的间隙。
表单标签
表单是让用户输入信息的重要途径。分为两个部分一个是表单域包含表单元素的区域主要是form标签另一个是表单控件包含输入框提交按钮等主要是 input标签。
input 标签
input 标签 是用来描述 各种输入控件单行文本框按钮单选框复选框等它也是单标签。
type 属性 是用来表示当前输入框是属于哪种是文本框还是密码框等。
name 属性 是用来给 input 起名字对于单选按钮来说具有相同的name才能多选一。
value 属性 主要用来设置按钮的值。
checked 输入框的分类
1、手动输入类
!-- 文本框 --
input typetext!-- 密码框 --
input typepassword
运行效果 2、选择类
!-- 单选框多个选项只能选一个单选题 --
你上课在干嘛
input typeradio name1睡觉 !-- name的值是可以随便取的但三者必须一致 --
input typeradio name1学习
input typeradio name1看手机!-- 复选框多个选项可以选多个多选题 --
你的爱好是什么
input typecheckbox干饭
input typecheckbox睡觉
input typecheckbox玩!-- 普通按钮 --
你的爱好是什么
input typebutton value干饭
input typebutton value睡觉
input typebutton value玩
运行效果 对于上图三个我们只能选其一但是对于下图我们可以选两个 当然因为这是多选框即使写了 name那也是将其分为一组在这一组中进行多选而已。 上面我们是将按钮的值设置为了对应的 value如果是设置 radio或者 checkbox就不会显现出来。 对于上面的按钮我们去点击不会有任何反应。因此我们可以设置点击有反应的按钮。 注意对于选择框来说相同的name值会被认为是一组的。
form 标签
对于提交类的一般都是与 form标签连用。
form姓名input typetext!-- 提交按钮 --input typesubmit value提交
/form
提交之后可以有页面跳转的行为因此可以 在 form标签中添加 action属性后面跟上跳转之后的页面即可。 select 标签
select 标签用于创建下拉列表或滚动列表。它通常与option标签一起使用option标签用于定义列表中的选项。
家庭住址
selectoption北京/optionoption上海/optionoption深圳/optionoption广州/option
/select textarea 标签
textarea 标签用于创建一个多行文本输入框可以通过 rows 与 cols 来指定行数与列数。 综合以上的标签我们可以写一个有关个人简介的页面。像下面这样 代码实现
form action./Demo3.html!-- 用户名是文本框 --用户名:input typetextbr!-- 密码是密码框 --密码:input typepasswordbr!-- 性别是单选 --性别:input typeradio namegender男input typeradio namegender女input typeradio namegender保密br!-- 兴趣是多选 --兴趣:input typecheckbox namehobby敲代码input typecheckbox namehobby干饭input typecheckbox namehobby睡觉input typecheckbox namehobby以上都是br!-- 专业是下拉列表 --专业:selectoption计算机科学与技术/optionoption软件工程/optionoption网络安全/optionoption人工智能/optionoption物联网/optionoption其他/option/selectbr!-- 个人描述是文本域 --个人描述textarea rows5 cols50/textareabr!-- 提交按钮 --input typesubmit value提交
/form
运行效果 无语义标签 divspan
无语义 的意思就是不表示什么含义。这两个标签可以看成是两个盒子。
div 是一个大盒子其可以独占一行span 是一个小盒子其不能独占一行。 注意div 与 span 标签中是几乎可以放置HTML中所有的标签。
列表标签
列表标签有两种一种是有序列表ol另一种是无序列表ul。 li 标签表示的是列表项。
综合练习用户登录 实现一个下面这样用户登录界面 代码实现
h1用户注册/h1
form action../图片/1.jpg!-- 整体可以看作是一个表格 --table!-- 用户名这一行 --trtd用户名/tdtd!-- 这是一个输入文本框 --input typetext placeholder请输入用户名/td/tr!-- 手机号这一行 --trtd手机号/tdtd!-- 这也是一个输入文本框 --input typetext placeholder请输入手机号/td/tr!-- 密码这一行 --trtd密码/tdtdinput typepassword placeholder请输入密码/td/tr/table!-- 下面可以全部放到一个盒子里 --divinput typesubmit value注册已有账号?a href#登录/a/div
/form
上面用到了一个新的属性placeholder 这是一个占位符当输入框为空时就会占据输入框当用户输入时就会消失。
好啦本期 速通前端篇 —— HTML 的学习之旅 就到此结束啦我们下一期再一起学习吧
