JavaScript经典教程(一)-- HTML基础部分

news2025/1/11 23:01:17

179:HTML基础部分(元素分类、特性、特殊元素等)

1、复习:

HTML: 超文本标记语言
CSS: 层叠样式表
JavaScript: 脚本语言

http:超文本传输协议
https: 经过ssl加密的超文本传输协议

2、HTML、CSS、JS的联系:

结构、表现。行为
HTML:结构层 ———— 框架结构
CSS: 表现层 ———— 显示的样式
JS: 行为层 ———— 交互

3、基础

IDE:编辑器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

1、:文档头。让浏览器知道用什么文档来解析
现阶段普遍是html5,xhtml是5之前的版本,与5的解析有些不一样。
2、html:html标签,计算机从这里开始知道html开始编写;
3、head:头部,写在头部力的内容,页面中不出现;
4、meta :SEO优化,告诉浏览器你的html页面的一些讯息;
5、charset=“utf-8”:中国一般用utf-8编码去进行解析;
6、title:页面标题(不写标题,即默认为文件名);
7、body:主体;

4、元素

HTML中的元素分类:

(1)块元素

独占一行,支持宽高;
官方解释:以矩形形式独占一行,且支持宽高等一些样式;
误区:宽度不是100%,只是独占一行
eg:div–典型的块状元素
块状元素标签:div、p、h1-h6、ul、ol、li、body、dl、dd、dt、html、table

(2)行内(内联)元素

不支持宽高,大小随着内容改变,不会独占一行
eg:span
行内元素标签:span、a、b、i、img、br、meta、title、style

(3)可变元素

可以是块状或者行内
eg:iframe – 镜像
iframe 是块状还是行内元素,由它镜像的页面的元素为准,镜像的为块状,iframe 就是块状,镜像的是行内元素,iframe 就是行内。
在这里插入图片描述
在这里插入图片描述

5、特殊

(1)特殊标签

XMP标签:让其中任何标签都在页面中显示出来。
(一般来说,元素即标签相当于框架,比如div,如果不进行样式设置,在页面中是看不见的)
在这里插入图片描述

(2)特殊属性

contenteditable – 编辑属性
让标签变为可编辑状态
在这里插入图片描述

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

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

相关文章

如何搭建关键字驱动自动化测试框架?这绝对是全网天花板的教程

目录 1. 关键字驱动自动化测试介绍 2. 搭建关键字驱动自动化测试框架 步骤1&#xff1a;选择测试工具 步骤2&#xff1a;定义测试用例 步骤3&#xff1a;编写测试驱动引擎 步骤4&#xff1a;实现测试关键字库 步骤5&#xff1a;执行测试 3. 实现关键字驱动自动化测试的关…

c/c++:gets(),fgets(),puts(),fputs(),strlen(),字符串拼接函数

c/c&#xff1a;gets()&#xff0c;fgets()&#xff0c;puts()&#xff0c;fputs()&#xff0c;strlen()&#xff0c;字符串拼接函数 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;此时学会c的话&#xff0c; 我所知道的周…

C语言程序环境与预处理回顾总结

大概讲解与铺垫 首先&#xff0c;什么叫c语言的源代码&#xff1f;也就是我自己写的.c文件里面的代码&#xff0c;这个就叫做源代码。然后需要知道的是计算机他只认识二进制&#xff0c;因此他只能接收与执行二进制指令。也就是可执行的机器指令。然后我们必须得知道&#xff…

JavaWeb——tomcat(安装使用)

目录 WEB服务器-Tomcat 服务器概述 Web服务器 Tomcat Tomcat下载 安装与卸载 启动与关闭 WEB服务器-Tomcat 服务器概述 服务器硬件&#xff1a; 指的也是计算机&#xff0c;只不过服务器要比我们日常使用的计算机大很多。 服务器&#xff0c;也称伺服器。是提供计算服务…

【数据结构】第十一站:链式二叉树

目录 一、二叉树的创建 二、二叉树的遍历 1.前序中序后序遍历 2.层序遍历 三、二叉树的节点个数以及高度等 四、二叉树的构建和销毁 五、DFS和BFS 一、二叉树的创建 为了方便后面的讨论&#xff0c;我们在这里先手撕一颗二叉树 typedef int BTDateType; typedef struct …

Qt Designer

Qt Designer——即Qt设计师&#xff0c;是QT项目开发的可视化图形界面编辑器&#xff0c;通过设计师可以很方便地创建图像界面文件*.ui&#xff0c;然后将ui文件应用的源代码中&#xff0c;做到所见即所得&#xff0c;让界面的设计变得十分简单。下面介绍Qt Designer的简单使用…

使用PowerShell自动部署ASP.NetCore程序到IIS

asp.net core 安装asp.net core sdk https://dotnet.microsoft.com/en-us/download/dotnet/3.1 创建asp.net core项目 dotnet new webapi运行项目 访问https://localhost:5001/WeatherForecast iis配置 安装iis 以管理员身份运行powershell Enable-WindowsOptiona…

【计算机网络】学习笔记:第二章 物理层(五千字详细配图)【王道考研】

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ…

Windows中Seata连接Linux中的nacos的配置

目录 前言&#xff1a; Seata配置教程&#xff1a; file.conf: ​编辑 配置代码&#xff1a; registry.conf: ​编辑 nacos-config.sh: config.txt: 前言&#xff1a; 许多博主&#xff0c;把两个软件都安装在同一个系统中&#xff0c;但是有些人估计是装在不同的环境下…

支付系统设计:收银台设计二

文章目录 前言1. 接口校验1.1 Chains1.2 Checker1.2.1 AbstractChecker1.2.2 TokenChecker1.2.3 OrderChecker1.2.4 UserInfoChecker1.2.5 BaseInfoChecker1.2.6 SignChecker 1.3 ApiFilter 2. 下单3. 收银台首页2.1 OrderInfoResolver2.2 UserBaseInfoResolver 4. 执行流程总结…

企业宁愿花 15K 重新招人,也不愿意花 10K 留住老测试员?

金三银四即将进入尾声&#xff0c;大家逐渐收敛了跳槽涨薪的想法&#xff0c;准备收收心等待过年。不置可否&#xff0c;年后必定又是一波跳槽季&#xff0c;通过跳槽才能涨薪已经成为了不少求职者内心默认的定理。 不知道什么时候开始&#xff0c;公司不能满足加薪的要求&…

leetcode 812. 最大三角形面积

题目 给你一个由 X-Y 平面上的点组成的数组 points &#xff0c;其中 points[i] [xi, yi] 。从其中取任意三个不同的点组成三角形&#xff0c;返回能组成的最大三角形的面积。与真实值误差在 10-5 内的答案将会视为正确答案。 示例 1&#xff1a; 输入&#xff1a;points [[…

手把手带你实现通讯录C语言

通讯录大家都很熟悉了&#xff0c;一个联系人包括姓名&#xff0c;年龄&#xff0c;性别&#xff0c;电话&#xff0c;地址等&#xff1b; 那我们想一想我们所学的数据类型&#xff08;int,float,double等都是单一的相同类型 &#xff08;属于内置类型&#xff09;&#xff09;…

#详细介绍!!! 造成死锁的原因以及解决方案!

本篇主要是介绍什么是死锁&#xff0c;已经死锁产生的原因&#xff0c;如果避免死锁。根据上述的几个问题让我们来阅读本篇文章。 目录 1. 什么是死锁 2. 形成死锁的原因&#xff08;四个必要条件&#xff09; 3. 如果有效避免死锁 1. 什么是死锁 死锁主要是锁彼此间进行锁等…

FPGA实现JPEG-LS图像压缩,有损无损可配置,提供工程源码和技术支持

目录 1、前言2、JPEG-LS图像压缩理论3、JPEG-LS图像压缩性能介绍4、JPEG-LS图像压缩时序介绍5、JPEG-LS图像压缩输出压缩流6、工程源码和仿真7、福利&#xff1a;工程代码的获取 1、前言 JPEG-LS&#xff08;简称JLS&#xff09;是一种无损/有损的图像压缩算法&#xff0c;其无…

1 Go语言开发环境搭建详细教程【Go语言教程】

Go语言开发环境搭建【Win、Linux、Mac】 1 SDK下载 官网地址&#xff1a;golang.org,因为一些原因国内可能无法访问。可以使用下面第二个链接。国内地址访问&#xff1a;https://golang.google.cn/dl或者https://www.golangtc.com/download 根据自己操作系统版本&#xff0c;下…

30天学会《Streamlit》(9)

30天学会《Streamlit》是一项编码挑战&#xff0c;旨在帮助您开始构建Streamlit应用程序。特别是&#xff0c;您将能够&#xff1a; 为构建Streamlit应用程序设置编码环境 构建您的第一个Streamlit应用程序 了解用于Streamlit应用程序的所有很棒的输入/输出小部件 第9天 - …

超高精度PID控制器的特殊功能(4)——分程控制功能及其应用

摘要&#xff1a;分程控制作为一种典型的复杂控制方法之一&#xff0c;常用于聚合反应工艺、冷热循环浴、TEC半导体温度控制、动态平衡法的真空和压力控制等领域。为快速和便捷的使用分程控制&#xff0c;避免采用PLC时存在的控制精度差和使用门槛高等问题&#xff0c;本文介绍…

pyqt6+vtk

这里用PyQt6vtk9.2.6 pip install PyQt6 pyqt6-tools vtk这里拉了一个水平布局 然后水平布局中加入QWidget&#xff0c;object name改为vtkWidget 右键Promote Widgets Promoted class name: QVTKRenderWindowInteractor Header file: vtkmodules.qt.QVTKRenderWindowInterac…

文章改写神器在线-AI续写文章生成器

AI续写生成器 AI续写生成器是一种利用人工智能技术的创意工具&#xff0c;能够提高写作效率&#xff0c;为营销推广带来全新的可能性。无论你是写手、广告人员还是市场营销人员&#xff0c;这个工具都能够有效地解决你在写作中遇到的难题。 在内容创作行业中&#xff0c;原创…