HTML基础标签-CSDN博客

本文链接：https://blog.csdn.net/qq_50363430/article/details/109679802

HTML 基础标签（1）

11.11-11.15

学习内容：

：
1、搭建 vacode 开发环境
2、掌握 HTML基本标签
3、熟悉开发者工具

笔记以及心得

0.整体框架

<!DOCTYPE html>
<html>
	<head>
		<title>
		.....
		</title>
	</head>
	<body>
	......
	</body>
</html>

1.文档结构

文档声明，指示web使用哪个html版本

<!DOCTYPE html>

<!DOCTYPE html>
<html>
	<head>
		<title>
		.....
		</title>
	</head>
	<body>
	......
	</body>
</html>

2. 标签（元素）

用<>括起来例：

<b></b>     <img/>
<!--.....这是注释....-->

1.封闭
eg：

<p>我的猫咪脾气爆:)</p>

在这里插入图片描述

2.非封闭
也称作空元素，只有一个标签，例：

<img src="....">
<hr/>
<br/>

1.标题元素

有行间距

		<h1>这是第一个标题</h1>
        <h2>这是第二个标题</h2>
        <h3>这是第三个标题</h3>
        <h4>这是第四个标题</h4>
        <h5>这是第五个标题</h5>
        <h6>这是第六个标题</h6>

在这里插入图片描述

2.段落元素

<p>.....</p>

有行间距
单独成一个段落
有段落间距
align 对齐方式，left（左对齐），right（右对齐），center（居中对齐）
在这里插入图片描述

		<p align="left">这是左对齐</p>
        <p align="center">这是居中对齐</p>
        <p align="left">这是右对齐</p>
        <p>注意观察行间距和段落间距</p>

在这里插入代码片

3.div元素

定义文档的分区或节
可以将文档分割为独立的部分
常用于组合块级元素

4.特殊的文本

转义字符：
空格： &nbsp
为什么会有空格转义字符，因为在html中无论多少个空格，均只显示一个空格
<:<
>;>
<>是标签的表示符号，防止标签错乱
":&qwt
双引号也在属性中经常使用，为了防止歧义和属性错乱
&:&amp

5.文本样式

		<b>这是加粗</b>
        <i>这是斜体</i>
        <u>这是下划线</u>
        <s>删除线</s><del>删除线有两种表达方式</del>
        <sup>上标</sup>
        <sub>下标</sub>

在这里插入图片描述
注意这里显示的文字，并未换行且每段文字相隔一个空格，在下一个模块将解释其原因

6.`<span>标签`

用来组合文档中的行内元素，以便通过样式来格式化
span没有固定的格式表现，当对元素应用是，才有可视的变化

7.换行元素 <br/>
html回车 == 一个空格
请回去查看5.文本样式中每段文字之间的那一个空格

8.预格式化
保留空格与回车

<pre>保   留
            空             格
                    与     回 
                    车
        </pre>

在这里插入图片描述
9.水平线（分割线） <hr/>
属性：
1.size 粗细
2.width 宽度 %是相对于body的
3.align
4.color

7.行内元素与块级元素

块级元素：默认情况下，块级元素独占一行，元素的前后均换行（div，h1-h6，hr，p）

行内元素：默认情况下，行内元素位于同一行（span，b，s，i，u）

8.元素嵌套

块可以嵌套块
但p只能嵌套行内元素
行内元素不能嵌套块级元素

3.属性

元素的最完整表现
为html元素提供附加信息
总是以名称/值的形式出现
在开始标签中规定
在这里插入图片描述
注：元素名与属性名之间有一个空格,属性与属性间也要加空格。" " 与’ '均可以将属性值引起来
例：href target title

写法

<p 属性名="属性值"></p>

一般使用双引号的写法，若属性内有双引号则使用单引号将属性值引起来，第三种不添加引号的写法在元素中有多个属性时将出现问题，最好不采用这种写法。

标准属性

1.id：定义标签的标识（一个标签只能拥有一个，只出现一次）
2.title：鼠标移入元素时显示文本
3.class：类样式
4.style：行内样式

布尔属性
没有值的属性

学习产出：

：
1、几个简单静态网站
2、 CSDN 技术博客 1 篇
3、能大致看懂网站的源码的html部分