HTML5基础知识总结总结(详细,附带源代码) |
您所在的位置:网站首页 › h5网站指的是什么内容 › HTML5基础知识总结总结(详细,附带源代码) |
HTML5基础知识
一:前言二: HTML基本结构。三:基本标签3.1 h标签3.2 p标签3.3 hr标签3.4 br标签3.5 strong标签与em标签3.6 特殊符号3.7 运行效果
三:图像标签四:链接标签五:列表六:表格七:媒体元素八:内联框架iframe九:表单九:总结
一:前言
HTML全称为超文本标记语言,是一种标记语言。由一系列标签构成,这些标签将分散的Internet资源链接成为了一个整体。HTML从1993年至今,已经发展了五代,我们这里主要分享的为HTML5。 二: HTML基本结构。HTML页面主要分为两大部分。分别是head和body。头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。 DOCTYPE html> 这是我的第一个网页 hello,world; 三:基本标签 3.1 h标签在HTML中,有六个不同级别的标题,分别用H1到H6表示,H1是最高级别的标题,H6是最低级别的标题。 一级标签 二级标签 三级标签 四级标签 五级标签 六级标签 3.2 p标签在 HTML 中,“p” 标签用于定义段落。它是一种基本的文本元素,用于将文本内容分段显示。在 HTML 文档中,每个 “p” 标签都会将包含在其中的文本内容显示为一个段落。 亲爱的 你慢慢飞 两只蝴蝶简谱 两只蝴蝶简谱 小心前面带刺的玫瑰 亲爱的 你张张嘴 风中花香会让你沉醉 3.3 hr标签在 HTML 中,“hr” 标签是一个用于创建水平线的标记。它是一个自闭合标签,不需要结束标记。 3.4 br标签在 HTML 中,“br” 标签用于在文本中创建一个换行符。它是一个自闭合标签,不需要结束标记。 亲爱的 你跟我飞 穿过丛林去看小溪水 亲爱的 来跳个舞 爱的春天不会有天黑 3.5 strong标签与em标签在 HTML 中,“strong” 标签和 “em” 标签都用于表示文本的重要性。它们是文本样式标记,可以通过加粗或斜体来突出显示文本。 字体样式标签 粗体: 庞龙 斜体: 庞龙 3.6 特殊符号以下为三种特殊符号,分别表示空格、大于号、小于号、特殊符号 空;;;;;;;;格 ;; © 版权所有 3.7 运行效果具体的运行效果图片,我贴到下面,大家有兴趣可以自行对照。 图像标签的作用是为我们的html页面添加图片,它的具体格式如下 DOCTYPE html> 图像标签学习图像地址主要分为两种,分别是相对地址和绝对地址。我们一般使用的是相对地址,用…/ 表示,一般我们要新建一个专门用来存储图片、视频、音频的文件夹方便进行管理。 四:链接标签链接标签是a标签,下面代码展示一下a标签的使用 DOCTYPE html> 链接标签学习 顶部 点击调到第一个页面 点击我跳转到新浪 新的页面进行打开 本页面打开 回到顶部 锚链接,调到底部 联系我们a标签的href标签表示跳转的地址,不仅仅可以跳转我们自己编写的html文件和网址,还可以跳转到我们自己设置的锚链接。 通过点击让页面跳转到自己想要的地方。 五:列表列表主要分为有序列表、无序列表、自定义列表,使用好列表可以让我们的排版更加整齐。 DOCTYPE html> 列表学习 Java Python C# C/C++ Java Python C# C/C++ 学科 Java Python C# C/C++ 地理位置 张家口 沧州 廊坊 北京对应运行结果: 使用表格table标签可以进行列表绘画。 DOCTYPE html> 表格学习 1-1 2-1 2-2 2-3 2-4 3-2 3-3 3-4效果: 其中colspan和rowspan提供了跨行和跨列效果。 七:媒体元素媒体元素主要有两个部分,分别是音乐和视频。练习此标签要先准备好相应的图片和视频。 DOCTYPE html> 媒体元素学习视频和音频的上传标签分别是:video和audio,将资源准备好后,输入它的地址就能正确显示。 八:内联框架iframe内联框架,可以将另一个网站镶嵌在我们的html文件中,并且可以设置它的长度和宽度。 DOCTYPE html> iframe 内联框架 点击跳转 九:表单在html中,表单是一个包含表单元素的区域,主要用于收集不同类型的用户输入,需要使用表单标签form来定义;而表单元素是允许用户在表单中输入内容的控件,比如输入标签(input)、文本域(textarea)等等。 DOCTYPE html> 登陆注册 名字 : 密码 : 性别 男 女 爱好: 睡觉 代码 聊天 游戏 国家: 中国 美国 瑞士 印度 英国 哈萨克斯坦 反馈: 文本内容 邮箱: url 数字 搜索: 点击后可选中其他文本框哦下面附上代码运行结果,大家又兴趣可以自行对照。 以上为我的html基础知识分享,希望对您有所帮助~ |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |