首页 前端知识 HTML简单学习记录(1)

HTML简单学习记录(1)

2024-05-12 17:05:06 前端知识 前端哥 622 463 我要收藏
  • 超链接

    • 锚链接
  • 功能性链接

  • 行内元素和块元素

  • 列表

  • 表格

  • 视频和音频

    • 视频
  • 音频

  • 页面的简单布局

  • iframe内联框架

  • 表单语法

    • 表单元素格式
  • 单选框

  • 多选框

  • 按钮

  • 下拉框

  • 文本域

  • 文件域

  • 邮件验证

  • url验证

  • 数字验证

  • 滑块(音量)

  • 搜索框

  • 表单的应用

  • 表单的初级验证

HTML简单学习记录


简介

HTML5(超文本标记语言)是 Hyper Text Markup Language 5 的缩写,超文本包括文字、图片、音频、视频、动画等等

HTML基本结构

在这里插入图片描述

<body>、</body>等成对的标签,分别叫开放标签和闭合标签,单独呈现的标签(空元素),如<hr/>意为用/来关闭空元素

  • DOCTYPE声明:告诉浏览器我们要使用什么规范

  • <title>标签

  • <meta>标签:描述性标签,用来描述网站的信息,一般用来做SEO(搜索引擎优化)

网页基本标签

  • 标题标签:<h1>一级标签</h1><h2>二级标签</h2>

  • 段落标签:<p></p>

  • 换行标签:<br/>

  • 水平线标签:<hr/>

  • 字体样式标签:

粗体:<strong>i love you</strong>

斜体:<em>i love you</em>

  • 注释和特殊符号:

注释:<!--注释 -->

特殊符号:

空格:&nbsp;

大于号:&gt;

小于号:&lt;

版权符号:&copy;

  • 特殊符号记忆方式:

以“&”开头,以“;”结尾,用“&+一个字母”可以预览特殊符号:

在这里插入图片描述

图像标签

text

在这里插入图片描述

图像标签 头像

其中:

  • "…/"指上级目录
  • src与alt是必填项,其他选填
链接标签

超链接标签:<a></a>

链接文本或图像

在这里插入图片描述

其中:

href是必填项

Title

点击我在新窗口跳转到百度

点击我在当前窗口跳转到百度


头像

在这里插入图片描述

其中:

  • target="_blank"表示在新窗口跳转页面;target="_self"表示在当前窗口跳转页面

超链接

锚链接
  • 1.需要一个标记

  • 2.跳转到标记

  • 通过”#“+标记名跳转到目标标记

Title

顶部

点击我在新窗口跳转到百度

点击我在当前窗口跳转到百度


头像

头像

头像

头像

头像

头像

头像

回到顶部

在这里插入图片描述

点击跳转到顶部

其中:

  • name属性已经被淘汰(<a name="top">顶部</a>),当前流行用top属性(<a top="top">顶部</a>
锚链接可以用来跳转到页面指定位置
功能性链接

如邮箱链接:

点击联系我

行内元素和块元素

  • 块元素

无论内容多少,该元素独占一行 (p、h1-h6…)

  • 行内元素

内容撑开宽度,左右都是行内元素的可以在排在一行( a . strong . em …)

列表

列表是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式展现出来,以便浏览者能更快捷地获得相应的信息

列表的分类:

  • 有序列表:
    • Java
    • python
    • C/C++
      • 无序列表
      • Java
      • python
      • C/C++
        • 自定义列表
        学科
        Java
        python

        表格

        简单通用、结构稳定

        基本结构:

        • 单元格

        • 跨行

        • 跨列

        表格学习
        1 2-1 2-2 2-3 2-4 3-1 3-2 3-3

        其中:

        更多面试题

        **《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

        开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

        html>

        表格学习
        1 2-1 2-2 2-3 2-4 3-1 3-2 3-3

        其中:

        更多面试题

        **《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

        开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

        [外链图片转存中…(img-kFG2RhPs-1714290158378)]

      转载请注明出处或者链接地址:https://www.qianduange.cn//article/8320.html
      标签
      评论
      发布的文章

      Newtonsoft.Json

      2024-05-23 20:05:19

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