一篇文章让你从HTML零基础入门前端开发

前言：

此文为玄子，复习ACCP-S1课程后，整理的文章，文中对知识点的解释仅为个人理解。

配套PPT，站点源码，等学习资料

一、了解 HTML5

1.1 HTML 简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

1.2 HTML 发展史

1.2.1 HTML1.0

超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）

1.2.2 HTML 2.0

1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

1.2.3 HTML 3.2

1997年1月14日，W3C推荐标准

1.2.4 HTML 4.0

1997年12月18日，W3C推荐标准

1.2.5 HTML 5.0

2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成

1.3 HTML5 的优势

解决了跨浏览器问题
化繁为简
- 简化的DOCTYPE
- 强大的HTML5 API
- 以浏览器原生能力替代复杂的JavaScript代码
跨平台
- 支持多种类型设备的跨平台适用性，减少了开发人员的工作量
功能强大，新增特性
- 支持本地存储、离线缓存、地理位置等
- 新增实用标签
- 支持绘制图形
- 支持播放视频和音频

1.4 W3C 标准

W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- W3C官网
- W3C中文官网
W3C标准包括
- 结构化标准语言（XHTML 、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript ）

1.5 常见 HTML 编辑器

记事本
Dreamweaver
WebStorm
- WebStorm 是 Jetbrains (捷克)公司旗下一款 JavaScript 开发工具。被广大中国 JS 开发者誉为“Web前端开发神器”！
- “最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
VSCode

1.6 安装 WebStorm

WebStorm 是最专业的的前端开发工具，但是由于版权原因这里不过多介绍。

WebStorm 官网

详细安装教程请加文章封面联系方式

二、HTML 基础

2.1 网页基本标签

<!DOCTYPE html>
<!--告诉浏览器使用规范-->
<html lang="en">
<head><!--    网页头部--><meta charset="UTF-8"><!--    描述性标签一般用来做seo--><title>网页基本标签</title><!--    网页标题-->
</head>
<body>
<!--网页主体-->
Change The Word!
</body>
</html>

标签	名称	说明
`<!DOCTYPE html>`	文档类型声明	告诉浏览器使用规范
`<html></html>`	网页标签	标签位于HTML文档的最前面，用于标识HTML文档的开始和结尾
`<head></head>`	头部标签	用于定义HTML文档的头部，描述文档属性，包含一些辅助标签例如`<title>、<link>、<script>`
`<title></title>`	网页标题	用来定义网页的标题名称
`<meta>`	描述性标签	一般用来做SEO
`<body></body>`	主体标题	用于定义HTML文档的主体内容

HTML文档中的标签通常是成对出现，以<>开始，</>结束，也有部分标签不是成对出现，如<br>、<img>等等

2.2 基础标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--标题标签-->
<hr>
<!--换行标签-->
<p>山园小梅·其一[ 宋 ] 林逋原文 译文对照众芳摇落独暄妍，占尽风情向小园。疏影横斜水清浅，暗香浮动月黄昏。霜禽欲下先偷眼，粉蝶如知合断魂。幸有微吟可相狎，不须檀板共金尊。</p>
<!--段落标签-->
<hr>
<p>山园小梅·其一 <br>[ 宋 ] 林逋<br>原文 译文对照<br>众芳摇落独暄妍，占尽风情向小园。<br>疏影横斜水清浅，暗香浮动月黄昏。<br>霜禽欲下先偷眼，粉蝶如知合断魂。<br>幸有微吟可相狎，不须檀板共金尊。</p>
<!--换行标签-->
<hr>
<p>山园小梅·其一</p>
<p> [ 宋 ] 林逋</p>
<p> 原文 译文对照</p>
<p> 众芳摇落独暄妍，占尽风情向小园。</p><p> 疏影横斜水清浅，暗香浮动月黄昏。</p><p> 霜禽欲下先偷眼，粉蝶如知合断魂。</p><p> 幸有微吟可相狎，不须檀板共金尊。</p>
<hr>
<strong>粗体</strong>
<!--粗体标签-->
<br>
<em>斜体</em>
<!--斜体标签-->
<br>
<strong><em>加粗斜体</em></strong>
<!--样式标签可以嵌套使用-->
<hr>
<p>空 格</p>
<p>空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
<!--特殊标签：空格要熟记-->
<p>大于号：> &gt;</p>
<p>小于号：< &lt;</p>
<p>分号："" &quot;&quot;</p>
<p>版权符号：&copy;</p>
<!--特殊符号不需要死记，用到百度即可-->
</body>
</html>

2.3 图像标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图像标签</title>
</head>
<body>
<img alt="替换文本" height="500px" src="../../resources/image/玄子头像.png" title="标题" width="500px">
<img alt="替换文本" height="500" src="../resources/玄子头像.png" title="标题" width="500">
<!--src：图像索引路径，可以写相对路径或绝对路径../：表示回退到上级目录，回退上两级目录就写两遍，然后指定路径下的文件alt：图片无法显示时的替换文字title：鼠标悬浮到图像时显示文字width：图像宽度默认像素pxheight：图像高度默认像素px
-->
</body>
</html>

2.4 链接标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title>
</head>
<body>
<a href="" name="xz">顶部</a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题">点击在新窗口打开03</a>
<br>
<a href="03_图像标签.html" target="_self" title="标题">点击在本窗口打开03</a>
<!--href：跳转页面索引target：跳转方式_blank：新页面打开链接_self：此页面打开链接title：鼠标悬浮到图像时显示文字
-->
<hr>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"src="../../resources/image/玄子头像.png" title="标题"width="500px"></a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"src="../../resources/image/玄子头像.png" title="标题"width="500px"></a>
<br>
<a href="03_图像标签.html" target="_blank" title="标题"><img alt="替换文本" height="500px"src="../../resources/image/玄子头像.png" title="标题"width="500px"></a>
<!--图像超链接直接在a标签中包含一个图像标签即可
-->
<br>
<hr>
<a href="#xz">点击跳转到顶部</a>
<!--锚链接：需要一个标记点和跳转点标记点声明：name 属性并赋值跳转点：href 属性 跳转 name 声明的标记点，name 值前面要加上 #-->
<br>
<a href="mailto:y766706944@163.com">点击邮箱联系</a>
<!--功能链接-->
</body>
</html>

2.5 行内元素&块元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>行内元素&块元素</title>
</head>
<body>
<!--行内元素-->
<a href="#">a标签</a>
<a href="#">a标签</a>
<img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px">
<img alt="" height="20px" src="../../resources/image/玄子头像.png" width="20px"><hr>
<!--块元素-->
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>p标签</p>
<p>p标签</p>
</body>
</html>

2.6 列表标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表标签</title>
</head>
<body>
<!--有序列表-->
<!--应用范围：试卷，排序-->
<ol><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li>
</ol>
<hr>
<!--无序列表-->
<!--应用范围：导航，侧边栏-->
<ul><li>JAVA</li><li>HTML</li><li>CSS</li><li>SQL</li>
</ul>
<hr>
<!--定义列表-->
<!--应用范围：网站底部导航栏-->
<dl><dt>开发</dt><dd>JAVA</dd><dd>HTML</dd><dd>CSS</dd><dd>SQL</dd>
</dl>
</body>
</html>

2.7 表格标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签</title>
</head>
<body>
<table border="1px"><!--    border：边框尺寸--><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<!--table:表格标签tr：行标签td：列标签
-->
<hr>
<table border="1px"><tr><td colspan="3">学生成绩</td><!--        跨列--></tr><tr><td rowspan="2">玄子</td><!--        跨行--><td>JAVA</td><td>100</td></tr><tr><td>HTML</td><td>99</td></tr><tr><td rowspan="2">玉玉诏</td><!--        跨行--><td>JAVA</td><td>90</td></tr><tr><td>HTML</td><td>80</td></tr>
</table>
</body>
</html>

2.8 音视频标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音视频标签</title>
</head>
<body>
<!--视频标签-->
<video autoplay controls src="../../resources/video/G.E.M.邓紫棋-GLORIA.mp4"></video>
<!--音频标签-->
<audio autoplay controls src="../../resources/audio/G.E.M.邓紫棋-天空没有极限.flac"></audio>
<!--autoplay:自动播放controls：音视频控件
-->
</body>
</html>

2.9 网页基本结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页基本结构</title>
</head>
<body>
<header><h1>网页头部</h1>
</header>
<section><h1>网页主体</h1>
</section>
<footer><h1>网页底部</h1>
</footer>
<!--header：标题头部区域的内容（用于页面或页面中的一块区域）footer：标记脚部区域的内容（用于整个页面或页面的一块区域）section：Web页面中的一块独立区域article：独立的文章内容aside：相关内容或应用（常用于侧边栏）nav：导航类辅助内容
-->
</body>
</html>

2.10 内联标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联标签</title>
</head>
<body>
<iframe frameborder="1" height="500px" name="xz" src="01_网页基本标签.html" width="500px"></iframe>
<!--frame border：内联框架边框尺寸name：标记名称
-->
<br>
<a href="02_基础标签.html" target="xz">点击跳转02</a>
<!--可以配合 a 标签的 target 属性改变内联框架跳转网页-->
<br>
<a href="03_图像标签.html" target="xz">点击跳转03</a>
</body>
</html>

2.11 表单标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签</title>
</head>
<body>
<form action="11_表单标签.html" method="get"><!--action：数据提交位置method：数据提交方式get：提交数据url栏可见post：提交数据url栏不可见--><p>用户名：<input name="admin" type="text"></p><!--    text：文本框 想要传递值需要设置 name 属性--><p>密&nbsp;&nbsp;码：<input name="pwd" type="password"></p><!--  password：密码框--><p>按钮：<input type="button" value="按钮"><!--  可通过设置value属性改变提示文字--><input height="40px" name="img" src="../../resources/image/玄子头像.png" type="image" width="40px"><input type="submit"><input type="reset"><!--input type="button"   普通按钮input type="image"    图像按钮input type="submit"   提交按钮input type="reset"    重置按钮--></p><p>性别：<input checked id="1" name="sex" type="radio" value="boy">男<!--        checked：默认选中--><!--        name值要保持一致才能单选--><label for="0"><input id="0" name="sex" type="radio" value="girl">女</label><!--label：标签提高鼠标交互性--></p><p>爱好：<input name="hobby" type="checkbox" value="Java">Java<input checked name="hobby" type="checkbox" value="HTMl">HTMl<!--        checked：默认选中--><input name="hobby" type="checkbox" value="CSS">CSS<input name="hobby" type="checkbox" value="SQL">SQL<!--        name值要保持一致--></p><p>提交文件：<input name="fill" type="file"></p><p>邮箱：<input name="email" type="email"></p><p>URL：<input name="url" type="url"></p><p>数字：<input max="100" min="0" name="num" step="5" type="number" value="0"></p><p>滑块：<input max="100" min="0" name="range" step="10" type="range" value="50"></p><!--max：允许最大值min：允许最小值step：步进长度value：默认初始值
--><p>搜索：<input name="search" type="search"></p><p>地区：<select name="select"><option value="hn">河南</option><option value="hb">河北</option><option selected value="hn">湖南</option><!--           selected：默认选中 --><option value="hb">湖北</option></select></p><p>反馈：<textarea cols="20" name="txt" rows="4"></textarea><!--cols：单宽rows：行高单位字符--></p><hr><p>表单应用</p><p>只读：<input name="readonly" readonly type="text" value="你好！"><!--        只能看，不能修改内容--></p><p>禁用：<input disabled name="disabled" type="reset" value="按钮"><!--        禁用此标签，不可使用--></p><p>隐藏：<input hidden name="hidden" type="text" value="你好！"><!--        隐藏标签但是可以设置默认值提交，用户看不到--></p><hr><p>表单初级验证</p><p>必填：<input name="required" required type="text"><!--        文本必填，否则无法提交--></p><p>提示：<input name="placeholder" placeholder="请输入账号！" type="text"><!--        文本框内的浅色提示文字，提醒用户输入内容--></p><p>正则：<input name="pattern" pattern="/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/" type="text"><!--       pattern：正则表达式，用到百度 --></p>
</form></body>
</html>

2.12 HTML总结

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML总结</title>
</head>
<body>
<a href="">点击跳转CSDN博客</a>
</body>
</html>

三、CSS 基础

3.1 链接 CSS 的三种方式

h2 {color: green;/*样式名称*/ /*值*/}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS基础</title><style>h1 {color: red;}</style><!--    style：内部样式，只对当前页面生效--><link rel="stylesheet" href="../css/01_Style.css"><!--    link：链接式外部导入CSS样式-->
</head>
<body>
<!--样式的生效顺序：就近原则-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3 style="color:yellow;">三级标签</h3>
<!--直接写在标签内：只对当前标签生效-->
</body>
</html>

3.2 基本选择器

/*标签选择器*/
/*语法：直接写想要生效的标签名称就会对页面中所有的对应标签生效
*/
h1 {color: red;
}
/*类选择器*/
/*语法：以英文字符 .  点开头后面写名称可以自定义
*/
.xz{
color:green;
}
/*ID选择器*/
/*语法：以  #  符号开头，后面写名称可以自定义
*/
#yz{
color:yellow;
}
/*---------------------------------------------*/
h3{color:pink;
}
#zz{color:blue;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本选择器</title><link rel="stylesheet" href="../css/02_Style.css">
</head>
<body>
<h1>一级标签</h1>
<h1>一级标签</h1>
<!--标签选择器：只要是对应的标签就会生效
-->
<h2 id="yz">二级标签</h2>
<!--ID选择器:只要使用了ID选择器就会生效ID选择器一个页面只能使用一次
-->
<h2 class="xz">二级标签</h2>
<!--类选择器：只要使用了类选择器就会生效类选择器一个页面可以无限使用
-->
<h2>二级标签</h2>
<hr>
<h3>三级标签</h3>
<h3 class="xz">三级标签</h3>
<h3 id="zz" class="xz">三级标签</h3>
<!--优先级：ID选择器 > 类选择器 > 标签选择器-->
</body>
</html>

玄子2022年12月22日

已经更CSS《一篇文章让你从HTML零基础入门前端开发》12.22相关推荐

一期完结《一篇文章让你从HTML零基础入门前端开发》12.28
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRcXH9FM-1672214813897)(./assets/%E7%8E%84%E5%AD%90Shaer-%E4% ...
一篇文章让你从JAVA零基础入门`OOP`编程12.19
一篇文章让你从JAVA零基础入门OOP编程前言: 此文为玄子,复习ACCP-S1课程后,整理的文章,文中对知识点的解释仅为个人理解. 配套PPT,站点源码,等学习资料一.预科 1.1 JAVA 介 ...
一篇文章让你从JAVA零基础入门`OOP`编程12.20
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(QQ_3336392096.png)] 一篇文章让你从JAVA零基础入门OOP编程前言: 此文为玄子,复习ACCP-S1课程后, ...
一期完结《一篇文章让你从JAVA零基础入门`OOP`编程》12.21
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(QQ_3336392096.jpg)] 一篇文章让你从JAVA零基础入门OOP编程前言: 此文为玄子,复习ACCP-S1课程后, ...
一篇文章读懂什么是CAP(基础入门)
[辰兮要努力]:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端.后台.数据 ...
零基础学前端开发技术之第七章浮动塌陷
知识点: 1.浮动塌陷的概念 2.浮动塌陷的解决 1:浮动塌陷的概念 <!DOCTYPE html> <html><head><meta charset=&q ...
HTML完结《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.24
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(QQ_3336392096.jpg)] 一篇文章让你从HTML零基础入门前端开发前言: 此文为玄子,复习ACCP-S1课程后,整 ...
日常更新《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.23
一篇文章让你从HTML零基础入门前端开发前言: 此文为玄子,复习ACCP-S1课程后,整理的文章,文中对知识点的解释仅为个人理解,源码均可直接复制运行配套PPT,站点源码,等学习资料请加文章封面联 ...
零基础入门深度学习 | 第二章：线性单元和梯度下降
北京 | 高性能计算之GPU CUDA课程11月24-26日3天密集学习快速带你晋级阅读全文> 无论即将到来的是大数据时代还是人工智能时代,亦或是传统行业使用人工智能在云上处理大数据的时代,作 ...
python怎么输出浮点数_python 零基础入门教程第 2 章：基本数据类型 (一)
一.什么是数据类型编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...

已经更CSS《一篇文章让你从HTML零基础入门前端开发》12.22