一篇文章让你从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
-
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 是最专业的的前端开发工具，但是由于版权原因这里不过多介绍。
详细安装教程请加文章封面联系方式
二、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>空 格</p>
<!--特殊标签：空格要熟记-->
<p>大于号：> ></p>
<p>小于号：< <</p>
<p>分号："" ""</p>
<p>版权符号：©</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：图像宽度默认像素px
height：图像高度默认像素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>密 码：<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日
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
