Html的基础知识

html分为html5,html,xhtml。
以html为例如何使用html
下载好后打开sublime text exe.
打开后的第一件事ctrl+s保存 并取名字 名字一定要以.html结尾 前面组好是英文字母。每次写完后也要记得ctrl+s保存。
取名之后 将输入法调成英文 输入一个感叹号(!)并按下tab 会出现html的基本结构。

上面这张图的第一行是整个html的头文件,也是页面的响应数据类型。
第二行是文件的语言类型 en是英语 中文可以用zh-cn。
第三行的head表示html的头部 meta是源数据的意思charset是字符集的意思 它后面的UTF-8是世界通用码,中国的通用码是Gbk。
下面一行是文件名字可以自己取。
/head的表示文件头的结束。

接下来是身体部分 也就是正文 所有要在网页中展示出来的内容都在这里。
接下来是主体部分 从一个最基础的网页 主体说起
在这里插入图片描述
上图为body 以及body后面可以加的元素及其意义。
html中很多子元素主需要你输入几个字母他就会帮你显示出来 无需将单词打完。
提醒:一般不用background 因为用图片做背景可能会比较丑建议不用。
在介绍标签h1.它有h1到h6 6个等级其中1的字体最大6的字体最小在中间写内容或者标题文字。
标签a是用来放置链接的 就像浏览器上那些链接一样 在引号里写上网址即可在网页中点击名字来打开你所写的网址!
在这里插入图片描述
在这里插入图片描述
上图为效果和程序 可以参考着格式来写,点击链接后的颜色我没发截图所以只有自己弄了去点击试试看看效果了。

接下来是表单
在这里插入图片描述
框架的打开方式集需要大家去自己试验一下。

再说两个标签 一个是br,代表换行,p代表成段。br是单标签 起始及结束 p是双标签要记得关闭。
method的发送方式有两种一个是get 一个是post 它们二者的区别是 get会将个人的信息或密码展现在链接中 而post不会 post更加安全 但表单form默认的发送方式是get

在介绍一个div标签 它的意思是分区 等会会在图中展示他的作用
在表单中 一般与input一起连用 input里常用type来定义 name来取名 value来发送给后台让其接收 一会有具体的实例

表单中还有很多选择框 有单选框 radio.
checkbox 多选框 select 选择框 在select后面要加上multiple元素 这样才能多选 每个选择项用option标签来写 在表单中都很常用 在表单中还有有比较常用的标签有texterea 可以用于备注 cols代表长度 rows代表宽度,reset,重置按钮 方便重新填表。
切记 表单中每一项需要输入的或选择的元素 都要用value,这样后台才能收到。接下来上图在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里div后输入center意思是居中的意思 所以整个表单会在正中央 起到分区的作用

提醒一下 上述图片中有一些小瑕疵 例如input是一个单标签 起始及结束 应该在>前加一个/ 虽然说不加也不会影响效果 但是这是一种语法错误 所以如果是单标签 请记得加上个/。密码的value没写为了突出和用户名里字的区别。
如果想要引入图片用img标签 img也是个单标签

接下来是表格table
在这里插入图片描述
表格的好处是可以让整体变的美观整洁 清晰易懂。

在这里插入图片描述
在这里插入图片描述
如果想要调整将其对准 ,可用&nbsp,表示一个空格,另外&gt表示一个>.且table标签中有width宽度元素 也可以调整表格的整齐度。

接下来是一些排序标签 这些一般为了是页面更加整齐明了。
有两种排序方式分别是无序排列和有序排列,还有一种定义列表。这里就不用导图了因为比较散。首先ul表示无序排列的标签ol为有序排列 二者的内部的每一项都用li标签来写
先来个ul的例子
在这里插入图片描述
在这里插入图片描述
这里解释一下 ul标签里有一种元素type 可以控制字体前面的符号的样子 分别由三种 disc 表示实心圆 square 表示方块 circle表示空心圆 接下来是ol和dl一起
在这里插入图片描述
在这里插入图片描述

这里解释一下 ol里有3个元素,一个是start 决定了你排序的初始值 而type决定了标号的类型 是数字还是字母的大小写这里我用的是数字的4为开端,还有一个元素是reserved 代表排序颠倒的意思 我这里是456,如果加上就是654这里可以自己试一试。
至于dl定义类表 dt是列表中的一项 如图中的玩游戏 而dd就是下面那句话 对玩游戏做出解释。这就是dl的作用。

接下来是两个小知识sub 与 sup
sub代表下标文本 sup代表上标文本
这个直接上图好理解在这里插入图片描述
在这里插入图片描述
这两个元素一般用于数学 化学公式计算等 对计算方面有所帮助。

接下来是音频和视频的制作。
视频用video标签 音频用audio标签
二者内部都有两个必要的属性 src 填视频的绝对路径或者相对路径 然后视频或音频要想播放 还得加个controls=“controls” 这样就能够正常播放音频和视频了。由于这个是动态的 就自己去试试 就不发效果图了。

最后再来说一个多窗口的框架 就是将多个页面放在一个页面当中。
在html4.0版本中 frameset 表示多窗口 而html5.0版本中iframe表示内嵌窗口
这里注意一下 frameset和body不能连用 如果使用frameset 要删除body标签。
frameset的子标签是frame 在frame标签里通要有src元素用于填写页面地址。
而frameset这个打标签里有 rows(行)和clos(列)来决定小页面占大页面的多少 一般用版分数来写,百分数之间用,隔开。
在这里插入图片描述
在这里插入图片描述
多页面大概就是这个样子的。至于美观程度 到后期才用css进行调整美化。

最后的最后介绍一些其他的标签
i 表斜体
b表示加粗 一般用于字体文本等 strong 也有同样的效果
font用来规定字体的大小尺寸颜色等。
还有一些常用但意义不明的标签
nav 全名navigation 意思指导航
slide 标签表示侧栏
header表示头部
footer 表示底部
label 为标记标签 用于表单的文本框中
span 用于修饰文本 无实际意义
当然还有些标签不太常用的可以在w3c网站上去查 有助于理解和编写
那我的介绍就到这里了 谢谢各位的浏览

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值