（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：选择相同元素下一个

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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

（HTML+css）学习小征程！！！相关推荐

Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
11个实用的CSS学习工具
为什么80%的码农都做不了架构师?>>> 1. 盒子模型的幻灯片通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner ...
CSS学习之外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
HTML CSS 学习整理
HTML CSS 学习整理码字不易,转载请务必注明原文出处.常用单位整理,不断学习,后期的新增笔记会继续加到文章上方点击链接后退页面: 回到上一个网页这是一个简单的跳转页面操作 --修改plac ...
7.8 css 学习
7.8 css 学习 1.css 学习 i) 学习目的 : 为了把样式和内容剥离, 打包更好的处理样式 ii) 范例 : <style>td{background-color:green; ...
HTML与CSS学习总结
HTML与CSS学习总结一.HTML总结 1 概念 HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的标准标记语言. 标记语言是由 ...
前端工程师高手说说CSS学习中的瓶颈
一.何为瓶颈? "瓶颈"指瓶子的颈部,相对狭窄.这是很传神的一个词,因为狭窄,因此难以突破:但是,一旦突破了,就是广阔天空(偌大瓶身)! 小弟不才,凑合画了个瓶颈示意图,如下: 图 ...
jQuery学习小征途
jQuery学习小征途 1.1 初识jQuery 1.2 jQuery选择器 1.2.1 基本选择器 1.2.2 特殊选择器 1.3 jQuery 筛选器 1.3.1 first() 1.3.2 la ...
HTML CSS学习总结
HTML & CSS学习总结本学习总结为学习了HTML与CSS所得到的总结目录 HTML & CSS学习总结 HTML HTML介绍 HTML 标签 HTML 元素 HTML 网页 ...

（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

（HTML+css）学习小征程！！！相关推荐

最新文章

热门文章

（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

（HTML+css）学习小征程！！！相关推荐

最新文章

热门文章

一：第一章初识！（拨云见日）

1.2VSCode编辑器：（https://code.visualstudio.com/)

二：第二部分实际操作！！！！