前端基础——HTML

最新推荐文章于 2023-09-05 13:58:01 发布

嘤嘤906

最新推荐文章于 2023-09-05 13:58:01 发布

阅读量103

点赞数 2

分类专栏： # Python基础文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_63414347/article/details/122541460

版权

Python基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

一.网页
- 1.网页的概念
- 2.网页的组成
二.HTML

一.网页

1.网页的概念

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

2.网页的组成

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

二.HTML

1.HTML的概念

HTML指的是超文本标记语言，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。
所谓超文本，有2层含义：
1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)。

2.HTML语法规范

(1)基本语法概述：
a.HTML标签是由尖括号包围的关键词，例如< html >。
b. HTML标签通常是成对出现的，例如< html >和< /html>，我们称为双标签。标签对中的第一个标签是
开始标签，第二个标签是结束标签。
c. 有些特殊的标签必须是单个标签(极少情况)、例如<br/＞，我们称为单标签。
(2)标签关系
双标签关系可以分为两类：包含关系和并列关系。
a.包含关系

<head>
	<title></title>
</head>

b.并列关系

<head></head>
<body></body>

3.HTML基本结构标签

在这里插入图片描述

4.HTML常用标签

(1)标签语义就指标签的含义。

(2)标题标签：
为使网页更具有语义化，我们经常会在网页中用到标签。HTML提供了6个等级的网页标签。
特点：
a.加了标题的文字会变的加粗，字号也会依次变大。
b.一个标题独占一行。
在这里插入图片描述
(3)段落和换行标签：
在HTML标签中，< p >标签用于定义段落，它可以将整个网页分为若干个段落。
特点：
a.文本在一个段落中会根据浏览器窗口的大小自动换行。
b.段落和段落之间保有空隙。

在HTML中，一个段落中的文字会从左到右依次排序，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签< br />。
特点：
a.< br />是个单标签。
b.< br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直地间距。

(4)文本格式化标签：
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
在这里插入图片描述
(5)< div >和< span >标签：
它们就是一个盒子，用来装内容。
特点：
a.< div >标签用来布局，但是现在一行只能放一个< div >。大盒子
b.< span >标签用来布局，一行可以放多个< span >。小盒子

(6)图像标签和路径:
1.图像标签
在HTML标签中，< img >标签用于定义HTML页面中的图像。

<img src="图像URL" />

src是< img >标签的必须属性，它用于指定文件的路径和文件名。
在这里插入图片描述
图像标签属性注意点：
①图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。
2.路径
①(1)目录文件夹和根目录：
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。
根目录：打开目录文件夹的第一层就是根目录
②相对路径：
以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，图片相对于HTML页面的位置。
在这里插入图片描述
③绝对路径：
指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

(7)超链接标签:
在HTML标签中，< a >标签用于定义超链接，作用是从一个页面链接到另一个页面链接。
a.链接的语法格式

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

在这里插入图片描述
b.链接分类
1.外部链接，例如< a href=“http://www.baidu.com"＞百度< /a>。
2.内部链接，网站内部页面之间的相互链接.直接链接内部页面名称即可，例如< a href=“index.html”>。
3. 空链接：如果当时没有确定链接目标时，< a href=”#”＞首页< /a>。
4.下载链接：如果 href里面地址是一个文件或者压缩包，会下载这个文件。
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
6. 锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。
在链接文本的href属性，设置属性值为#名字的形式，如<ahref="#two">第2集< /a>。
找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3id=“two”>第2集介绍< /h3>。

5.HTML中的注释和特殊字符

(1)注释：
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签
HTML中的注释以“<！–”开头，以“–>”结束。快捷键：ctrl+ /。
(2)特殊字符：
在HTML页面中，一些特殊的字符很难或者不方便直接使用，此时就可以使用字符来代替。
在这里插入图片描述

6.表格标签

(1)表格的主要作用：
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

(2)表格的基本语法：
在这里插入图片描述
1.< table>< /table>是用于定义表格的标签。
2.< tr>< /tr>标签用于定义表格中的行，必须嵌套在< table>< /table>标签中。
3.< td>< /td>用于定义表格中的单元格，必须嵌套在< tr>< /tr>标签中。
4. 字母td指表格数据(tabledata)，即数据单元格的内容。

(3)表头单元格标签：
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。< th >标签表示 HTML表格的表头部分(table head的缩写)。
在这里插入图片描述
(4)表格属性：
请添加图片描述
(5)表格结构标签：
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.在表格标签中，分别用：< thead>标签表格的头部区域、< tbody>标签表格的主体区域，这样可以更好的分清表格结构。
1.< thead>< /thead>：用于定义表格的头部。< thead>内部必须拥有< tr>标签。一般是位于第一行。
2.< tbody>< /tbody>：用于定义表格的主体，主要用于放数据本体。
3.以上标签都是放在< table>< /table>标签中。

(6)合并单元格
合并单元格方式：
跨行合并：rowspan="合并单元格的个数”。
跨列合并：colspan="合并单元格的个数”。
目标单元格：
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
合并单元格三步曲：
1.先确定是跨行还是跨列合并。
2. 找到目标单元格.写上合并方式=合并的单元格数量。比如：<tdcolspan=“2”>< /td>。
3. 删除多余的单元格。

7.列表标签

表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

(1)无序列表：
< ul >标签表示 HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用< li >标签定义。无序列表的基本语法格式如下：
在这里插入图片描述
1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. < ul>< /ul>中只能嵌套< li>< /li>，直接在< ul>< /ul>标签中输入其他标签或者文字的做法是不被允许的。
3.< li>与< /li>之间相当于一个容器，可以容纳所有元素。
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

(2)有序列表：
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在HTML标签中，< ol>标签用于定义有序列表，列表排序以数字来显示，并且使用< li>标签来定义列表项。有序列表的基本语法格式如下：
在这里插入图片描述
1.< ol>< /ol>中只能嵌套< li>< /li>，直接在< ol>< /ol>标签中输入其他标签或者文字的做法是不被允许的。
3. < li>与< /li>之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

(3)自定义列表：
在HTML标签中，< dl>标签用于定义描述列表（或定义列表），该标签会与< dt>（定义项目/名字）和
< dd>(描述每一个项目/名字)一起使用。其基本语法如下：
在这里插入图片描述
4. < dl>< /dl>里面只能包含< dt>和< dd>。
5. < dt>和< dd>个数没有限制，经常是一个< dt>对应多个< dd>。

8.表单标签

使用表单的目的是为了收集用户信息。

(1)表单的组成：
一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分组成。

(2)表单域：
表单域是一个包含表单元素的区域。在HTML标签中，< form>标签用于定义表单域，以实现用户信息的收集和传递。< form>会把它范围内的表单元素信息提交给服务器。

<form action="ur1地址”method="提交方式”name="表单域名称">各种表单元素控件
</form>

在这里插入图片描述
(3)表单控件:
a.< input>表单元素
在英文单词中，input是输入的意思，而在表单元素中< input>标签用于收集用户信息。在< input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

<input type="属性值” />

1.< input/>标签为单标签。
2.type属性设置不同的属性值用来指定不同的控件类型。
type属性的属性值及其描述如下所示：
在这里插入图片描述
< input>标签的其他属性：

name 和value是每个表单元素都有的属性值，主要给后台人员使用。
name表单元素的名字，要求单选按钮和复选框要有相同的name值。
checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素。
maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。

b.< label>标签
< label>标签为input元素定义标注(标签)。< label>标签用于绑定一个表单元素，当点击< label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex"id="sex"/>

核心：< label>标签的 for属性应当与相关元素的id属性相同。

c.< select>表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< select>标签控件定义下拉列表。

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>

1.< select>中至少包含一对< option>。
2. 在< option>中定义selected="selected”时，当前项即为默认选中项。

d.< textarea>表单元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用< textarea>标签。在表单元素中，< textarea>标签是用于定义多行文本输入的控件。

嘤嘤906

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础——HTML

文章目录一.网页1.网页的概念2.网页的组成二.HTML1.HTML的概念2.HTML语法规范3.HTML基本结构标签4.HTML常用标签5.HTML中的注释和特殊字符6.表格标签7.列表标签8.表单标签一.网页1.网页的概念网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后
复制链接

扫一扫