【前端】01.HTML

一、什么是前端

一个软件通常情况下是由后端+前端完成，Web前端就是用来呈现给用户的一个一个的页面。
在我们生活中常见的前端页面：Web页面、PC端程序页面、移动端APP页面

二、什么是HTML页面

HTML是超文本标记语言
超文本： 文本、声音、图片、视频、表格、链接
标记： 由许许多多的标签组成
HTML页面是运行在浏览器上的

三、HTML标准界面

<html>
    <head>
        <title>这是一个标题</title>
    </head>
    <body>
        这是内容
    </body>
</html>

双标签：标签有开始有结束
单标签

我们可以看到其结构实际上是一个DOM树，所有的标签都是html的子标签，head和body是兄弟标签，head和title是父子标签，每个标签就相当于是一个对象，我们就可以通过代码拿到这些对象进行增删查改操作。

在VScode中!+回车可以快速生成基本框架

四、HTML标签

4.1 注释标签

Ctrl+/就能完成注释

4.2 标题标签

<h1> 这是一级标题</h1>
<h2> 这是二级标题</h2>
<h3> 这是三级标题</h3>
<h4> 这是四级标题</h4>
<h5> 这是五级标题</h5>
<h6> 这是六级标题</h6>

数字越大字体越小越细

4.3 段落标签

<p>这是一个段落</p>

4.4 换行标签

 <br/>

br标签是一个单标签。换行标签的间隙比段落标签的间隙小。

4.5格式化标签

加粗标签： 加粗 加粗
倾斜标签：倾斜  倾斜
删除线标签：<del>删除线</del> <s>删除线</s>
下划线标签：<ins>下划线</ins> 下划线

4.6 img标签

4.6.1 src属性

img标签必须搭配src使用（指定图片路径），相对路径/绝对路径

4.6.2 alt属性

alt后面的文案只有当图片加载出错时才会显示，加载成功这个文案就不会显示

4.6.3 title属性

鼠标放在图片上时显示title后面的文案

4.6.4 width/heigth属性

改变图片的像素大小，单位px

4.6.5 board属性

给图片加边框，单位px

4.7 a标签（超链接标签）

4.7.1 herf属性

跳转到指定链接，点击里面的文本或图片即可跳转

4.7.2 target属性

在新的页面打开指定链接。target打开方式默认时self，用blank则是用新的标签页打开

4.8 表格标签

table标签： 表示整个表格
tr标签： 表示表格的一行
td标签： 表示一个单元格
th标签： 表示表头单元格，会加粗居中
thead标签： 表格的表头区域，内容居中加粗
tbody标签： 格的主体区域

属性：
align：表格相对于周围元素的对齐方式，align=“center”（不是内部元素的对齐方式）
boeder：表示边框
cellpadding：内容距离边框的距离，默认为1px
cellspacing：单元格之间的距离，默认为2px
weith/hright：设置宽度/高度

rowspan：合并行单元格
colspan：合并列单元格

4.9 列表标签

4.9.1 无序列表

<ul>
	<li>这是内容1</li>
	<li>这是内容2</li>
</ul>

type属性：disc（实心圆）、square（实心块）、circle（空心圆）

4.9.2 有序列表

<ol>
	<li>这是有序列表1</li>
	<li>这是有序列表2</li>
</ol>

type属性：a（小写英文字母编号）、A（大写英文字母编号）、i（小写罗马数字）、I（大写的罗马数字）、1（数字）
start属性：从指定位置开始

4.9.3 自定义列表

<dl>
	<dt>
		<dd>自定义列表</dd>
	</dt>
</dl>

4.10 表单标签

用表单标签来完成服务器的一次交互

4.10.1 表单域标签

<form> </form>

action标签： +服务器地址

4.10.2 表单控件

input标签
通过对type取值不同完成控制input类型
type属性：
- text：文本框
- password：密码
- radio：选择框，name=“”，当name值一样时就变成单选框了，checked="checked"默认值
- checkbox：复选框
- button：普通的按钮，value=“”，显示文字，搭配JS
- submit：提交按钮
- reset：清空控制框内容
- file：提交文件
lable标签
将元素进行关联
for：通过for属性里的内容进行关联
select标签
- option标签
  value属性
  selected表示默认被选中
textarea标签
文本框
无语义标签
无语义没有固定的用途，拿着这个标签啥都能干
- div是独占一行的，是一个大盒子
- span没有独占一行，是个小盒子