HTML的相关知识

news2025/10/31 23:16:52

1.什么是HTML？基本语法
    HTML: Hyper Text Markup Language （超文本标记语言）

    超文本？超级文本，例如流媒体，声音、视频、图片等。
    标记语言？这种语言是由大量的标签组成。HTML标签参考手册

    任何一个标签都有开始标签和结束标签，例如：
    <标签> ：开始标签
    </标签> ：结束标签

    HTML严格意义上来只能说是一种规范，一种浏览器上的规范，
    标签语言，不能称为编程语言，因为HTML中没有变量、数据类型
    控制语句if、for，这些都没有。
2.HTML运行在哪？
    运行在浏览器上。
    
    五大主流浏览器：
    IE: 微软
    Firefox：火狐（FF）
    chrome：谷歌
    opera：欧朋
    safari：MAS OS专用（苹果专用浏览器）

    国内前端程序员主要安装三个：
        FF
        IE
        chrome
    前端程序员开发完成之后需要在不同的浏览器上运行程序，以便发现兼容问题。

3.HTML怎么开发
    新建一个.html或者.htm结尾的文件。
    使用记事本打开就能开发，浏览器打开就能运行，不需要编译。

4.什么是web?
    web就是网站开发

5.web程序员包括：
    web前端程序员：
        需要精通：HTML css JavaScript
    web前端页面展示的时候，是需要动态的数据的，这些数据是后台JAVA程序或c++程序提供的

    web后台程序员：
        需要精通:
            后台可能是c语言，c++，JAVA PHP python

    这种系统构架被称为：B/S结构系统。
    B：browser（浏览器）
    S：server（服务器）

6.EditPlus: （需要购买使用权，有30天免费使用期限）
    打开开发（打开.HTML文件进行开发）

7.HTML是哪个组织制定的标准呢？
    w3c,
    html实际上是W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
    HTML规范目前最高的版本是：HTML5.0，简称H5.
    我们这里学习HTML4.0（主要是学习一下HTML的基础用法。）

    W3C制定了很多规范：
        HTML/XML/http协议/https协议......
    http协议：超文本传输协议，浏览器和web服务器传消息的协议

    为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
        w3school:先出现的，和W3C没有关系
        w3cschool：后出现的，和W3C没有关系

8.B/S结构系统的原理（粗略）
    第一步：用户在浏览器上输入URL(WWW.BAIDU.COM)
    第二步：回车（这一步相当于向服务器发送了一个请求）
        请求：request
        browser（浏览器）-----> server（服务器）
    第三步：服务器会给浏览器一个响应，最终响应一段HTML代码给浏览器，    
    浏览器会给HTML代码进行执行展示一个结果。
        响应：response
        server（服务器）-----> browser（浏览器）
    重点：目前，浏览器向服务器发送请求有两种方式（两种方式没有区别）
        1.用户输入URL
        2.超链接
9. HTML的语法
基础语法不严格，不区分大小写
字符串也要求不严格，可以单引号或双引号，不加引号也可以
<!--这个是告诉浏览器采用那种字符编码方式打开该页面。一般这个编码方式要和自己的文件编码方式相同，不然会乱码-->
<meta charset="utf-8"> 
windows默认均是采用GBKF的简体中文（这是因为windows的是中文）方式打开HTML页面的，而程序员在工作区一般采用utf-8编码格式

10.利用thead,tbody和tfoot将表格分为三部分

11. 图片
<img src="图片的存放当前路径">
开始标签和结束标签之间如果没有内容的话，可以直接把结束标签删除掉，然后在开始标签末尾加 /
width属性：指定图片的宽度，高度会等比例缩放！不要手动设置高度，不然会失真
title属性：设置鼠标悬停时的体式信息
alt属性：用来设置当图片加载失败时的提示信息
1px=1像素

12.超链接
<a href="跳转地址"></a>
href属性：指链接到外部或者本地的路径
<a href="http//:www.baidu.com">百度</a>
target属性：设置最终打开窗口的位置
-blank:新窗口
-self:当前窗口
-parent:当前窗口的父窗口
-top:当前窗口的顶级窗口

13. HBuilderx软件

HBuilderx的下载和安装

此软件可以自动创建html的文件，里面包含其HTML的基本语法组成。

这样就方便多了！

14. HTML 常用标签

  • HTML 提供了6 个等级的网页标题，标题标签<h1> - <h6>

  • <p></p>标签用于定义段落，它可以将整个网页分为若干个段落。

  • 如果希望某段文本强制换行显示，就需要使用换行标签<br />。

  • 字体加粗<b></b>

  • 字体倾斜<i></i>

  • 水平线<hr color="red"> </hr>color参数指定颜色

  • 插入字：<ins></ins>

  • 删除字：<del</del>

  • 右上加字：<sup></sup>

  • 右下加字：<sub></sub>

  • font标签：<>

15. HTML 实体符号

  • 空格：<&nbsp>

  • 大于号：<&gt>

  • 小于号：<&lt>

16.表格

表格标签基本格式
  1. <table> </table> 是用于定义表格的标签。
  2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在<table> </table>标签中。（tr即 table row）
  3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
  4. 字母td 指表格数据（table data），即数据单元格的内容。
表头标签

<th>标签表示HTML 表格的表头部分(table head 的缩写)

表头标签会使单元格内的文本加粗居中显示。

17.表单

表单用户注册实例

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1051706.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

单目标应用：基于沙丁鱼优化算法(Sardine optimization algorithm,SOA)的微电网优化调度MATLAB

单目标应用：基于沙丁鱼优化算法(Sardine optimization algorithm,SOA)的微电网优化调度MATLAB

一、沙丁鱼优化算法 沙丁鱼优化算法(Sardine optimization algorithm,SOA)由Zhang HongGuang等人于2023年提出&#xff0c;该算法模拟沙丁鱼的生存策略&#xff0c;具有搜索能力强&#xff0c;求解精度高等特点。 沙丁鱼主要以浮游生物为食&#xff0c;这些生物包括细菌、腔肠…
阅读更多...
SpringBoot整合RabbitMQ实现延迟队列功能

SpringBoot整合RabbitMQ实现延迟队列功能

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…
阅读更多...
AOP 编程

AOP 编程

目录 ​编辑一、AOP 编程 1、AOP 概念 2、AOP 编程的开发步骤 3、切面的名词解释 二、AOP 的底层实现原理 1、核心问题 2、动态代理类的创建 &#xff08;1&#xff09;JDK 的动态代理创建 &#xff08;2&#xff09;CGlib 的动态代理 &#xff08;3&#xff09;总结…
阅读更多...
[红明谷CTF 2021]write_shell %09绕过过滤空格 ``执行

[红明谷CTF 2021]write_shell %09绕过过滤空格 ``执行

目录 1.正常短标签 2.短标签配合内联执行 看看代码 <?php error_reporting(0); highlight_file(__FILE__); function check($input){if(preg_match("/| |_|php|;|~|\\^|\\|eval|{|}/i",$input)){ 过滤了 木马类型的东西// if(preg_match("/| |_||php/&quo…
阅读更多...
设计模式5、原型模式 Prototype

设计模式5、原型模式 Prototype

解释说明&#xff1a;使用原型实例指定待创建对象的类型&#xff0c;并且通过复制这个原型阿里创建型的对象 UML 结构图&#xff1a; 抽象原型&#xff08;Prototype&#xff09;&#xff1a;规定了具体原型对象必须实现的clone()方法 具体原型&#xff08;ConcretePrototype&…
阅读更多...
CVE-2023-5129 libwebp堆缓冲区溢出漏洞影响分析

CVE-2023-5129 libwebp堆缓冲区溢出漏洞影响分析

漏洞简述 近日苹果、谷歌、Mozilla和微软等公司积极修复了libwebp组件中的缓冲区溢出漏洞&#xff0c;相关时间线如下&#xff1a; 9月7日&#xff0c;苹果发布紧急更新&#xff0c;修复了此前由多伦多大学公民实验室报告的iMessage 0-click 漏洞&#xff0c;漏洞被认为已经被…
阅读更多...
爬取北京新发地当天货物信息并展示十五天价格变化(三)---获取物品十五天内的价格

爬取北京新发地当天货物信息并展示十五天价格变化(三)---获取物品十五天内的价格

。。。。。。。。。。。。。。。。。。。。。。 1.网页请求一下内容2.通过爬虫进行请求3.获取商品十五天详细数据并绘制折线图4.项目详细代码 1.网页请求一下内容 通过抓包我们发现一共七个参数 limit: 20 # 一页多少数据 current: …
阅读更多...
自制代码编辑器：CASM Editor

自制代码编辑器：CASM Editor

哔哩哔哩演示视频&#xff1a;我使用python自制了一个代码编辑器——CASM Editor_哔哩哔哩_bilibili 源代码&#xff1a; import idlelib.colorizer as idc import idlelib.percolator as idp import os import sys import threading import time import tkinter as T_tk imp…
阅读更多...
计算机视觉: 可控的高质量人体生成

计算机视觉: 可控的高质量人体生成

背景 关于人体动作的生成范式目前主流的方向可以分为以下两种: Sequence based motion generation: 给定控制信号然后一次性生成连续的动作&#xff0c;能生成一些连续高阶语义的动作信号&#xff0c;因为其能看到整个动作信号。eg: MDM: Human Motion Diffusion Model, Teve…
阅读更多...
机器学习（20）---神经网络详解

机器学习（20）---神经网络详解

神经网络 一、神经网络概述1.1 神经元模型1.2 激活函数 二、感知机2.1 概述2.2 实现逻辑运算2.3 多层感知机 三、神经网络3.1 工作原理3.2 前向传播3.3 Tensorflow实战演示3.3.1 导入数据集查看3.3.2 数据预处理3.3.3 建立模型3.3.4 评估模型 四、反向传播五、例题5.1 题15.2 题…
阅读更多...
【SQL】Mysql 时区设置解决--20230928

【SQL】Mysql 时区设置解决--20230928

https://blog.csdn.net/qq_44392492/article/details/108717616 输入命令show variables like “%time_zone%”;&#xff08;注意分号结尾&#xff09;设置时区&#xff0c;输入 set global time_zone “8:00”; 回车,然后退出重启&#xff08;一定记得重启&#xff0c;不然查…
阅读更多...
Mysql 本地计算机无法启动 mysql 服务 错误 1067：进程意外终止

Mysql 本地计算机无法启动 mysql 服务 错误 1067：进程意外终止

有时候一段时间本地mysql不用&#xff0c;在连接本地数据库的时候&#xff0c;会报mysql无法连接出现错误提示10061错误&#xff0c; 这时候一般是本地mysql服务没有启动 去左下角搜“服务”&#xff0c;进入后选择Mysql&#xff0c;点击启动&#xff08;我的截图是已经启动好…
阅读更多...
C#，数值计算——Ranfib的计算方法与源程序

C#，数值计算——Ranfib的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Implements Knuths subtractive generator using only floating operations. See /// text for cautions. /// </summary> public class Ranfib { p…
阅读更多...
通过茶叶酒水小程序商城的作用是什么？

通过茶叶酒水小程序商城的作用是什么？

茶叶酒水往往会在一起经营&#xff0c;同时又具备较强的送礼属性&#xff0c;需求度较高但经营商家同样不少&#xff0c;同行竞争激烈&#xff0c;加之同城生意有限、外地客户难以拓展、销售营销不足、品牌宣传效果差等痛点&#xff0c;传统酒水茶叶门店需要线上带来增长。 那…
阅读更多...
大数据Flink（九十二）：DML：集合操作

大数据Flink（九十二）：DML：集合操作

文章目录 DML：集合操作 DML：集合操作 集合操作支持 Batch\Streaming 任务。 UNION：将集合合并并且去重。
阅读更多...
uni-app：js修改元素样式（宽度、外边距）

uni-app：js修改元素样式（宽度、外边距）

效果 代码 1、在<view>元素上添加一个ref属性&#xff0c;用于在JavaScript代码中获取对该元素的引用&#xff1a;<view ref"myView" id"mybox"></view> 2、获取元素引用 &#xff1a;const viewElement this.$refs.myView.$el; 3、修改…
阅读更多...
【Flink】

【Flink】

事件驱动型应用 核心目标&#xff1a;数据流上的有状态计算 Apache Flink是一个框架和分布式处理引擎&#xff0c;用于对无界或有界数据流进行有状态计算。 运行逻辑 状态 把流处理需要的额外数据保存成一个“状态”,然后针对这条数据进行处理,并且更新状态。这就是所谓的“…
阅读更多...
mrctf2020_shellcode_revenge

mrctf2020_shellcode_revenge

mrctf2020_shellcode_revenge Arch: amd64-64-little RELRO: Full RELRO Stack: No canary found NX: NX disabled PIE: PIE enabled RWX: Has RWX segments64位&#xff0c;开了PIE和RELRO&#xff0c;看到RWX出来&#xff0c;就感觉是shellcode了…
阅读更多...
如何使用PyInstaller打包Python应用（包含参数详解，spec文件详解，反编译和防止反编译）

如何使用PyInstaller打包Python应用（包含参数详解，spec文件详解，反编译和防止反编译）

文章目录 介绍PyInstaller安装PyInstaller参数及使用方法PyInstaller打包技巧和注意事项反编译和防止反编译介绍PyInstaller PyInstaller是一个强大的Python打包工具，它可以将Python程序打包成独立的可执行文件，方便在不同的操作系统上分发和运行。使用PyInstaller，你可以将…
阅读更多...
react.js在visual code 下的hello World

react.js在visual code 下的hello World

想学习reacr.js &#xff0c;就开始做一个hello world。 我的环境是visual code &#xff0c;所以我找这个环境下的例子。参照&#xff1a; https://code.visualstudio.com/docs/nodejs/reactjs-tutorial 要学习react.js &#xff0c;还得先安装node.js&#xff0c;我在visual …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023