【技术积累】HTML+CSS+JavaScript中的基础知识【一】
HTML基础标签
<html>
定义HTML文档的根元素。
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>解释：<html>标签包含了整个HTML文档的内容，它是所有其他标签的父元素。
<head>
定义HTML文档的头部，包含了一些元数据和引用的外部资源。
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>解释：<head>标签用于定义文档的头部，其中可以包含<title>标签定义页面标题，<link>标签引用外部样式表，<script>标签引用外部JavaScript文件等。
<body>
定义HTML文档的主体内容。
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<img src="data:image.jpg" alt="Image">
</body>解释：<body>标签用于定义文档的主体内容，其中可以包含各种其他标签，如标题标签<h1>、段落标签<p>和图像标签<img>等。
<h1>到<h6>
定义标题，从大到小依次表示不同级别的标题。
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>解释：<h1>到<h6>标签用于定义标题，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。
<p>
定义段落。
<p>This is a paragraph.</p>解释：<p>标签用于定义段落，其中的文本会自动换行。
<a>
定义超链接。
<a href="https://www.example.com">Visit Example</a>解释：<a>标签用于定义超链接，其中的href属性指定链接的目标URL。
<img>
定义图像。
<img src="data:image.jpg" alt="Image">解释：<img>标签用于定义图像，其中的src属性指定图像的URL，alt属性用于指定图像的替代文本。
<ul>和<li>
定义无序列表。
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>解释：<ul>标签用于定义无序列表，其中的每个列表项使用<li>标签表示。
<ol>和<li>
定义有序列表。
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>解释：<ol>标签用于定义有序列表，其中的每个列表项使用<li>标签表示。
<table>、<tr>和<td>
定义表格。
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>解释：<table>标签用于定义表格，其中的<tr>标签定义表格的行，<td>标签定义表格的单元格。
这些是HTML的一些基础标签及其用法的详细介绍，每个标签都有不同的功能和用途，可以根据需要选择使用。以上是一些简单的示例，你可以根据自己的需求进行修改和扩展。
CSS中的基础样式
CSS（层叠样式表）是一种用于描述网页上元素样式的语言。下面是一些常见的基础样式及其代码示例：
字体样式
- font-family：设置字体系列。
css
p {
font-family: Arial, sans-serif;
}这将使 <p> 元素中的文本使用 Arial 字体，如果 Arial 不可用，则使用 sans-serif 字体。
- font-size：设置字体大小。
h1 {
font-size: 24px;
}这将使 <h1> 元素中的文本大小为 24 像素。
- font-weight：设置字体粗细。
strong {
font-weight: bold;
}这将使 <strong> 元素中的文本加粗。
文本样式
- color：设置文本颜色。
p {
color: blue;
}这将使 <p> 元素中的文本颜色为蓝色。
- text-align：设置文本对齐方式。
h1 {
text-align: center;
}这将使 <h1> 元素中的文本居中对齐。
- text-decoration：设置文本装饰效果。
a {
text-decoration: underline;
}这将使 <a> 元素中的文本添加下划线。
背景样式
- background-color：设置背景颜色。
body {
background-color: #f2f2f2;
}这将使页面的背景颜色为浅灰色。
- background-image：设置背景图片。
div {
background-image: url("image.jpg");
}这将使 <div> 元素的背景使用名为 "image.jpg" 的图片。
- background-size：设置背景图片大小。
div {
background-size: cover;
}这将使 <div> 元素的背景图片自适应填充整个元素。
边框样式
- border：设置边框样式。
div {
border: 1px solid black;
}这将使 <div> 元素的边框为 1 像素宽的黑色实线。
- border-radius：设置边框圆角。
button {
border-radius: 5px;
}这将使 <button> 元素的边框圆角为 5 像素。
- border-color：设置边框颜色。
input {
border-color: red;
}这将使 <input> 元素的边框颜色为红色。
盒模型样式
- width：设置元素的宽度。
.container {
width: 300px;
}这将使类名为 "container" 的元素宽度为 300 像素。
- height：设置元素的高度。
.box {
height: 200px;
}这将使类名为 "box" 的元素高度为 200 像素。
- padding：设置元素的内边距。
.content {
padding: 10px;
}这将使类名为 "content" 的元素内边距为 10 像素。
- margin：设置元素的外边距。
.section {
margin: 20px;
}这将使类名为 "section" 的元素外边距为 20 像素。
定位样式
- position：设置元素的定位方式。
.box {
position: relative;
}这将使类名为 "box" 的元素相对于其正常位置进行定位。
- top、right、bottom、left：设置元素相对于其定位父元素的偏移量。
.box {
position: absolute;
top: 10px;
left: 20px;
}这将使类名为 "box" 的元素相对于其定位父元素向下偏移 10 像素，向右偏移 20 像素。
显示样式
- display：设置元素的显示方式。
.box {
display: inline-block;
}这将使类名为 "box" 的元素以内联块级元素的方式显示。
- visibility：设置元素的可见性。
.hidden {
visibility: hidden;
}这将使类名为 "hidden" 的元素在页面上不可见，但仍占据空间。
【技术积累】HTML+CSS+JavaScript中的基础知识【一】的更多相关文章
- javascript中DOM基础知识介绍
1.1. 基本概念 1.1.1. DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...
- JavaScript中的基础测试题
Java ...
- 第76节:Java中的基础知识
第76节:Java中的基础知识 设置环境,安装操作系统,安装备份,就是镜像,jdk配置环境,eclipse下载解压即可使用,下载tomcat 折佣动态代理解决网站的字符集编码问题 使用request. ...
- javascript之正则表达式基础知识小结
javascript之正则表达式基础知识小结,对于学习正则表达式的朋友是个不错的基础入门资料. 元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要 ...
- [技术翻译]在现代JavaScript中编写异步任务
本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- ArcGIS API for JavaScript开发初探——基础知识
1.前言 在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...
- 性能测试学习 第九课--LR12中controller基础知识
1.设计手工场景,理解集合点的策略 2.添加load generator 一.controller基础知识 1.controller的原理 通过场景设计来模拟用户的真实操作并调用vugen中的脚本,然 ...
- JavaScript 的一些基础知识
JavaScript基本语法 调试 打开 Chrome 开发工具 Win F12 Mac Command + Option + I 输入代码.测试执行 var str = 'evenyao' cons ...
- 活到老学到老：iOS开发中的基础知识（一）
本文参考 标哥的博客:宝库iOS开发笔试题 进行学习整理.与其说是看面试题,不如说是对自己知识的巩固.工欲善其事必先利其器,基础知识不牢固可能会导致编程中的一些注意不到的问题.总之一句话:活到老,学到 ...
随机推荐
- 借助 APISIX Ingress，实现与注册中心的无缝集成
作者张晋涛,API7.ai 云原生技术专家,Apache APISIX PMC 成员,Apache APISIX Ingress Controller 项目维护者. 原文链接 云原生场景下是否需要服务 ...
- 【FAQ】关于JavaScript版本的华为地图服务Map的点击事件与Marker的点击事件存在冲突的解决方案
一． 问题描述 创建地图对象,并添加marker标记,对map和marker均添加了点击事件: <body> <script> function initMap() { // ...
- RK3568用户自定义开机画面功能
RK方案中的开机画面处画逻辑 在RK的方案中,如RK1109,RK1126,RK3568这些嵌入式LINUX方案在开机画面的处理逻辑都是一致的. 用户的uboot,kernel开机画面都是同dts,k ...
- Redis缓存穿透、击穿、雪崩
文章目录 缓存穿透 缓存雪崩 缓存击穿 代码实战部分 缓存击穿实战代码封装 缓存穿透解决 Redis目前是非常流行的缓存数据库,缓存穿透.缓存击穿.缓存雪崩是常见的面试题,也是非常重要的问题. 缓存穿 ...
- TCP/IP网络模型
在网络模型中有分为7层模型(OSI模型)和5层模型和TCP/IP模型 OSI模型将应用层和表示层作为独立的两层,而TCP/IP模型将它们合并为一个应用层. 两种对比来说,TCP/IP模型更符合实际开发 ...
- php获取未解码之前的原始接口请求参数
前言 目前的几个项目,业务方基本都使用POST方式请求接口,我们本机磁盘会保留一份请求的原始参数用于请求分析和问题排查使用,一般有问题,也会基于seqid(请求唯一id)捞到日志,copy参数模拟请求 ...
- SQLlabs less1-10通关笔记
SQLlabs 通关笔记 mysql数据结构 在练习靶场前我们需要了解以下mysql数据库结构,mysql数据库5.0以上版本有一个自带的数据库叫做information_schema,该数据库下面有 ...
- JavaFx 关键字高亮文本实现
原文地址:JavaFx 关键字高亮文本实现 - Stars-One的杂货小窝 整蓝奏云批量下载器里的搜索功能想到的一个关键字高亮功能,借助textflow组件来实现,记录一下 本文基于TornadoF ...
- 2022-06-01：给定一个数组arr，可能有正、有负、有0，无序。 只能挑选两个数字，想尽量让两个数字加起来的绝对值尽量小。 返回可能的最小的值。
2022-06-01:给定一个数组arr,可能有正.有负.有0,无序. 只能挑选两个数字,想尽量让两个数字加起来的绝对值尽量小. 返回可能的最小的值. 答案2022-06-01: 排序,双指针. 代码 ...
- 2022-05-16：A -＞ B，表示A认为B是红人， A -＞ B -＞ C，表示A认为B是红人，B认为C是红人，规定“认为”关系有传递性，所以A也认为C是红人， 给定一张有向图，方式是给定M个有
2022-05-16:A -> B,表示A认为B是红人, A -> B -> C,表示A认为B是红人,B认为C是红人,规定"认为"关系有传递性,所以A也认为C是红 ...