目录
概论
何为HTML,CSS?
HTML是超文本标记语言，而CSS为HTML提供了一种样式描述，二者都是做网站的编程语言，浏览器把代码解析后的样子就是网站。
注：一个网站由N个网页组成，每个网页都是一个.html文件。
本人基于vscode编辑器学习，前期以chrome浏览器（占据市场份额大，运用范围广）为基础针对学习。
如何理解HTML,CSS,JS三者的关系？
在我的理解中，html语言负责搭建结构，css负责对结构进行样式美化，js负责行为交互，这三者是前端开发的三大核心技术。
网站开发的分工
UI设计师：设计稿→代码的实现
web前端开发工程师（H5开发）
web后端开发工程师（数据库）
HTML入门
HTML的基础结构与属性
HTML: 超文本 、标记 、 语言 以下逐一解读：
超文本：文本内容＋非文本内容（图片、视频、音频）
标记：也可以叫做标签，大体上可以分为单标签与双标签 特别注意：标签可以上下排列，也可以组合嵌套
一般形式：
< 单词 > <单词></单词>标签属性：修饰标签的一些功能，其形式大致如下：
<标签 属性1 = "值1" 属性2 = "值2">语言：编程语言
HTML初始代码
初始代码是每个.html文件都有的代码，目的是符合HTML的规范写法
可以使用:!+Tab快捷键创建初始代码，代码形式如下：
<!DOCTYPE html><!--文档声明//-->
<html lang="en"><!--html文件的最外层标签,包裹着所有html标签-->
<head>
<meta charset="UTF-8"><!--元信息：编写网页中的一些赋值信息-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我是一个网页的标题</title><!--设置网页的标题-->
</head>
<body>
hello world<!-- 显示网页内容 -->
</body>
</html>HTML注释
<!--内容-->意义：1.把暂时不用的代码注释起来，方便日后使用
2.对开发人员进行提示
注释快捷键：1.ctrl＋/ 整行注释 2.shift+alt+a 创建注释符
HTML语义化
根据网页中内容的结构，选择合适的HTML标签进行编写
好处：1.在没有CSS的情况下，页面也能呈现出很好的内容结构
2.有利于SEO,让搜索引擎爬虫更好地理解网页内容
3.方便其他设备解析（如：屏幕阅读器、盲人阅读器）
4.便于团队维护和开发
标题与段落
区别于title，标题在这里是一个双标签，形式如下：
<h1>大家好，我是小明</h1>
<h2>或许你会好奇我是谁，让我来告诉你吧</h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p>我叫李子明，我爱喝旺仔牛奶!</p>h1是最重要的一个标题，并且一个.html文件中只能出现一个h1标签，但h2-h6可以重复出现多次。
注意：h5与h6标签在网页中不经常使用
P标签：段落标签，同样为双标签。
上述代码在网页中可以实现为：
文本修饰标签
<strong>表示强调，是一个双标签，可以达到字体加粗的效果
<em>也表示强调，但与<strong>相比稍弱，同样为一个双标签，可以达到斜体的效果
<sub>、<sup>下标文本、上标文本
<del>、<ins>删除文本、插入文本：一般情况下这二者是搭配使用的
以下是代码块与效果展示：
<p>
<strong>这句话需要强调</strong>
<em>这句话也需要强调，但强调性稍弱</em>
</p>
<p>
a <sup>2</sup>+b <sup>3</sup>=c<sup>4</sup>
H <sub>2</sub>O
</p>
<p>
促销：原价 <del>300</del>，现价 <ins>100</ins>
</p>
图片标签与图片属性
img:图片，是一个单标签
src:引入图片的地址
alt：当图片出现问题时，可以提示一段友好的文字
title：提示信息
width、height:控制图片的大小，单位是像素
<p>
<img src="这里填入图片的地址" alt="图片出现问题时显示的文字"title="提示信息"width="数值大小"height="数值大小">
</p>引入文件的路径地址
相对路径：.在路径中表示当前路径 ..在路径中表示上一级路径
在使用相对路径时，一定要注意图片的存储地址！图片离.html文件越近，相对地址越简单
对于相对路径，可以观察文件的存储位置确定路径关系，文件路径既可以使用反斜线\，也可以使用斜线/，注意：网络地址只能写斜线/，所以我们尽量避免写反斜线\
绝对路径：无参照物，是绝对的路径地址
<body>
<!--<img src="./Untitled-1.html" alt="">-->
<!--<img src="../Untitled-1.html" alt="">-->
<img src="E:/img/liziming.jpg" alt="">
</body>相关知识点代码示例如上
跳转链接
在这里我们引入两个重要标签，分别是<a>标签与<base>标签，知识点如下：
<a>标签是一个双标签，主要的作用是实现链接的功能
在<a>标签中有两个重要属性：href属性：链接的地址
target属性：可以改变链接打开的方式
练习代码如下：
<a href="http://www.baidu.com"target="_blank">访问百度</a>
<a href="点击图片后想要跳转的目标地址">
<img src="图片地址" alt="">如上所示，我们可以知道，链接不仅可以针对字符，还可以针对图片。
注意：target属性一般默认为_self，意义是在当前页面打开，通过改变为_blank可以实现在新窗口打开
<base>标签是
一个单标签，可以改变<a>标签的默认行为，通常嵌套在<head>中，例子如下：
<head>
<!--<meta charset="UTF-8">-->
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge"-->>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>-->
<base target="_blank">
</head>合理使用<base>标签，可以大幅提高工作效率
跳转锚点
锚点的实现是基于<a>标签，所以<a>标签的使用一定要掌握好
通过使用锚点，可以实现页面内的快速跳转
实现方法一：#号 id属性 代码如下
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
<h2 id="html">HTML超文本标记语言</h2>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<h2 id="css">CSS层叠样式表</h2>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<h2 id="js">js脚本</h2>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>实现方法二： #号 name属性 代码如下：
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<a name="css"></a>
<h2>CSS层叠样式表</h2>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<a name="js"></a>
<h2>js脚本</h2>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>
<p>这是一段文字，模拟段落</p>特殊符号
当我们尝试编写一些文本时，有时会出现一些输入法无法输入的字符，如注册商标号等；又或者是我们在一段文字中尝试加入多个空格时，页面并不会解析这些空格。这些字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码：
现在我们做一点应用的实际例子：
<p>
<html>
</p>
<p>
hello world
</p>在浏览器中会显示成这样：
<html>
hello worldHTML中的列表
无序列表
列表是一种常见的展示形式，在这里我们先来认识无序列表
无序列表涉及两个重要标签，分别是<ul>,<li>，分别指列表的最外层容器，列表项
二者必须组合出现！
通过type属性可以改变标签的样式（一般由css控制)
相关的样式设置可以参考HTML <ul> 标签的 type 属性
特别注意：两个标签中间不可以插入别的标签，但是<li>内部可以有其他标签
知识点代码如下：
<!--以下是正确的写法
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>-->
<!--以下是错误的写法：
<ul>
<p>
<li></li>
</p>
</ul>-->
<ul type="circle">
<li><a href="#"><strong>大家好</strong></a></li>
<li><a href="#">我叫小明</a></li>
<li><a href="#">今年五岁半</a></li>
<li><a href="#">我来自中国</a></li>
<li><a href="#">很高兴认识你们</a></li>
</ul>页面效果如下：
有序列表
在有序列表这里我们引入<ol>,<li>两个标签，代表的意义参考无序列表的<ul>,<li>，二者意义相同
相关规则参考无序列表，这里不过多赘述，直接上代码和实际效果
样式设置可以参考HTML <ol> 标签
注：有序列表用的较少，且无序列表可以代替有序列表，样式同样可以通过css控制
<ol>
<li><a href="#"><strong>大家好</strong></a></li>
<li><a href="#">我叫小明</a></li>
<li><a href="#">今年五岁半</a></li>
<li><a href="#">我来自中国</a></li>
<li><a href="#">很高兴认识你们</a></li>
</ol>
定义列表
当列表项需要添加标题以及对标题进行解释时引入
<dl>:定义列表，类似<ul><ol>
<dt>:定义专有名词或者术语
<dd>:对名词进行解释和描述
代码和效果如下：
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>js</dt>
<dd>网页脚本语言</dd>
</dl>
嵌套列表
列表之间可以互相嵌套形成多层级列表，下面引入相关操作代码：
<ul>
<li>
江苏省
<ul>
<li>南京市</li>
<li>扬州市</li>
<li>苏州市</li>
</ul>
</li>
<li>
山东省
<ul>
<li>烟台市</li>
<li>青岛市</li>
<li>烟台市</li>
</ul>
</li>
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>江苏省</dt>
<dd>南京市</dd>
<dd>扬州市</dd>
<dd>苏州市</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>烟台市</dd>
<dd>青岛市</dd>
<dd>烟台市</dd>
</dl>
</dd>
</dl>
</ul>效果展示如下：
表格与表单
表格标签
在表格便签这里，我们引入以下几个标签：
<table>:最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
除此外还有三个语义化标签：
<tHead>,<tBody>,<tFoot>
注意：语义化标签只代表规范化，不具备效果！
下面我们来展示相关知识点代码以及效果图：
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年6月21日</td>
<td>晴朗</td><!--可以通过img标签直接插入图片-->
<td>适合出行</td>
</tr>
<tr>
<td>2022年6月22日</td>
<td>小雨</td><!--可以通过img标签直接插入图片-->
<td>出门请带伞</td>
</tr>
</tBody>
<tFoot>
<!--也是tr,td的语句-->
</tFoot>
</table>
表格属性
表格属性通常有以下几种：
border:表格边框
<cellpedding>：单元格内的空间
<cellspacing>：单元格之间的空间
<rowspan>：合并行
<colspan>：合并列
<align>：左右对齐方式：left,right,center
<valign>：上下对齐方式：top,middle,bottom
表单标签
在表单标签这一块，我们先介绍两个比较重要的标签
<form>标签：表单最外层容器
<input>标签：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，比如输入框、密码框、复选框等
下面来介绍几个不同的type属性：
text：普通的文本输入框
password:密码输入框
checkbox:复选框
radio：单选框
file:上传文件
submit：提交按钮
reset：重置按钮下面直接上代码和效果展示：
<form action="提交的地址">
<h2>输入框：</h2>
<input type="text">
<h2>密码框</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
了解完上述两个重要标签后，我们来了解下面三个标签
<textarea>：多行文本框
<select>,<option>：这是一对组合标签，起到下拉菜单的作用
<label>：辅助表单
话不多说，直接上代码和效果图：
<h2>多行文本框</h2>
<textarea name="" id="" cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select name="" id="">
<option selected disabled>请选择</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">苏州</option>
<option value="">南京</option>
</select>
这里有几个属性可以让我们的代码更加精细：
checked:选定
selected:设置默认选项
disabled：锁定，使选项不能选择
size：可以设置显示项数，默认值为1
multiple：设置多选
当然，还有更多的属性，这里不一一例举。
表格表单组合使用
表格表单互相组合形成数据展示效果，在写的时候我们注意，表格有嵌套规范，表单没有，所以再正常情况下我们优先写表单，实战如下：
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr>
<td rowspan="4">总体信息</td>>
<td colspan="2">用户注册</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td colspan="4">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>效果如下：
在我学习的过程中，我在这部分遇到了一点问题，如果我把代码中的一部分改为
<tr>
<td rowspan="4">总体信息</td>>
</tr>
<tr>
<td colspan="2">用户注册</td>
</tr>显示效果就会变为：
这是由于另起的tr会另外计算一行，所以实际上这里有五行，“总体信息”只能占四行
div标签与span标签
<div>表示一个“块”，有划分区域的作用，相当于一块区域容器，可以容纳各类网页元素，即HTML中大多数标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割为独立的部分，以此实现网页的规划与布局。
<span>是一个“内联”，用于修饰文字。
注意：<div>，<span>没有任何默认样式，需配合CSS使用
<body>
<div>这是一个块</div>
<span>这是一个内联</span>
</body>截至到这里，HTML的基础部分到此结束，CSS部分由于篇幅关系会开一篇新的日志记录！
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
