欢迎访问 生活随笔!

尊龙游戏旗舰厅官网

当前位置: 尊龙游戏旗舰厅官网 > 前端技术 > html >内容正文

html

web前端开发之html篇 -尊龙游戏旗舰厅官网

发布时间:2023/12/14 html 37 豆豆
尊龙游戏旗舰厅官网 收集整理的这篇文章主要介绍了 web前端开发之html篇 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

        前端开发是用来设计给用户看的网页的部分,而web前端开发则是通过创建web页面来呈现给用户的过程,其包含了html(结构),css(样式),javascript(行为)三大部分。在本篇文章中,我主要对html进行一个讲解。

目录

基本概念

html简介

标签,元素和属性

html的文件结构

html中的注释

html的基本标签

标题字体

段落

水平分割线

换行

预留格式

段内分组

超链接与图像

超链接

图像

表格与分组

区域标签

表格标签

列表标签

表单

文本框和密码框

按钮

单选框和复选框

下拉列表框

文本域

id,name和value

其他标签

dl,dt和dd

强调与斜体


html简介

html是一种“超文本标记语言”它是制作网页的标准语言。它包括了一系列标签,并通过这些标签来让资源形成一个逻辑整体。

对于html的编写,我们可以使用webstorm,sublime,notepad,vscode等等,这具体看自己的喜好。不过要注意html文件后缀为.htm或.html。

标签,元素和属性

标签是由尖括号包围的通常成对出现的,元素则是夹在一对标签之间的内容。下面我们举个栗子。

hello world!

在这里呢,

就是标签,

这一对标签中间的hello world!就是元素。对于几对标签,我们也要进行正确的嵌套,例如

则是正确的嵌套,而

则是错误的嵌套,这与括号匹配是同一个道理。

而对于这个标签,src就是属性。

html的文件结构

对于一个html的文件,我们需要在最上面添加一个声明:

用来告知 web 浏览器页面使用了哪种 html 版本。

html为.htm或.html文件,它包括了头部和主体部分

欧内的手

head即为头部,而body即为主体部分。

头部提供了浏览器和搜索引擎所需要的信息,而主体部分则为该网页(网页指的就是单个.htm或html文件,而网站则是由一系列网页组成的文件夹,这里需要区分一下)的内容

在上述粒子中,对该编写的代码运行以后,可以看到上面的标签卡出现了以下的内容。

 这就是title标签中的内容,可为什么是乱码呢?那是因为我们没有设置正确的编码,具体的编码大家自行在空余时间去自己学习。这里出现乱码是因为源文件保存时的代码和声明时的代码不一致,所以我们需要添加一行代码,这里我们才取utf-8的编码方式。

欧内的手

这样我们运行出来的结果就是

​正常的了。

html中的注释

在html中,如果代码太多了,我们有时候也会变得很难理解,这个时候我们就需要添加注释。这与c/c 和java等不一样,在html我们需要通过 来添加注释。例如:

在这代码中,可以清晰的看到这注释,同时我们可以发现,注释是可以换行的。

标题字体

在网页主体部分中,我们使用

来表示标题字体,从h1-h6字体逐渐变小,并且每个标签都会被加粗显示。对于以下代码 欧内的手

二号标题

三号标题

四号标题

五号标题
六号标题

运行后可以出现以下结果

段落

我们用一对

来表示段落,在段落内部,连续空格只显示一个空格,在段落内部中的换行则被替换为一个空格。每对标签会自动换行,对下列代码: title

哈陛下

p h i g r o s

雾雨魔理沙

我们得到了上图的结果。

水平分割线

表示水平分割线

title

嘉然


向晚

其效果如图:

换行

上面我们说过在

标签对内部我们的换行会被转化为一个空格,那么我们应该如何在

标签内部呈现多个空格的形式和换行呢?

标签对内部,我们使用 ;来表示空格,分好不能少,如图

title

p   h   i   g   r   o   s

可见中间隔了三个空格。

对于端内换行,我们使用
标签嵌进

标签对中

title


得到了上图的流汗

预留格式

使用预留格式标签可让我们的网页呈现和文本编辑器中我们代码一样的格式,被包围在 pre 元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。

title

欧 内的手

段内分组

标签对嵌在

标签对中主要用于后面css样式的设计,这个我后面在css中会详细道来。

我和我的动物朋友

超链接

超链接是指从一个网页指向一个目标的连接关系,可以是一段文本或者是一个图片,你可以通过点击该文本或图像来跳转到另一个网页或文档。

我们用

对于href属性的词,你可以使用本站点的其他网页,其他网页或者“#”。其中“#”则是虚拟超链接,即代码运行后你点击该超链接的字体不会有任何跳转。

注意:连接到其他站点使用具体链接时,你需要将传输协议加上(即网址前面的https/http)

图像

在html语言中,要显示一个图像,需要用到标签,它带有 src和alt属性,src属性表示该图像的链接,可以是url,也可以是本地图片的位置。alt属性则是当图片不能够正常显示时,就以alt属性中的文字所代替。

则会显示当前html文件同目录下的jiaran.png图像文件,如果图像文件和当前html不在同一个文件。

如果是这种关系,其中jiaran.png放在asoul文件夹里,那么我们可以使用

而如果是jiaran.png在asoul文件夹外面,而index.html在文件夹里边,那么我们采用

使用../来退回到上一文件目录。返回前几层文件可以以此类推../../../

在学用了标签和

那么点击该图片就会跳转到百度尊龙游戏旗舰厅尊龙游戏旗舰厅官网首页。

区域标签

区域标签用

表示,用于分区,通常与css搭配使用来布置网站的样式。

我超

牛批

 对于该代码,我们将划分在了同一个区域

中,并添加了属性align="center",其效果就是使该区域的字体居中显示,如上图。

表格标签

对于表格,我们使用

标签定义 html 表格中的行,
标签来表示,我们来举个例子:
姓名力量
嘉然233
向晚232

在这个粒子中,

是表头标签,会加粗显示,
标签定义 html 表格中的标准单元格。如果我们对上述的标签加上属性

则会呈现出该效果

列表标签

html中列表分为有序列表

    和无序列表
        的列表排序会以数字显示,
      1. 标签定义列表项目,我们给一个粒子:
        1. 嘉然
        2. 向晚
        3. 乃琳
        4. 贝拉
        5. 珈乐

        而对于无序列表则是以·显示的

        • 嘉然
        • 向晚
        • 乃琳
        • 贝拉
        • 珈乐

        表单

        元素,其格式为 表单元素

        文本框和密码框

        文本框和密码框的设置需要在

        中添加表单元素,并设置其类型type="text",而密码框则是type="password",对文本框,你所输入的内容都是正常显示的,密码框中你所输入的内容都是以*代替的: 账号:密码:

         而如果我们再添加一个属性:

        账号:密码:

        那么该账号框就会默认地显示value中的内容

         

        按钮

        对于按钮,我们仍然是在表单使用标签,有两种类型的按钮,我们可以设置成type="submit"type="reset",显然,他们分别是提交按钮和重置按钮,而我们也需要对value属性进行设置来让按钮上显示字体,同时,我们最好能给不同按钮一个不同的name属性

        账号:密码:

         

        单选框和复选框

        html的单选框和复选框同样是对表单中input标签的type属性更改即可,单选框即为type="radio",复选框则为type="checkbox"

        注意:对于同一组单选框,我们需要把name属性设置为同一值,而复选框则没有这个要求

        这里我们应该把不同按钮的value只设置成不一样的值,以便进行后续操作。

        我们还可以使用checked="checked"来设置默认选中

        单选:
        多选:七海阿梓小可

         

        下拉列表框

        对于下拉列表框,我们不用嵌套于

        标签中使用,我们使用

         

        文本域

        文本域我们使用

         

        id,name和value

        在前面我们提到了namevalue,不是所有元素都有namename可以不唯一,他主要用于提供数据给后端的,而value则是提供给后端的那个值。

        id是唯一的,他可以唯一地定位到该元素,主要用在javascript中。

        dl,dt和dd

        标签定义了定义列表,
        标签定义了定义列表中的项目,而
        在定义列表中定义条目的定义部分,这三个标签是用于进行描述说明的
        嘉然
        一个国产虚拟主播
        东雪莲
        勾罕见

         

        强调与斜体

        html中有两种方法可以将文字加粗,一种是,一种,相比于的语义化更强,所以我建议大家加粗文字尽量使用

        对于斜体,html中使用标签或,同样语义化更强,他是英文单词emphasis的缩写,表达强调的意思

        晋元帝欧内的手欧西给哈陛下

         以上就是我对html部分的总结了,本人也是在边学习的时候进行笔记整理写的这一篇文章,如有问题和不足,还请各位大佬多多指出

        总结

        以上是尊龙游戏旗舰厅官网为你收集整理的web前端开发之html篇的全部内容,希望文章能够帮你解决所遇到的问题。

        如果觉得尊龙游戏旗舰厅官网网站内容还不错,欢迎将尊龙游戏旗舰厅官网推荐给好友。

        • 上一篇:
        • 下一篇:
网站地图