1.HTML与CSS (了解即可)
1.1.什么是HTML?什么是CSS?
HTML是HyperText Markup Language(超文本标记语言)
它不是一种编程语言,而是一种标记语言,用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。HTML也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名(扩展名) HTML的历史版本发展 ①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。
③HTML 3.2:1997年1月14日,W3C推荐标准。
④HTML 4.0:1997年12月18日,W3C推荐标准。
⑤HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。
⑥HTML 5:2014年10月,HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
HTML特点
超文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网 (WWW)盛行的原因之一,其主要特点如下:
1.简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。
2.可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类 元素的方式,为系统扩展带来保证。
3.平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用 在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
4.通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文 本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏 览器。
CSS (Cascading Style Sheets) 层叠样式表
是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用户
1.2.HTML和CSS之间的关系?
-
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
-
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
HTML就像是一个人,而CSS就像是衣服和化妆品,用来装饰HTML
1.3.结构,表现,行为?
结构
HTML用于描述页面的结构 (相当于是页面的素颜)
表现
CSS用于控制页面中元素的样式 (相当于给页面美颜)
行为
JavaScript用于响应用户操作 (相当于给页面活起来)
2.初识HTML
2.1.开发环境搭建
可用于编写HTML的编译工具有很多
-
记事本:特点:无代码提示、无代码高亮显示、用户界面不友好;
-
Sublime(推荐):特点:运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件;
-
VSCode(推荐):特点:丰富的插件支持、可进行git管理;
-
Idea:特点:集成开发工具、类似DW,node,npm...运行速度较慢;
Html是在浏览器上解析执行的,每种浏览器对相同的Html代码解析可能产生不同的结果,所以我们需要安装多种主流的浏览器进行兼容性测试;
主流浏览器:Google Chrome(谷歌)、Firefox(火狐)、Opera、Safari、Microsoft Edge。
VSCode插件推荐
HTML CSS Support - Html提示Css自动补全
HTML Preview - 提供预览HTML文档的功能
HTML Snippets - 完整的HTML标签,包括HTML5片段
Live Server - 启动一个开发本地服务器,为静态和动态页面提供实时重载功能
open in browser - 可以在默认浏览器或应用程序中打开当前文件。
2.2.Hello HTML
打开VSCode,新建后缀名为.html的文件,输入"!"或"html:5"生成基本的html5结构
回车
当然可以使用别的标签输出 hello world
比如 <div> </div>
<span></span>
这些块级元素和行内元素 学了以后就知道区别
<!-- 文档头信息 -->
<!-- html5标准网页声明 -->
<!-- 不加这一行,就表示页面采用浏览器本身的解析标准,这样会造成页面在不同的浏览器(IE、火狐等)可能出现不同的显示效果。 -->
<!-- h5的文档声明,声明当前的网页是按照HTML5标准编写的编写网页时一定要将h5的文档声明写在网页的最上边。
如果不写文档声明,则会导致有些浏览器会进入一个怪异模式,进入怪异模式以后,浏览器解析页面会导致页面无法正常显示,所以为了避免进入该模式,一定要写文档声明
-->
<!DOCTYPE html>
<!-- 属性lang是单词language的缩写,意思是语言,”en”代表英语,”zh-CN”代表中文 -->
<!--
html根标签,一个页面中有且只有一个根标签,网页中的所有内容都应该写在html根标签中
-->
<!-- 只有两个子标签 head:浏览器设置 body:可视区展示 -->
<html lang="en">
<!-- head标签,该标签中的内容,不会在网页中直接显示,它用来帮助浏览器解析页面的 -->
<head>
<!--
meta标签用来设置网页的一些元数据,比如网页的字符集,关键字、简介
meta是一个自结束标签,编写一个自结束标签时,可以在开始标签中添加 一个/
-->
<!--
字符编码,浏览器会根据字符编码进行解析
常见的字符编码有:gb2312、gbk、unicode、utf-8。
-->
<meta charset="UTF-8">
<!--
viewport 设备的屏幕
width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览, 那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>Hello HTML</title>
</head>
<!--
body标签用来设置网页的主体内容,网页中所有可见的内容,都应该在body中编写
-->
<body>
<!-- 在body里的内容都是显示在浏览器的视图区的 -->
<!--
在这个结构中,可以来编写HTML的注释注释中的内容,不会在页面中显示,但是可以在源码中查看我们可以通 过编写注释来对代码进行描述,从而帮助其他的开发人员工作,一定要养成良好的编写注释的习惯,但是注释一 定要简单明了
-->
</body>
</html>
语法
注释
html中只有一种注释,即 <!--注释内容-->
选中代码 ctrl+/
记录编程思路,解释说明业务功能
元素
单标签元素,仅有一个标签
例如
<meta /> 、<img />、<br/>
双标签元素,由开始标签和结束标签组成
例如
<div> </div>
<p> </p>
标签可以进行嵌套使用,即可以将一个标签写入到另外一个标签内。
例子 p标签和strong标签的嵌套使用
正确
<p>段落<strong>加强</strong>标签</p>
以下是非法的:交叉嵌套
<p>非法<strong>交叉</p>嵌套</strong>
HTML标签都拥有自己的属性,属性应该出现在元素的开始标签内部,属性名和属性值通过"="分割,属性与属性之间通过空格分割,属性名不区分大小写,属性值区分大小写并且属性值可以使用双引号引起来。
核心属性:绝大多数标签都具有的属性。title、id、class、style。
title:描述信息
<div title="div1">div1</div>
id:唯一标识
<div id="div1">div1</div>
class:标识一类元素
<div class="box1">box1</div>
style 样式
<div style="color: red;">我是一个div</div>
2.3.3.其他
空白 在文档中无论出现多少个空白或者换行,浏览器都解析为一个空白 实体 在HTML中,某些字符是预留的。例如:不能使用小于号<和大于号>,这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities),实体以&符开始,以;结尾。以下是常见的实体
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 |   |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | &apos (IE不支持) | ' |
¢ | 分(cent) | ¢ | ¢ |
£ | 镑(pound) | £ | £ |
¥ | 元(yen) | ¥ | ¥ |
€ | 欧元(euro) | &euro | € |
§ | 小节 | § | § |
© | 版权(copyright) | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | &trade | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
2.4.块级元素
作用:搭建网页结构
特点:
-
独占一行空间
-
默认宽度为100%
-
高度由子元素或内容决定
-
可以通过css指定其宽度
元素:html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
建议:不要将块级元素嵌套在行内元素中。
元素 | 作用 | 已有CSS效果 |
---|---|---|
div | 无意义的块元素 | |
h1~h3 | 标题标题 | margin font-size font-weight |
p | 段落 | margin |
ul,li | 无序列表 | margin padding list-style |
ol,li | 有序列表 | margin padding list-style |
dl,dt,dd | 定义列表 | dl - margin dd - margin |
html | ||
body | margin | |
header | H5新增的语义化标签<br> (样式与div类似) | <div class="header"></div> |
footer | <div class="footer"></div> | |
nav | <div class="nav"></div> | |
article | <div class="article"></div> | |
section | <div class="section"></div> | |
aside | <div class="aside"></div> | |
address | <div class="address"></div> |
2.4.行内元素
作用:在结构中填充网页内容
特点:
-
与其他行内元素共享一行空间
-
宽高由自身决定
-
由于不用来搭建网页结构,所以也无需通过css指定其宽度
-
行内元素中不可以嵌套块元素
元素:span、a、img、strong、b、i、em、sub、sup...
- h标签
h标签 标题标签 在HTML中,一共有六级标题标签 h1~h6 在显示效果上,h1最大,h6最小,但是文字的大小我们并不关心 6级标题中,h1的最总要,表示一个网页中的主要内容,h2~h6重要性依次降低,对于搜索引擎来说, h1的重要性仅仅次于title,搜索引擎检索完title会立即查看h1中的内容 h1标签非常重要,它会影响到页面在搜索引擎中的排名,一个页面最好只写一个h1标签 一般的页面中,我们只使用h1 h2 h3,其他的基本不用
- p标签
段落标签,段落标签用于表示内容中的一个自然段 使用p标签来表示一个段落 p标签中的文字,会独占一行,并且段与段之间会有一个间距
- br标签
br标签 表示换行标签 br标签是一个自结束标签 br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签
-hr标签
hr标签 可以在页面中生成一个分割线
- 字符实体
空格
< <
> >
“ "
& &
‘ '
- img标签
img标签 告诉浏览器要显示一张图片
img标签的格式
<img src="" alt="">
src:设置一个图片的路径(绝对路径和相对路径,最好使用相对路径) alt:可以用来设置在图片不能显示的时,对图片的描述 img标签的其他属性 width:设置图片的宽度 height:设置图片的高度 title:用于告诉浏览器,鼠标悬停的时候,需要弹出的描述框中显示什么内容。
<img src="图片的url或本地路径地址" alt="" width="100px" height="100px" title="">
注意点:
1.px 单位名称为像素,相对长度单位,像素px是相对于显示器屏幕分辨率而言的。像素的使用性特
别广。
2.如果不设置img标签的宽度和高度,那么图片就会按照默认的样式显示,如果设置了宽高,img就
会按照设置的宽高来显示。
3.有时设置img的宽高会使图片失真,这时只需要设置宽度或者高度中的一个,另外一个会等比例调整。
4.一般除了自适应的页面,不建议设置width和height。
5.和h标签以及p标签不同的是,img标签不会独占一行
- a标签
a标签的作用 用于控制页面与页面之间跳转的 a标签的格式
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>
a标签中还有一个叫做target的属性,这个属性专门用于控制如何跳转 self:用于当前的选项卡中进行跳转,也就是不新建页面跳转,默认就是_self _blank:用于在新的选项卡中进行跳转,也就是新建页面跳转 a标签也有一个title属性,效果和img标签的title类似
注意点: 1.a标签不仅可以让文字点击,也可以让图片被点击 2.一个a标签必须有一个href属性,否则a标签不知道要跳转到什么地方 3.如果通过a标签href属性指定一个URL地址,那么必须在地址前面加上http://或者https:// 除了URL地址,还可以指定一个本地地址
-假链接
什么是假链接? 就是点击之后不需要跳转的链接我们称之为假链接
在企业开发初期,其他的界面都没有完成,所以不知道跳转到什么地方,这个时候先用假链接来代替,项目完成后再换成真链接
假链接的格式 1.# 直接回到页面的顶部 2.javascript: 不会自动回到页面的顶部
<a href="#">回到顶部</a>
<a href="javascript:">点我啊</a>
- 锚点
1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
2.如何和HTML中的标签绑定一个独一无二的身份证号码呢? 在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的
3.所以要想实现通过a标签跳转到指定的位置分为两步 3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值 3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少 格式:
<a href="#center">跳转</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="center">我是中部</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
注意点: 1.通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置 2.a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置 格式:
//a.html
<a href="b.html#bottom" target="_blank">跳转</a>
//b.html
<p id="bottom">找到我</p>
- em
意为强调,突出文章重点
- strong
意为强调,内容更为有用
- b
加粗
- i
斜体
- u
下划线
- div
div是一个无语义的标签,就是一个纯粹的块元素,并且不会为它里边的元素设置任何的默认样式,div元素主要用来进行页面基本结构的搭建
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
- span
span没有任何的语义,span标签专门用来选中文字,然后为文字来设置样式
1.网页三要素
HTML 、CSS、JS
结构 表现 行为
网页框架搭建,于描述页面的结构
用于表现网页元素的样式,颜色,字体,背景
用于响应用户操作,动态+事件
2.注释 ctrl+/
<!-- 导航栏 --> <!--/ 导航栏 -->
养成良好习惯,用于给其他开发人员表述代码结构
3.文档结构
<!-- 文档头信息 -->
<!-- html5标准网页声明 -->
<!-- 不加这一行,就表示页面采用浏览器本身的解析标准,这样会造成页面在不同的浏览器(IE、火狐等)可能出现不同的显示效果。 -->
<!DOCTYPE html>
<!-- 语言,”en”代表英语,”zh-CN”代表中文 -->
<!-- 只有两个子标签 head:浏览器设置 body:可视区展示 -->
<html lang="en">
<!--
字符编码,浏览器会根据字符编码进行解析
常见的字符编码有:gb2312、gbk、unicode、utf-8。
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>Hello HTML</title>
</head>
<!--
body标签用来设置网页的主体内容,网页中所有可见的内容,都应该在body中编写
-->
<body>
<!-- 在body里的内容都是显示在浏览器的视图区的 -->
</body>
</html>
4.属性
title=“” 鼠标悬停后的提示文字
id 身份证,唯一标识符
class 类
style 行内样式,优先级最高
5.实体
空格
< <
> >
4.块级、行内
块级
div、p、h1~h6、ul/ol-li
特点:
1.独占一行
2.宽度默认为100%,如果没有父元素的话,宽度相对视图区而言。如果有父元素,相对父元素而言。高度由子元素及其内容决定(撑起)。块级元素可以直接设置宽高。
3.块级元素可以包含行内与块级。
行内 (img、input特殊行内,可以直接设置宽高,置换元素)
span、a、img、strong、i、em
特点:
1.与其他元素共享一行。
2.宽高由自身决定。
3.行内相对来说只能包含行内。
块级与行内区别 高频面试题 80%
1.块级独占一行,行内共享一行。
2.块级可以直接设置宽高,而行内不行。(通过CSS的display属性,取值为inline-block/block,这样可以给行内元素设置宽高。)
span{
display:block/inline-block;
width:
height:
}
3.块级可以包含行内与块级,而行内只能包含行内。
5.a 标签
href 放跳转路径
相对./ ../ or 绝对路径
http://ip:端口号/项目名/文件名
target 跳转页面打开位置
_self 默认,在当前窗口打开
_blank 新窗口/新的选项卡
6.img 放图片的元素
src 放图片路径
相对./ ../ or 绝对路径 (一般用相对路径,网页图片下载到本地后用./ ../获取)
width 宽
height 高
title 鼠标悬停后提示文字
7.p 段落元素
段落标签用于表示内容中的一个自然段
p标签中的文字,会独占一行,并且段与段之间会有一个间距,有16px的上下margin。
8.h1~h6
h1一级标题、h2、h3
9.br换行 hr分割线
自结束标签 <br> <hr>
具体教学可以百度搜索 HTML 菜鸟教程
CSS菜鸟教程
JavaScript菜鸟教程