一、前言
1、学习地址及使用vscode
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频
2、教程简介
什么是前端开发：
网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端
学习路线：
HTML4——>CSS2——>HTML5——>CSS3
3、计算机基础
计算机硬件：中央处理器（运算器+控制器：cpu）、存储器（内存、硬盘）、输入设备（键盘、鼠标）、输出设备（音响、显示器）......
计算机软件：系统软件（Windows、Linux、Mac、Harmony......）、应用软件（微信、腾讯视频）
4、CS架构和BS架构
C:Client（客户端） B：Browser（浏览器） S:Server（服务器）
CS架构软件：需要安装后才能使用：弊端：1、需要安装，2、偶尔更新，3、不跨平台（Windows、mac....）
BS架构软件：借助浏览器打开网页就能用（eg：网页版csdn）：BS的优势：1、无需安装，2、无需更新，3、可跨平台
5、浏览器相关知识
五大主流浏览器：Chrome 、Safari、IE、Firefox、Opera
原因：市场份额大、有自己的内核
内核：用于处理浏览器所得的各种资源，以上五大主流浏览器所使用的内核分别为：Blink、webkit、Trident、Gecko、Blink
6、网页相关概念
输入网址打开网站可以看到网页、一个或多个网页构成网站。
网页的组成部分：结构（HTML）+ 表现（CSS）+ 行为（JavaScript）
二、HTML
1、HTML简介
全称：HyperText Markup Language 译为： 超文本标记语言
1996年W3C制定HTML规范，2014年HTML5由W3C正式发布
2、准备工作
如何让电脑无论开任何格式的图片都统一使用一个应用打开：
开始菜单——设置——默认应用——图片查看器——选择默认打开图片的应用
如何查看电脑是否为32位：
开始菜单——设置——系统——系统信息（或关于）
如何将Chrome浏览器设置为默认浏览器：
开始菜单——设置——默认应用——web浏览器设置
3、HTML标签（元素）
<h1>html</h1>
双标签：起始标签<h1>、结束标签</h1>、标签名h1、标签体html
单标签：<input/>
标签之间有嵌套关系和并列关系，注意换行
4、HTML标签属性
标签名和标签属性之间用英文空格隔开
eg: <marquee loop = "1" bgcolor="green">html</marquee1>
属性名loop、属性值1（名值对组合）
一个标签可以有多个属性，属性间用空格隔开,不同标签属性有相同有不同
标签中不要出现同名属性，否则后写的会失效
特殊属性没有属性名只有属性值eg : disabled
5、HTML基本结构
<html>
<head>
<title>指定网页标题</title>
</head>
<body>呈现在页面中的内容</body>
</html>6、HTML注释
注意：不能嵌套，可让某段代码暂时不参与运行
vscode快捷键：ctrl+/
<!--注释-->7、HTML文档声明
作用：告诉浏览器当前网页版本
写法：
<!DOCTYPE html>
8、HTML字符编码
原则1：存储时，必须采用合适的字符编码，否则无法存储，数据会丢失
原则2：存储时采用哪种方式编码，读取时必须采用相同的方式解码，否则数据能呈现，但会出现乱码
告诉浏览器解码方式：
<head>
<meta charset="UTF-8"/>
</head>9、HTML标准结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我是一个标题</title>
</head>
<body>
</body>
</html>快捷键：光标放在删除行+（Ctrl+Shift+K）
10、开发者文档
官方HTML开发者文档
参考搬运翻译w3c官方网站的前端学习网站：
w3cschool
MDN
11、HTML排版标签
典型的应用排版标签的网站：今日头条
右键检查，ctrl+F可查找标签使用个数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML排版标签</title>
</head>
<body>
<!--双标签、标题标签,一共六级,彼此之间不允许互相嵌套-->
<h1>我是一级标签</h1><!--h1最好只写一个-->
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
<!--段落标签，里头不能再有标题标签h1-h6和p标签以及div-->
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<!--无含义，可统一管理标签进行整体布局-->
<div>
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div>文字</div>
</body>
</html>注意：换行快捷键：Ctrl+Enter
12、HTML语义化标签
语义：含义：标题、段落...（用特定的标签表达特定的含义）
语义化：标签默认的效果（可通过css调整）不重要，语义最重要
语义化作用：
1、代码的可读性强清晰
2、有利于SEO（搜索引擎优化）
注意：百度搜索引擎利用爬虫技术看网页
3、方便设备解析，如：屏幕阅读器、盲人阅读器
13、块级元素与行内元素
使用规则：
1、块级元素中能写：行内元素、块级元素（几乎都能写）
2、行内元素中能写行内元素，但不能写块级元素
3、注意：h1-h6不能相互嵌套、
p标签中不能写块元素，如<ul></ul>块元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>块级元素与行内元素</title>
</head>
<body>
<!-- 块级元素，特点：独占一行 -->
<marquee>巴适</marquee>
<marquee>巴适</marquee>
<h1>巴适</h1>
<h1>巴适</h1>
<p>巴适</p>
<p>巴适</p>
<div>巴适</div>
<div>巴适</div>
<!-- 行内元素，特点：独占一行，不只占自己的宽度 -->
<input type="text">
<input type="text">
<span>巴适</span>
<span>巴适</span>
<!-- 1、块级元素中能写：行内元素、块级元素（几乎都能写） -->
<div>
<div>巴适</div>
<input type="text">
<span>巴适</span>
</div>
<!-- 2、行内元素中能写行内元素，但不能写块级元素 -->
<span>
<span>巴适1</span>
<input type="text">
<span>巴适2</span>
<!-- 浏览器会调整，但区域会错乱 -->
<p>巴适3</p>
</span>
<span>巴适5</span>
</body>
</html>14、HTML文本标签
注意：以下介绍标签均为双标签
用于包裹词汇、短语；
通常写在排版标签里（h1-h6、p、div）
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）
文本标签通常都是行内元素
常用的文本标签：
em 双标签 要着重阅读的内容
strong 双 十分重要的的
span 双 无语义
<p>
预防电信诈骗，请安装：
em:<em>国家反诈APP</em>。
</p>
<p>
strong:<strong>国家反诈APP</strong>
</p>
<p>
span:<span>国家反诈APP</span>
</p>效果：
不常用的文本标签：
cite 作品标题 samp 从上下文中提取内容，如标识设备输出
dfn 特殊术语或专属名词 kbd 键盘文本，经常用在与计算机相关的手册
del 删除的文本 abbr 缩写，最好配合上title属性
ins 插入的文本 bdo 更改文本方向，要配合dir属性，可选值：ltr(默认)、rtl
sub 下标文字 var&nbs
发布者：admin，转转请注明出处：http://www.yc00.com/web/1755488643a5235400.html
评论列表（0条）