目录一. 超文本链接1.1 超链接简述1.2 超链接标签语法1.3 超链接代码示例二. 有序列表2.1 有序列表简述2.2 有序列表标签2.3 有序列表代码示例三. 无序列表3.1 无序列表简述3.2 无序列表标签3.3 无序列表代码示例四. 表格4.1 表格简述4.2 表格标签的使用4.3 表格代码示例五. 表单5.1 表单简述5.2 表单语法5.3 表单代码示例六. 块元素、内联元素、行内块元素(特殊内联元素)6.1 通过现象引出问题6.2 常见的块元素标签与内联元素标签6.3 块元素与内联元素的区别6.4 行内块元素(可理解为特殊内联元素)上篇文章链接HTML标签入门篇1——标题标签、段落标签、换行标签、水平线标签、图片标签、文本标签_html换行-CSDN博客一. 超文本链接a href /a1.1 超链接简述超文本链接用一句话来形容就是想跳哪里跳哪里链接大家并不陌生我们随意点开一个网站就可以发现很多图片和文字是可以进行点击的点击之后就会跳转到另一个地方或者打开一个新的页面这就是跳转链接。它可以是一个字一句话、一段话、或是一张图片简单来说可以展示在页面上的任何文本都可以作为一个超链接。1.2 超链接标签语法超链接的使用方式如下a href https://www.xxx.com链接文本/a需要使用一对a标签进行包裹标签中间的文本就是链接文本。href 属性的值就是要跳转到的其他页面或当前页面的某个地方。此外要注意的点是此处的值必须填写完整值(完整路径)平时我们在浏览器搜索一般都是不带前缀 https://www. 的。但在超链接中一定要加上否则超链接会失效如果 href 属性为空此时链接也会失效链接文本也就变成了普通的文本。1.3 超链接代码示例如下代码我简单写了三个超链接!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body a hrefhttps://www.bilibili.com/点击我进入B站吧/a br a hrefhttps://www.csdn.net/点击我进入CSDN吧/a br a hrefhttps://www.baidu.com/点击我进入百度吧/a /body /html然后保存在浏览器打开如下图所示三个超链接就形成了。默认情况下链接会有以下形式出现在浏览器中一个未访问过的链接显示为蓝色字体并带有下划线访问过的链接显示为紫色并带有下划线点击链接时链接显示为红色并带有下划线还有一个小细节如果想确认一个文本是不是超链接或者自己设置的文本连接是否有效可以将鼠标移动到文本处如果鼠标从原本的样式变成了一个小手则说明当前文本是超链接文本。如果不希望有下划线或想改变字体颜色可以后期使用一些其他方法例如CSS选择器让它不显示或改变其样式这里不多说了。二. 有序列表2.1 有序列表简述有序列表其实非常常见就是12345....或者ABC...这样现在小编正在写的文章的每个小标题其实就可以理解为是有序列表。在HTML标签中它提供了多种有序列表标签供我们去进行选择使用。2.2 有序列表标签(a)有序列表标签语法如下所示最外层由一对ol/ol标签进行包裹内部则可以由若干的li/li标签进行填充每个li/li标签中间就使用文本来进行填充ol type li/li li/li li/li li/li li/li /ol(b)不仅如此还可以通过 type 属性来选择要生成的不同种类的有序列表1表示列表项目用数字标号(1,2,3...)a表示列表项目用小写字母标号(a,b,c....)A表示列表项目用大写字母标号(A,B,C...)i表示列表项目用小写罗马数字标号(i,ii,iii...)I表示列表项目用大写罗马数字标号(1II...) (c)此外无序列表之间还可以进行嵌套使用形成多层级结构。2.3 有序列表代码示例如下所示我将上面五种有序列表全都写了一下并且嵌套使用了有序列表嵌套在内部的有序列表也可以通过 type 指定有序列表的前缀如果不指定默认就是使用123来进行排序body ol type1 liHTML/li liCSS/li liJavaScript/li /ol hr ol typeA liCSGO/li liCF/li liLOL/li /ol hr ol typea li抖音 ol typeA li短视频/li li长视频/li li图片/li /ol /li liB站/li liCSDN/li /ol hr ol typeI li淘宝/li li咸鱼/li li拼夕夕/li /ol hr ol typeI li手机 ol type1 liapple/li lihuawei/li lixiaomi/li /ol /li li平板/li li电脑/li /ol /body保存代码然后在浏览器打开就可以看到效果如下所示在页面中出现了五种有序列表且嵌套在内部的有序列表样式因为 type 指定的不同因此和外部不一样。三. 无序列表3.1 无序列表简述与上述有序列表与之对应的当然就是无序列表了从字面理解也可以知道无序列表是也一个列表但内部是没有顺序的排名不分先后。3.2 无序列表标签(a)无序列表标签的使用语法和有序标签几乎相同只是外部标签不同有序标签外部是ol/ol来进行包裹而无序标签则是使用ul/ul来进行包裹内部每个选择同样时使用li/li标签。(b)而且无需标签和有序标签之间是可以互相嵌套使用的嵌套语法和刚才有序标签的方式一样。(c)无序列表也可以通过 type 来指定属性常用的有以下四种disc默认实心圆circle空心圆square小方块none不显示3.3 无序列表代码示例如下代码第一个是普通无序列表第二个是无序列表嵌套有序列表第三个是有序列表嵌套无序列表body ul li苹果/li li香蕉/li li橘子/li /ul hr !-- 无序列表嵌套有序列表 -- ul type circle li奶茶 ol li米雪/li li茶摆到/li liCooc/li /ol /li li咖啡/li li可乐/li /ul hr !-- 有序列表嵌套无序列表 -- ol li苹果 ul type square li红苹果/li li青苹果/li li绿苹果/li /ul /li li香蕉/li li橘子/li /ol /body保存在浏览器打开就可以得到如下所示的效果我们平常在浏览器中看得到排序效果就是无序列表有序列表混合搭配而形成的。四. 表格4.1 表格简述HTML中的表格和我们日常间的表格是一样的横平竖直每一个小的单元格都是一个独立的存储单元并且各行各列都是等高等宽的。每个 单元格中可以填写文字图片等4.2 表格标签的使用在HTML中表格标签使用table/table来进行标识所有要写在表格中的内容都要写在table/table标签之内。tr/tr代表表格中的行一对标签就是一行两对就是两行td/td代表表格中的列写在tr/tr标签之内一对标签就是单独一列两对标签就是将一行分为两列三对就是拆成三列4.3 表格代码示例如下代码一共有三对tr标签每个标签内部又还含有四对td标签所以会在页面中生成三行四列的单元格。body table tr td单元格/td td单元格/td td单元格/td td单元格/td /tr tr td单元格/td td单元格/td td单元格/td td单元格/td /tr tr td单元格/td td单元格/td td单元格/td td单元格/td /tr /table /body保存在浏览器打开得到的表格效果如下图所示五. 表单5.1 表单简述表单是Web网页中几乎必不可少的一项重要功能主要作用就是让用户将信息填写在表单之中从而采集到用户信息让页面具有交互能力。在一个页面中几乎所有需要让用户输入内容的地方都是由表单来完成的例如用户注册、登录、搜索框等......表单是由容器和控制组件共同构成的一个表单通常会含有让用户输入信息的输入框和用户输入完毕后提交信息的按钮框。这些输入框和按钮框就是控件一个表单中可以容纳各种各样的控件。5.2 表单语法在HTML中表单标签使用form/form来进行标识form 标签的内部还可以填写多种属性如下代码示例form actionurl methodget|post namexxx/formaction用来填写后台服务器的网址method表单提交的方法通常为 get 请求或 post 请求而这也略有区别get 一般用于提交少量数据post 用于提交大量数据。name用来标识当前表单的名称后期CSS添加样式时会用到一个完整的表单包含以下三个基本组成部分表单标签表单域表单按钮。表单域也可以简单理解成输入框在HTML中使用input标签即可形成几个输入框并通过 type 指定类型type text 表示当前输入框是一个文本输入框type submit 表示当前输入框是一个按钮提交框。form actionurl methodget|post namexxx input typetext input typesubmit /form在页面上展示的效果如下有输入框有提交框。形成了一个最最基本的表单。5.3 表单代码示例如下代码所示在 form 标签内部我们可以直接填写文本不需要再写p标签以及其他文本标签但也可以根据页面需要嵌套使用。使用input标签生成多个控件然后通过type指定属性属性不一样控件的效果也不一样。placeholder 属性用来提示用户当前文本框应该输入什么值value 值用来标注当前按钮的文本body form actionurl methodget|post namexxx 用户名input typetext placeholder请输入用户名 br 密码input typepassword placeholder请输入密码 br input typesubmit value登录 br input typesubmit value提交注册 /form /body保存在浏览器打开页面效果如下所示。placeholer 的值在文本框内部就有提示用户输入下面两个按钮的值也对应着 value 值此外还有更重要的一点在密码输入框我们将 type 属性赋值为 password在实际页面中用户输入的密码就会有一个个小黑圆点代替不会以明文的方式展示保证了用户信息的安全性而用户名则不需要隐藏直接赋值为 text 普通文本即可就会以明文的方式显现如下图所示六. 块元素、内联元素、行内块元素(特殊内联元素)6.1 通过现象引出问题也许很多同学不知道块元素、内联元素、行内块元素是什么东西无妨。我们先一起来看下面的一段代码body !-- 一级标题 -- h1一级标题/h1 !-- 三级标题 -- h3三级标题/h3 !-- 六级标题 -- h6六级标题/h6 !-- 一段文本 -- span我是第一段文本/span !-- 又一段文本 -- span我是第二段文本/span !-- 又又一段文本 -- span我是第三段文本/span !-- 又又又一段文本 -- span我是第四段文本/span !-- hr换个行 -- !-- 一个段落 -- p我是第一个段落/p !-- 又个段落 -- p我是第二个段落/p !-- 又又个段落 -- p我是第三个段落/p !-- 又又又个段落 -- p我是第四个段落/p !-- 第一个超链接 -- a hrefhttps://www.bilibili.com/点击我进入B站吧/a !-- 第二个超链接 -- a hrefhttps://www.csdn.net/点击我进入CSDN吧/a !-- 第三个超链接 -- a hrefhttps://www.baidu.com/点击我进入百度吧/a !-- 第一个表格 -- table tr我是第一个表格/tr /table !-- 第二个表格 -- table tr我是第二个表格/tr /table !-- 第三个表格 -- table tr我是第三个表格/tr /table /body然后在浏览器打开就看到下面这种样子小伙伴们细心看看一看这些标签形成的元素在页面上的排布规则有没有发现一些微妙的地方相信细心的小伙伴们已经看出来了。那就由我来说一下吧疑问点一一级标题三级标题六级标题这三个都是标题它们没有将自己所在的那一行占满但是在新建一个标题时还是会另起一行疑问点二但是页面中的四个段落紧紧挨在一起展示的都是在同一行而当我们去新建段落时新建的段落并没有紧贴着文本去显示而是另起了一行每个段落都是另起了一行疑问点三我建立的三个超链接它们是紧挨着去显示的当我创建第一个表格时它也是紧挨着去显示的而当我去建立第二个、第三个表格时它又变成了另起一行去显示。这些现象都好奇怪啊为什么有些标签生成的文本是占领一整行就算没有填充也似乎在说这一整行都是我的其它标签不许占而有些标签原本就不会占领一整行只有这一行都被占满了才会去另起一行其实出现这个现象的最重要的原因就是各种标签之间存在着差异像h1/h1标题标签、p/p段落标签、table/table表格标签都被称之为块元素标签它们在页面上显示的时候很霸道不管我的文本有没有填满一整行但是就会把一整行的位置都占领不允许其它标签存在而span/span文本标签、a href /a超链接标签这些被称之为内联元素标签它们在页面上显示的时候会略处下风自己有多大就占多大空间不会多占其后面允许其它标签存在。6.2 常见的块元素标签与内联元素标签常见块元素常见内联元素div、form、h1~h6、hr、p、table、ul等a、b、em、i、span、strong等6.3 块元素与内联元素的区别块元素内联元素块元素在页面会独占一行(自上而下垂直排列)行内元素不会独占一行只占自身的大小可以设置 width 宽度height 高度属性不可以设置 width 宽度height 高度属性设置了也无效块元素内部可以包含其他块元素也可以包含内联元素可以说是最大的一个级别一般内联元素内部只能包含其他内联元素不能包含块级元素6.4 行内块元素(可理解为特殊内联元素)上面我们说到的块元素和内联元素的区别中提到块元素可以设置 width 宽度height 高度属性而内联元素可以设置 width 宽度height 高度属性设置了也无效但是有一种特殊的元素标签它类似于块元素只占自身元素的大小但是却可以设置width 宽度height 高度属性可以称之为行内块元素标签也可以把它们叫做特殊的内联元素标签常见的有button/button、img、input这里小伙伴们可以自己动手尝试一下小编就不在这里举例展示啦。
