【前端】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格式化标签
加粗标签： <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表示默认被选中
- option标签
- textarea标签
文本框 - 无语义标签
无语义没有固定的用途，拿着这个标签啥都能干- div是独占一行的，是一个大盒子
- span没有独占一行，是个小盒子
五、HTML中的特殊标签
空格：
小于号：⁢
大于号：>
按位与：&
原文地址：https://blog.csdn.net/2301_80258336/article/details/142415142
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！