【初学HTML】

一、HTML、CSS系列之导学

1.1拨云见日

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

1.2溯本求源

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

1.3风生水起

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

1.4巧夺天工

预编译CSS（Less和Css）
postcss
CSS架构
高级功能
CSS与JS交互

二、什么是HTML、CSS?

是做网站的编程语言，浏览器把代码解析后的样子就是我们看到的网站。
如何看到网站的原始代码呢？
通过鼠标右键选择查看网页源代码。
如何去写代码？写到哪里呢？
一个网站是由N多个网页组成的，每一个网页 -------- .html文件
举例：电视剧,40集 -------- .mp4文件

三、宇宙第一编译器 VS Code

1.1简介

VS Code,全称 Visual Studio Code,来自微软，是一个开源的、基于Electron 的轻量代码编辑器。
**VS Code下载地址：**VS Code下载地址

1.2如何安装插件?

语言包、open in browser 、view in borwer

1.3学习编辑器基本使用?

四、Chrome 浏览器

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

1.1主流浏览器分类

IE、Microsoft Edge、Chrome、Firefox、Safari等几大类

1、IE浏览器。IE浏览器是微软推出的Windows系统自带的浏览器，它的内核是由微软独立开发的，简称IE内核，该浏览器只支持Windows平台。国内大部分的浏览器，都是在IE内核基础上提供了一些插件，如360浏览器、搜狗浏览器等
2、Microsoft Edge浏览器。Microsoft Edge是由微软开发的基于Chromium的浏览器。
3、Chrome（谷歌）浏览器。Chrome浏览器由Google在开源项目的基础上进行独立开发的一款浏览器，市场占有率第一，而且它提供了很多方便开发者使用的插件，因此该浏览器也是本书开发的主要浏览器。Chrome浏览器不仅支持Windows平台，还支持Linux、Mac系统，同时它也提供了移动端的应用（如Android和iOS平台）
4、Firefox（火狐）浏览器。Firefox浏览器是开源组织提供的一款开源的浏览器，它开源了浏览器的源码，同时也提供了很多插件，方便了用户的使用，支持Windows平台、Llnux平台和Mac平台
5、Safari浏览器。Safari浏览器主要是Apple公司为Mac系统量身打造的一款浏览器，主要应用在Mac和iOS系统中

五 、深入了解网站的开发

1.1相关职位

UI设计师：设计稿
web前端开发工程师（H5开发）
设计稿→代码
数据库里的数据→显示到页面
HTML + CSS
HTML: 结构
CSS: 样式
web后端开发工程师

1.2了解前端的另外一项技能 ：JavaScript,与HTML、CSS之间的关系

一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。
html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。用一扇门比喻三者间的关系是：html是门的门板，css是门上的油漆或花纹，javascript是门的开关。
所阐述内容转载自：https://blog.youkuaiyun.com/hemiaolin8393/article/details/80557781

六、Web前端的三大技术

HTML: 结构
CSS :样式
Java Script :行为（交互）

七、HTML基础结构与属性

1.1HTML的概念

HTML：超文本标记语言（HyperText Markup Language）,标准通用标记语言下的一个应用。是网页制作必备的编程语言。
超文本：文本内容 + 非文本内容 （ 图片、视频、音频等 ）
标记：<单词>
语言: 编程语言
标记也叫做标签：

写法分成两种： **单标签**

**双标签**

创建标签的快捷键：单词 + tab + → <单词>

标签可以上下排列，也可以 组合嵌套。

附录表格：

代码举例：

标签的属性： 来修饰标签的，设置标签的一些功能。 （一个标签可以加很多歌属性的）
<标签 属性=“值” 属性2=“值2”>
举例：

八、HTML初始代码

每一个.html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。要符合html的文件的规范写法。
！ + tab键 ：快速键的创建html的初始代码
html的初始代码如下：

九、HTML的注释

1.1写法

在浏览器中看不到，只能在代码中看到注释的内容

1.2意义：

1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示。
3.快捷添加注释与删除注释：
ctrl + /
shift + alt + a
举例：

十、HTML语义化

1.1概念

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

1.2标签

列表标签、标题标签、段落标签等

1.3好处

1.3.1在没有CSS的情况下，页面也能呈现出很好的内容结构

1.3.2有利于SEO，让搜索引擎爬虫更好的理解网页

1.3.3方便其它设备解析（如屏幕阅读器、盲人阅读器等）

1.3.4便于团队开发和维护

十一、标题与段落

1.标题 -->双标签 ：

…

2. h标签：网页内容区域
3. 在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
4. h5、h6 标签在网页中不常使用。
5. p标签：段落 -> 双标签 :

代码练习：

十二、文本修饰标签

强调 -->双标签 ：
区别：
1.写法和展示效果是由区别的，一个加粗、一个斜体
2.stong的强调性更强，em的强调性稍弱。
在这里插入代码片**：表示强调，会对文本进行加粗**
：表示强调，会对文本进行斜体
^{、 : 下标文本、上标文本}
、 :删除文本、插入文本
注：一般情况下，删除文本都是和插入文本配合使用的。
代码举例：

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

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

十四、引入文件的地址

相对路径：
在路径中表示当前路径/在路径中表示上一级路径
代码举例：

十五、跳转链接

a - >双标签
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：
在当前页面打开 _self
新窗口打开 _blank
base -> 单标签 ：作用就是改变链接的默认行为的。
代码举例：

十六、跳转锚点

1.1两种做法：

1.1.1#号 + id 属性

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

实现一: #号
id属性
代码举例：

实现二：#号
name属性
代码举例：

十七、特殊符号

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

1.1特殊字符

1.1.1 & + 字符

1.1.2解决冲突：左右尖括号、添加多个空格的实现

1.1.3&It ; &gt ; &nbsp

字符图如下：

十八、列表标签

1.无序列表 →

• 、
• 符合嵌套的规范
  2.有序列表 →
  • 、
  • 一般用的比较少，可以用无序列表来实现

1.无序列表

• 、
• ：列表最外层容器、列表项

注：ul 和 li 必须是组合出现的，他们之间是不能有其他标签的
type属性：改变前面标记的样式（一般都是用CSS去控制） 例如下图：

代码如下：

HTML

• 标签:
  属性值：
  
  创建无序列表:
  

十九、有序列表

1. : 列表的最外层容器
2. : 列表项 注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。 (
   1. 和
   2. 之间是有嵌套规范的：
      1. 和
      2. 是紧邻的两个标签，一般在他们中间是不能够出现其他标签的) 效果：音乐的排行榜、球队的排行榜等（做一个排行榜可以用无序列表，也可以使用有序列表） 很多的排序列表采用
         • 来做也是非常常见的。有序列表用的非常少，因为我们经常用无序列表来代替有序列表

如上图的123项，在正常开发的时候是要删去的，然后再利用CSS来实现。在正常情况下，样式都是用CSS来控制的

type属性：改变前面标记的样式（一般都是用CSS去控制） 例如下图：

HTML标签可选的属性：

无序列代码示例：

有序代码列表的练习：

二十、定义列表

:定义列表 :定义专业术语或名词

:对名词进行解释和描述 定义列表与有序列表和无序列表的区别：有一个类似于标题和标题内容的结构 定义列表 →

、 、

列表项需要添加标题和对标题进行描述的内容 创建定义列表示例：