HTML & CSS 学习总结

已于 2022-07-09 22:57:30 修改
阅读量116 收藏
点赞数
文章标签： html css 学习
于 2022-07-09 22:01:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51897422/article/details/125698132
版权

一、个人对于HTML的理解

首先最简单的html网页大致结构如下代码

<html>
	<head>
		..............
		..............
		..............
	</head>
	<boby>
		...............
		..............
		..............
	</boby>
</html>

在上例中最简单的html代码中
<head>标签中一般用于定义文档的头部，描述了文档的各种属性和信息（标题、文档关系等）
<boby>标签中一般用于呈现页面信息，是网页的主体

二、个人常用HTML标签汇总

1. <h1>~<h6>标签与<p>标签（内容标题）

在h1到h6中，h1最大，h6最小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
	<h1>h1标题</h1>
	<h2>h2标题</h2>
	<h3>h3标题</h3>
	<h4>h4标题</h4>
	<h5>h5标题</h5>
	<h6>h6标题</h6>
	<p>p标签</p>
</body>
</html>

在这里插入图片描述

2.<title>标签（用于网页标题）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
</head>
<body>
</body>
</html>

在这里插入图片描述

3.<a>

<a>标签可用于放置超链接，使用时可用于多个网页之间的跳转
将要跳转的网页写入href属性中
代码如下（示例）：

<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<br>
<a href="h.html">网页1</a>

在这里插入图片描述
点击第一个超链接
在这里插入图片描述点击第二个
在这里插入图片描述

4.<table>

可以直接制作表格，在<table>中，
<tr>表示行, <td>表示行中的单元,<th>是表头的单元

<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
  </tr>
</table>

效果：
在这里插入图片描述

可以在<td>中使用rowspan属性改变其呈现形式

<table border="1">
  <tr>
    <td rowspan="3">A</td>
    <td>A1</td>
  </tr>
  <tr>
    <td>A2</td>
  </tr>
  <tr>
    <td>A3</td>
  </tr>
</table>

在这里插入图片描述

5. <form>

<form>标签可以获取我们的一些信息如：用户名、密码
placeholder 属性可以提供提示

<form>
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  密码：<br>
  <input type="password" name="pwd" placeholder="请输入密码"><br>
</form>

当提交时，表单中没有name属性的元素将不会提交
在这里插入图片描述

6.<input>

可直接用于输入

<input type="text" name="name" placeholder="请输入用户名">
<input type="password" name="pwd" placeholder="请输入密码">

在这里插入图片描述

7.<hr>

可以直接画出一条直线用于分隔

8.<br>

可以直接换行（类似于回车）

三、个人对于CSS的理解

CSS可用于美化页面，美化前与美化后简直天差地别。
CSS通常如下形式表现：

p{
  color:red;
}

上例中，p为<p>标签，作为选择器；color为属性，red作为值。

在选择器中，id选择器前标有#号，class选择器前标有 .号

四、CSS的属性

1.color属性

如同其意思，属性值为颜色
还有background-color属性，此属性作为背景颜色，在此不多展开
通常值：red，white，rgb(73, 138, 60)等，种类繁多

2.height与width属性

这两个属性决定元素尺寸，单位为px（像素）
通常值有：100px，500px等按需设置

3.text-align属性

此属性用于对齐，默认左对齐
通常值：left（左对齐）, center（居中）, right（右对齐）

4.border属性

此属性用于设置边框，无论边框、内边距还是外边距，它们都有上下左右四个方向
通常值：10px dotted black（上下左右相同）

5.padding属性

此属性用于设置内边距，填入四个参数时，时性按照上、右、下、左顺序设置；只有两个参数时，属性按照上下、左右设置；只有一个参数即为上下左右都保持一个距离。（单位为px（像素））

北林区_L
关注
HTML,CSS总计学习心得
qq_54746841的博客
04-04 609
HTML语言是解释型语言，不是类似java那样的编译型语言，所以在运行时不会报错也可以运行，但是在运行中有语法错误的句子直接跳过，但java不同的是java是编译型语言，所以编译不通过的话，就不可以运行，HTML在浏览器运行时，在每个浏览器运行时会有误差的，因为每个浏览器是容错的，比如在谷歌浏览器和火狐浏览器运行结果可能不太一样。 HTML界面是由一对标签组成的：<html></html>开始标签和结束标签。 <title></title>是网页标题标签，
HTML&CSS 学习总结
qq_59826941的博客
07-10 275
HTML是超文本标记语言（HyperText Markup Language）的缩写，我们用HTML来构建Web页面。它定义了网页内容的含义和结构，HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML文件应是一个后缀名为html的文件。HTML元素：HTML使用“标记”来注明文本、图片和其他内容，便于在浏览器中显示。该标记包含一些规定的“元素”，如：，，，，，，，，，...
HTML、CSS学习总结
qq_53088846的博客
07-09 322
目录一、HTML简介二、HTML标签 2.1标题标签2.2图像标签2.3超链接标签2.4表格标签2.5列表标签2.6锚点标签三、CSS简介四、CSS的使用4.1语法规范4.2CSS基础选择器 4.2.1标签选择器4.2.2类选择器4.2.3id选择器 4.3CSS实现方法4.3.1外部样式表 4.3.2内部样式表HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本
HTML&CSS学习总结
m0_53920507的博客
07-10 104
目录HTML（HyperText Markup Language）是一种用来告知浏览器如何组织页面的标记语言，它由一系列的元素组成，一般我们用它来构建 Web 页面打开vscode，新建一个文件夹，在该文件夹下新建一个 后缀名为html 的文件并输入如下内容 2. HTML结构解析 HTML的大体结构如下图所示HTML 标题（Heading）是通过 - 标签来定义的,语法如下HTML 段落是通过标签来定义的,语法如下HTML 链接是通过标签 来定义的,可分为三种，分别是外部链接、锚链接、邮件链接，
Html&CSS学习总结
Fancy_white的博客
05-27 840
下载VS Code VS Code 下载 安装以下插件：Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence 打开文件中的自动保存(Fire->Auto Save)
HTML总结&CSS学习总结
m0_65791148的博客
06-21 1552
HTML总结&CSS学习总结
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
01-08
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 ...
html与css学习总结
最新发布
06-17
html与css学习总结
Html与Css学习笔记以及经验总结
06-23
本资源主要是我业余学习Html与css相对完善的学习资源，记录了html最全面的学习经验，以及业余制作的小练习
HTML/CSS 学习笔记（整理）
deideidei13的博客
03-03 2042
&lt;html&gt; &lt;head&gt; &lt;title&gt;网页标题&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;元数据标签（编码格式，关键字和内容描述） &lt;/head&gt; &lt...
html css 学习
nefss_的博客
03-08 550
目录1、HTML 元素语法2、HTML 属性3、HTML选择器元素选择器id选择器类选择器选择器分组（并集选择器）通配选择器复合选择器（交集选择器）4、文字样式5、css伪类6、CSS 伪元素7、CSS 盒子模型8、css弹性盒子9、CSS 布局 - 浮动10、CSS 布局 - 定位11、形变函数 1、HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止，有的只有开始标签，比如 元素的内容是开始标签与结束标签之间的内容,某些 HTML 元素具有空内容（empty content）
HTML/CSS学习
ac_blood的博客
09-16 194
样式表style    &lt;style type="text/css"&gt;       body {         background-color: #d2b48c;//网页背景颜色         margin-left: 20%;//样式表部分左边距         margin-right: 20%;//右边距         border: 1px dotted black;...
HTML之CSS学习
weixin_45363236的博客
06-15 121
1.三种样式 内联样式 内部样式表 外部样式表多种样式（优先级）： 内联 > 内部 > 外部解释：内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器A 选择器都有一个权值，权值越大越优先； B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置； C 继承的CSS 样式不如后来指定的CSS 样式； D 在同一组属性设置中标有“!important”规则的优先级最大；使用简写属性时，属性值的顺序为：:background-color backgro
HTML与CSS学习
cxy1999120的博客
07-09 349
目录一、HTML是什么？HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。二、开发工具（VS Code）三、HTML应用1、HTML文档结构3、标题4、文本格式 5、超链接7、表格8、列表list9、表单 Form CSS学习2.CSS的生效5.边框与边距10.组合选择器3、总结HTML是超文本标记语言（HyperText Markup Language）的缩写，可以用HTML 来构建 Web 页面即所谓的网页。 “超文本”（hypertext）是指连接单个网站内或多个网站间的网
HTML和Css的学习
SYX_lh的博客
10-19 4198
学习HTML和Css
html&css学习1
weixin_44679038的博客
09-25 148
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
HTML+CSS基础总结与特性解析
"HTML+CSS是构建网页的基本技术，HTML负责结构，CSS负责样式。HTML超文本标记语言由头部和主体两部分组成，用于组织网页内容，支持文字、图像、动画等多种元素，并通过超级链接实现页面间的互动。CSS则用于布局和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值