web前端开发之html篇 -凯发k8官方网
前端开发是用来设计给用户看的网页的部分,而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字体逐渐变小,并且每个标签都会被加粗显示。对于以下代码
欧内的手
二号标题
三号标题
四号标题
五号标题
六号标题
运行后可以出现以下结果
段落
我们用一对
来表示段落,在段落内部,连续空格只显示一个空格,在段落内部中的换行则被替换为一个空格。每对标签会自动换行,对下列代码:哈陛下
p h i g r o s
雾雨魔理沙
我们得到了上图的结果。
水平分割线
表示水平分割线
嘉然
向晚
其效果如图:
换行
上面我们说过在
标签对内部我们的换行会被转化为一个空格,那么我们应该如何在
标签内部呈现多个空格的形式和换行呢?
在
标签对内部,我们使用 ;来表示空格,分好不能少,如图
p h i g r o s
可见中间隔了三个空格。
对于端内换行,我们使用
标签嵌进
标签对中
流
汗
得到了上图的流汗
预留格式
使用预留格式标签可让我们的网页呈现和文本编辑器中我们代码一样的格式,被包围在 pre 元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。
欧 内的手
段内分组
标签对嵌在
标签对中主要用于后面css样式的设计,这个我后面在css中会详细道来。
我和我的动物朋友
超链接
超链接是指从一个网页指向一个目标的连接关系,可以是一段文本或者是一个图片,你可以通过点击该文本或图像来跳转到另一个网页或文档。
我们用
对于href属性的词,你可以使用本站点的其他网页,其他网页或者“#”。其中“#”则是虚拟超链接,即代码运行后你点击该超链接的字体不会有任何跳转。
注意:连接到其他站点使用具体链接时,你需要将传输协议加上(即网址前面的https/http)
图像
在html语言中,要显示一个图像,需要用到标签,它带有 src和alt属性,src属性表示该图像的链接,可以是url,也可以是本地图片的位置。alt属性则是当图片不能够正常显示时,就以alt属性中的文字所代替。
则会显示当前html文件同目录下的jiaran.png图像文件,如果图像文件和当前html不在同一个文件。
如果是这种关系,其中jiaran.png放在asoul文件夹里,那么我们可以使用
而如果是jiaran.png在asoul文件夹外面,而index.html在文件夹里边,那么我们采用
使用../来退回到上一文件目录。返回前几层文件可以以此类推../../../
在学用了标签和
那么点击该图片就会跳转到百度凯发k8官方网首页。
区域标签
区域标签用
我超
牛批
对于该代码,我们将划分在了同一个区域
表格标签
对于表格,我们使用
标签定义 html 表格中的行,标签来表示,我们来举个例子:
在这个粒子中, | 是表头标签,会加粗显示, | ||||||
---|---|---|---|---|---|---|---|
标签定义 html 表格中的标准单元格。如果我们对上述的标签加上属性 则会呈现出该效果 列表标签html中列表分为有序列表
|