一、简介

1、前端最核心技术

HTML (犹如骨架，毛坯房)

CSS（装潢，把页面渲染更好看）二

二、基础内容

1.基础总结

1.内核划分

谷歌火狐 ie 360浏览器苹果浏览器欧朋浏览器等等这些浏览器分别对应不同内核，

想让其浏览器识别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用来告诉搜索引擎你网页的关键字是什么

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

服务器发送文件类型,在HTML5中被精简为了以下代码：

一个完整的网页，分三部分：结构、样式、行为。而我们学习的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上标文本和下标文本

一般使用不多如果有特殊的平方的数学场景可以使用行内元素

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.字符标签

空格 ---> &nbsp

大于号、小于号 ---> &gt、&lt

引号

英镑

等等。。。

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.字符标签

空格 ---> &nbsp

大于号、小于号 ---> &gt、&lt

引号

英镑

等等。。。

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不推荐

cellspacing

合并边框

cellpadding

设置单元格内间距

让单元格的宽度变宽

特点：设置一个宽度，整列的宽度都变宽了

让单元格的高度变高

特点：设置一个高度，整行的高度都变高了

Tr单元格属性设置

在tr里面设置居中，只会影响当前行，如果想让整个内容（主体部分）都居中，就给tbody

给当前行加一个标题 caption

13.简易版本表格

table 行tr 列td（单元格）

Chrome效果

注意：浏览器解析后会自动把以上内容放在tbody中

原因：xhtml（xml升级版【取代html5（不规范）】）是由xml（规范【写错一个标签就不行】）演变过来的， html5没有被取代是因为用的人太多了

总结：html5 具有较高的包容的和兼容性，比如大小写不分，在浏览器解析的时候，浏览器会帮你解析成正确的格式

14.单元格跨列跨行

1) colspan跨列

Chrome效果：

2) rowspan跨行

Chrome效果

15.表单标签

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。

表单标签form

表单标签集合

1) text文本框

其中value里面的值可以自定义

placeholder是一个提示，里面的内容不会被提交到后台

maxlength“字符的个数”，是限制用户所输入字符的最大个数

2) radio单选框

（lable的for和input的id相同）

单选默认选中效果: checked

我们会把Value的值发送给后台，比如和后台约定value等于1时表示男，等于2时表示女。

Chrome效果：

3) checkbox复选框

特点：可以多选

4) file文件上传、文件域

默认不可以多选的，不过可加multiple属性支持多选文件

之前的文本框、密码框、单选框、复选框，实际上传给后台的是字符串

上传文件要设置action，加上enctype=“multipart/form-data”,才能把文件转成二进制

Method请求方式：（get、post）

form 没有设置method的情况下默认是method=“get”，是get请求

而设置post可以用来传输大文件、安全性强、数据加密。

5) select下拉列表

option列表项

默认选择：在option后加 selected

隐藏字段hidden

用户不可见，后台可见，是传输给后台的。

6) textarea文本域

使用场景：让用户输入意见等大量文字的场景。

7) reset重置按钮

重置恢复为表单默认选择，按钮默认显示“重置”

更改显示值，更value的值就好了

8) submit提交按钮

9) image图片按钮

配合form的action做提交按钮用

前端x轴和y轴的方位

10) 只读和禁用

readonly只读

disabled禁用

Submit按钮必须配合form表单使用

HTML的入门与进阶学习相关推荐

机器学习入门到进阶学习路线
机器学习入门到进阶学习路线参考:https://mp.weixin.qq.com/s/f-v-NUW7pTbVF9Sa3A4qUA 1. 定义机器学习研究的是计算机怎样模拟人类的学习行为,以获取新 ...
一个python下从入门到进阶学习人工智能的网站
转一个利用python从入门到进阶学习人工智能的网站:https://www.captainai.net/st/ 门槛低,比较通俗易懂. 先粘一下前言部分: 大家好!欢迎来到我的网站! 人工智能被认为 ...
3D视觉从入门到进阶学习路线
01 什么是知识星球? 知识星球是一个高度活跃的社区平台,在这里你可以和相同研究方向的小伙伴一起探讨科研工作难题.交流最新领域进展.分享paper资料.发布高质量的求职就业信息,当然还可以侃侃而谈,吐 ...
机器学习入门到进阶学习路线图
作者: 龙心尘 && 寒小阳原文:http://blog.csdn.net/longxinchen_ml/article/details/50749614 http://blog.c ...
人工智能、机器学习、深度学习从入门到进阶学习资料整理
最近整理了下在这里分享给大家,欢迎大家点赞收藏. 学习社区神力AI(MANA):国内最大的AI代码平台. Learn AI:一个AI学习交流中心. AI研习社:一个专注于AI开发者和学术青年求知求职 ...
【推荐】机器学习入门到进阶学习路线图
作者: 龙心尘 && 寒小阳原文:http://blog.csdn.net/longxinchen_ml/article/details/50749614 http://blog.c ...
Unity新手入门与进阶学习书籍与教程推荐
读研的时候喜欢做游戏,最开始在诺基亚N9手机上开发过几款产品,有APP也有游戏.用的是Qt Quick,最先在N9上发布,之后又了解到黑莓的BB10系统,也可以用Qt Quick开发,所以就把几个产品 ...
Python数据分析入门--NumPy进阶学习笔记
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 NumPy 进阶操作 1.NumPy dtype 层次结构 2.NumPy 高阶数组操作 2.1数组的重塑 2.2数组 ...
UVM入门与进阶学习笔记16——sequencer和sequence（2）
目录 sequence的层次化 Hierarchical Sequence Virtual Sequence Layering Sequence sequence的层次化就水平复用而言,在MCDF各 ...

HTML的入门与进阶学习

一、简介

1、前端最核心技术

二、基础内容

1.基础总结

1.内核划分

2.HTML前世今生

3.编辑工具

2.HTML基础语法

html

head

title

meta

body

HTML基础语法 代码详解

HTML常用标签

<br>换行标签

<hr>水平线标签

<h1>-<h6>标题标签

<p>段落标签

<pre>标签

※块元素和行内元素

HTML样式标签

em、i斜体标签

u 下划线标签

del标签

sup、sub上标文本 和 下标文本

HTML其他标签

img标签和其他属性

a 超链接标签

span 标签

div 块元素