前端学习(1)-CSDN博客

本文链接：https://blog.csdn.net/m0_56840730/article/details/131253562

本文介绍了HTML的基本概念，包括网页的组成、HTML的定义以及它作为标记语言的角色。提到了常用的浏览器如IE、火狐、谷歌等，并阐述了Web标准的三大组成部分——结构、表现和行为。此外，还涵盖了HTML的基本语法、标签使用、图像和超链接的插入，以及表格和列表的创建。

摘要由CSDN通过智能技术生成

开启HTML

目标：

1.能够说出网页的基本组成

2.能够说出什么是HTML

3.能够说出常用的浏览器

4.能够说出Web标准的三大组成部分

1.网页

1.1什么是网页

网站是在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一页，通常是HTML格式的文件，他需要通过浏览器来阅读。

网页是构成网站的基本元素，常见的以.htm或html后缀结尾的文件，因此将网页称为HTML文件。

1.2什么是HTML

HTML是指超文本标记语言，它是用来描述网页的一种语言。

HTML不是编程语言，而是标记语言。

标记语言是一套标记标签。

1.3网页的形成

网页是由网页元素组成的，这些元素是利用HTML标签描述出来的，然后通过浏览器解析来显示给用户。

2.常用的浏览器

2.1常用的浏览器：IE 火狐谷歌 Safari Opera

2.2浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

3.Web标准

是由W3C组织和其他标注化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

3.1为什么需要Web标准？

浏览器不同，他们显示页面或者排版有差异。

3.2Web标准的构成？

主要包括结构（structure）表现（presentation）和行为（Behavior）三个方面。

结构：结构用于对网页元素进行整理和分类，现阶段主要是学HTML

表现：表现用于设置网页元素的版式，颜色，大小等外观样式，主要是指CSS

行为：行为是指网页模型的定义以及交互的编写，现阶段主要是javascript、

4.HTML语言规范

4.1基本语法规范

1.HTML标签是由尖括号包围的关键词，例如<html>

2.大部分是成对出现。

3.少数是单标签，例如<br />

4.2标签关系

双标签关系可以分为两类：包含关系和并列关系

5.HTML基本结构标签

5.1第一个HTML网页

每个网页都有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写。

HTML网页也成为了HTML文档

<html></html>页面中最大的标签，称之为根标签

<head></head>文档的头部，head标签中我们必须设置的标签是title（网页链接那一块）

<title></title>文档的标题，让页面拥有一个属于自己的网页标题（网页的名字）

<body></body>文档的主题元素包含文档的所有内容页面内容都在body里

6.网页开发工具VSCODE

6.1文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>就是告诉浏览器当前页面采用HTML5来显示网页。

此句要放到第一句。

6.2lang语言种类

用来定义当前文档显示的语言。

en英文 zh-CN中文

6.3字符集

字符集是多个字符的集合。

在<head>标签内charset属性来规定HTML文档应该用哪种字符编码。

必须要写这句 <meta charset="UTF-8"/>

7.HTML常用标签

7.1标签语义

7.2标题标签<h1>-<h6>

每个标题独占一行

7.3段落标签和换行标签

<p>定义段落

文本在一个段落中会根据浏览器窗口自动换行

段落和段落之前有大的缝隙

<br />换行

7.4文本格式化标签

7.5

<div>和<span>没有语义，盒子，用来装内容

一行只能放一个<div> 一个<div>自己独占一行后面写的内容自动换行

一行可以多个<span>

7.6图像标签和路径

7.6.1图像标签

src是<img>标签的必须属性它用于指定图像文件的路径和文件名引号中填图像的名字

alt 替换文本当图片没办法显示时显示此文本

title 提示文本鼠标放图片上显示的文本

width 像素设置图像的宽度

height 设置图像高度

一般设置一个另一个等比例缩放

border 给图像设定边框粗细

采用键值对的形式 key="value"

7.6.2 路径

目录文件夹：就是普通文件夹，只不过里面放了我们做页面需要的相关素材

路径分为：

相对路径：图片相对于HTML页面的位置

同一级路径图像文件位于HTML文件同一级如<img src="baidu.jpg">

下一级路径 / 图像文件位于HTML文件下一级如<img src="images/baidu.jpg">

上一级路径 ../ 图像文件位于HTML文件上一级如<img src="../bai.jpg">

绝对路径：指目录下的绝对路径或者网络绝对路径（使用较少）

7.6.3超链接标签

从一个页面到另一个页面

<a href="跳转目标" target="目标窗口的弹出方式">文字或图像</a>

href 用于指定链接目标的url地址，当为标签应用herf属性时，他就具有了超链接的功能。

target 用于指定链接页面的打开方式，其中_self为默认值(就是在当前窗口打开），_blank为新窗口中打开方式。

链接分类：

1.外部链接

2.内部链接

网站内部页面之间的相互链接，不用加http,直接填入页面的名字。

3.空链接

用#代替

4.下载链接

如果herf是个文件或者压缩包，点击就会下载

5.网页元素链接

在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。

6.锚点链接

点击链接可以快速定位到页面中的某个位置。

在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>

找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

8.注释

快捷键 Ctrl+/

9.特殊字符

空格 &nbsp；小于号 <&lt>；大于号<&gt>；

10表格标签

10.1作用：显示，展示数据

10.2基本语法：

<table>

<tr>

<td>单元格内文字</td>

<td>另一个单元格</td>

</tr>

</table>

10.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th> 标签标示HTML表格的表头部分

10.4表格属性

不常用 css设置

align left center right 规定表格相对周围元素的对齐方式（在页面左中右显示）

border 1或"" 规定表格是否有边框默认为"" 表示没有边框

cellpadding 像素值规定单元边沿与其内容之间的空白，默认为1像素

cellspacing 像素值规定单元格之间的空白默认1像素

width 像素值或百分比规定表格的宽度

height 像素值或百分比规定表格的高度

10.5表格结构标签

<thead>表格的头部标签 <tbody>表格的主体区域

10.6合并单元格

跨行合并 rowspan="合并单元格个数"

跨列合并 colspan="合并单元格个数"

跨行：合并代码写在最上侧单元格

跨列：合并代码写在最左侧单元格

10.6.1 合并单元格步骤

先确定跨行还是跨列，然后找到目标单元格，写上代码，删除多余的单元格

11.列表标签

用来布局分为无序列表有序列表自定义列表

都自带样式通过CSS修改

11.1无序列表（重点）

<ul>表示无序列表列表项用<li>

<ul>中只能有<li> <li>里面什么都能放

11.2有序列表

<ol>表示有序列表

11.3自定义列表

应用场景：上面有个小标题底下还有几个围绕他的小标题常用于对术语或名次进行解释和描述

<dl>表示自定义列表 <dt>表示定义项目 <dd>表示描述项目 <dt><dd>是兄弟关系

<dl>

</dl>

<dl>里面只能有<dt><dd>

12.