HTML学习笔记_html的笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_62814848/article/details/122251173

本文详细介绍了HTML的基本概念，包括网页与网站的关系，HTML的超文本特性，浏览器内核的作用，以及Web标准的重要性。讲解了HTML标签的使用，如标题、段落、文本格式化、图像、超链接、表格、列表和表单元素等，强调了Web标准中的结构、表现和行为分离原则，旨在提供全面的前端基础知识。

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

文章目录

关于网页网站
关于HTML
- 超文本超在哪？
关于浏览器
- - 浏览器内核(渲染引擎)含义：
  - 常见浏览器及其内核。
关于Web标准
- web标准作用
- 构成
关于标签
- 基本语法（标签的使用）
- HTML基本结构
常用标签

笔记参考：b站黑马程序员pink老师的前端教程

关于网页网站

网站

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

网页

是网站中的一页，由图片、链接、文字、声音、视频等元素构成；通常是HTML格式文档（HTML文档描述网页，也被称为网页），通过浏览器解析显示给用户。通常网页以.htm或.html后缀结尾。
代码–>浏览器进行解析渲染–>生成页面

关系

网页是构成网站的基本元素

关于HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。

超文本超在哪？

超越了文本限制（可以加入图片、声音、动画、多媒体等内容）
超级链接文本（从一个文件跳到另一个文件）

关于浏览器

浏览器内核(渲染引擎)含义：

负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

常见浏览器及其内核。

请添加图片描述

关于Web标准

由W3C（万维网联盟—国际最著名的标准化组织）制定。

web标准作用

统一性：使不同浏览器渲染解析出的网页效果一样。

构成

主要包括结构、表现、行为三个方面。

方面	说明
结构	结构用于对网页元素进行整理和分类，指HTML。骨架；相比较结构最重要。
表现	用于设置网页元素的板式、颜色、大小等外观样式，指CSS。外观装饰
行为	行为是指网页模型的定义及交互的编写，主要是JavaScript。行为动作
Web标准最佳体验方案	结构、表现、行为相分离

关于标签

基本语法（标签的使用）

HTML标签是由尖括号包围的关键词
HTML标签通常成对出现，成对出现的标签称为双标签。第一个开始标签，第二个是结束标签。
HTML中也有单个标签，称为单标签。

HTML基本结构

每个页面必有的骨架标签

<html>
	<head>
		<title>我的第一个网页</title>
	</head>
	<body>
		hahahahahaha
	</body>
</html>

请添加图片描述
基本结构中的三个特殊标签

<html lang="en">

en是英语；zh-CN定义语言为中文。
告诉浏览器或搜索引擎本页面采用英文显示。
对于文档显示来说，en文档也可以显示中文，zh-CN也可显示为中文。

<!DOCTYPE html>

文档类型声明标签，告诉浏览器页面采取HTML5来写的
doctype 声明是不区分大小写的

<meta charset="UTF-8" />

在head标签内，可以通过meta标签的charset属性来规定HTML文档使用哪种字符编码。
必须写的标签，如果不写会乱码。
UTF-8被称为万国码。

常用标签

标题标签

<h1>这是一级标题</h1>

<h1>-<h6>作为标题使用，并且重要性递减
标题文字字体变粗、字号变大。
一个标题独占一行

段落和换行标签

<p>这是段落</p>

文本在一个段落中会根据浏览器窗口大小自动换行
段落和段落之间有空隙
在HTML中不管多少空格、回车都只显示一个

<br />

是个单标签
只是简单的换行，两行之间没有间距。段落两行之间留有间距。

文本格式化标签

文本格式化标签：使文字以特殊方式显示；设置文字为粗体，斜体，下划线等。

语义	标签
加粗	`<strong></strong>或者<b></b>`
倾斜	`<em></em>或者<i></i>`
删除	`<del></del>或者<s></s>`
下划线	`<ins></ins>或者<u></u>`

div和span标签

<div>和<span>，没有语义，就是一个盒子用来装内容。
<div>一行只能放一个，大盒子。
<span>一行可以有多个，小盒子。

图像标签和路径

图像标签

<img src="图像xxx"/>

请添加图片描述

src是图像标签<img>的必须属性，用于指定，图像文件的路径和文件名。
width和height一般只设置一个，避免压缩图像，另一个会等比例缩放，border一般在css中设置。

目录文件夹：就是普通文件夹，里边存放了做页面所需的相关素材。
根目录：打开目录文件夹的第一层。

相对路径

图片相对于HTML页面的位置
请添加图片描述

绝对路径

目录下的绝对位置，从哪个盘开始
如：
电脑文件地址：“D\web\img\logo.gif”
或网络地址：“http://www.baidu.com/images/logo.gif”

超链接标签

语法格式

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

请添加图片描述

链接分类

1.外部链接：如< a href=“http://www.baidu.com”>百度< /a>，以http://开始

2.内部链接：网站内部页面之间的相互连接，直接连接内部页面名称即可，如< a href=“index.html”>首页< /a>

3.空链接：如果当时没有确定链接目标时，< a href="#">首页< /a>

4.下载链接：如果href里面地址是一个.exe文件或者zip压缩包，会下载这个文件

<a href="img.zip">下载文件</a>

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

<a href="http://www.baidu.com"><img src="img.jpg"/></a>

6.锚点链接：点击链接可以快速定位到页面中的某一位置

在链接文本的href属性中，设置属性值为#名字的形式，如< a href="#two">第二集< /a>
找到目标位置标签，里面添加一个id属性 = 刚才的名字，如< h3 id=“two”>二< /h3>

注释和特殊字符的表示

注释

快捷键ctrl+/

<!--这是注释-->

特殊字符

请添加图片描述

表格标签

表格用于显示、展示数据

基本语法

<table>
    <tr>
        <td>单元格内的文字</td>
        ···
    </tr>
    ···
</table>

< table>< /table>是用于定义表格的标签
< tr >< /tr>标签用于定义表格中的行，必须嵌套在< table>< /table>标签中
< td>< /td>标签用于定义表格中的单元格，必须嵌套在标签中

表头单元格标签< th>

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
< th>与< td>可看做是同一级别的。

<table>
	<!--第一行-->
    <tr>
        <th>姓名</th>
        ···
    </tr>
    <!--第二行-->
    <tr>
        <td>张三</td>
        ···
    </tr>
    ···
</table>

表格属性

实际开发中不常用，后面通过CSS来设置。写在

标签里

属性名	属性	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格单元是否有边框，默认为“”，没有边框
cellpadding	像素值	规定单元格边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格子间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

表格标签结构

将表格分割成表格头部和表格主体两大部分，用< thead>标签表示表格的头部区域，< tbody>标签表示表格的主体区域
两个标签都是放在< table>< /table>标签中

<table>
<thead>
    <tr>
        <th>头部</th>
        ···
    </tr>
</thead>
<tbody>
    <tr>
        <td>主题内容</td>
        ···
    </tr>
    ···
</tbody>
</table>

合并单元格

合并单元格方式

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”
在这里插入图片描述
目标单元格

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码

合并单元格步骤

确定跨行还是跨列
找到目标单元格，写上合并方式=合并的单元格数量，比如< td colspan=“2”>< /td>
删除多余的单元格

列表标签

用于布局，最大的特点就是整齐、整洁、有序
根据使用场景的不同，列表可分为三大类：无序列表、有序列表和自定义列表

无序列表

< ul>标签表示HTML页面中项目的无序列表，列表项使用< li>表示
基本语法格式

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ···
</ul>

无序列表的各个列表项之间没有顺序，是并列的
< ul>< /ul>中只能嵌套< li>< /li>
< li>与< /li>之间相当于一个容器，可以嵌套所有元素
无序列表会带有自己的样式属性，但在实际使用时，使用CSS设置

有序列表

< ol>标签用于定义有序列表，列表排序以数字来显示，使用< li>标签来定义列表项

基本语法格式

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ···
</ol>

< ol>< /ol>中只能嵌套< li>< /li>
< li>与< /li>之间相当于一个容器，可以嵌套所有元素
有序列表会带有自己的样式属性，但在实际使用时，使用CSS设置

自定义列表

< dl>标签用于定义列表，< dt>标签定义项目/名字，< dd>标签描述每一个项目/名字
基本语法格式

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ···
</dl>

< dl>< /dl>中只能包含< dt>和< dd>
< dt>和< dd>个数没有限制，经常是一个< dt>对应多个< dd>
< dt>与< dd>是并列关系

列表总结

请添加图片描述

表单标签

使用表单的目的是为了与用户进行交互，收集用户信息
一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3个部分构成

表单域

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

基本语法

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

属性：

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单元素

允许用户在表单中输入或者选择的内容控件

input输入表单元素

< input />标签用于收集用户信息（单标签）
< input>标签包含一个type属性，根据不同的type属性值，来指定不同的输入方式

type属性

<input type="属性值" />

type的属性	描述	注意
button	定义可点击按钮（多数情况下，用于通过js启动脚本）	如发送验证码按钮
checkbox	定义复选框	复选框需要同样的name属性值
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被隐藏
radio	定义单选按钮	实现多选一时，多个单选按钮需要同样的name属性值
submit	定义提交按钮，提交按钮会把表单数据发送给服务器	value值可改变按钮上的显示字符
reset	定义重置按钮，重置按钮会清除表单中的所有数据，还原到默认状态	value值可改变按钮上的显示字符
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符	value属性值显示为默认值

其他属性

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

name和value是每个表单元素都有的属性值，主要给后台人员使用
name表单元素的名字，要求单一按钮（radio）和复选框（checkbox）如果是一组要有相同的name值
checked属性主要针对于单选按钮和复选框

< select>下拉表单元素

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

< select>至少包含一对< option>< /option>，< select>包含在< form>< /form>中
在< option>中定义selected="selected"时，当前项为默认选中项,没有selected默认显示第一个

textarea文本域元素

当用户输入内容较多的情况下，就不能使用文本框表单了，可以使用< textarea>标签
< textarea>可看做是放大版的文本框
包含在< form>< /form>中
cols=“每行中的字符树”，rows=“显示的行数”（并不是所有行数，超过显示行数后会自动加上滚动条），在实际开发中不会使用，用CSS来改变大小

语法

<textarea rows="3" cols="20">
    这里显示默认文本内容，且会显示于标签间的空格
</textarea>

< label>标签

< label>标签用于绑定一个表单元素，当点击< label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
基本语法结构

标签的for属性应当于相关元素的id属性相同

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

HTML学习笔记

文章目录

关于网页网站

网站

网页

关系

关于HTML

超文本超在哪？

关于浏览器

浏览器内核(渲染引擎)含义：

常见浏览器及其内核。

关于Web标准

web标准作用

构成

关于标签

基本语法（标签的使用）

HTML基本结构

常用标签

标题标签

段落和换行标签

文本格式化标签

div和span标签

图像标签和路径

图像标签

目录文件夹和根目录

相对路径

绝对路径

超链接标签

语法格式

链接分类

注释和特殊字符的表示

注释

特殊字符

表格标签

基本语法

表头单元格标签< th>

表格属性

表格标签结构

合并单元格

列表标签

无序列表

有序列表

自定义列表

列表总结

表单标签

表单域

表单元素

input输入表单元素

< select>下拉表单元素

textarea文本域元素

< label>标签