首页 前端知识 web前端(第一天HTML)

web前端(第一天HTML)

2024-07-20 17:07:16 前端知识 前端哥 246 419 我要收藏
前端是什么? 网页? 将数据以各种方式(如:表格、饼图、柱状图等)呈现给用户,我们就可以称之为前端。 做前端所需要的工具? notepad editplus notepad++ vscode webstorm 等,一般用于前端开发。 前端有那个语言? html css Javascript vue react node.js 都是属于前端相关的语言。 HTML 介绍 什么是 HTML HTML Hyper Text Markup Language (超文本标记语言),它可以支持超链接、图片、视频、音乐 等元素,然后使用不同的标签来对这些元素进行标记。 这个语言是由一个叫: Tim Berners-Lee( 蒂姆 · 伯纳斯 · ) HTML 是一种树型结构的文本。它主要包括两个部分:头部和主体。 头部中主要有标记、引入样式、设置文本编码、搜索优的的关键字、以及搜索优化的描述等信息。 主体就是我们可以看到的所有内容,都在这个部分。 HTML 的作用 它的作用是用于呈现数据的基石。 HTML 发展 HTML 1.0 :在 1993 6 月作为 互联网工程工作小组 ( IETF ) 工作草案发布。 [5] HTML 2.0 1995 1 1 月作为 RFC 1866 发布,于 2000 6 月发布之后被宣布已经过时。 [5] HTML 3.2 1997 1 14 日, W3C 推荐标准。 [5] HTML 4.0 1997 12 18 日, W3C 推荐标准。 [5] HTML 4.01 (微小改进): 1999 12 24 日, W3C 推荐标准。 [5] HTML 5 HTML5 是公认的下一代 Web 语言,极大地提升了 Web 富媒体 、富内容和富应用等方面的 能力,被喻为终将改变 移动互联网 的重要推手。 Internet Explorer 8 及以前的版本不支持。 使用 HTML 环境安装和配置 要想运行 HTML ,只需要有浏览器即可。而我们系统中就自带了浏览器, 所以我们不需要额外的环境。 对于编写 HTML ,我们可以使用前面说的工具,我个人习惯使用 webstorm 在企业中,目前所使用的工具比较多的是两大类: vscode ,它是微软开发的免费工具 webstorm ,它是 jetbrains 公司开发的收费工具 编写页面 打开工具,编写一个后缀为 .html 的页面,如: index.html 页面元素解析: HTML 标签介绍 常用标签 b/strong 标签 这个标签是用于加粗文字的,一般用于强调某个部分的作用。 在以后使用中,推荐使用 strong 标签。 i/em 标签 它们的使用是让文字变为斜体 u 标签 它的作用是给文字添加下划线 del 删除线 它的使用是给文字添加删除线 br 换行 p 标签 * 这个标签是一个段落标签,它本身就自带了意思距。在这个标签中的文件会独占一行。 pre 预处理标签 这个标签的作用是书写的内容与显示的样式内容相同。 这个标签一般用于显示源码的。 span 标签 ** 它是一个行内标签,它没有什么特殊的意义,但是在使用中却比较多。一般会接合 css 样式来修饰文本。 div 标签 *** 它是一个块状标签,一般用于页面布局。 sub 标签 这个标签的作用是指定下标,一般用于数字方面。 sup 标签 这个标签的作用是指定上标,一般用于数字方面。 hr 标签 这个标签用于给页面划水平线。 标签属性说明: size :用于指定线的粗线,值越大线越粗 width :用于指定线的宽度,值越大越宽 align :用于指定线的对齐方式,有以下三个值: left :居左对齐 center :居中对齐,它是默认值 right :居右对齐 hn 标签 这个标签中的 n 1 ~ 6 的数字,一般用于标题。 HTML5 中语义标签 这个标签是 HTML5 中定义的新的语义标签,有以下几个: header :用于定义页面的顶部 article :用于表示文章的内容 section :用于定义内容的分块信息 nav :用于定义页面的导航部分 aside :用于定义页面的侧边栏 footer :用于定义页面的页脚部分 address :用于定义用户邮件、地址等信息 特殊字符 HTML 中有很多特殊字符,如下表所示 多媒体标签 img*** 这个标签的作用是在页面中引入图片 标签属性说明: src :这个属性非常重要,用于指定图片显示的路径,可以是相对路径,也可以是绝对路径。(简单来说, windows 中带了盘符,在 Linux 中以 / 开头的路径,在链接中以 http:// 开头的就是绝对路径, 其他都是相对路径。相对路径的参考点就是这个对象本身。) width :用于指定图片显示的宽度,如果只指定宽,则高会根据宽度来等比例绽放 height :用于指定图片显示的高度,如果只指定高,则宽度会根据高度来等比例绽放。注意: width height 两个属性不要同时指定。 border :用于指定力图片显示的边框粗细,默认是无边框 alt :是在图片不能正常显示时才会显示这个文字内容 title :用于当鼠标移动到图片上时显示的提示信息。一般用于搜索引擎优化。 a 标签 *** 这个标签是用于作链接的标签。 第一种用法:超链接 属性说明: href :这个属性是一个必须属性,用于指定要打开的目标地址 target :链接打开的方式,有以下几个值: - _blank :在新窗口打开 - _self :在本窗口打开,默认值 - _top :在父窗口打开,一般用于 frame 框架时 - _parent :在父窗口打开,一般用于 frame 框架时 第二种用法:锚点 demo1.html demo2.html audio 标签 这个标签是用于播放音乐的标签。常用支持格式为 mp3 格式。 标签属性说明: 1. controls :它是用于对播放器进行控制器的,即显示播放器的控制按钮 2. src :用于指定音频文件的路径 3. autoplay :指定是否自动播放 4. loop :指定是否循环播放 video 标签 标签属性说明: 1. src :指定要播放的视频地址,可以是相对路径,也可以是绝对路径。这个标签所支持的视频格式不 多,目前只把持 mp4 ogg 两种 2. controls :显示播放控制按钮 3. autoplay :自动播放 4. loop :自动循环 5. width :设置播放器的宽度 6. height :设置播放器的高度 表格标签 ** 在我们进行数据展示时,很多时候都会用到表格,特殊是在后台进行数据管理时,或者显示列表数据 时,就会用表格。 要使用表格就需要用到 table 标签,而表格是由行和列组成。行的标签是 tr ,而列的标签是 td th 基本表格 表格的标签和属性说明: table :用于绘制表格 tr :用于绘制表格的行 td :用于绘制表格的列(单元格) width :指定表格的宽度,也可以是 td 的属性 border :指定表格的边框粗细 cellspacing :指定单元格之间的间距 cellpadding :指定单元格边框与单元格中内容的距离 align :用于指定表格对齐方式: - left :左对齐,默认值 - center :居中对齐 - right :右对齐 align 属性可以是 table ,也可以是 tr ,还可以是 td 。如果是 table 的,表示对整个表格有 效;如果是 tr 的,表示对当前行有效;如果是 td 的表示只对当前的单元格有效。 带标题的表格 使用 caption 来指定表格的标题,使用 thead 标签来指定表格的头, tbody 来指定表格数据区, tfoot 定表格的尾部。 td th 的区别: 1. td 中的内容是普通格式,而 th 中的内容是加粗的格式 2. td 中的内容是左对齐,而 th 中的内容是居中对齐 跨行跨列表格 相关属性说明: 1. colspan :用于指定要跨多少列,它的值是一个数字 2. rowspan :用于指定要跨多少行,它的值是一个数字 表格嵌套 列表标签 *** HTML 中,列表标签有以下几种: ul ol dl ul 它是无序列表标签 标签和属性说明: ul :用于指定无序列表 li :指定列表中的某一项 type :指定无序列表的格式,有以下几个值:(了解) - disc :实心圆形,默认值 - square :实心方形 - circle :空心圆形 ol 它是有序列表 type 属性有以下值: 1. 数字:默认值 2. a :以小写字母 a 开始 3. A :在大写字母 A 开始 4. i :以罗马字开始 dl 它数据列表 表单标签 *** form 标签 这个标签是用于表单提交的标签,一般在与用户交互时就会用到 form 标签。 标签属性说明: name :用于给这个表单取一个唯一的名称,便于后续使用 js 来操作这个表单 action :表单提交的地址 method :表单提交的方式,有以下两个值: - get :表单以 get 方式提交 - post:表单以 post 方式提交 补充 get post 提交的区别: 1. get 提交的数据会以参数的形式体现在浏览器地址栏中,而 post 提交的数据是在请求头中 2. get 提交方式提交的数据不能超过 4k 大小,而 post 提交方式理论上是没有大小限制的 input 这是表单元素中非常重要一组标称,它有很多类型: text :最常见的类型,用于提交文本字符串内容 password :用于提交密码数据 radio :单选按钮 checkbox :多选按钮 submit :提交按钮 reset :重置按钮 button :普通按钮 image :图片按钮 file :文件上传域 select select 是下拉列表标签 标签属性说明: name :表单提交时要获取对应元素值是所需要的属性 value :指定 select 中每一个子元素的值 size :指定 select 可看到的元素个数,默认值是 1 multiple :表示可以多选 textarea 这个标签是用于输入大文本内容的标签。 标签属性说明: name :用于获取元素值的属性 cols :用于指定文本框的宽度 rows :用于指定文本框的高度
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14077.html
标签
评论
发布的文章

TEGG学习总结

2024-08-07 00:08:45

ajax笔记二

2024-03-12 01:03:25

jQuery 密码验证

2024-08-07 00:08:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!