一.HTML、CSS
1.1 什么是HTML、CSS
1.作为两种编程语言，是作为网站开发的基础语言
2.浏览器把代码解析后的样子就是我们看到的网站，如何看到网站原始代码，通过鼠标右键选择查看网页源代码
3.一个网站是由N多网页组成的，每一个网页都是.html文件
4.HTML：负责结构 CSS：样式
1.2 Web前端三大核心技术
1.HTML：结构
2.CSS：样式
3.JavaScript：行为
<style>
div{color: aqua;font-style: italic;}
</style>
<div>HTML+CSS系列教程</div>
<script>
let div = document.querySelector('div');
let timer = null;
let flag = true;
div.onmouseover = function(){
timer= setInterval(()=>{
if(flag){
div.style.color = 'blue';
div.style.fontStyle = 'normal';
}
else{
div.style.color = 'aqua';
div.style.fontStyle = 'italic';
}
flag = !flag;
},500);
};
div.onmouseout= function(){
clearInterval(timer);
};
</script>1.3 HTML基础结构与属性
1.HTML：超文本标记语言
1）超文本：文本内容+非文本内容（图片 视频 音频等）
2）标记（也叫做标签）：<单词> <header> <footer>
写法分成两种：单标签 <header> 双标签<header></header>
标签可以上下排列 也可以组合嵌套
<header><footer>hi</footer>hello</header>
<header>hello</header>
<footer>hi</footer>3）标签的属性：修饰标签的，设置当前标签的一些功能
<标签 属性="值" 属性2="值2">
<header title="hello"> hello world</header>
<footer title="hi">hi HTML</footer>1.3.1 HTML初始代码
1.每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的
<!DOCTYPE html> 文档声明：告诉浏览器这是一个HTML文件
<html lang="en"> lang="en"表示是一个英文网站 HTML文件的最外层标签：包裹着所有HTML标签
代码 lang="zh-CN"表示一个中文网站
<head>
<meta charset="UTF-8"> charset="UTF-8"国际编码，让网页不出现乱码的情况 元信息：是编
写网页中的一些赋值信息
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html> 1.3.2 HTML中的注释
1.注释的代码只有在文件中看到，但是浏览器显示不出来
<!--注释的内容-->
意义：
1）把暂时不用的代码注释起来，方便以后使用
2）对开发人员进行提示作用
1.3.3 HTML语义化
1.根据网页中内容的结构，选择适合的HTML标签进行编写
2.好处：
1）在没有CSS的情况下，页面也能呈现出很好的内容结构
2）有利于SEO，让搜索引擎爬虫更好的理解网页
3）方便其他设备解析
4）便于团队开发与维护
1.4 标题与段落
1.h标签实现标题：双标签：<h1></h1>...<h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中，只能出现一次h1标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
</body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</body>
</html>2.p标签实现段落：双标签<p></p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
</body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<p>这是一个段落</p>
</body>
</html>1.5 文本修饰标签
<strong></strong>：表示强调，会对文本进行加粗，双标签，强调性更强
<em></em>：表示强调，会对文本进行斜体
<sub></sub>：下标
<sup></sup>：上标
<del></del>：删除文本
<ins></ins>：插入文本
注意：一般情况下，删除文本和插入文本配合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<p>
<strong>这是一段需要强调的文本</strong>
<em>这是一段需要强调的文本</em>
</p>
<p>
a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> H<sub>2</sub>O
</p>
<p>
促销:原价<del>300</del>,现价<ins>100</ins>。
</p>
</body>
</html>1.6 图片标签与图片属性
1.图片标签：单标签，<img>
src:引入图片的地址
alt：当图片出现问题时，可以显示一段友好的文字
title：提示信息
width、height：图片的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<p>第一个段落</p>
<img src="https://img.alicdn.com/simba/img/TB1lUZLJVXXXXXtXFXXSutbFXXX.jpg"
alt=""title="这是一张图片信息"width="300"height="300">
<p>第二个段落</p>
</body>
</html>1.7 引入文件的地址路径
1.相对路径：
1）.在路径中表示当前路径
2）..在路径中表示上一级路径
2.绝对路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<!---<img src ="./字2.png"alt="">--->
<!---<img src ="./l/字2.png"alt="">--->
<!---<img src ="../l/字2.png"alt="">--->
<!---<img src ="C:/l/字2.png"alt="">--->
<!---尽量避免写反斜线--->
<img src ="C:\l\字2.png"alt="">
</body>
</html>1.8 跳转链接
<a></a>标签：双标签
href属性：链接的地址
target属性：可以改变链接打开方式，默认情况下：在当前页打开_self 新窗口打开_blank
<base>标签：单标签：改变链接默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
<base target="_blank">
</head>
<body>
<!--<a href="http://www.baidu.com">访问百度</a>
<a href="http://qfedu.com">
<img src="./l/字2.png" alt="">
</a>-->
<!--<a href="http://www.baidu.com"target="_blank">访问百度</a>-->
<a href="http://www.baidu.com">访问百度</a>
</body>
</html1.9 跳转锚点
实现一：#号 id属性
实现二：#号 name属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<!--<a href="#html">HTML</a>
<a href="#CSS">CSS</a>
<a href="#JavaScript">JavaScript</a>
<h2 id="html">HTML超文本编辑语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="CSS">CSS层叠样式表</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<h2 id="JavaScript">JavaScript脚本</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>-->
<a href="#html">HTML</a>
<a href="#CSS">CSS</a>
<a href="#JavaScript">JavaScript</a>
<a name="html"></a>
<h2>HTML超文本编辑语言</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<a name="CSS"></a>
<h2>CSS层叠样式表</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<a name="JavaScript"></a>
<h2>JavaScript脚本</h2>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
<p>模拟的段落</p>
</body>
</html> 1.10 特殊符号
空格符：
版权：©
注册商标：®
小于号：<
大于号：>
和号：&
人民币：¥
摄氏度：°
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<p>
<html>
</p>
<p>
hello world
</p>
</body>
</html> 二.列表标签
2.1 无序列表
1.<ul>、<li>符合嵌套的规范
2.type属性：改变前面标记的样式（一般都是用CSS去控制）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<!--<ul type="circle">
<li>第一项</li>
<li>第二项</li>
</ul>-->
<ul>
<li>
<a href="#"><strong><em>hello</strong></em></a>
</li>
<li>
<a href="">aaa</a>
</li>
<li>
<a href="">bbb</a>
</li>
<li>
<a href="">ccc</a>
</li>
<li>
<a href="">ddd</a>
</li>
</ul>
</body>
</html> 2.2 有序列表
1.<ol>、<li>符合嵌套的规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<ol>
<li><a href=""><style>div{color: aqua;};</style><div>最伟大的作品</div></a></li>
<li><a href=""><style>div{color: aqua;};</style><div>她说</div></a></li>
<li><a href=""><style>div{color:aqua;};</style><div>万千</div></a></li>
</ol>
</body>
</html> 2.3 定义列表
1.<dl>：定义列表
2.<dt>：定义专业术语或名词
3.<dd>：对名词进行解释和描述
注意：运用于列表项添加标题和对标题进行描述的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠式样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
</body>
</html> 2.4 嵌套列表
1.列表之间可以相互嵌套形成多层级列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<!--<ul>
<li>
辽宁省
<ul>
<li>
沈阳
<ul>
<li>...</li>
</ul>
</li>
<li>大连</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
</ul>
</li>
</ul>-->
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>辽宁省</dt>
<dd>沈阳</dd>
<dd>大连</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>济南</dd>
<dd>青岛</dd>
</dl>
</dd>
<dt>美国</dt>
<dd> 洛杉矶</dd>
<dd>纽约</dd>
</dl>
</body>
</html> 2.5 表格标签
1.<table>：表格的最外层容器
2.<tr>：定义表格行
3.<th>：定义表头
4.<td>：定义表格单元
5.<caption>：定义表格标题
语义化标签：<tHead> <tBody> <tFood>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2019.1.19</td>
<td><img src="链接的练习\images\IMG_5195(20220302-111839).JPG" alt=""></a></td>
<td>适合出行</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
</body>
</html> 2.6 表格属性
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<!--<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2019.1.19</td>
<td><img src="链接的练习\images\IMG_5195(20220302-111839).JPG" alt=""></a></td>
<td>适合出行</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>-->
<table border="1"cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tHead>
<tr align="right">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr valign="top">
<td rowspan="2">2019.1.19</td>
<td>白天</td>
<td><img src="链接的练习\images\IMG_5195(20220302-111839).JPG" alt=""></a></td>
<td>适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="链接的练习\images\IMG_5195(20220302-111839).JPG" alt=""></a></td>
<td>适合出行</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
</body>
</html> 2.7 表单标签
<form>：表单最外层容器
<input>：单标签，标签用于搜集用户信息，根据不同的type属性值，展示不同控件，如输入框，密码框，复选框
1.text：普通的文本输入框
2.password：密码输入框
3.checkbox：复选框
4.radio：单选框
5.file：上传文件
6.submit：提交按钮
7.reset：重置按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<form>
<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>
</body>
</html> 8.<textaera>：多行文本框
9.<select>、<option>：下拉菜单
10.<label>：辅助表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<form action="http://www.baidu.com">
<!--> <h2>输入框：</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>苹果
<input type="checkbox" checked>香蕉
<input type="checkbox" disabled>葡萄
<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">-->
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select size="2">
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select multiple>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<input type="file" multiple>
<input type="radio"name="gender" id="man"><label for="man">男</label>
<input type="radio"name="gender" id="woman"><label for="woman"></label>女
</form>
</body>
</html> 表格表单组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<form action="">
<table border="1" cellpadding="30">
<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="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html> 2.9 div与span
div:划分区域
span:对文字进行修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DSN</title>
</head>
<body>
<!--<div>1111</div>
<span>这是一个内联</span>-->
<div>
<h2><a href=""><span>html5</span>官方首页</a></h2>
<a href=""><img src="" alt=""></a>
<p>
</p>
<a href=""></a>
</div>
</body>
</html> 
3775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
