HTML+CSS系列教程

EmbalmX

已于 2022-10-28 00:50:52 修改

阅读量1k

点赞数 1

文章标签： html css 前端

于 2022-10-21 13:11:34 首次发布

原文链接：https://b23.tv/p8QFdrX

版权

文章目录

HTML+CSS系列教程1️⃣

HTML+CSS系列教程1️⃣

一、HTML+CSS系列教程1️⃣之导学

1. HTML+CSS系列教程1️⃣之拨云见日

2.HTML+CSS系列教程1️⃣之溯本求源

3.HTML+CSS系列教程1️⃣之风生水起

4.HTML+CSS系列教程1️⃣之巧夺天工

二、什么是HEML、CSS

——是网站的编程语言。

浏览器把代码解析后的样子就是我们所看到的网站。

那么，如何看到网站的源代码？
——通过鼠标右键选择查看网页源代码。

如何去写代码，写在哪里？
——一个网站是由N多个网页组成的，每个网站都是一个 .html文件。

三、VSCode编辑器

1. 点击下载VSCode

2.安装插件

语言包、open in browser 、 view in browser。

3.编辑器的基本使用

1）创建文件、创建文件夹、重命名和删除

2）快捷指令

保存：ctrl+s 全选：ctrl+a
剪切：ctrl+x 复制：ctrl+c 粘贴ctrl+v
撤销：ctrl+z 前进：ctrl+y
从头部选择一行：shift+end
从尾部选择一行：shift+home
快速复制一行：shift+alt+⬆️
快速移动一行：alt+⬆️/⬇️
向后缩进：tab
向前缩进tab+shift
多光标：tab+鼠标左键
选择相同元素的下一个：ctrl+d

3）设置

文件->首选项->设置（大小、自动换行、word wrap）

四、Chrome浏览器

下载地址
 百度统计浏览器市场份额

chrome:68.88%

五、深入了解网站开发

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

UI设计师：设计稿

web前端开发工程师（H5开发）

web后端开发工程师

——>设计稿->代码
——>数据库里的数据->显示到页面
——————>HTML+CSS

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

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

七、html格式文件

<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 = 'normal';
      }
      else{
        div.stlye.color = 'red';
        div.style.fontStyle = 'italic';
      }
      flag = !flag;
    },500);
  };
  div.onmouseout = function(){
    clearInterval(timer);
  };

  </script>

八、HTML基本结构和属性

1.HTML

超文本标记语言

1）超文本

文本内容 + 非文本内容（图片、视频、音频等）

2）标记

<单词>

3）语言

编程语言

4）标记（也叫做标签）

<header>
<footer>

写法分为两种：
————>单标签 <header >
————>多标签<header></header>

创建标签的快捷键：单词+tab键-> <单词>
标签可以上下排列，也可以组合嵌套
HTML常见标签
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签属性 = “值” 属性2 = “值2”>

九、HTML的初始代码

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

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

<!DOCTYPE html>                    文档声明：告诉浏览器这是一个html文件
<html lang = "en">                 html的最外层标签：包裹着所有的html标签代码 (lang = "en"表示为一个英文网站,lang = "zh-CN"表示为一个英文网站) 
    <head>
        <meta charset = "UTF-8">   元信息：是编写网页中的一些赋值信息 
        <title>Document</title>.   设置网页的标题
    </head>
    <body>                     
                                   显示网页内容的主要区域
    </body>
</html>

例子

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">

    <title>网站标题</title>
</head>
<body>
    hello world
</body>
</html>

十、HTML的注释

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

1.写法

<!--注释的内容-->    在浏览器看不到，只能在代码中看到注释的内容。

2.意义

1）把暂时用不到的代码注释起来，方便以后使用。
2）对开发人员进行展示。

3.快捷添加/删除注释

1）ctrl+/
2）shift+alt+a

十一、HTML语义化

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

1.好处

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

2.标题与段落

1）标题

标题->双标签：<h1> </h1> … <h6> </h6>
在一个网页中，h1最重要，并且一个.html文件中只能出现一次h1标签。
h5，h6标签在网页中不经常使用。

2）段落

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

十二、文本修饰标签

1.强调

1)双标签：<strong> </strong>

表示强调，会对文本进行加粗。

2)双标签：<em></em>

表示强调，会对文本进行斜体。

3）区别

a.写法和展示效果有区别
b.strong的强调性强于em

2.上下标文本

1）上标文本

双标签：<sub></sub>

2）下标文本

双标签：<sup></sup>

删除、加入文本

1）删除文本

双标签：<del></del>

2)插入文本

双标签： <ins></ins>

⚠️一般情况下，删除文本都与插入文本配合使用。

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

图片标签

单标签：<img src = “” alt = “” >

1.src：

引用图片的地址。

2.alt：

当图片出现问题时，可以显示一段友好的提示文字。

3.tltle：

提示信息。

4.width、height：

图片的大小。

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

1.相对路径：

'.'在路径中表示当前文件
'. .'在路径中表示上一级路径

2.绝对路径：

硬盘地址->‘/’与‘\‘通用，但尽量避免使用反斜线。
网络地址->只能使用‘/’

十五、跳转链接

a：

双标签-> <a></a>

href属性：

链接的地址

target属性：

可以改变链接打开的方式，
默认情况下：在当前页面打开 ‘_self’
在新窗口打开**‘_blank’**

base:

单标签-> <*base target=“_blank”>
改变链接的默认行为。

十六、跳转锚点

实现方式一：#+id

实现方式二：#+name

十七、特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，或向一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在html中，为这些特殊字符准备了专门的代码。

特殊字符	特殊字符代码
©️	&copy;
®️	&reg;
空格符	&nbsp;
<	<
>	>
&	&amp;
¥	&yen;

十八、列表标签

1.无序列表

双标签-> <ul><li></li></ul> 列表最外层容器、列表项
⚠️：ul与li必须组合出现，其二者之间不能有其他标签

type属性：改变前面标记的样式（一般用CSS去控制）

2.有序列表

双标签-> <ol><li></li></ol>
⚠️：ul与li必须组合出现，其二者之间不能有其他标签
type属性：改变前面标记的样式（一般用CSS去控制）
一般使用较少，可用无序列表替代

3.定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述

4.嵌套列表

⚠️：列表之间可以相互嵌套，形成多层级的列表。

十九、表格标签

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题
⚠️：有嵌套关系，要注意嵌套规范。
语义化标签：<tHead>、<tbody>、<tFood>
⚠️：在一个<table>中，tBody是可以多次出现的，但是tHead、tFood只能出现一次。

二十、表格属性

<border>：表格边框
<cellpadding>单元格内的空间
<cellspacing>：单元格之间的空间
<rowspan>：合并行
<colspan>：合并列
<align>：左右对齐方式
left、center、right
<valign>：上下对齐方式
top、middle、bottom

二十一、表单标签

<from>

表单的最外层容器。

<input>

标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

input标签下的type属性及含义

tpye属性决定input标签的控件

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框(由name控制将多个选项划分为一组)
file	上传文件
submit	提交按钮
reset	重置按钮

多行文本框<textarea>

<textarea clos=“ ” rows=“ ”  ></textarea>
       <!-- 列数    行数 -->

<select>、<option>

```
  下拉菜单 
```

<label>

```
辅助表单 
```

常见属性

<checked>、<disabled>、<name>、<for>

二十二、表格表单组合

表格表单之间可以互相组合形成数据展示效果

二十三、div与span

1.div（块）：

div全程为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。