程序员经验分享-hwhale

HTML介绍

2023-05-16

文章目录

  • 一. HTML介绍
  • 二. 创建
  • 三. HTML结构
  • 四. 常见的标签
  • 五. 链接标签
  • 六. 图片标签
  • 七. 资源路径
  • 八. 列表标签
  • 九. 表格标签
  • 十. 表单标签
  • 十一. 表单提交

一. HTML介绍

  • HTML: 超文本标记语言
  • 作用: 书写前端页面
  • 前端三大技术(三大标准):
    1. HTML: 结构标准 (页面中有什么内容)
    2. CSS: 样式美化 (美化页面)
    3. Javascript (js): 行为标准, 交互效果, Jquery是JS的一个函数库

二. 创建

  • 使用vscode, 创建带 .html 后缀的文件, 直接输入一个 ! 号, 点击回车, 即可快速生成一个 html 的基本页面

三. HTML结构

  • 文档声明 (注释)
  • <html>
    • <head>
      • 设置编码
      • 设置标题
      • 引入和书写 css 文件
      • 引入和书写 js 文件
    • </head>
    • <body>
      • 可以写其他 HTML 标签
    • </body>
  • </html>

四. 常见的标签

  • 标签的分类

    • 双标记标签(双标签)
    <标签> 可以书写其他内容和标签 </标签>
    • 单标记标签(单标签)
    <标签 其他内容>

<标签 其他内容 />

  • 标题标签

<h1> 标题内容 </h1>
h1 到 h6 来表示
  • 段落标签
段落前后都有换行
<p> .... </p>
  • 换行标签
<br>
  • 横线
<hr>
  • div标签, 盒子标签, 没有特殊的含义, 一般用在布局, 添加div
<div>
  .....
</div>

五. 链接标签 

默认是当前标签页打开新链接, 加 target='_blank' 可以在新标签页打开新链接
<a href='链接地址' target='_blank' >文字内容</a>

六. 图片标签 

src属性: 图片的地址
alt属性: 
  1. 图片不能加载的时候, 显示的内容
  2. 读屏软件遇到图片读取的内容(例如 盲人使用的读屏软件)

<img src="图片的地址" alt="xxxx">

七. 资源路径

  1. 相对路径, 从当前目录开始书写的路径, ./ 可以省略不写
  2. 绝对路径, 从根目录开始书写的路径, Linux 和 Mac 下使用 / 表示, Windows下使用 C: D: 表示
  3. 网络路径, 资源在网络中的URL地址

八. 列表标签 

<!-- 有序列表 ol(order list) -->
<ol>
  <!-- 列表中的每一项使用的标签是 li(list) -->
  <li>pyhton</li>
  <li>c++</li>
  <li>go</li>
</ol>
<!-- 无序列表 ul(unorder list) -->
<ul>
  <!-- 列表中的每一项使用的标签是 li(list) -->
  <li>pyhton</li>
  <li>c++</li>
  <li>go</li>
</ul>

九. 表格标签

  • 表格标签: table
  • 行标签: tr tabke row
  • 表头标签: th table header
  • 表格中数据标签 td table data

十. 表单标签

  • 表单概念: 手机用户输入的信息, 提交给web服务器
  • input 标签属性 type
    • 单行文本 text
    • 密码框 password
    • 单选框 redio
    • 复选框 checkbox
    • 文件 file
    • 提交按钮 submit
    • 重置输入 reset
    • 普通的按钮 button
  • 多行文本框 textarea
  • 下拉框 select
    • 下拉选项 option

十一. 表单提交

  • 直接使用默认的 GET 方式提交, 会发现多了一大串, ? 后面就是提交的参数, 表单中没有设置 name 属性的标签, 默认都是on , 选择性的还需要设置value
?name=aaa&password=213&gender=on&like=on&like=on&like=on
  • 前提
    1. 需要提交的内容标签需要设置name属性
    2. 如果属性是选择性的, 还需要设置 value ,作为提交时的属性值
  • form 标签的属性
    • action 是将数据提交到指定 URL 地址, 不写的话, 默认是当前页面
    • method 是请求的方法,默认是 GET方式, 可以手动指定为 POST
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

HTML介绍 的相关文章

  • 动态创建多个上传文件

    我想知道是否有人知道动态创建上传表单的最佳方法 这就是我想要实现的目标 下面显示的代码允许一次上传 我想要一个按钮 按下该按钮后 应添加另一种形式用于文件上传 因此 如果我想上传 假设有 7 个文件 我想按按钮 7 次来创建这些上传表单 每

  • 视频作为网站背景？ HTML 5

    我想使用视频作为背景 而不是自动拉伸到整个屏幕 背景 的图像 我还想旋转视频和图像 以便以任何顺序显示随机视频 图像 如果知道如何延迟视频播放 以便视频在网站加载后 30 秒只播放一次 那就太好了 thx 看看我的 jquery video

  • jQuery mobile 在 Opera Mini 浏览器中失败。如何获得错误输出？

    I have a jQuery Mobile http en wikipedia org wiki JQuery Mobile website that works great on normal browsers but it fails

  • 如何使无线电输入成为必需？

    我在表单中提供了无线电输入 供用户选择性别 如何使性别成为必需的输入 用户必须选择女性或男性 否则他们会按照通常的方式得到提示required 我尝试添加required如下所示 但它不起作用 用户可以继续而不选择女性或男性 div cla

  • 如何平滑过渡 CSS 背景图片？

    主要的解决方案是 只需抛出一个加载屏幕 直到页面加载完毕 但我的目标是构建能够快速呈现基础知识的页面 无需加载屏幕 然后在图像和精美功能准备就绪时进行转换 所以我会等到它加载完毕 然后淡入 或者我会加载一个非常低分辨率的版本 然后在准备好时

  • 将数组转换为 Json [重复]

    这个问题在这里已经有答案了 可能的重复 在 jQuery 中序列化为 JSON https stackoverflow com questions 191881 serializing to json in jquery 将对象转换为 JS

  • jquery 切换兄弟元素的可见性

    我在一个页面上有几个 div 每个 div 都有一个标题 我可以单击该标题来切换相应 div 的可见性 div 设置为display none默认情况下 我用过 ids在每个 div 的点击功能中 但是因为我在同一页面上有多个 div 我想

  • 根据设备宽度使用 CSS 更改 div 顺序

    我正在开发一个响应式网站 遇到了一个有趣的问题 我有一些并排的 div 可能有 2 到 6 个左右 当屏幕不够宽而无法正确显示所有内容时 div 会垂直堆叠 使用 CSS 就足够简单了 问题是 我需要它们根据布局采用不同的顺序 这很容易用

  • CSS 的用户选择和可访问性

    如果我使用以下内容 webkit touch callout none webkit user select none khtml user select none moz user select none ms user select n

  • 处理表单的最佳实践

    我想知道处理表单处理的最佳实践是什么 就我而言 我做了类似的事情 if the user hasn t submited the form 显示表格 else if there are form errors 显示错误 再次显示表格 els

  • HTML5 视频结束倒计时

    我可以对 HTML5 视频的结束进行倒计时吗

  • CSS 网格行垂直溢出其容器

    我想在页面上有一个网格布局 其中网格延伸到整个视口 并且行具有最小高度 最简单的示例是具有单个单元格的网格 请参见下面的代码片段 我遇到的问题是 当视口的高度小于定义的最小行高时 该行垂直溢出其容器 通过在下面的示例中添加红色和绿色边框 可

  • 我应该将 PHP include/require 语句放在 HTML 中的什么位置？

    我在文件中创建了一个 PHP 类 现在我想在 HTML 页面中使用它 我应该把它放在哪里require or includeHTML 页面内的声明 有没有表现在 HTML 的开头或结尾加载它之间的区别 还是根本没有区别 应该是在 PHP 脚

  • 如何在两个动画画布元素之间进行通信？

    我想在两个动画画布元素之间进行通信 我使用 Adob e Animate CC 制作了两个 html5 canvas js 动画 我已将这两个元素放入一个 html 页面中 我可以成功地从这些动画中调用函数 在下面的代码中成功触发了警报 我

  • 如何引用多个 User_ID 并将其保存到单个表单中，并在索引/显示 Rails 4 应用程序页面中显示所述 ID

    大家好 我正在用 Rails 4 Ruby 2 2 构建一个 CAD 应用程序 在我的 呼叫 表单中 我有一个框 允许调度员选择最多 4 个设备发送到呼叫 布局见下文 这个问题的简短和狭窄是找出如何保存和访问在 Users 模型中找到的 4

  • 我可以替换
    元素的展开图标 (▶) 吗？

    我用

  • 从 select2 选定选项获取属性值

    我正在使用 Select2 插件http ivaynberg github io select2 select2 latest html http ivaynberg github io select2 select2 latest htm

  • 如何使我的滚动到顶部按钮动画流畅

    我的页面上有一个滚动到顶部按钮 但是当我单击它时 它不会滚动到顶部 它只是直接带我到顶部 就像我加载了一个新页面一样 但我需要的是滚动动画 javascript window onscroll function scrollFunction

  • 在CKEditor中，如何向按钮添加“文本”标签？

    editor ui addButton ImageUpload label Upload Image command popup image uploader icon this path images icon png 这就是我现在的代码

  • hreflang 应该如何构建？

    我的问题是 应该像上面的所有页面一样 或者应该用每个页面的实际 url 进行更改 例如

随机推荐

  • Oracle死锁查询及处理

    一 数据库死锁的现象 程序在执行的过程中 xff0c 点击确定或保存按钮 xff0c 程序没有响应 xff0c 也没有出现报错 二 死锁的原理 当对于数据库某个表的某一列做更新或删除等操作 xff0c 执行完毕后该条语句不提 交 xff0c

  • Ubuntu 18.04添加中文输入法

    找到设置 xff1a 点击 Manager Installed Languages 出现下图提示 xff1a Keyboard input method system 里面有Ibus XIM fcitx none 三种输入架构 xff0c

  • KEIL问题【打开文件太多造成任何按钮都不可点】【Keil4 编译时出现RL-ARM is not allowed with this license 】【 局部变量仿真显示not in scope】

    SYD8801是一款低功耗高性能蓝牙低功耗SOC xff0c 集成了高性能2 4GHz射频收发机 32位ARM Cortex M0处理器 128kB Flash存储器 以及丰富的数字接口 SYD8801片上集成了Balun无需阻抗匹配网络

  • Django（2）模板、标签

    文章目录 一 使用Django模板修改页面二 Django模板标签 变量 列表 字典 过滤器1 default2 length3 filesizeformat4 date5 truncatechars6 safe if else标签 for

  • Django（3）模型

    文章目录 一 Django 模型 ORM二 数据库配置三 定义模型 xff08 创建数据表 xff09 四 数据库基本操作 插入数据 获取数据 xff08 1 xff09 查询所有的数据行 xff08 2 xff09 where条件查询 x

  • Django（4）表单

    文章目录 一 概述二 GET方法三 POST方法四 Request对象五 QueryDict对象 此文章参考菜鸟教程 xff1a Django 表单 菜鸟教程 runoob com Django版本 xff1a span class tok

  • Django（5）视图

    文章目录 一 视图概述二 请求对象HttpRequest xff08 1 xff09 GET xff08 2 xff09 POST xff08 3 xff09 body xff08 4 xff09 path xff08 5 xff09 me

  • Django（6）路由

    文章目录 一 路由概述二 正则路径中的分组 xff08 1 xff09 正则路径中的无名分组 xff08 2 xff09 正则路径中的有名分组 xff08 3 xff09 路由分发 三 反向解析 xff08 使用reverse xff09

  • Django（7）Admin管理工具

    文章目录 一 概述二 使用管理工具 xff08 1 xff09 激活管理工具 xff08 2 xff09 使用管理工具 xff08 3 xff09 复杂模型 xff08 4 xff09 自定义表单 xff08 5 xff09 内联 xff0

  • Django（8）ORM单表实例

    文章目录 一 Django ORM 单表实例创建新模型 二 数据库操作 xff08 1 xff09 添加数据 xff08 2 xff09 查找数据 filter exclude get order by reverse count firs

  • Django（9）ORM多表实例

    文章目录 一 Django ORM 多表实例创建模型插入数据 二 ORM 插入数据一对多 外键 ForeignKey多对多 xff08 Many ToManyField xff09 xff1a 在第三张表添加数据 三 关联管理器 对象调用1

  • Django（10）ORM聚合查询

    文章目录 一 聚合查询 aggregate 二 分组查询 annotate 三 F 查询四 Q 查询 此文章参考菜鸟教程 xff1a Django ORM 多表实例 xff08 聚合与分组查询 xff09 菜鸟教程 runoob com D

  • Python类的常用魔法方法

    文章目录 一 96 init 96 二 96 str 96 三 96 del 96 四 96 repr 96 五 使用案例 一 init span class token comment 在Python类中 有一类方法 这类方法以 两个下划

  • ubuntu 升级内核实战

    ubuntu 12 04内核是linux 3 2 0 24 xff0c 其实升级到最新版本3 3 4也没什么很大意义 xff0c 主要是集成了一些新的驱动和一些普通用户用不到的功能 xff0c 所以基本上本文纯属折腾 xff0c 但不要随便

  • centos7安装python3不影响python2

    文章目录 一 前言二 安装python3 一 前言 Centos7中很多软件命令依赖于系统自带的python2 比如yum 卸载python2会造成yum不可用 所以没必要卸载python2 如果要使用python3 可以通过软链接的方式安

  • Python异常的传递以及完整结构

    文章目录 异常的传递 异常的完整结构 异常的传递 span class token triple quoted string string 34 34 34 异常的传递是异常处理的底层机制 是原理层面 异常传递 当一行代码发生异常后 会向外

  • Python互斥锁小技巧

    span class token triple quoted string string 34 34 34 需求 创建两个线程 其中一个输出 1 52 另一个输出 A Z 输出格式要求 12A 13B 56C 5151Z 34 34 34

  • Python-TCP服务端程序开发

    文章目录 一 TCP服务端程序开发二 端口复用三 判断客户端程序是否断开四 多任务版本 一 TCP服务端程序开发 span class token triple quoted string string 34 34 34 主动套接字 可以收

  • Python-TCP网络编程基础以及客户端程序开发

    文章目录 一 网络编程基础 什么是IP地址 什么是端口和端口号 TCP介绍 socket介绍 二 TCP客户端程序开发三 扩展 一 网络编程基础 什么是IP地址 IP地址就是标识网络中设备的一个地址 IP地址分为 IPv4 和 IPv6 I

  • HTML介绍

    文章目录 一 HTML介绍二 创建三 HTML结构四 常见的标签五 链接标签六 图片标签七 资源路径八 列表标签九 表格标签十 表单标签十一 表单提交 一 HTML介绍 HTML 超文本标记语言作用 书写前端页面前端三大技术 三大标准 HT

热门标签