两分钟掌握web知识点(一部分)

2301_76155070 2024-05-11 16:10:56

目录

了解部分:

基础部分:

1. 文档结构标签

2. 标题标签

3. 段落和换行标签

4. 文本格式化标签

5. 链接标签

6. 列表标签

7. 图像标签

8. 表格标签

9. 表单标签

10. 其他常用标签

提高部分:①margin-left: auto

②水平居中布局之text-align: center

实践部分:


了解部分:

  • HTML(超文本标记语言):是网页的基础结构,用于定义网页的内容和布局。HTML文档由一系列的元素(如标题、段落、链接等)组成,这些元素通过标签进行标识。
  • CSS(层叠样式表):用于控制网页的样式和布局。通过CSS,开发者可以定义颜色、字体、间距等视觉元素,使网页看起来更加美观和易于阅读。
  • JavaScript:是一种脚本语言,用于实现网页的交互性和动态效果。通过JavaScript,开发者可以添加点击按钮、弹出对话框、动态更新内容等功能。

基础部分:

通过一张手写笔记展开html常用标签,看过记住大概有个印象

整理总结

1. 文档结构标签

<!DOCTYPE html>: 声明文档类型和版本。
<html>: HTML文档的根元素。
<head>: 包含了所有的头部标签元素。如<meta>, <link>, <title>, <style>, <script>等。
<title>: 定义了浏览器工具栏的标题,当网页添加到收藏夹时的标题。
<body>: 包含了可见的页面内容,如标题、段落、图片、链接、表格、列表等。


2. 标题标签

<h1> 到 <h6>: 定义HTML标题。<h1> 定义最大的标题,<h6> 定义最小的标题。


3. 段落和换行标签

<p>: 定义一个段落。
<br>: 插入一个简单的换行符。


4. 文本格式化标签

<b>: 定义粗体文本。
<i>: 定义斜体文本。
<u>: 定义下划线文本(不推荐使用,建议使用CSS)。
<s>: 定义加删除线的文本。
<strong>: 定义重要的文本(通常显示为粗体)。
<em>: 定义强调的文本(通常显示为斜体)。
<mark>: 定义带有背景色标记的文本。


5. 链接标签

<a>: 定义超链接,用于从一个页面链接到另一个页面。


6. 列表标签

<ul>: 定义无序列表。
<ol>: 定义有序列表。
<li>: 定义列表项。
<dl>: 定义描述列表。
<dt>: 定义描述列表中的项目/名字。
<dd>: 定义描述列表中的描述。


7. 图像标签

<img>: 定义图像。src 属性规定图像的来源,alt 属性提供替代文本。


8. 表格标签

<table>: 定义HTML表格。
<tr>: 定义表格中的行。
<th>: 定义表格的头部单元格。
<td>: 定义表格的数据单元格。


9. 表单标签

<form>: 定义HTML表单,用于用户输入。
<input>: 定义输入字段,type 属性用于指定输入类型(如text, password, checkbox, radio, submit等)。
<textarea>: 定义多行文本输入字段。
<label>: 定义 <input> 元素的描述。
<select>: 定义下拉列表。
<option>: 定义下拉列表中的选项。
<button>: 定义一个点击按钮。


10. 其他常用标签

<div>: 定义文档中的分区或节(常用于样式布局)。
<span>: 用于对文本中的一部分进行单独处理(常用于文本内样式)。
<meta>: 提供有关HTML文档的元信息。
<link>: 定义文档与外部资源之间的关系(如链接到CSS文件)。
<script>: 用于嵌入或引用可执行脚本(如JavaScript代码)。
<header>: 定义文档的页眉(常用于网站导航)。
<footer>: 定义文档的页脚(常用于版权信息、网站地图链接等)。
<section>: 定义文档中的节(如章节、页眉、页脚或文档中的其他部分)。
<article>: 定义页面独立的内容区域(如博客条目、论坛帖子等)。
<aside>: 定义页面的侧边栏内容(如广告、相关链接、侧边栏导航等)。
<nav>: 定义导航链接的部分。
<main>: 定义文档的主体内容。
这些标签只是HTML中的一部分,但它们是最常用和最基本的标签。通过使用这些标签,就可以创建基本的网页结构和内容。

提高部分:①margin-left: auto


水平居中的含义:当容器宽度比内容大的时候,“居中”才有意义,因此使用此方法的前提是内容的宽度比容器的宽度小。
[易错点]对和容器宽度相等的内容使用
margin:auto;,例如容器是浮动盒子时,脱流的定位容器。
[原理] margin的auto值等于剩余空间的宽度,写 margin-left: auto;内容会被顶到右边,如果同时设置左右margin: 0 auto;则左右平分剩余空间。 [技巧] margin: 0 auto;可以简写成: margin: auto;因为当margin-top或margin-bottom为auto时值为0,除非脱离文档流。

 

②水平居中布局之text-align: center


实践部分:

以下是一个简单的CSS代码示例,用于样式化一个HTML页面中的元素:

 HTML部分 (index.html):

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>CSS样式示例</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body>  
  
<h1 class="title">欢迎来到我的网站</h1>  
  
<p class="intro">这是一个使用CSS进行样式化的简单示例。</p>  
  
<div class="container">  
  <div class="box red">这是一个红色盒子</div>  
  <div class="box green">这是一个绿色盒子</div>  
  <div class="box blue">这是一个蓝色盒子</div>  
</div>  
  
</body>  
</html>

CSS部分 (styles.css):

/* 基础样式 */  
body {  
  font-family: Arial, sans-serif;  
  margin: 0;  
  padding: 20px;  
  background-color: #f4f4f4;  
}  
  
/* 标题样式 */  
.title {  
  color: #333;  
  text-align: center;  
  margin-bottom: 20px;  
}  
  
/* 介绍段落样式 */  
.intro {  
  color: #666;  
  line-height: 1.6;  
  text-indent: 2em; /* 首行缩进两个字符宽 */  
}  
  
/* 容器样式 */  
.container {  
  display: flex;  
  justify-content: space-around; /* 盒子之间平均分布 */  
  margin-top: 40px;  
}  
  
/* 盒子样式 */  
.box {  
  width: 150px;  
  height: 150px;  
  margin: 10px;  
  display: flex;  
  align-items: center; /* 垂直居中 */  
  justify-content: center; /* 水平居中 */  
  font-size: 20px;  
  border-radius: 10px; /* 圆角 */  
}  
  
/* 不同颜色的盒子 */  
.red { background-color: red; color: white; }  
.green { background-color: green; color: white; }  
.blue { background-color: blue; color: white; }

在这个示例中,创建了一个简单的HTML页面,它包含一个标题、一个介绍段落和三个不同颜色的盒子。CSS样式表(styles.css)定义了如何呈现这些元素。通过使用类选择器(如.title、.intro、.container、.box、.red、.green和.blue),我们可以将样式应用到HTML文档中的特定元素或元素组上。

请注意,HTML文件通过<link rel="stylesheet" href="styles.css">链接到CSS文件。确保这两个文件位于同一目录下,或者调整href属性的值以指向正确的文件路径。

运行效果:

 

也可以自己尝试以下有序列表无序列表

感谢观看,有兴趣的话动手试试吧~

...全文
138 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

490

社区成员

发帖
与我相关
我的任务
社区描述
闽江学院IT领域专业的学生社区
社区管理员
  • c_university_1157
  • 枫_0329
  • 傅宣
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧