HTML笔记（基础知识学习）
- web标准
主要包括结构( Structure )、表现 ( Presentation )和行为( Behavior )三个方面。
结构：用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为：是指网页模型的定义及交互的编写，现阶段主要学的是Javascript - Web标准提出的最佳体验方案:结构、样式、行为相分离。
简单理解︰结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。 - 标签关系
1.包含关系
2.并列关系
HTML页面（文档）的基本结构
<html> //根标签，开始和结束的位置。
<head> //提供文档的描述信息
<title> Title here </title> //页面的标题，显示在浏览器标题栏中
</head>
<body>
Web page content here //文档的主体，显示的内容
</body>
</html>
- VScode生成骨架标签
<！DOCTYPE>文档类型声明标签，告诉浏览器使用哪种HTML版本来显示标签
lang 语言种类en定义语言为英语 zh-CN定于语言为中文
字符集通过标签的charset属性来规定HTML应该使用哪种字符来编码，charset字符集常用的值有：GB 2312,BLG 5,GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。 - 标题标签《h1》~《h6》
标签语义：作为标题使用，并且根据重要性递减。
特点：
1.增加了标题语句的文字会变的加粗，字号也会依次变大。
2.一个标题独占一行。
在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词 paragraph [paerograef]的缩写，意为段落。
<br /> break 打断，换行 //单标签
文本格式化标签
<strong>或者<b>加粗
<em>或者<i> 倾斜
<del>或者<s> 删除
<ins>或者<u> 下划线
容器标签<div>块级元素 <span>行内元素
| 属性 | 属性值 | 说明 |
|---|
| src | 图片路径 | 必须属性 | | alt | 文本 | 替换文本，图像不能显示的文字 | | title | 文本 | 图标放到图片上显示的文字 | | width | 像素 | 显示图片的宽度 | | height | 像素 | 显示图片的高度 | | border | 像素 | 显示图片的边框粗细 |
属性采用键值对的方式 key=“value”，属性=“属性值”。
目录文件夹∶就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。
根目录:打开目录文件夹的第一层就是根目录
相对路径：图片相对于HTML的位置。
同一级路径： <img src= “图片名称” />·
下一级路径：/ <img src =”文件名+图片名称” / >
上一级路径：../ <img src =”../图片名称” />
绝对路径∶是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径.。
例如“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”
链接的语法格式
1. 外部链接:例如< a href="http:// www.baidu.com ">百度</a>.
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
Href
用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能
target
用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。
2．内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可，例如
<a href="index.html">首页</a>。
3. 空连接
4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.
●在链接文本的href属性中.设置属性值为
.如<a href= "#two">第2集</a>
●找到目标位置标签,里面添加一-个id属性=刚才的名字
. 如: <h3 id="two" >第2集介绍</h3>
注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
HTML中的注释以"<1--" 开头,以"-->”结束. <!--注释语句--> 快捷键: ctrl + /
5.2特殊字符
在HTML页面中,一些特殊的符号很难或者不方便直接使用 ,此时我们就可以使用下面的字符来替代。
| 特殊字符 | 描述 | 字符的代码 |
|---|
| 空格符 |   | | < | 小于号 | &It | | > | 大于号 | > |
- 表格标签
表格的主要作用：表格主要用于显示、展示数据,因为它可以人让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
总结：表格不是用来布局界面的，是用来展示数据的。
<table> //定义表格的标签
<tr> //定义表格中的行，必须再<table>中使用
<td>单元格内的文字</td> //定义表中的单元格，必须在<table>中使用
</tr>
</table>
- 表格结构标签
使用场景:因为表格可能很长为了更好的表示表格的语义。可以将表格分割成表格头部和表格主体两大部分，
在表格标签中,分别用:《thead》标签表格的头部区域《tbody》标签表格的主体区域这样可以更好的分清表格结构。
合并单元格方式:
●跨行合并: rowspan= "合并单元格的个数”
●跨列合并: colspan=“合并单元格的个数”
目标单元格: (写合并代码)
●跨行:最上侧单元格为目标单元格,写合并代码
●跨列:最左侧单元格为目标单元格,写合并代码
无序列表（重点)
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
无序列表的基本语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ul>中只能放<li>标签。 <li>相当于一个容器，可以随便放。
有序列表（理解)
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。
自定义列表（重点)
自定义列表的使用场景:
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在HTML标签中，<dl>标签用于定义描述列表(或定义列表），该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
- 表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素)和提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。
<form>会把它范围内的表单元素信息提交给服务器
<form action="ur1地址” method="提交方式” name="表单域名称">各种表单元素控件
</form>
常用属性:
| 属性 | 属性值 | 作用 |
|---|
| Action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 | | Method | get/post | 用于设置表单数据的提交方式，其取值为get或post. | | Name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域。 |
- 《input》表单元素
在英文单词中，input是输入的意思，而在表单元素中标签用于收集用户信息。
在标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type=”属性值”/>
| 属性 | 属性值 | 描述 |
|---|
| Name | 由用户自定义 | 定义input元素的名称。 | | Value | 由用户自定义 | 规定input元素的值。 | | Checked | checked | 规定此input元素首次加载时应当被选中。 | | Maxlength | 正整数 | 规定输入字段中的字符的最大长度。 |
name 和value是每个表单元素都有的属性值主要给后台人员使用
name 表单元素的名字要求单选按钮和复选框要有相同的name值
type.属性的属性值及其描述如下:
| 属性值 | 描述 |
|---|
| Button | 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本) . | | Checkbox | 定义复选框。 | | File | 定义输入字段和“浏览"按钮，供文件.上传。 | | Hidden | 定义隐藏的输入字段。 | | Image | 定义图像形式的提交按钮。 | | Password | 定义密码字段。该字段中的字符被掩码。 | | Radio | 定义单选按钮。 | | Reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 | | Submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 | | Text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。 |
<label>标签为input元素定义标注(标签).
<label>标签用于绑定一个表单元素 当点击<label>标签内的文本时,浏览器就会自动将焦点(光标转到或者选摔对应的表单元素上用来增加用户体验.
<label for="sex">男</label>
<input type "radio" name a "sex" id-"sex" />
核心: <label>标签的for属性应当与相关元素的id属性相同。
<select> 表单元素
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表.
1. <select>中至少包含- -对<option> .
2.在<option>中定义selected= " selected"时,当前项即为默认选中项。
<textarea>表单元素（文本域）
使用场景:当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小
有三个名字非常相似的标签
(1)表单域form使用场景: 提交区域内表单元素给后台服务器
(2)文件域file 是input type属性值使用场景:上传文件
(3)文本域textarea 使用场景: 可以输入多行文字，比如留言板网站介绍等…
|