初入HTML和CSS

- 1.1 HTML、CSS
- 1.2 如何去写代码？写到哪里去
- 1.3 宇宙第一编辑器 VS Code
- VS Code的基本使用
- 1.4 浏览器
- 1.5 深入了解网站开发
- 1.6HTML
- 1.7 HTML的注释
- 1.9 HTML标题与段落
- 2.0HTML文本修饰标签
- 2.5特殊符号
- 2.6列表标签

一、第一部分
#拨云见日：
**

1.1 HTML、CSS

是做网站的编程语言**代码被浏览器解析后的样子就是我们所看见的网站的样子。

1.2 如何去写代码？写到哪里去

如何去写代码？写到哪里去。一个网站是由很多个网页组成的，每一个网页都是一个.html文件，很多个.html文件组成的整体就是网站。我们可以在任意一个文件夹里创建一个文本文档，将新建的文本文档的后缀.txt改为.html后就成功创建了一个.html文件，创建好后我们可以在里面写我们想写的代码或者文字，保存后然后可以用浏览器打开该文件，就能看到我们写的代码或者文字了。

1.3 宇宙第一编辑器 VS Code

宇宙第一编辑器 VS Code，可以用于编写各种代码的编辑器，比用文本文档写代码简便的多，并且错误率低。在VS Code中打开我们所创建的.html文档就可以进行更加方便的编辑，也能在编辑器中创建文件和文件夹。可以通过下载插件拓展应用范围
**

VS Code的基本使用

：**
设置：文件->首选项->设置(大小、是否换行word wrap)
创建文件、创建文件夹、重命名和删除、搜索文件


ctrl + s ：保存
ctrl + a ：全选
ctrl + x 、ctrl + c 、 ctrl + v ：剪切、复制、粘贴
ctrl + z 、 ctrl + y ：撤销、前进
shift + end：从头选中一行
shift + home：从尾部选中一行
shift + alt + ↓：快速向下复制一行
alt + ↑/↓ ：快速向上或者向下移动一行
tab：向后缩进 tab + shift：向前缩进
ctrl + d 选择相同元素的下一个
alt+鼠标左键可以添加多个光标（同时对多行进行操作）

1.4 浏览器

浏览器：目前的主流浏览器是Chrome（谷歌浏览器）也是我们目前所学习的，市场上常见的浏览器有：IE、Edge、火狐、Safari、Chrome、Opera等，其中IE新版为Edge。

1.5 深入了解网站开发

深入了解网站开发：一个大型网站的开发需要团队的配合，各个岗位不可或缺。

a. 技术部门主要有 UI设计师：进行网站代码设计（也就是写一个设计稿）

b.web前端开发工程师（H5开发）将设计稿转化为代码并且与后端开发工程师配合。运用（HTML和CSS）

HTML：编写结构 CSS：编写样式 JavaScript：编写行为（web前端三大核心技术）

c.web后端主要负责数据处理，令数据库数据显示到页面。

HTML编写尝试

 
<style>
div{ color:aqua; font-style:italic; }
</style><div>HTML+CSS教程学习尝试</div><script>let div = document.querySelector('div');
let timer = null;
div.onmouseover = function(){timer = setInterval(()=>{if(flag){div.style.color = 'red';div.style.fontStyle = 'normal';}else{div.style.color = 'blue';div.style.fontStyle = 'italic';}flag = !flag;},500);
};
div.onmouseout = function(){clearInterval(timer);
}</script>

1.6HTML

HTML的基本属性：html是一种超文本标记语言，标准通用标记语言下的一个应用。是网页制作必备的编程语言。
超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>

标记也叫做标签：

HTML的初始代码
每一个.html文件都需要添加初始代码：！+ tab 键：快速创建html的初始代码。

尝试写视频中的初始代码：

<!DOCTYPE html>   <!-- 文档声明：告诉浏览器这是一个html文件 -->
<html lang="en">  <!-- lang="en"表示初始为英文网站 --><!-- html文件的最外层标签：包裹着所有html标签代码 -->
<head><meta charset="UTF-8"><!-- 元信息：是编写网页中的一些赋值信息 --><!-- UTF-8表示使用国际编码 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页的标题</title> <!-- 设置网页标题 -->
</head>
<body><!-- 显示网页内容的区域 -->
</body>
</html>

1.7 HTML的注释

HTML的注释：注释的代码只有在文件中能看到，但是浏览器显示不出来<!- -注释的内容内容- ->
注释作用：1. 把暂时不用的代码注释起来，方便以后使用。2.对开发人员进行提示。

快速添加注释与删除：
ctrl + /
shiift + alt + a（使用时需选中要注释的代码）

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

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

1.9 HTML标题与段落

HTML标题与段落：
标题 -> 双标签：

< h1 >< /h1 > < h6 >< /h6 >

在一个网页中只能有一个h1标题，2-6可以有多个，h1-h6标题的重要性依次降低。h5 h6不常用。

段落：用p标签。

< p >< /p >

尝试编写标签和段落：

<!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>
</head>
<body><h1>南邮通达学院简介</h1><h2>师资力量</h2><p>截止2022年9月，学院现拥有专、兼职教师612人，其中高级职称279人。专任教师中具有博士、硕士学位的教师达到总数的90%，有享受政府特殊津贴6人，省“333工程”培养对象9人，省“青蓝工程”中青年学术带头人和优秀青年骨干教师29人</p><h2>教学成就</h2><p>截止2022年9月，在参加省级以上科技竞赛中屡获好成绩。2008-2009年，该院学生先后获得全国数学建模竞赛一等奖，全国大学生电子设计竞赛江苏省一等奖，第十届“挑战杯”全国大学生课外学术科技作品竞赛三等奖，江苏省高校第四届大学生物理及实验科技作品创新竞赛二等奖和三等奖数项。2008届毕业生中，共考上硕士研究生63人，占该届学生总数的6.67% ；其中24人被英国、美国、澳大利亚等国的大学录取。</p><h3>合作交流</h3><p>截止2022年9月，学院已与国外10多所院校建立了教学、科研和学生交流的合作渠道。正在运行的国际合作项目包括：美国中密西根大学的“3.5+0.5+1.5”校际交流本硕连读项目、英国诺森比亚大学的“3+1”校际交流本科双学位项目、新西兰惠灵顿维多利亚大学的“3.5+0.5+1.5”校际交流本硕连读项目等。通过对外交流与合作，为学生的成长提供了更加广阔的发展空间</p>
</body>
</html>

2.0HTML文本修饰标签

HTML文本修饰标签：

强调 -> 双标签：< strong >< /strong >
斜体：< em >< /em >
上标文本：< sub >< /sub >

<p> a<sub>2</sub> </p> 这里是a的平方

下标文本：< sup >< /sup >

<p> H<sup>2</sup>O </p>这个是化学里面的水分子的化学式

删除文本：< del >< /del >

<p> 原价<del>300</del>，现价<ins>100</ins>。</p>300上有删除线100下有下划线

插入文本：< ins >< /ins

storng的强调性强，em的强调性弱

2.1图片标签和属性采用的是img标签，img是单标签。

src：引入图片地址
alt：当图片出错无法显示时显示文字，用于替代图片无法显示的问题
title：提示信息（鼠标移到图片上时显示提示信息）
width、height：图片的大小，像素（css）

<body><img src="图片地址" alt="替代文字" title="提示信息" width="宽" height="高">
</body>

2.2引入文件的地址路径
相对路径：

在路径中表示当前路径
在路径上表示上一级路径

<body><img src="./屏幕截图 2022-10-19 105634.jpg" alt="" ><!-- .表示向内寻找 ..表示向外寻找 -->
</body>

绝对路径：文件的完整路径

2.3跳转链接：连接标签？
a标签 -> 双标签 < a >< /a >
href属性:链接地址
target属性：可以改变打开链接的方式（默认在当前页面打开：_self 。新窗口打开：_blank）

使用base标签可以改变链接默认行为.

<body><a href="https://www.bilibili.com/video/BV1p4411T765?p=15">访问视频</a>
</body>

跳转链接可以用于网站和图片文字等

2.4跳转锚点
页面内快速移动，有两种实现方式：

#号 + id属性
#号+ name属性
尝试编写
1.#+ id属性

<a href="#id名1">目录内容1</a>
<a href="#id名2">目录内容2</a><h2 id="id名1">标题1</h2>
<p>段落1</p>
<h2 id="id名2">标题2</h2>
<p>段落2</p>

2 .#+name属性

<a href="#name名1">目录内容1</a>
<a href="#name名2">目录内容2</a><a name="name名1"></a>
<h2>标题1</h2>
<p>段落1</p>
<a name="name名2"></a>
<h2>标题2</h2>
<p>段落2</p>

2.5特殊符号

特殊符号：编写一些文本时经常会遇到输入法无法输入的字符，在html中为这些字符准备了专门的代码：

- 空格符：&nbsp;  
- 版权：&copy; ©
- 注册商标：&reg; ®
- 小于号：&lt; <
- 大于号：&gt; >
- 和号：&amp; &
- 人民币：&yen; ¥
- 摄氏度：&deg;

特殊字符：1.& + 字符 2.解决冲突左右尖括号，添加多个空格的实现

2.6列表标签

列表标签：无序列表，有序列表，定义列表！

无序列表：< ul >、< li >：列表的最外层容器、列表项。符合嵌套的规范。

ul和li必须组合出现，中间不能有其他标签

type属性：更改项目前标记样式(一般都是用CSS控制)
创建无序列表

<ul><li><a href="#">内容1234</a></li><li><a href="#">内容1234</a></li><li><a href="#">内容1234</a></li>
</ul>

内容可以是文字也可以是链接

有序列表：< ol >、< li >：列表的最外层容器、列表项。

注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
创建有序列表：

<ol><li><a href="#"><strong>内容1</strong></a></li><li><a href="#">内容2</li><li><a href="#">内容3</li>
</ol>

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

定义列表编写尝试：

<dl><dt>HTML</HTML></dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd><dt>JavaScript</dt><dd>网页脚本语言</dd>
</dl>