HTML浅浅入门

Hello各位小伙伴这篇文章主要给大家浅浅的介绍一些关于HTML的一些标签并不会非常的深入的进行系统性学习毕竟我们后面更多的功夫是要花在后端的技术知识上进行探究~~~1.标题标签2.段落标签3.换行标签4.图片标签5.超链接6.表格标签7.表单标签在学习各种标签之前我们先对HTML的格式进行了解首先是一个双标签html/html这个也是HTML的骨架然后在HTML中还有头还有正文也是双标签就和我们的人的身体一样有头和身体~~~head就是标题body就是HTML的相关内容1.标题标签一共有六个,从h1 - h6.数字越大,则字体越小.!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body h1一级标签/h1 h2二级标签/h2 h3三级标签/h3 h4四级标签/h4 h5五级标签/h5 h6六级标签/h6 /body /html2.段落标签当我们直接在body中编写一段文章的时候当我们不适用段落标签的时候即使我们有手动分段落的话在浏览器显示出来仍然是一段浏览器是不会按照我们手动划分的段落进行分段的p标签描述的段落,前面没有缩进的~~~!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla, facere eum cum quis repellat obcaecati. Vel, quisquam? Illo officia porro eveniet quis recusandae eum eius voluptates at, itaque temporibus. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi ut laboriosam, doloremque eum est maiores officiis labore cum sunt aspernatur totam. Non assumenda accusantium inventore ex consectetur nesciunt adipisci molestias?lo Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit voluptatem, odio eaque dolores optio hic! In totam facilis minus aliquam quod corrupti ducimus /body /html当我们使用标签段落的时候显示到浏览器上就会按照我们的预期进行显示标签段落也是一个双标签p/p!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body pLorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla, facere eum cum quis repellat obcaecati. Vel, quisquam? Illo officia porro eveniet quis recusandae eum eius voluptates at, itaque temporibus./p pLorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi ut laboriosam, doloremque eum est maiores officiis labore cum sunt aspernatur totam. Non assumenda accusantium inventore ex consectetur nesciunt adipisci molestias?lo/p pLorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit voluptatem, odio eaque dolores optio hic! In totam facilis minus aliquam quod corrupti ducimus/p /body /html3.换行标签和上面我们讲到的如果我们写了文章当我们进行手动分段落的话浏览器是无法显示出来的我们可以使用换行标签对文章进行换行换行标签是一个单标签/br但是换行标签和段落标签还是有区别的换行标签换行之后间隔是比段落标签小的!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur itaque doloremque praesentium culpa possimus dolorem expedita quaerat delectus. Rerum laboriosam maiores similique architecto, itaque ab sequi harum mollitia minima quas.br/ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad assumenda quis quae quidem perferendis sit voluptatibus minus officia est neque iure delectus consequatur nisi, beatae nesciunt animi quaerat facilis impedit? /body /html4.图片标签img src width height border alt图片标签有五个属性src --- 图片的所在地址可以使用绝对路径也可以使用相对路径width --- 图片的宽度height --- 图片的高度border --- 图片边框大小alt --- 当图片加载失败后显示的文字那我当前电脑为例我的图片在本项目下所以使用相对路径即可设置的宽度为600px高度为500px边框为2px当图片加载失败后显示图片加载失败!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body img src./喜洋洋与灰太狼.png width600px height500px border2px alt图片加载失败 /body /html图片正确加载当我们对图片路径进行错误修改时图片就会加载失败5.超链接超链接我们随处课件就比如哔哩哔哩为例当我们点击这些按钮的时候就会跳转到另外一个页面这就是超链接超链接属性href --- 跳转对应网页的地址target --- 默认是在当前页面跳转我们可以选择_blank重新打开新的页面跳转name --- 超链接的名字a href target_blankname/a!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body a hrefhttps://www.bilibili.com/ target_blank哔哩哔哩/a /body /html当我们点击哔哩哔哩后就会跳转到哔哩哔哩的官方页面6.表格标签table --- 表格tr --- 行td /td---表格单元可以理解为列/tr/tablecellspacing --- 是控制表格和单元格边框的距离cellpadding --- 单元格内容与边框的距离align --- 表格居中是整个表格不是表格的内容!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body table border1px cellspacing0px cellpadding10px aligncenter tr tdaaa/td tdbbb/td /tr tr tdccc/td tdddd/td /tr tr tdeee/td tdkkk/td /tr /table /body /html7.表单标签表单标签使用到的标签名是input属性名是type可以选择各种类型1.text --- 单行文本输入框!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body 账号input typetextbr/ /body /html2.password --- 密码输入框当我们输入内容的时候会自动帮我们隐藏密码文本!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body 密码: input typepasswordbr/ /body /html3.radio --- 单选框当我们在注册软件的时候就会让我们选择性别男or女这就是使用到了单选框我们让俩个单选框的name相同是为了防止俩个单选框都是选上的问题我们让id不同是为了让label中的for可以和我们的单选框匹配这时当我们点击字体男or女的时候也可以勾选上单选框!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body 性别input typeradio namegender idmale label formale男/label input typeradio namegender idfemale label forfemale女/labelbr/ /body /html4.checkbook --- 复选框在我们首次使用一些软件比较微博小红书哔哩哔哩的时候就会让你选择你的喜好然后他们就会根据你的喜好给你推送相应的数据这时他们会给你很多个数据给你选择你可以选择一个或者多个这时使用到的就是复选框~~~!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body 爱好input typecheckbox namehobbyJava input typecheckbox namehobbyLinux input typecheckbox namehobbyPython input typecheckbox namehobbyC input typecheckbox namehobbyGo /body /html5.select在注册的时候有一些软件会让我们选择生日城市啥的就会列出很多的条件给我们选择我们在广东这个选项中填写selected是刚开始默认广东这个选项也可以是热门选项!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body 城市select option哈尔滨/option option 大东北/option option 内蒙古/option option selected广东/option /selectbr/ /body /html6.textarea--- 文本编辑框一般在个人设置那里可以填写个人的介绍个人的爱好等等这个就是使用到了文本编辑框!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body 个人简介textarea row10 col200八嘎八嘎巴拉巴拉/textareabr/ /body /html7.button --- 按钮这个我们是最常见的在登录网站或者软件时候就会有登录注册等等按钮!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML_Demo1/title /head body input typebutton value注册 input typebutton value登录 /body /html