2021.7.16 学习内容
HTML指的是超文本标记语言 (Hyper Text Markup Language)。是制作超级文本文档的简单标记语言,可以从一个平台移植到另一个平台,通常用于制作网页。
一.HTML标签规范:
1.所有HTML的标签都必须包括在<>(尖括号),例如:<html>;
2.大部分情况下标签都是成对出现的;
例如:<html></html>
3.<>为开始标签,</>为结束标签;
4.成对出现的标签称为双标签;
5.也有部分单标签,例如:<br />
6.HTML标签名,类名,标签属性和大部分属性值统一用小写;
标签关系:
双标签关系可以分为两类:包含关系和并列关系
包含关系(一个标签包含另外一个标签)又称为“父子关系”:
<head>
<title></title>
</head>
并列关系又称为“兄弟关系”:
<head></head>
<body></body>
二.HTML基本结构标签
自己尝试写了第一个html页面:
三.开发工具
四、HTML常用标签
2021.7.17学习内容
图像标签
图像标签路径
前期铺垫知识:
1.目录文件夹和根目录
目录文件夹:就是普通文件夹,里面存放了素材;
根目录:打开目录文件夹的第一层就是根目录。
2.用vscode打开目标文件夹
直接在vscode中点击打开文件夹选项
路径分为相对路径和绝对路径:
1.相对路径
相对路径:以引用文件相对位置为参考基础,而建立出的目标路径。
简单来说:就是图片相对于html页面的相对位置。
2.绝对路径
绝对路径:是指目录下的绝对位置,直接达到目标位置,通常是从盘符开始的路径。
例如:"D:\..\..\" 或者完整的网络地址路径:"http:/www..."
链接标签:
在HTML标签中,<a>标签用于定义超链接标签,用于从一个页面链接到另外一个页面。
1.链接的语法格式:
2.链接分类:
各种链接的实例语法格式:
HTML中的注释和特殊字符
注释:如果需要在HTML文档中添加一些便于理解和阅读但又不需要显示在页面中的注释文字,就需要使用注释标签。
HTML中的注释以" <!-- 开头 ",以 " --> "结束。
注释标签是不会执行也不会显示在页面中的,是程序员写代码时方便进行添加注释使用。
快捷键: ctrl + /
特殊字符:在HTML中,一些特殊的符号很难或者不方便直接使用,此时我们可以用特殊字符替代。
表格
表格的主要作用:表格主要用于显示,展示数据,可读性非常好,可以处理很多杂乱的数据。
表格的基本语法:
表头单元格标签:
表格属性:
表格结构标签:
使用场景:因为表格可能会很长,为了更好地表示表格的语义,可以将表格分割为表格头部和表格主体两大部分。
在表格标签中,分别用:<thead>标签表示表格的头部区域,<thbody>标签表示表格的主体区域。
合并单元格:
合并单元格的方式:
跨行合并: rowspan=“合并单元格的个数”
跨列合并: colspan="合并单元格的个数“
目标单元格(写合并代码):
跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格,写合并代码
合并单元格三部曲:
1.先确定是跨行合并还是跨列合并;
2.找到目标单元格,写上合并方式=合并单元格数量;
3.删除多余的单元格。
列表标签
表格是用来显示数据的,那么列表就是用来布局的。
列表最大的特点就是整齐,整洁,有序,它作为布局更加自由和方便。
列表分为三部分,分别为无序列表,有序列表,和自定义列表。
无序列表
注意: 无序列表中的各个列表之间没有顺序级别之分,是并列的。
有序列表
自定义列表
自定义列表常用于对术语或者名词进行解释和描述,定义列表的列前没有任何项目符号。
自定义列表使用具体实例
表单标签
使用表单的目的就是为了收集用户信息。
在HTML中,一个完整的表单通常由表单域,表单控件(也称表单元素)和提示信息3个部分组成。
表单域
表单域是一个包含表单元素的区域。
在HTML中,<form>标签用于定义表单域,以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器。
表单控件(表单元素)
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
<input>表单元素
input就是输入的意思,而在表单元素中,<input>标签用于收集用户信息。
注意:
1.name和value是每个表单元素都有的属性值,主要给后台人员使用;
2.name表单元素的名字,要求单选按钮和复选框要具有相同的name值。
3.checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就可以默认选中某个表单元素。
4.maxlength是用户可以在表单元素输入的最大字符数,一般很少使用。
<label>标签
<label>标签为input元素定义标注(标签)。
<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
Select下拉表单元素
使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表。
注意:
1.<select>中至少包含一对<option>;
2.<option>中定义selected=”selected”时,当前项即为默认选中项。
textarea表单元素
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。
在表单元素中,<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
综合案例