HTML+CSS系列教程这里写目录标题

一、HTML+CSS系列导学
- 1.1拨云见日
- 1.2溯本求源
- 1.3风生水起
- 1.4巧夺天工
二、什么是HTML和CSS
- 2.1如何看到网站的原始代码呢？
- 2.2如何去写代码，写到哪里呢？
三、宇宙第一编辑器VS Code
- 3.1VSCode编辑器
- 3.2如何安装插件？
- 3.3学习编辑器基本使用？
四、chrome浏览器
- 4.1chrome浏览器？
五、深入了解网站开发
六、Web前端的三大核心技术
七、HTML基础结构与属性
- 7.1HTML：超文本标记语言
八、HTML初始代码
九、HTML中的注释
- 9.1写法
- 9.2意义
- 9.3快捷添加注释与删除注释
十、HTML语义化
- 10.1好处
十一、标题与段落
- 11.1标签
- 11.2段落
十二、文本修饰
- 12.1强调->双标签
- 12.2下标、上标
- 12.3删除与插入文本
十三、图片标签与图片属性
十四、引入文件的地址路径
- 14.1相对路径
- 14.2绝对路径
十五、跳转链接
- 15.1< a >
- 15.2base
十六、跳转锚点
- 16.1实现一
- 16.2实现二
十七、特殊符号![请添加图片描述](https://img-blog.csdnimg.cn/687c0b0bda7840928707293b7a3ee03c.jpeg)
十八、无序列表
十九、有序列表
二十、定义列表

一、HTML+CSS系列导学

1.1拨云见日

HTML、CSS、切图流程、PC企业站布局、PC游戏站布局

1.2溯本求源

扩展HTML、扩展CSS、HTML5新语法、CSS新语法、兼容与 hack

1.3风生水起

弹性布局、网格布局、移动端布局、响应式布局、Bootstrap

1.4巧夺天工

预编译CSS、postcss、CSS架构、高级功能、CSS与交互

二、什么是HTML和CSS

两种编程语言，一般需要配合使用，是网站开发的基础语言。
浏览器把代码解析后的样子就是我们看到的网站。

2.1如何看到网站的原始代码呢？

通过鼠标右键选择查看网页源代码。

2.2如何去写代码，写到哪里呢？

一个网站是由N多个网页组成的。每一个网页 .html文件
电视剧，40集。 .mp4文件

三、宇宙第一编辑器VS Code

3.1VSCode编辑器

VS Code,全称Visual Studio Cosenza，来自微软，是一个开源的、基于Electron的轻量代码编辑器。
下载地址：https://code.visualstudio.com/

3.2如何安装插件？

语言包、open in browser、view in borwser

3.3学习编辑器基本使用？

设置：文件—>首选项—>设置（大小、是否换行）
创建文件、创建文件夹、重命名和删除
ctrl+s：保存
ctrl+a：全选
ctrl+x、ctrl+c、ctrl+v：剪辑、复制、粘贴
ctrl+z、ctrl+y：撤销、前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行
tap：向后缩进
tap+shift：向前缩进
多光标：alt+鼠标左键
ctrl+d：选择相同元素的下一个

四、chrome浏览器

谷歌浏览器（Google Chrome)是一款可让你更快速、轻松且安全地使用网络的浏览器。

4.1chrome浏览器？

chrome下载地址：https://www.google.cn/intl/zh-CN/chrome/

百度统计浏览器市场份额：https://tongji.baidu.com/data/browser

五、深入了解网站开发

1.UI设计师：设计稿
2.web前端开发工程师（HS开发）：
设计稿->代码
数据库里的数据->显示到页面
HTML+CSS（html：结构、CSS：样式）
3.web后端开发工程师

六、Web前端的三大核心技术

HTML：结构
CSS：样式
JavaScript：行为

<style>div{color:red;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='normol';}else{div.style.color='red';div.style.fontstyle='italic';}flag=!flag;},500);};div.onmouseout=function(){clearInterval(timer);};</script>

七、HTML基础结构与属性

超文本标记语言（HyperText Markup Language)，标准通用标记语言下的一个应用。是网页制作必备的编辑语言。

7.1HTML：超文本标记语言

超文本：文本内+非文本内容（图片、视频、音频等）
标记：<单词>
语言：编辑语言
标记也叫标签：< header >< footer >
写法分成两种：
单标签 < header >
双标签 < header >< /header >
创建标签的快捷键：单词+tab键-><单词>

标签可以上下排列，也可以组合嵌套。
HTML常见标签：http://www.html5star.com/manual/html5label-meaning/

标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签属性=“值” 属性2=“值2”···>

八、HTML初始代码

每个.html文件都有的代码叫初始文件，要符合html文件的写法。

！+tab键：快速地创建html的初始代码

<!DOCTYPE html>  （文档声明：告诉浏览器这是一个html文件）
<html lang="en">   （html文件的最外层标签：包裹着所有html标签代码）
（lang="en"表示是一个英文网站，lang="zh-CN"表示是一个中文网站）<head>  （头部显示的放在head当中）<meta charset="UTF-8">  （元信息：是编写网页中的一些赋值信息 charset="UTF-8"国际编码，让网页不出现乱码现象）<meta name="viewport"conteent="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=eadge"><title>Document</title>  （title：设置网页的标题）</head>
<body>（页面显示的放在body当中）
</body></html>

九、HTML中的注释

注释的代码，只有在文件中看得到，但是浏览器显示不出来

9.1写法

<! --显示的内容-- >

9.2意义

1.把暂时不用的代码注释起来，方便以后使用
2.给开发人员起提示作用

...
<body><!--hello world--><!--登录-->...<!--列表-->...<!--留言信息-->...
</body>
</html>

9.3快捷添加注释与删除注释

1.ctrl+/添加
2.ctrl+alt+a删除

十、HTML语义化

所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写。

10.1好处

1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好地理解网页。
3.方便其他设备解析（如屏幕阅读器，盲人阅读器）。
4.便于团队开发与维护。

十一、标题与段落

11.1标签

标题->双标签：< h1></ h1> …< h6>< /h6 >

...
<body><h1>标题</h1><h2>标题</h2><h3>标题</h3>
...
</body>
</html>

在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签，其他标签可出现多个。
h5、h6标签在网页中不经常使用

11.2段落

段落->双标签：< p >…< /p >

...
<body>...<p>这是一个段落</p>...
</body>
</html>

十二、文本修饰

12.1强调->双标签

1.< strong>…< /strong>
2.< em>…< /em>
区别：
1.写法和展示效果有区别的，一个加粗，一个斜体
2.strong的强调性强于em

12.2下标、上标

上标：< sup>< /sup>
下标：< sub>< /sub>

...
<p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>（等于a平方＋b平方=c平方）H<sub>2</sub>o(水的化学式）</p>...

12.3删除与插入文本

< del>、< ins>:删除文本，插入文本
注意：一般情况下，删除文本都是和插入文本配合使用的。

...
<p>
促销：原价<del>300</del>,现价<ins>100</ins>（横杆与300重叠，横杆加于100下方）
</p>
...

十三、图片标签与图片属性

img->单标签
src：引入图片地址。
alt：当图片出现问题的时候，可以显示一段有好的提示文字。
tiyle:提示信息
width、height:图片的大小

...
<body><img src="[http://pic-bucket.ws.126.net/photo/0005/2022-06-14/H9QSF0BQ4TM10005NOS.jpg](http://pic-bucket.ws.126.net/photo/0005/2022-06-14/H9QSF0BQ4TM10005NOS.jpg)" alt="维金斯26+13，库里16+8，勇士战胜凯尔特人"title="这是一张图片的提示信息"width="300"height="300">
</body>
...

十四、引入文件的地址路径

14.1相对路径

.加粗样式在路径中表示当前路径
…在路径中表示上一级路径

14.2绝对路径

十五、跳转链接

15.1< a >

a->双标签< a>< /a>
href属性：链接地址
target属性:可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开：_blank

<body><a href="http://www.baidu.com">访问百度</a><a href="http://www.qfedu.com"><img src="./img/animal/dog.jpg"alt=""></a>
</body>

15.2base

base->单标签：作用就是改变链接的默认行为的。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"conteent="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=eadge"><title>Document</title><base target="_blank"></head>
<body><a href="./html/list.html">列表页</a><img src="./images/1.png" alt="">
</body></html>

十六、跳转锚点

16.1实现一

#号
id属性

16.2实现二

#号
name属性（注意name属性加给的是a标签）

 <h2 id="html">HTML超文本标记语言</h2><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><h2 id="javascript">JS的脚本</h2><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p><p>模拟的段落</p>

十七、特殊符号

1.&+字符
2.解决冲突左右尖括号、添加多个空格的实现
3.&lt；&gt；&nbsp；

十八、无序列表

< ul>:列表的最外层容器
< li>:列表项
（注：ul和li必须是组合出现的，他们之间是不能有其他标签的）

type属性：改变前面标记的样式（一般都是用CSS去控制）
（http://www.w3school.com.cn/tags/att-ul-type.asp)

<ul><li><a href="#"><strong>  </strong></a></li><li><a href="#"> </a></li><li><a href="#"> </a></li>
</ul>

十九、有序列表

< ol>:列表的最外层容器
< li>:列表项
注：有序列表用得非常少，经常用的是无序列表，无序列表可以去代替有序列表。
type属性：改变前面标记的样式（一般都是用CSS去控制）
（http://www.w3school.com.cn/tags/att-ul-type.asp)

二十、定义列表

< dl>:定义列表
< dt>:定义专业术语或名词
< dd>:对名词进行解释和描述
（列表项需要添加标题和对标题进行描述的内容）
eva

HTML+CSS系列教程相关推荐

css系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...
HTML+CSS系列教程笔记 (2)
第二十一课嵌套列表列表之前互相嵌套形成多层级列表 <!DOCTYPE html> <html lang="en"> <head><me ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
讲给后台程序员看的前端系列教程(19)——CSS的层叠性与继承性以及优先级
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
css3 3d perspective,CSS 3D transforms系列教程-Perspective
CSS 3D transforms的出现已经有好几年的历史了,但是由于缺乏浏览器的广泛支持,它一直没有得到广泛的应用.这个系列教程旨在让更多的童鞋了解和使用CSS 3D transforms. 要将一 ...
linux中的shell有printf吗,Linux Shell系列教程之（八）Shell printf命令详解
在上一篇:Linux Shell系列教程之(七)Shell输出这篇文章中,已经对Shell printf命令有了一个简略的介绍,本篇给大家详细介绍下Shell中的printf命令. 一.Shell p ...
【建站系列教程】3.1、cookie介绍
[建站系列教程]3.1.cookie介绍 cookie的应用场景 1 小说网站的字体.颜色.背景颜色设置 2 隐藏url里面的参数 cookie的通俗介绍 cookie的基本用法 js版本 jQuer ...
【建站系列教程】3、建站基本技术介绍
[建站系列教程]3.写网页基本技术介绍摘要 html.css.js jQuery ui框架 bootstrap jQuery-ui vue的ui 后端采用ajax 或者 php cookie也可以 ...
【建站系列教程】2.3、分享一些小说的api接口
[建站系列教程]2.3.分享一些小说的api接口一.追书神器api 二.资源二api 三.宜搜api 四.结语写在前面:大家好,我是热爱编程的小泽. [建站系列教程]是我的亲身建站经历写给广大建站 ...

HTML+CSS系列教程