(HTML+css)学习小征程!
一:第一章 初识!(拨云见日)
1.1 HTML和CSS定义:
@HTML 称为超文本标签语言,是一种标识性的语言,用于创建网页和Web应用程序。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
@CSS(Cascading Style Sheets,层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
个人理解:HTML是网页内容的载体,通过css辅助修饰建造一个或多个体系,共同组成一个完整的网页
1.2VSCode编辑器: (https://code.visualstudio.com/)
常见的快捷键
ctrl+s:保存 ;
ctrl+x: 剪切 ;
ctrl+z/y : 撤销/前进;
alt+ ↑/↓: 快速移动一行
shift+end: 从头选中一行;
shift+home:从尾巴选中一行;
是shift+alt+↓:快速复制一行
alt+鼠标左键;多光标(同时操作多个标点)
ctrl+d:选择相同元素下一个
tab+alt+w:快速加入标签
ctrl+enter:快速加入下一行
1.3html,css,js关系:
简单的说:网站由 **html(结构),css(样式)和js(行为)**共同组成的,他们相互作用共同构成一个完美的网站!!!
二:第二部分 实际操作!!!!
入门开始(html)
<!DOCTYPE html> 说明这是html文件
<html lang="en"> 是以英文为语言的网站
<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>
</head>
<body>
</body>
</html>
>title:主要是管理此部分
三:具体化操作小技巧(详情)
3.1标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta cahrset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
</body>
</html>
出来的结果如图:
在一篇文章里面不能出现两个h1,其他的可以出现多个
3.2 段落
HTML主要是通过 p 来定义。即:
<!DOCTYPE html>
<html lang="en">
<head>
<meta cahrset="UTF-8">
<title>Document</title>
</head>
<body>
<p>这是一段</p>
<p>这是一段</p>
<p>这是一段</p>
<p>这是一段</p>
<p>这是一段</p>
</body>
</html>
3.3链接
一般是通过标签a来表示。即:
a–双标签
href属性:链接的地址
target属性:改变打开的方式,默认为当前窗口打开 -self ; 新窗口打开**-blank**
base-----改变窗口打开的默认方式
<!DOCTYPE html>
<html lang="en">
<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>
<body>
<img src="./-3d9c5e6c3d9f803b.jpg"alt="这是我女朋友"width="300"height="200"title="这是我女朋友">
<!-- >img-- 单标签 -->
<!-- > src: 引入图片的地址 -->
<!-- > alt: 当图片出现问题的时候,可以显示一段提示文字 -->
<!-- > title:提示信息(鼠标移动到图片上会出现提示信息) -->
<!-- > width,height:图片大小调试 -->
</body>
</html>
注意引入文件的路径:
@1:相对路径
./ 在路径中表示当前路径
…/ 在路径中表示另外一个文件夹中
@2:绝对路径
eg : E/ke/qf_dl20190151/20125125/img/animal/jpg
3.4 图片的引入
img-- 单标签
src: 引入图片的地址
alt: 当图片出现问题的时候,可以显示一段提示文字
title:提示信息(鼠标移动到图片上会出现提示信息)
width,height:图片大小调试
eg:
<!DOCTYPE html>
<html lang="en">
<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>
<body>
<img src="./-3d9c5e6c3d9f803b.jpg"alt="这是我女朋友"width="300"height="200"title="这是我女朋友">
</body>
</html>
3.5锚点跳转
法一:
<a href="#1">X</a>
<a href="#2">XX</a>
<a href="#3">XXX</a>
<h2 id="1">X</h2>
<p>段落</p>
<p>段落</p>
<h3 id="2">XX</h3>
<p>段落</p>
<p>段落</p>
<h4 id="3">XXX</h4>
<p>段落</p>
<p>段落</p>
法二:
<a href="#1">X</a>
<a href="#2">XX</a>
<a href="#3">XXX</a>
<a name="1"></a>
<h2>X</h2>
<p>段落</p>
<p>段落</p>
<a name="2"></a>
<h3>XX</h3>
<p>段落</p>
<p>段落</p>
<a name="3"></a>
<h4>XXX</h4>
<p>段落</p>
<p>段落</p>
3.6特殊字符
4列表
4.1无序列表
ul与li之间不能有其他的字符,但是li里面可以有其他的字符
<ul>
<li>项</li>
<li>项</li>
</ul>
4.2有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
4.3定义表格
<dl>
<dt> 项目</dt>
<dd>描述项目</dd>
<dt>项目2</dt>
<dd>描述项目</dd>
</dl>
4.4表格标签+表格属性
–表格标签
table:表格里的最外层容器
tr:定义表格行
th:定义表头
td:定义表格单元
caption:定义表格标题(一般在最前面)
–表格属性
border:表格边框
cellpadding:单元内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式 (left,center,right )
valign:上下对齐方式(top,middle ,bottom,)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
</head>
<body>
<table border="1" cellpadding="30" cellspacing="30">
<caption><strong>天气预报</strong></caption>
<tHead>
<tr align="ringht">
<th colspan="2">日期</th>
<th>天气预报</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>白天</td>
<td rowspan="2">2019年1月1号</td>
<td><img src="./-3d9c5e6c3d9f803b.jpg"width="50"height="50"></td>
<td>天气晴,可以出行</td>
</tr>
<tr>
<td>黑夜</td>
<td><img src="./-3d9c5e6c3d9f803b.jpg"width="50"height="50"></td>
<td>天气晴,可以出行</td>
</tr>
<tr>
<td>白天</td>
<td rowspan="2">2019年1月2号</td>
<td><img src="./-3d9c5e6c3d9f803b.jpg"width="50"height="50"></td>
<td>天气晴,可以出行</td>
</tr>
</tr>
<tr>
<td>黑天</td>
<td><img src="./-3d9c5e6c3d9f803b.jpg"width="50"height="50"></td>
<td>天气晴,可以出行</td>
</tr>
</tr>
</tBody>
</table>
</body>
</html>
4.5表单标签
form:表单的于搜集用户信息,根据不同的type属性值,展示不同的效果,如输入框,密码箱,复选框等。
type属性:
1.text:普通的文本输入
2.password:密码输入框
3.checkbox:复选框
4.radio:单选框
5.file:上传文件
6.submit:提交按钮
7.reset:重置按钮`
8.textarea:多行文本
9.select,option:下拉菜单,一般都合在一起用
label:辅助菜单;即:在选择的时候可以点击文字即可选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<form action="www.baidu.com">
<h2>输入框:</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框:</h2>
<input type="password" placeholder="请输入密码">
<h2>多选框:</h2>
<input type="checkbox"checked>苹果
<input type="checkbox">葡萄
<input type="checkbox" disabled>香蕉
<h2>单选框</h2>
<input type="radio" name="123" id="man"><label for="man">man</label>
<input type="radio" name="123" id="woman"><label for="woman">woman</label>
<h2>喜欢的城市</h2>
<select multiple>
<option selcted disabled>请选择</option>
<option>成都</option>
<option>长沙</option>
<option>上海</option>
</select>
<h2>喜欢的人</h2>
<select size="4">
<option selcted disabled>请选择</option>
<option>周杰伦</option>
<option>李白</option>
<option>瓦德</option>
</select>
<h2>上传文件</h2>
<input type="file">
<h2>提交和重置</h2>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
还可以利用:
multiple:多选(ctrl+鼠标)
size:显示具体的项目多少
4.6 表单+表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
</head>
<body>
<form>
<table border="1"cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr align="right">
<tr >
<td>用户名:</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码:</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
</body>
</html>
4.7 div 和 span
div:划分区域,划分为一个个独立的区域
span:内联,之间相互联系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
</head>
<body>
<div>
<h2><a href="https://www.runoob.com/html/html5-intro.html"><span>HTML5</span> 教程 | 菜鸟教程</a></h2>
<P>什么是 HTML5?HTML5 是下一代 HTML 标准。HTML , HTML 4.01的上一个版本诞生于 1999 …</P>
<P>HTML5 是如何起步的 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web …</P>
<P>HTML5 !DOCTYPE>!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简 …</P>
<P>最小的HTML5文档。下面是一个简单的HTML5文档 …</P>
<a href="https://www.runoob.com/html/html5-intro.html">请在runobo.com查看</runobo></a>
</div>
<div>
<h2><a href="https://www.w3school.com.cn/html/html5_intro.asp"><span>HTML5</span> 简介</a></h2>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAm"height="80"width="80">
<p>HTML5 是跨平台的被设计为在不同类型的硬件PC 、平板、手机、电视机等等)之上运行。 注释: 在下面的章节中,您将学到如何“帮助”老版本的浏览器处理 HTML5。 HTML5 中的新内 …</p>
</div>
</body>
</html>