HTML基础学习笔记
前言
无论从事什么职业,做笔记一定是不能少的,做好笔记也是一个必要的技能,接下来我将会积累我自学编程的中学习到的一些笔记。笔记中有一些来自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最为常用、重要的知识点。
如果文章有错,欢迎大佬指正谢谢!
如果你觉得这篇内容对你挺有有帮助的话:
- 点赞支持下吧,让更多的人也能看到这篇内容
- 喜欢就关注我吧,定期为你推送学习笔记。
- 感谢您们的支持,我会更加努力学习的,加油!