html基础学习笔记

最新推荐文章于 2024-08-04 20:38:28 发布

从头学编程

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量179

点赞数 1

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_40971244/article/details/118607880

版权

前言

无论从事什么职业，做笔记一定是不能少的，做好笔记也是一个必要的技能，接下来我将会积累我自学编程的中学习到的一些笔记。笔记中有一些来自b站”饭饭大神“的笔记和黑马程序员的视频知识点截图。笔记有待完善中，希望多多谅解。

一、HTML简介

认识HTML

HTML(Hyper Text Markup Language):超文本标记语言，因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制），它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

HTML骨架格式

<!--  <!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。-->
<!DOCTYPE html>
<!-- lang指定该html标签内容所用的语言,enen 定义语言为英语 zh-CN定义语言为中文 -->
<html lang="en">
<!-- 头部 -->
<head>
    <!-- 字符集(Character set)是多个字符的集合,
    计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
    最常用的是UTF-8 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 主体，也就是浏览器看到的内容 -->
<body>

</body>

</html>

二、HTML常见标签

为什么要使用标签呢？
1、方便代码的阅读和维护，样式丢失的时候能让页面呈现清晰的结构。
2、有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
3、方便其他设备解析，如盲人阅读器根据语义渲染网页
注意：HTML最重要的是要理解其中标签的含义，也就是说这个标签可以实现什么功能。

网页排版用的标签

标题标签h(h1~h6)，最为标题使用，h1-h6逐渐字体逐渐变小，同时字体是加粗的。
段落标签p,可以把 HTML 文档分割为若干段落，实现了文章分段的操作。
水平线标签hr
换行标签br，标签后面的内容另外起一行显示。
div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。
两者区别是：div可以理解为一个大盒子，一个div占一行，而span为一个小盒子，一行中可以有很多个span标签。

改变格式用的标签

b和strong 文字以粗体显示
i和em 文字以斜体显示
s和del 文字以加删除线显示
u和ins 文字以加下划线显示

图像标签（img）

在这里插入图片描述

注意：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
采取键值对的格式 key=“value” 的格式

<img src="cz.jpg" width="300" height="300" border="4" title="我爱你，你爱我" />

链接标签(重点)

在这里插入图片描述

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

src 和 href 的区别：
1、src 是引入资源的 href 是跳转url的。
2、src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
注意：

当href中使用外部链接时需要添加 http:// www.baidu.com
内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位：通过创建锚点链接，用户能够快速定位到目标内容。

使用相应的id名标注跳转目标的位置。 (找目标)
  <h3 id="two">第2集</h3> 

使用<a href="#id名">链接文本</a>创建链接文本（被点击的） 
  <a href="#two">

绝对路径和相对路径

在这里插入图片描述

特殊字符

最常用的是空格符、大于号和小于号，想在网页中出现左边的字符，在代码里输入字符右边对应的代码即可显示。
在这里插入图片描述

三、HTML中表格标签

使用场景和用途

现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。

表格标签基本使用

在这里插入图片描述

注意：

table用于定义一个表格标签。 tr标签用于定义表格中的行，必须嵌套在 table标签中。 td
用于定义表格中的单元格，必须嵌套在标签中。
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。
td像一个容器，可以容纳所有的元素。

表头单元格标签th:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签替代相应的单元格标签即可。
在这里插入图片描述

表格属性

在这里插入图片描述

合并单元格

在这里插入图片描述

总结表格

在这里插入图片描述

二级标题表格

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注，这样更好的分清表格结构。

注意：
1.thead：用于定义表格的头部。用来放标题之类的东西。内部必须拥有标签！
2. tbody：用于定义表格的主体。放数据本体。
3. tfoot：放表格的脚注之类。
4. 以上标签都是放到table标签中。

四、HTML中列表标签

列表

容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。
列表最大的特点就是整齐、整洁、有序，跟表格类似，但是它可组合自由度会更高
列表分类：
在这里插入图片描述

无序列表ul

在这里插入图片描述

有序列表ol

在这里插入图片描述

自定义列表dl

在这里插入图片描述

五、HTML表单标签

表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
在这里插入图片描述
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input表单控件

<input type="属性值" value="你好">

常用属性：
在这里插入图片描述

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置
name表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。
checked属性：表示默认选中状态。较常见于单选按钮和复选按钮。

label标签

在这里插入图片描述

textarea标签

在这里插入图片描述

文本框和文本域区别

在这里插入图片描述

select下拉列表标签

在这里插入图片描述

结束语

html基础学习笔记到此结束啦，主要是一些标签的学习，理解每一个标签的用法就行，不需要死记硬背，还有多去实践才能更快的掌握其中知识点。下一次准备学习css了。在之后学习中会继续补全html的内容，上面只是总结了html最为常用、重要的知识点。
如果文章有错，欢迎大佬指正谢谢！

如果你觉得这篇内容对你挺有有帮助的话：

点赞支持下吧，让更多的人也能看到这篇内容
喜欢就关注我吧，定期为你推送学习笔记。
感谢您们的支持，我会更加努力学习的，加油！

从头学编程

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础学习笔记

HTML基础学习笔记前言一、HTML简介认识HTMLHTML骨架格式二、HTML常见标签网页排版用的标签改变格式用的标签图像标签（img）链接标签(重点)绝对路径和相对路径特殊字符三、HTML中表格标签使用场景和用途表格标签基本使用表格属性合并单元格总结表格二级标题表格四、HTML中列表标签列表无序列表ul有序列表ol自定义列表dl五、HTML表单标签表单input表单控件label标签textarea标签文本框和文本域区别select下拉列表标签结束语前言无论从事什么职业，做笔记一定是不能少的，做好笔
复制链接

扫一扫