文章目录
1.HTML CSS导学
是对网页开发的初步学习，是做网站的编程语言，浏览器把代码解析成网页
2.HTML CSS的内涵
3.建议使用VS code
右键查看网页源代码写代码的位置：html文件，使用 编辑器 VS code 一种轻量级的代码编辑器
下载：http://code.visualstudio.com
安装：1.下载中文语言包chinese，open in borwser
基本的按键使用：
ctrl+s:保存
ctrl+a:全选
ctrl+x、ctrl+c、ctrl+v:剪切、复制、粘贴
ctrl+z、ctrl+y:撤销，前进
shift+end:从头选中一行
shift+home:从尾部选中一行
shift+alt+下箭头号：快速复制一行
alt+a上箭头/下箭头：快速移动一行
tab:向后缩进
tap+shift:向前缩进
多光标：alt+鼠标左键
ctrl+d：选择相同元素的下一个
VScode的搜索功能：根据输入的关键词查找相关的内容
4.建议使用chrome浏览器
因为chrome浏览器市场占额大且与代码适配性更好，推荐使用chrome浏览器 下载地址：http://code.visualstudio.com 市场的五大浏览器 五大浏览器分别是IE、火狐（Firegox）、谷歌（Chrome）、Safari和Opera
①IE浏览器IE 浏览器是微软公司旗下的浏览器，是目国内用户量最多的浏览器。现今，微软以IE浏览器和Windows捆绑的模式不断向市场扩展份额，使IE成为市场的绝对主流。现在装了Windows系统的电脑基本无法卸载IE浏览器。浏览器内核（渲染引擎）：负责读取网页内容，整理资讯，计算网页的显示方式并显示页面
②Firefox浏览器 Firefox浏览器使Mozilla公司旗下浏览器，也是刚才提到的网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织，他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。
③Chrome浏览器 Chrome浏览器是google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。
④Safari浏览器 苹果公司在苹果手机上开发Safari浏览器，利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。
⑤Opera浏览器 Opera是挪威Opera Software ASA公司旗下的浏览器。当时opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。
市场占比总体情况如下：
Google Chrome浏览器 – 67.33% (+1.19) 微软Edge – 10.91% (+0.05) 苹果Safari – 8.83% (-0.14) Firefox – 7.4% (-0.67) Opera – 2.86% (-0.21)
5.了解网站开发
1.UI设计师: 写设计稿
2.web前端开发工程师：根据设计稿写代码；使数据库里的数据显示到页面；一般工具是HTML+CSS
3.web后端开发工程师:把产生的数据信息存储起来，方便后续取用；进行后台管理
4.JavaScript与HTML、CSS关系
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。
6.web前端三大核心技术
HTML
CSS
JavaScript
7.HTML基本结构和属性
HTML:超文本标记语言
超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>
语言：编程语言
标记也叫标签：
写法分成两种：单标签和双标签
快捷键tap:字母＋tap键→标签单词
标签:可以上下排列，可以组合嵌套。标签可具有多个属性，如<单词 属性一:… 属性二… > </单词>
8.HTML初始代码
定义:每个HTML文件都有的代码统称为初始代码
快速创建:！＋tap
初始代码声明：告诉浏览器这是一个html文件html文件的最外层标签"lang"="en、zh-CN"表示是一个英文/中文网站元信息：是编写网页中的一些赋值信息
<!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>
</body>
</html>
9.HTML中的注释
写法：<–注释的内容–>在浏览器中看不到，只能在代码中看到注释的内容。
意义：
1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示。
快速添加:ctrl＋/
<!-- 文字段落 -->
删除注释:shift＋alt＋a
根据网页中内容的结构，选择合适的HTML标签进行编写
10.HTML语义化
优点:
①在没有CSS的情况下，页面也能呈现出很好的内容结构；
②有利于SEO，让搜索引擎爬虫更好的理解网页
③方便其他设备解析（如屏幕阅读器、盲人阅读器等）
④便于团队开发与维护
11.标题与段落
标题：h、p(双标签)
<h1> </h1>
<p> </p>
<h2> </h2>
<h3> </h3>
到
<h6> </h6>
①在中title标签作网页的首部标题而h、p作内容上的标题
②h分6个等级
③p表示标题下的内容段落
12.文本修饰标签
strong:表示强调，会对文字加粗，双标签
<strong> </strong> <!--加粗 -->
em:表示强调，会对文字斜体，双标签。
<em> </em> <!-- 斜体 -->
sub、sup:分别是下标文本，上标文本，双标签。
<sub> </sub> 上标 <sup> </sup>下标
del、ins:删除文字、插入文本。双标签(更多会用CSS标式)。
<del> </del> 横线删除 <ins> 插入文本 </ins>
13.图片标签与图片属性
mn img:图片标签
属性:
scr:输入地址
alt:图片未成功表示时，一段友好的表示文字
title:图片的题目
width、height:控制图片的大小
<img src=" 链接地址" alt="文字"title=" 标题" width="宽" height="高 " >
设置eidth和height可以固定图片(不会有加载跳转图片)。
14.引入文件的地址路径
相对路径:·/开头 可以写成＼
绝对路径:电脑硬盘文件的精确地址 可以写成＼
图片网址http://…不能写成＼
注:在移植时需要用相对路径
15.跳转链接
a 双标签
<a href="http://"></a>
<a href=""> <img src="" alt="">可以用图片地址、文字描述 </a>
属性:href:链接的地址
target:可以改变链接的打开方式，默认情况下在当前页面打开_self,target可以使新界面在新的窗口打开。
<a href="" target="_blank"> </a>
base:单标签，改变链接的打开方式，写在head处
<base target="_blank">
16.跳转锚点
实现一:#号 属性id
实现二:#号
<a href="#html">HTML</a>
<a href="#CSS">CSS</a>
<a href="#JV">JS</a>
<h2 id="html"> 超文本标记语言</h2>
<h2 id="CSS">CSS</h2>
<h2 id="JV">JAVA</h2>
name属性
<a href="#123">456</a>
<a name="123"></a>
文字内容
17.特殊符号
因为有存在无法用输入法输入字符的情况，在HTML中会有专门表示特殊字符的代码。
18.无序列表
ul、li分别为列表的最外层，列表层。
ul>
<li>
1
</li>
<li>
2
</li>
</ul>
注意:ul和li之间不允许存在标签
tape属性，可以修饰列表前标符 查看地 址:http://www.w3school.com.cn/tags/att_ul_type.asp
19.有序列表
使用情况很少，无序列表可以代替有序列表
ol、li:最外层容器、列表层
type属性
20.定义列表
dl需要添加标题和对标题注释的内容时可用。
dt 定义专业术语或名词
dd 对名词进行说明的内容
<dl> </dl>
<dt> </dt>
<dd>
</dd>