HTML基础学习(一)_h函数创建多个p标签-CSDN博客

本文链接：https://blog.csdn.net/m0_60929595/article/details/123166561

什么是HTML？

HTML是超文本标记语言，不算是真正意义上的编程语言。
HTML不仅可以通过标记来描述网页内容，同时由于文本中包含了所谓的“超级链接”点，来将网站与网页以及各种网页元素链接起来。

HTML骨架

DTD（文本类型定义）必须出现在第一行，让浏览器知道是什么格式的文件，

<!DOCTYPE html> 其中的“！”表示警示标签

关于html标签

整个网页必须被<html></html>包裹，里面有<head></head>和<body></body>两部分

<head></head>：网页的配置

<body></body>：网页的正式内容，浏览器可视内容

标签的基本使用

标签名必须书写在一对尖括号<>内部

标签分为单标签和双标签，双标签必须成对出现，有开始标签和结束标签

结束标签必须有关闭符号/

根据标签内部存放的内容不同，将标签划分为两个级别

HTML常见标签

h系列标签:

包含六级标签都是双标签容器级标签

作用：给内部内容添加对应级别标题语义，所有的标题标签的权重都比别的标签要高

p标签：

双标签，文本级标签

作用：添加一个完整段落的语义

img标签: src:作用是引入图片路径 alt：图片加载不出来时候的替换文本

单标签，文本级标签

作用：在指定位置插入一张图片

标签属性：

Width：设置图片的宽度

Height：设置图片的高度

Border：给图片添加边框

相对路径和绝对路径

相对路径：从html文件出发，找到对应图片位置的路径

绝对路径：分为盘符绝对路径和网站绝对路径

盘符绝对路径是基于c盘根目录开始查找对应文件位置

网站绝对路径可以在网站上查看

锚点：<a></a>

双标签，文本级标签

作用：在指定位置添加一个超级链接，从而实现相对应的跳转

a标签的属性，是给超文本链接添加相应的作用

href:超文本引用，引用的是网站地址（绝对路径）

同样也可以跳转到本地的一个网址（相对路径）

target标签的属性：是否在新标签页打开连接，值一定是_blank

title属性：作用是鼠标移上文字之后的悬停文本

name属性：用来当做锚点，进行页内跳转

页面锚点的使用

锚点的作用：实现点击超级链接从而实现页面内的跳转

有两种方法：

设置空锚点，并使用name属性其属性值要同锚的href属性的值。

锚点写在小标题上方，锚写在大标题下（在锚的href属性中记得加#）

在标题标签中设置id属性与锚的href属性的值相同

列表

主要分为有序列表、无序列表、定义列表

无序列表：定义一个没有顺序的列表结构

ul:无序列表

li:列表项

ul嵌套li,li可以嵌套任何标签

有序列表：定义一个有序列表的列表结构

ol:有序列表

Li：列表项

嵌套规则同无序列表

列表出现排序

定义列表：定义一个标题和内容自定义的列表结构

由三个标签组成dl dt dd

dl:表示创建一个自定义列表结构

dt:定义主题或者定义术语，表示一个列表的主题

dd:定义解释项，表示解释和说明前面的主题内容

dl中只可以嵌套dt和dd，dt和dd 是同级关系

表格

表格基础

表格主要有三个标签组成

Table表格，定义表格结构

tr定义了表格的行

td定义了表格的单元格

关系table包含tr，tr包含td

给table标签添加属性border其属性值为1，可以显示边框

单元格合并

一半部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置属性

Rowspan：上下跨行合并 colspan左右跨列合并

完整的表格分为三部分：表格标题、表格表头、表格的主题

一个table内部实际还有三个分区标签组成

Caption:定义表格的主题

Thead：定义表格的头部，内部嵌套tr >th

Tbody:定义表格主体,内部嵌套tr>td

表单元素

1、form标签

是容器级标签，内部存放可输入的控件。如果输入的表单需要提交到数据，所有的控件需要被form表单包裹

Method：方法的意思，指的数据提交的方法，属性值是post和get

Action：是数据提交的位置

2、input标签

是输入框的一种，但是不仅仅只有输入框，通过type属性，可以拓展多功能，因此input的type属性是非常丰富的

输入框中有两个重要属性，一个是value，一个是placeholder

Value：设置默认显示的内容，属性值为自定义内容。

Placeholder：属性作用是如果没有value的时候，提示用户的文字占位符。

密码框：通过type值为password，显示效果时输入后通过掩码形式显示的。

单选框：通过type值为radio设置的，同时实现单选互斥，需要配置相同的name属性

复选框（多选框）：通过type值为checkbox设置

注意：单选框和多选框都有一个默认被选择的功能，需要给input标签添加一个checked=“checked”

label标签：用于去扩大触发范围

文本域：

textarea标签

属于可以输入多行文本的文本级标签

是一个双标签，其中的属性placeholder设置文本框中的原始文字

Rows来调节行长度，cols来调节行宽度，style设置为resize：none无法拖动文本域大小

下拉输入框：

需要一组标签来进行制作

Select：英文就是选择的意思，表示搭建下拉项

Option：英文是选项的意思，表示搭建下拉项

Select嵌套option，在option中添加属性selected=“selected”设为默认选中项

HTML注释

快捷键：Ctrl+/

div和span

这两个都属于布局标签，俗称盒子

Div：分割跨度，大跨度

Span：小区域，小跨度

作用是用来分割页面的布局，div指的是跨度布局分割网页，span是文字分割