HTML学习笔记
标记语言：HTML、xml，通过不同的标签使浏览器快速的识别语言中对应位置脚本语言：shell、SQL、PHP、Perl、Python
编译语言：java、C、C++
HTML超文本标记语言，前端页面的开发语言
前端开发（UI），主要做页面的设计、页面排版
超文本标记语言HTML：除了可以记录文字以外，还可以记录图片、音频、视频、链接等等的文字要素
普通文本只能记录文字
Hbuilder：html的开发工具，用来编写html文件的工具
VScode
CSS（层叠样式）：存放一些页面渲染（字体样式、颜色、大小等等）的配置文件
img：放置该web项目可能使用的图片等媒体信息
js（Javascript的简称）：一种直译式的脚本语言，网页上的一些动态的元素通常是使用js脚本进行执行展示的
index.html：index计算机术语介绍的网址
<!DOCTYPE html>
‘！’这是一个标签，doctype标签；
‘doctype’：声明文件的类型：这是一个HTML文件
<html>：html的开始标签
</html>：html的结束标签
<head>：html内容的头部的开始标签;
</head>：html内容的头部的结束标签
<body>:html内容的体部的开始标签
</body>：html内容的体部的结束标签
<meta charset="utf-8"/>：mata声明标签，标签里面所带的叫做属性，charset=utf-8是该标签的属性，声明当前整个html文件的源码格式是utf-8；
<title></title>：标题标签的开始和结束
head标签：html的头部标签，它的作用是定义或声明体部的格式或者整个html文件的信息
body标签：整个网页的所有元素都是在body标签中进行定义的
我们在网页所看到的内容是在body标签中定义的
html文件的基本格式：
1、后缀是以.html结尾的
2、html的基本结构由三部分组成html、head、body组成
3、标签一般都是成对出现的，因为一般编辑的内容都是在标签的开始和结束之间进行编辑
4、也有一些标签不是成对出现的，单独的标签更多是用来引用文件、声明格式、声明属性使用
hbuider的一些快捷键
Ctrl+s：保存
Ctrl+r：执行脚本
Ctrl+z：撤销操作--返回上次
Ctrl+/：注释
兄弟级标签--同级标签
父级标签--相对于当前标签的上一级标签
需要注意的是：HTML（等的标记语言）是存在层级关系的
层级以外的标签是没有关系的
*标题标签最多6个层级
p代表段落标签，无论输入多少个空格，在web页面上只会显示一个空格
一个 表示一个空格
strong和b标签都是表示加粗标签
br ：为换行标签
<p><b>我是一个加粗段落</b></p>：先声明段落，再声明在段落里面的内容进行加粗
<b><p>我也是一个加粗段落</p></b>：通过b标签对整个段落进行加粗
*em和i都是表示斜体标签
<em>我是一个斜体</em>
<i>我也是一个斜体</i>
*font是字体属性标签，在标签里面加的东西叫做标签的属性，不同的标签的相同名称的属性；
※标签的属性只能在开始标签中增加
<font（空格唤出）color="aquamarine">我是一个有颜色的句子</font>
*img图片标签--单标签，在src后面接引用的图片，
alt属性可以使鼠标移动到图片之后显示对应的文字（不过谷歌浏览器不支持alt属性，支持title属性）
*在一个标签中进行换行是可以的，浏览器识别是按照一队<>进行识别
width属性：设置图片的宽使用
height属性：设置图片的高使用
1、引用本地图片，通过相对路径的方法进行引用
<img src="../img/QQ图片20200908201517.png" title="百度一下，你就傻" width="200" height="200" />
2、引用网络图片
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="270" height="200" title="百度秒懂"/>
a标签--链接标签，用于定义页面可以跳转的链接
1、默认的a标签，点击之后是直接覆盖当前页面
2、在a标签中添加target属性，可以打开一个新的页面
*死链接----<a href="#">我是一个死链接</a>
li--列表标签
h3--有序列表
有序列表标签中，可以通过type属性修改显示的序号类型默认为数字编号
a表示显示为小写字母，A表示显示为大写字母
i表示显示为小写的罗马字母，I表示显示为大写的罗马数字
<h3>有序列表</h3>
<ol type="a">小写英文字母列表
<ol type="I">大写的罗马字母
<h3>无序列表</h3>
<ul>默认是圆点标签
<ul stype="list-style-type:none;"><h4>无标识列表</h4></ul>
<ul stype="list-style-type:square;"><h4>正方形标识列表</h4></ul>
<ul stype="list-style-type:circle;"><h4>圆圈识列表</h4></ul>
表格标签
表格标签的基本格式：
<table border="" cellspacing="" cellpadding="">
<tr> <th> Header</th > </tr>
<tr> <td > Data </td > </tr>
<th> 元素中的文本通常呈现为粗体并且居中。
<td> 元素中的文本通常是普通的左对齐文本。
表格标签：主要由行与列组成。tr代表行，td代表列border: 边距
cellspacing: 单元格与单元格的距离
cell padding: 单元格与内容之间的距离
align= "center": 表格居中
align= "left": 表格靠左
align= "right": 表格靠右
width: 加宽
height: 加高
colspan属性表示当前列进行合并操作
rowspan属性表示当前单元格往下进行合并操作
td标签中的align属性为center，可以让单元格的内容进行居中
7) 快速生成表格标签：
示例：快速生成3行2列的快捷键table >tr*3 >td*2按住tab键
8) 表格跨行和表格跨列
col span="'': 合并几列 rowspan= 11 11: 合并几行
输入“table”按enter键，默认出来一个代码表
包含着一对table标签，里面包含着两对tr标签（行标签）
其中第一对tr标签中的th标签（表头标签）
第二对tr标签中包含着td标签（普通的列标签）
table标签的开始标签中默认的属性，border属性表示表格的边框粗细，cellspacing属性表示表格和表格之间的距离，cellpadding属性表示表格边框和表格内容的距离
表单标签
<form action="https://www.baidu.com/" method="post"></form>
from表单 action属性表示这个表单的数据最终需要提交的接口地址
method属性表示数据提交的方式，一般使用post方式进行提交
<input type="text" name="" id="" value="" />
input输入标签
tpye属性定义输入框的类型
<input type="text" name="" id="" value="" />
常见的输入框类型有text
<input type="password" name="" id="" value="" />
password类型输入框
<input type="radio" name="sex" id="" value="" />
radio类型表示单选框
<input type="radio" name="sex" id="" value="" checked="" />
两个以上的radio类型的单选框，对name属性设置为同一个值，可以防止单选变多选的bug
*设置“默认选择”，可以加checked属性
<input type="checkbox" name="sex" id="" value="" checked="" />
checkbox类型表示复选框
<input type="file" name="sex" id="" value="" />
file类型表示上传文件
<textarea name="" rows="10" cols="50">默认输入的内容</textarea>
textarea标签--文本输入框
<select name="">
<option value="">请选择你要就读的学校</option>
<option value="">广州dcs</option>
<option value="">上海dcs</option>
<option value="">深圳dcs</option>
</select>
select下拉选择框标签
在select标签中的option选项标签里value属性有助于进行元素的定位
input标签的3种按钮
<input type="button" name="" id="" value="百度一下" />
<input type="reset" name="" id="" value="重置按钮" />
<input type="submit" name="" id="" value="提交" />
button类型表示按钮，一般结合着JS脚本使用
reset类型表示重置，会对该from表单的内容进行重置
submit类型表示提交，对该form表单的内容进行提交
页:
[1]