一、什么是前端
一个软件通常情况下是由后端+前端完成 ,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=“”,显示文字,搭配JSsubmit:提交按钮reset:清空控制框内容file:提交文件 lable标签
将元素进行关联
for:通过for属性里的内容进行关联select标签 option标签
value属性
selected表示默认被选中 textarea标签
文本框无语义标签
无语义没有固定的用途,拿着这个标签啥都能干 div是独占一行的,是一个大盒子span没有独占一行,是个小盒子
五、HTML中的特殊标签
空格:
小于号:⁢
大于号:>
按位与:&