一、简介
1、前端最核心技术
HTML (犹如骨架,毛坯房)
CSS(装潢,把页面渲染更好看)二
二、基础内容
1.基础总结
1.内核划分
谷歌 火狐 ie 360浏览器 苹果浏览器 欧朋浏览器等等这些浏览器分别对应不同内核,
![](https://img-blog.csdnimg.cn/img_convert/18c57a065478242ad91d4ed38635ce84.png)
想让其浏览器识别css代码,需要使用其对应前缀
2.HTML前世今生
HTML (Hyper Text Markup Language) 超文本标记语言,标签
不是编程语言
标记 图片 文本 超链接 视频 音频 属于HTML
我们通过使用html标签,来让浏览器解析成我们想让用户看到的网页
1995年 HTML2.0 ---HTML4.0(规范 标签需要严格遵循规则)--HTML5(包容度会更高
例如: 少一个/ 浏览器依然能够正常的解析,大小写不分。我们html5也能包容,在浏览器
解析的时候 会把你解析成正常的标签)
是谁制定了HTML标准?W3C (World Wide Web Consortium万维网联盟)
XHTML 早期有人想取代HTML5,为什么?
有人觉得XHTML 更加的规范,但是由于有很多人已经都在使用HTML5,这时候再把准备改了,
会导致很多的网页报错,权衡利弊之后就没有改了,就一直使用HTML5。
3.编辑工具
Vscode
轻量级,主流,你需要什么插件,就用什么插件,不强制,免费,早期是微软给C#这个编程软件用
Dreamweaver
可以拖拽 不用写代码(粗糙了chatGPT 淘汰了一大批的文职岗位
文案 你好 帮我写一个婚礼策划书 使用代码 代码容易 看不懂 不太维护)
Ui工程师 用ps画出高保真的图
Webstorm
一度成为 web工程师的标配软件,缺点:收费 启动太慢(里面有很多插件 会跟着启动)
配置太多
Idei 收费 一年一年 知识付费
Txt 高手用 没有任何提示 纯手写
HBuilder 用来混合开发app使用 可以生成 APP(安卓,ios)
2.HTML基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个HTML页面</title>
</head>
<body>
<p>body元素的内容会显示在浏览器中。</p>
<p>title元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
html
<html>定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。
head
标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签之前。文档的头部经常会包含一些 <meta> 标签,用来告诉浏览器关于文档的附加信息。
title
<head>
<meta charset="UTF-8">
<title>我的第一个HTML页面</title>
</head>
1.可定义文档的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.当把文档加入用户的收藏夹或书签列表时,标题将成为该文档的默认名称。
4.title写和你网页相关的关键词有利于SEO优化。
meta
元素可提供有关页面的元信息(meta-information),用来向浏览器或搜索引擎描述页面,比如文档的描述和关键词,它只可以放在head中,属于元信息标签。
常见的meta有:
keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么
<meta name="keywords" content="我要学前端"> |
description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
<meta name="description" content="小猪"> |
服务器发送文件类型,在HTML5中被精简为了以下代码:
<meta charset="UTF-8"> |
一个完整的网页,分三部分:结构、样式、行为。而我们学习的html主要用来写页面的结构,css用来写页面的样式,javascript规定行为。
body
body 元素定义文档的主体,所有用户可直接看到的元素都在这里。
HTML基础语法 代码详解
<!-- 规范声明 声明要遵循w3c组织的标准 -->
<!DOCTYPE html>
<!-- html把所有内容都包裹了 叫根标签
标签一般情况下是成对出现 <html lang="en">开放标签 </html>闭合标签
没有闭合标签的元素叫自闭合标签 例如:<meta charset="UTF-8" />
xhtml 规范更加严谨 现在遵循的表示html5 所以包容度比较高 可以不加/
标签上是存在 属性和属性值 属性(lang)=“属性值(en)”
lang 语言 en 英文 表示咱们的这个html文档使用的是英文 zh-CN zh表示html文档使用的是中文
lang="en"的网页 页面上会出现 一个让你翻译成中文的提示 想让提示消失 可以直接删除lang="en" 或者改成zh-CN zh
-->
<html lang="en">
<!-- 头部 头部的内容是不会显示在页面的上 -->
<!-- meta(媒体标签)title(tab页的标题)style(内部css样式)link(引入外部的css样式)script(写js的标签) -->
<head>
<!-- charset字符集(把各个国家的语言能让浏览器识别出来 展示出各个国家的语言) UTF-8(包括全世界的所有字符集)
别的字符集:GBK2312(识别中文 认识的字符不够全面)-->
<meta charset="UTF-8">
<!-- name="keywords" 关键字标签 比如:在搜索引擎中搜索的那个关键字 -->
<!-- seo 网站的搜索的排名 一般情况下是花钱 找百度竞价 提高网站搜索出来的优先级 -->
<meta name="keywords" content="动力节点">
<!-- name="description" 是网站的详细描述信息 会出现在没有广告的网址下面-->
<meta name="description" content="动力节点 是IT培训的黄埔军校">
<!-- title标签的内容 显示在tab页的头部 -->
<title>MY HOME</title>
<!--
1.可定义文档的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.当把文档加入用户的收藏夹或书签列表时,标题将成为该文档的默认名称。
4.title写和你网页相关的关键词有利于SEO优化。
-->
</head>
<!-- 主体部分 -->
<!-- 作者:张三 时间:2023年3月9号 功能:认识HTML文档-->
<!-- 注释 shift+alt+a(不管使用html代码 还是css代码 最后还是js代码 单行注释或多行注释 都可以使用这个快捷键 ) -->
<!-- 帮助我们认识代码 会显得特别的清晰 方便维护 产品经理要改需求 方便很多-->
<!-- 暂时用不到的代码可以注释起来 方便需要的时候再解开注释(选中代码 shift+alt+a 解开注释) 使用 可以提高效率 -->
<!-- shift+alt+a 多行注释 -->
<!-- ctrl+/ 单行注释 -->
<body>
我的第一个网页
</body>
</html>
HTML常用标签
HTML标签分为2种,一种是“一般标签”,另外一种是“自闭合标签”。一般标签有开始符号和结束符号,自闭合标签只有开始符号没有结束符号。
<br>换行标签
自闭和标签
<hr>水平线标签
自闭和标签
<h1>-<h6>标题标签
语义化标题,h1-h6标签利于seo(搜索引擎优化---网站的排名靠前)
<p>段落标签
语义化表示段落 用于新闻的正文。
<pre>标签
表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。
※块元素和行内元素
HTML元素根据浏览器表现形式分为两类:①块元素;②行内元素;
块元素特点:
独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;
块元素内部可以容纳其他块元素或行元素;
※常见块元素有:h1~h6、p、hr、div等。
行内元素特点:
可以与其他行内元素位于同一行;
行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果;
※常见行内元素有:strong、b、em、i、span 、u、sub、sup等。
HTML样式标签
em、i斜体标签
在语义化上 还有强调的意思 i斜体
在开发的过程中 span不带样式 可以换em标签来使用(css的方式把斜体样式去掉,当成一个普通标签来使用),em和i 在开发的过程中,常常被用来显示小图标。
u 下划线标签
行内元素
标签都是可以嵌套的,块元素里面包含行内块标签
<h1>
<u>一头猪</u>
</h1>
del标签
<del>标签 HTML 的<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。
sup、sub上标文本 和 下标文本
一般使用不多 如果有特殊的 平方的数学场景 可以使用 行内元素
![](https://img-blog.csdnimg.cn/img_convert/0c5690d63526a4ef558f06beec2bc847.png)
HTML其他标签
img标签和其他属性
<!-- width 设置图片的宽度 在web页面中使用像素单位(px)
height 设置图片的高度 -->
<!-- display:inline 表示行内样式 不会独占一行 不会换行 除非一行排列不下的情况
不可以设置宽高 宽高由里面的实际内容决定-->
<!-- img是特殊的行内样式 特殊在于可以设置宽和高 -->
<!-- title 属性是 当你的鼠标移动到图片上 会出现的提示文字 -->
<!-- width属性:设置图像的宽。如果只设置宽度属性,则高度会等比例缩放。
height属性:设置图像的高。如果只设置高度属性,则宽度会等比例缩放。
等比例缩放可以让图片不变形 显示的更加自然-->
<img src="./images/1.png" alt="" width="500px" height="350px" title="我爱你我的中国">我爱中国
a 超链接标签
跳转,语义化为超链接,可跳转
<-- 默认是target="_self" 在本页面内跳转 -->
<!-- target="_blank" 打开一个新的tab页进行跳转 -->
<!-- <a href="./success2.html" target="_blank">跳转到本地页面</a> -->
<!-- a链接还可以包裹别的标签进行跳转 比如img a链接可以嵌套标签来使用 -->
还可以使用锚点功能,例如跳转底部
<!-- 在本页面的A位置 点击a链接 跳转到了本页面的B位置 a链接的锚点功能
锚点 带#号的关键字-->
<!-- http://127.0.0.1:5500/07-%E8%AE%A4%E8%AF%86%E8%B6%85%E9%93%BE%E6%8E%A5a%E6%A0%87%E7%AD%BE.html#tips -->
<!-- 使用了锚点之后 链接就多了#tips -->
<!-- 第一步 设置锚点 -->
<a href="#tips">在本页面中找到豪车图片</a>
<a href="#bottom">找到底部</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 第二部 做一个锚点的标记 得使用name属性 name的值不需要加#号 需要和设置锚点的值相对应-->
<a name="tips">
<img src="https://pic.616pic.com/photoone/00/05/81/618e2652d1d1c1567.jpg" alt="" width="300px">
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 尽量使用块元素包裹行内元素 不要使用行内元素包裹块元素 -->
<h1>
<!-- 必须要是用a链接 -->
<a name="bottom">底部</a>
</h1>
span 标签
行内元素,用的最多的标签 语义化上 span表示强调的意思
开发者喜欢没有样式的标签,因为网页的样式多数需要自己来实现准确(这个无样式可以通过后面实现)
<span>我表示强调</span>
<span>我表示强调</span>
<span>我表示强调</span>
<span>我表示强调</span>
div 块元素
自带无样式,后期可添加
可定义文档中的分区或节,标签可以把文档分割为独立的、不同的部分,它可以作为元素的组织工具。
5.特效插件和内联标签
插件:power mode
内联标签Iframe标签引用
6.字符标签
空格 --->  
大于号、小于号 ---> >、<
引号
英镑
等等。。。
7.列表标签
分为三种:
无序标签(常用)ul li
有序标签ol li
定义列表dl dt dd
8.表格标签和属性
很久以前,没有移动互联网时,很多页面都是使用table表格布局来写的。
table 表格的容器display:table 表格元素
特点:自动对齐,会平均分布
构成:表格(行==>单元格 [组成了列])表头 表主体
table>thead>tbody>tr>th、td 都称为表格元素
table | 表格 |
thead | 表头 |
tbody | 主体 |
tr | 行 |
th和td | 都表示单元格(列),但th有加粗效果 |
9.特效插件和内联标签
插件:power mode
内联标签Iframe标签引用
10.字符标签
空格 --->  
大于号、小于号 ---> >、<
引号
英镑
等等。。。
11.列表标签
分为三种:
无序标签(常用)ul li
有序标签ol li
定义列表dl dt dd
12.表格标签和属性
很久以前,没有移动互联网时,很多页面都是使用table表格布局来写的。
table 表格的容器display:table 表格元素
特点:自动对齐,会平均分布
构成:表格(行==>单元格 [组成了列])表头 表主体
table>thead>tbody>tr>th、td 都称为表格元素
table | 表格 |
thead | 表头 |
tbody | 主体 |
tr | 行 |
th和td | 都表示单元格(列),但th有加粗效果 |
table表格属性设置:
borde
边框
属性设置会标红,因为html5不推荐
![](https://img-blog.csdnimg.cn/img_convert/e2bd0f56f8dc176534574785c0218191.png)
cellspacing
合并边框
cellpadding
设置单元格内间距
让单元格的宽度变宽
特点:设置一个宽度,整列的宽度都变宽了
![](https://img-blog.csdnimg.cn/img_convert/b717a57e1265c2fdba8041358c51c16a.png)
让单元格的高度变高
特点:设置一个高度,整行的高度都变高了
![](https://img-blog.csdnimg.cn/img_convert/b135929e9e0046ed69daab69ec23aaf0.png)
Tr单元格属性设置
在tr里面设置居中,只会影响当前行,如果想让整个内容(主体部分)都居中,就给tbody
![](https://img-blog.csdnimg.cn/img_convert/7a0da3734214352fe9d712b7fd00a7fc.png)
给当前行加一个标题 caption
![](https://img-blog.csdnimg.cn/img_convert/b30586d8bdc21923408ca95d9e586345.png)
13.简易版本表格
table 行tr 列td(单元格)
![](https://img-blog.csdnimg.cn/img_convert/6c51200008aced910c63ccb45a23faba.png)
![](https://img-blog.csdnimg.cn/img_convert/901cd6743e234d10ff9de77429ab8a34.png)
Chrome效果
![](https://img-blog.csdnimg.cn/img_convert/c80ad583ddf5755e431fbf2aac573a69.png)
注意:浏览器解析后会自动把以上内容放在tbody中
原因:xhtml(xml升级版【取代html5(不规范)】)是由xml(规范【写错一个标签就不行】)演变过来的, html5没有被取代是因为用的人太多了
总结:html5 具有较高的包容的和兼容性,比如大小写不分,在浏览器解析的时候,浏览器会帮你解析成正确的格式
14.单元格跨列跨行
1) colspan跨列
![](https://img-blog.csdnimg.cn/img_convert/fe4ac45125c302d862c1530a9b8c24f3.png)
Chrome效果:
![](https://img-blog.csdnimg.cn/img_convert/c0aaeea63866a9c373f56d9159fedfe8.png)
2) rowspan跨行
![](https://img-blog.csdnimg.cn/img_convert/cb055b047a6d341e0ab451c0afa9f31c.png)
Chrome效果
![](https://img-blog.csdnimg.cn/img_convert/0f354e135e3e680f812ee57d4a2e8402.png)
15.表单标签
一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。
表单标签form
![](https://img-blog.csdnimg.cn/img_convert/b7acb7f521b78f6aee7f41bc088ce0db.png)
表单标签集合
![](https://img-blog.csdnimg.cn/img_convert/fe1a7267ccaac8404033408842469252.png)
1) text文本框
![](https://img-blog.csdnimg.cn/img_convert/e499a058248a8933e77acc054ff8efdd.png)
其中value里面的值可以自定义
placeholder是一个提示,里面的内容不会被提交到后台
maxlength“字符的个数”,是限制用户所输入字符的最大个数
2) radio单选框
(lable的for和input的id相同)
![](https://img-blog.csdnimg.cn/img_convert/a45ee4c3ff807e0ae5b2b3c27147ed03.png)
单选默认选中效果: checked
![](https://img-blog.csdnimg.cn/img_convert/7bd22aeeece29f22930cc7bf0227724f.png)
我们会把Value的值发送给后台,比如和后台约定value等于1时表示男,等于2时表示女。
![](https://img-blog.csdnimg.cn/img_convert/3b497abfd0b4a598ff145e78cbd3a55a.png)
Chrome效果:
![](https://img-blog.csdnimg.cn/img_convert/b65366d4b8101a0f6e1f9bcd2f3c0ecc.png)
![](https://img-blog.csdnimg.cn/img_convert/b1da2c18b4c19d80478b0f836de49362.png)
3) checkbox复选框
特点:可以多选
4) file文件上传、文件域
默认不可以多选的,不过可加multiple属性支持多选文件
![](https://img-blog.csdnimg.cn/img_convert/8b8415cce9e6f7d5d0fe6a3a8b4d1bc1.png)
之前的文本框、密码框、单选框、复选框,实际上传给后台的是字符串
上传文件要设置action,加上enctype=“multipart/form-data”,才能把文件转成二进制
Method请求方式:(get、post)
form 没有设置method的情况下默认是method=“get”,是get请求
而设置post可以用来传输大文件、安全性强、数据加密。
![](https://img-blog.csdnimg.cn/img_convert/60ed147b572bf323d4500fd33789a7bd.png)
5) select下拉列表
option列表项
![](https://img-blog.csdnimg.cn/img_convert/bda4d051465d8d2f9c7a276b4e6f46b1.png)
默认选择:在option后加 selected
![](https://img-blog.csdnimg.cn/img_convert/2b7dd4c6eceeac6c9b292c7e9a01af74.png)
隐藏字段hidden
用户不可见,后台可见,是传输给后台的。
![](https://img-blog.csdnimg.cn/img_convert/1d7ed514d422929b6b46f7663dff64d1.png)
6) textarea文本域
使用场景:让用户输入意见等大量文字的场景。
![](https://img-blog.csdnimg.cn/img_convert/1803cb38b4ce9c06519504121edff6d5.png)
7) reset重置按钮
重置恢复为表单默认选择,按钮默认显示“重置”
更改显示值,更value的值就好了
![](https://img-blog.csdnimg.cn/img_convert/be92ba79166b8537bad53d277db50517.png)
8) submit提交按钮
9) image图片按钮
配合form的action做提交按钮用
![](https://img-blog.csdnimg.cn/img_convert/57b67997770a0453c1f32679423969c2.png)
前端x轴和y轴的方位
![](https://img-blog.csdnimg.cn/img_convert/0e78e60aeee1781c21f203f978537189.png)
10) 只读和禁用
readonly只读
disabled禁用
![](https://img-blog.csdnimg.cn/img_convert/98c3467d078bc6bb679ac898776bb924.png)
Submit按钮必须配合form表单使用