一、什么是前端
一个软件通常情况下是由后端+前端完成 ，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格式化标签
加粗标签：
<strong>加粗</strong>
<b>加粗</b>
倾斜标签：
<em>倾斜</em>
<i> 倾斜</i>
删除线标签：
<del>删除线</del>
<s>删除线</s>
下划线标签：
<ins>下划线</ins>
<u>下划线</u>
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没有独占一行，是个小盒子
五、HTML中的特殊标签
空格：
小于号：
⁢
大于号：
>
按位与：
&
版权归原作者 卡戎-caryon 所有， 如有侵权，请联系我们删除。