日 - HTML 和 CSS
- Mary-Kate Olsen原创
- 2025-01-03 20:54:45290浏览
HTML：
HTML 代表超文本标记语言。
HTML 是用于创建网页的标准语言。
它使用标签或元素系统定义网页的结构。
CSS：
CSS 代表层叠样式表。
它用于设置 HTML 创建的网页布局的样式和格式。
它控制颜色、字体、间距、定位和响应式设计等内容。
CSS 允许您将结构（HTML）与设计（样式）分开，使网站更易于维护且更灵活。
JS：
Js 代表 JavaScript。
它是一种编程语言，用于在网络浏览器中创建动态和交互效果。
HTML 构建页面并使用 CSS 设计样式，而 JavaScript 可以与页面交互并动态修改内容。
HTML：
HTML 是基于文本的语言，它定义了网页内容的结构和含义。
独立标签：
在 HTML 中，独立标签是指不需要结束标签的 HTML 元素。这些通常也称为自关闭标签或空元素。
示例：
<br> <hr> <input>
结构标签：
标签通常成对出现：开始标签和结束标签。
示例：
<html> <head> <body>
元素：
元素是网页的构建块，代表文档中各种类型的内容和结构。
HTML 元素的组成部分：
Opening Tag: The starting part of the element that defines the type of content that follows.
Example:<p>, <h1>, <div>, <img>
Content: The content placed between the opening and closing tags (if applicable). This could be text, images, links, or other elements.
Example: This is a paragraph.
Closing Tag: The closing part of the element that indicates the end of the element. It is the same as the opening tag, but with a forward slash (/) before the tag name.
Example: </p>, </h1>, </div>
Attributes (Optional): Additional properties that provide extra information about the element. Attributes are added inside the opening tag.
Example:>
<p><strong>Example:</strong><br>
</p>
<pre class="brush:php;toolbar:false"><html>
<head>
<title>ILUGC</title>
<style>
.container{
border:1px solid;
height:200%;
width:85%;
margin:auto;
}
.header h4{
text-transform: uppercase;
color:#e22d30;
border-top:1px solid green;
width: fit-content;
padding-top:10px;
}
.header{
margin:25px;
}
</style>
</head>
<body>
<div>
<p><strong>Explanation of the HTML Structure:</strong><br>
</p>
<pre class="brush:php;toolbar:false"><html>: Root element of the HTML document.
<head>: Contains metadata for the page, including the title and styles.
<body>:Contains the content visible on the page.
Inside the <head>:
The <title> tag gives the webpage its title when viewed in the browser tab.
The <style> tag contains the internal CSS to style the page.
Inside the <body>:
.container:A container div with a class container that holds all the page elements.
It's styled with a border, height, width, and centered using margin:auto.
.header: A section that contains the main title (<h1>) and a subtitle (<h4>) about the ILUGC group.
The h4 tag is styled with uppercase letters, a red color, a border on top, and some padding.
navbar: This seems to be a placeholder for a navigation bar.
layout: A section for the main content layout, with two subsections:
mainLayout: Likely for the main content area.
sideLayout: Likely for a sidebar or additional content.
footer: Placeholder for the footer section.
div:
该元素是一个块级容器，用于将其他元素分组在一起并向它们应用样式或布局属性。
类别选择器：
类选择器用于选择具有特定类属性的元素并为其设置样式。它是 CSS 中最常用的选择器之一。类选择器由点 (.) 后跟类名定义。
语法：
.classname {
}
元素选择器：
元素选择器（也称为类型选择器）用于根据标签名称选择 HTML 元素并设置其样式。它允许您将样式应用于文档中特定类型 HTML 元素的所有实例。
语法：
element {
}
边距：
CSS 中的 margin 属性用于在元素外部创建空间。
语法：
element {
margin: value;
}
填充：
CSS 中的 padding 属性用于在元素内部、内容和边框之间创建空间。
语法：
element {
padding: value;
}
以上是日 - HTML 和 CSS的详细内容。更多信息请关注PHP中文网其他相关文章！