（HTML+css）学习小征程！！！
（HTML+css）学习小征程！
-
- 一：第一章 初识！（拨云见日）
-
- 1.1 HTML和CSS定义：
- 1.2VSCode编辑器： （https://code.visualstudio.com/)
- 1.3html,css,js关系：
- 二：第二部分 实际操作！！！！
-
- 入门开始（html）
- 三：具体化操作小技巧（详情）
-
- 3.1标题
- 3.2 段落
- 3.3链接
- 注意引入文件的路径：
-
- 3.4 图片的引入
- 3.5锚点跳转
- 3.6特殊字符
- 4列表
-
- 4.1无序列表
- 4.2有序列表
- 4.3定义表格
- 4.4表格标签+表格属性
- 4.5表单标签
- 4.6 表单+表格
- 4.7 div 和 span
一：第一章 初识！（拨云见日）
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>Documenttitle>
head>
<body>
body>
html>
>title:主要是管理此部分
三：具体化操作小技巧（详情）
3.1标题
DOCTYPE html>
<html lang="en">
<head>
<meta cahrset="UTF-8">
<title>Documenttitle>
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>Documenttitle>
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>Documenttitle>
<base target="_blank">
head>
<body>
<img src="./-3d9c5e6c3d9f803b.jpg"alt="这是我女朋友"width="300"height="200"title="这是我女朋友">
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>Documenttitle>
<base target="_blank">
head>
<body>
<img src="./-3d9c5e6c3d9f803b.jpg"alt="这是我女朋友"width="300"height="200"title="这是我女朋友">
body>
html>
3.5锚点跳转
法一：
<a href="#1">Xa>
<a href="#2">XXa>
<a href="#3">XXXa>
<h2 id="1">Xh2>
<p>段落p>
<p>段落p>
<h3 id="2">XXh3>
<p>段落p>
<p>段落p>
<h4 id="3">XXXh4>
<p>段落p>
<p>段落p>
法二：
<a href="#1">Xa>
<a href="#2">XXa>
<a href="#3">XXXa>
<a name="1">a>
<h2>Xh2>
<p>段落p>
<p>段落p>
<a name="2">a>
<h3>XXh3>
<p>段落p>
<p>段落p>
<a name="3">a>
<h4>XXXh4>
<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>项目2dt>
<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>DOCUMENTtitle>
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>documenttitle>
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">manlabel>
<input type="radio" name="123" id="woman"><label for="woman">womanlabel>
<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>DOCUMENTtitle>
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>DOCUMENTtitle>
head>
<body>
<div>
<h2><a href="https://www.runoob.com/html/html5-intro.html"><span>HTML5span> 教程 | 菜鸟教程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>HTML5span> 简介a>h2>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAm"height="80"width="80">
<p>HTML5 是跨平台的被设计为在不同类型的硬件PC 、平板、手机、电视机等等）之上运行。 注释： 在下面的章节中，您将学到如何“帮助”老版本的浏览器处理 HTML5。 HTML5 中的新内 …p>
div>
body>
html>