当前位置: 首页 > news >正文

HTML介绍

文章目录

  • 一. 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
http://www.lryc.cn/news/17451.html

相关文章:

  • 【C++】string的9道OJ题
  • Odoo丨Odoo框架源码研读三:异常处理与定制化开发
  • Python概述 基础语法 判断 循环
  • 什么是品牌营销?学会正确推广您的业务
  • Golang学习Day1
  • 《设计模式》工厂模式
  • JS - 原型对象、原型链是什么
  • STM32f103 CubeMX封装 led程序
  • 智慧教室系统--温湿度控制系统
  • 只要一直向前定能到达远方,社科院与杜兰大学金融管理硕士项目为你注入动力
  • Java性能-回收算法-Throughout回收算法
  • 立项近7年,索尼产品经理分享PS VR2开发背后的故事
  • Kubernetes 如何通过ingress-nginx实现应用灰度发布?
  • 华为OD机试 - 密室逃生游戏(Java) | 机试题+算法思路+考点+代码解析 【2023】
  • redis的主从复制细节
  • SparkSQL
  • Python|每日一练|栈|数组|字典树|数组|树|广度优先搜索|单选记录:逆波兰表达式求值|回文对|二叉树的层序遍历
  • 慧教室系统--远程控制系统
  • OSCP-课外1(http万能密码、hydra密码暴力破解http、代码审计、Win缓存区溢出)
  • ELK日志分析--Logstash
  • Mysql插入数据从指定选项中随机选择、插入时间从指定范围随机生成、Navicat使用存储过程模拟插入测试数据
  • 【基础算法】关于高精度计算的问题【很高位数数据的加减乘除(相关代码用C++实现)】
  • 事理知识图谱
  • 多綫程之python爬蟲構建
  • 【干货】Redis在Java开发中的基本使用和巧妙用法
  • 历时半年,我终于阿里上岸了,附面经和Java非科班学习心得
  • ArkUI实战,自定义饼状图组件PieChart
  • 工作实战之系统交互api调用认证设计
  • 学习系统编程No.5【虚拟地址空间】
  • Linux常用指令(未完待续。。。)