一.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>
</html
1.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>