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中的基础知识【一】的更多相关文章

  1. javascript中DOM基础知识介绍

    1.1.     基本概念 1.1.1.      DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...

  2. JavaScript中的基础测试题

                                                                                                    Java ...

  3. 第76节:Java中的基础知识

    第76节:Java中的基础知识 设置环境,安装操作系统,安装备份,就是镜像,jdk配置环境,eclipse下载解压即可使用,下载tomcat 折佣动态代理解决网站的字符集编码问题 使用request. ...

  4. javascript之正则表达式基础知识小结

    javascript之正则表达式基础知识小结,对于学习正则表达式的朋友是个不错的基础入门资料.   元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要 ...

  5. [技术翻译]在现代JavaScript中编写异步任务

    本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...

  6. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  7. ArcGIS API for JavaScript开发初探——基础知识

    1.前言 在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...

  8. 性能测试学习 第九课--LR12中controller基础知识

    1.设计手工场景,理解集合点的策略 2.添加load generator 一.controller基础知识 1.controller的原理 通过场景设计来模拟用户的真实操作并调用vugen中的脚本,然 ...

  9. JavaScript 的一些基础知识

    JavaScript基本语法 调试 打开 Chrome 开发工具 Win F12 Mac Command + Option + I 输入代码.测试执行 var str = 'evenyao' cons ...

  10. 活到老学到老:iOS开发中的基础知识(一)

    本文参考 标哥的博客:宝库iOS开发笔试题 进行学习整理.与其说是看面试题,不如说是对自己知识的巩固.工欲善其事必先利其器,基础知识不牢固可能会导致编程中的一些注意不到的问题.总之一句话:活到老,学到 ...

随机推荐

  1. Python 函数及参数的使用

    函数 带名字的代码块,用于完成具体的工作 关键字def定义一个函数,定义函数名,括号内是需要完成任务所需要的信息,最后定义冒号结尾 缩进构成函数体 函数调用,依次指定函数名以及冒号括起来的必要信息 d ...

  2. 当我再次用Kotlin完成五年前已经通过Kotlin完成的项目后

      > 近日来对Kotlin的使用频率越来越高, 也对自己近年来写过的Kotlin代码尝试进行一个简单的整理. 翻到了自己五年前第一次使用Kotlin来完成的一个项目([贝塞尔曲线](https ...

  3. jenkins的安装和配置(flask结合jenkins半自动化部署流程)

    jenkins在虚拟机中安装 1.1 背景介绍 Jenkins 是一款流行的开源持续集成(Continuous Integration)工具,广泛用于项目开发,具有自动化构建.测试和部署等功能. Je ...

  4. 2022-09-23:整数数组 stations 表示 水平数轴 上各个加油站的位置。给你一个整数 k 。 请你在数轴上增设 k 个加油站, 新增加油站可以位于 水平数轴 上的任意位置,而不必放在整数

    2022-09-23:整数数组 stations 表示 水平数轴 上各个加油站的位置.给你一个整数 k . 请你在数轴上增设 k 个加油站, 新增加油站可以位于 水平数轴 上的任意位置,而不必放在整数 ...

  5. 2022-06-27:给出一个长度为n的01串,现在请你找到两个区间, 使得这两个区间中,1的个数相等,0的个数也相等, 这两个区间可以相交,但是不可以完全重叠,即两个区间的左右端点不可以完全一样。

    2022-06-27:给出一个长度为n的01串,现在请你找到两个区间, 使得这两个区间中,1的个数相等,0的个数也相等, 这两个区间可以相交,但是不可以完全重叠,即两个区间的左右端点不可以完全一样. ...

  6. 2022-02-22:机器人大冒险。 力扣团队买了一个可编程机器人,机器人初始位置在原点(0, 0)。小伙伴事先给机器人输入一串指令command,机器人就会无限循环这条指令的步骤进行移动。指令有两种

    2022-02-22:机器人大冒险. 力扣团队买了一个可编程机器人,机器人初始位置在原点(0, 0).小伙伴事先给机器人输入一串指令command,机器人就会无限循环这条指令的步骤进行移动.指令有两种 ...

  7. Prometheus采集Java程序指标信息

    采集Java程序JVM信息 创建 Spring Boot Application 应用程序 进行 https://start.spring.io 使用版本 Spring Boot v2.7.11和JD ...

  8. Selenium - 元素操作(3) - 下拉框操作

    Selenium - 元素操作 下拉框才做可以分为两类: select标签的下拉框:使用Select类进行操作: 非select标签的下拉框:一般是 ul,li, div 等标签组成,使用元素定位的方 ...

  9. 这10个Lambda表达式必须掌握,简化你的代码,提高生产力

    Lambda 表达式(lambda expression)是一个匿名函数,Lambda表达式基于数学中的λ演算得名,直接对应于其中的lambda抽象(lambda abstraction),是一个匿名 ...

  10. 计算机网络 vlan

    目录 一.vlan的概念 二.vlan的优势 三.vlan的种类 四.静态vlan的配置 五.trunk的概念和配值 六.实验 一.vlan的概念 在传统的以太网中,所有的用户都是同一个广播域,当数据 ...