一、HTML和CSS总体概述
1、HTML(HyperText Markup Language)超文本标记语言
它不是一种编程语言,而是一种标记语言,用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。HTML也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名(扩展名)
2、CSS (Cascading Style Sheets) 层叠样式表
是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用户
3、HTML和CSS的关系
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
HTML就像是一个人,而CSS就像是衣服和化妆品,用来装饰HTML
4、结构 表现 行为
结构——HTML(用于描述页面结构)
表现——CSS(用于控制页面元素样式)
行为——JavaScript (用于响应用户操作)
二、初识HTML
1、开发环境搭建
HTML编译工具
记事本:特点:无代码提示、无代码高亮显示、用户界面不友好;
Sublime(推荐):特点:运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件;
VSCode(推荐):特点:丰富的插件支持、可进行git管理;
VSCode插件推荐:
HTML CSS Support - Html提示Css自动补全
HTML Preview - 提供预览HTML文档的功能
HTML Snippets - 完整的HTML标签,包括HTML5片段
Live Server - 启动一个开发本地服务器,为静态和动态页面提供实时重载功能
open in browser - 可以在默认浏览器或应用程序中打开当前文件。
Idea:特点:集成开发工具、类似DW,node,npm…运行速度较慢;
浏览器推荐
Html是在浏览器上解析执行的,每种浏览器对相同的Html代码解析可能产生不同的结果,所以我们需要安装多种主流的浏览器进行兼容性测试。
目前主流的浏览器:Google Chrome(谷歌)、Firefox(火狐)、Opera、Safari、Microsoft Edge
2、HTML文档结构解释
打开VSCode,新建后缀名为.html的文件,输入"!"或"html:5"生成基本的html5结构
<!-- 文档头声明 -->
<!-- html5标准网页声明 -->
<!DOCTYPE html>
<!-- 语言选择:en代表英语,zh-CN代表中文 -->
<!-- 根标签 html,一个文档只允许有一个 -->
<html lang="en">
<!-- head标签中的内容不会显示在网页中,它用来帮助浏览器解析页面 -->
<!-- head中常用的标签:meta(元信息设定)、title(文档标题)、link(css)、script(js) -->
<!-- meta标签是一个自结束标签,它用来设置网页的一些元数据,比如网页的字符集、关键字keyWords、简介 -->
<head>
<!-- 字符编码,浏览器根据字符编码进行解析 -->
<!-- 常见字符编码有:gb2312 gbk(国标码) unicode UTF-8(万国码) Big5(繁体字(环球新闻导报社))-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 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>Document</title>
</head>
<body>
<!-- body标签内的内容都会显示在网页中 -->
</body>
</html>
3、语法
注释
快捷键:选中之后,按 ctrl + /
元素
单标签元素
只有一个标签
<meta /> 、<img />、<br/>、<hr/> 等
双标签元素
有开始标签和结束标签
<div></div>
<p></p>
一个html元素(或者说双标签元素)由开始标签、结束标签以及元素内容组成
此外,标签可以嵌套使用:
镜面嵌套:(推荐)(并且建议用块级元素嵌套行内元素)
<div>
<p></p>
</div>
交叉嵌套(不会报错,但是是非法的)
<div><p></div></p>
属性
1、属性写在标签的内部
2、属性名和属性值使用 = 隔开
3、多对属性之间使用空格隔开
4、属性值加 ‘’ 或者 “”
5、绝大多数标签都具有的属性:id,title,style,class
<div style="background-color: pink; border:1px solid red">我是cssDiv</div>
<div id="only" class="twb">我是唯一的div</div>
其他
空白语法:多个空格和换行符,只会解析成一个空格,我们可以使用 ;
有些字符会和标签产生冲突,这时我们可以使用字符实体
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 |   |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
’ | 撇号 | &apos (IE不支持) | ' |
¢ | 分(cent) | ¢ | ¢ |
£ | 镑(pound) | £ | £ |
¥ | 元(yen) | ¥ | ¥ |
€ | 欧元(euro) | &euro | € |
§ | 小节 | § | § |
© | 版权(copyright) | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | &trade | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
4、块级元素
块级元素有:html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…
块级元素的特点:
1、独占一行空间
2、默认宽度为100%
3、高度由子元素或内容决定
4、可以通过css指定其宽度
建议:不要将块级元素嵌套在行内元素中
元素 | 作用 | 已有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> |
5、行内元素
行内元素有:span、a、img、strong(加粗)、b(加粗)、i(斜体)、em(斜体)、sub(下标)、sup(上标)…
行内元素的特点:
1、宽高由自身决定
2、与其他元素共享一行
3、无法根据css设置宽高
4、行内元素不建议嵌套块级元素
img标签:
<!-- 相对路径:./(可以省略)当前目录 ../上一级目录 -->
<!-- img 特有的属性:width、height,不建议宽高一起设置,只设置其中一个就可以了 -->
<!-- alt 图片加载失败时的文字说明
title 鼠标悬停在图片上时显示的文字 -->
<img width="300px" src="" alt="图片加载失败时的文字说明" title="我是一张图片">
a标签:
<!-- a标签控制页面和页面之间的跳转 -->
<!-- href链接到其他页面 -->
<!-- target控制跳转方式 _blank在新窗口打开链接 _self在当前窗口打开链接 默认在当前窗口打开链接 -->
<a href="https://www.baidu.com" target="_self">百度</a>
<!-- 可以使用图片打开链接 -->
<a href="https://www.baidu.com"><img src="" alt=""></a>
<!-- base 标签写在head里面 指定a标签的打开方式
当base标签和a标签都写了target属性时,会参照a标签设置的来执行(就近原则)
-->
<base target="_blank">
锚点:
1、希望回到头部 设置href为#
2、希望回到其他部分 通过id设置其他部分 href=#id
3、跨页面锚点(href=./xxx.html#id)
<div>我是一个div</div>
<div>我是一个div</div>
<div id="center">中间div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<a href="#">回到顶部</a>
<a href="#center">回到中间div</a>
<a href="./xxxx.html#three">跳转到xxxx页面的id为three的标签</a>
mailto链接:mailto链接是一种html链接,能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件,类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook,那么直接点击mailto链接就可以获得默认设置的邮件信息。
<!-- mailto链接 打开电脑自带的邮件 -->
<a href="mailto:111111111@qq.com">发送邮件</a>
6、H5新增标签
音视频标签
video标签
视频标签
<!-- 格式一: -->
<video src=""></video>
<!-- 格式二:当浏览器播放视频时它就会从source中选择一种自己支持的格式来播放 -->
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
它的一些属性:
src : 视频地址
autoplay : 自动播放
controls :视频控制条
poster : 视频封面
loop : 循环
muted : 静音
width/height : 和img标签中的一模一样
audio标签
音频标签
<audio src=""></audio>
<audio>
<source src="" type="">
</audio>
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
语义标签
header
<header>
是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含搜索表单或logo。
nav
<nav>
是一个可以用作页面导航的链接组,其中导航元素链接到其他页面或当前页面的其他部分。
article
<article>
代表文档,页面或应用程序中独立的,完整的,可以独自被外部引用的内容,也可以嵌套使用。可以是一篇博客或者报刊中的文章,一篇论坛帖子,一段用户评论或者独立的插件,或其他任和独立的内容。
section
<section>
作为Html文档独立的功能。
aside
<aside>
元素用来表示当前页面或文章的附属信息部分,它可以包含当前页面或主要内容相关的引用,侧边栏,广告,导航条,以及其他类型的有别于主要内容的部分。
footer
<footer>
元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者,相关阅读连接以及版权信息等。与header类似,一个页面中也未限定footer元素的个数。
address
<address>
元素用来在文档中呈现联系信息,包括文档作者或文档维护者名字,他们的网站链接,电子邮箱,真实地址,电话号码,以及跟文档相关的联系人的所有联系信息。
在不支持Html5的浏览器中,由于浏览器无法识别Html5新增标签,所以默认将这些标签设置为行内元素(display:inline),为了兼容性,需要:
section, article, aside, footer, header, nav, hgroup { display:block; }
figure& figcaption
figure元素是一种元素的组合,带有可选标题,figure元素用来表示网页上一块独立内容,将其从网页上移除后不会对网页上的其他内容产生任何影响,figure元素所表示的内容可以是图片,统计图或代码示例,也可以是音频插件,视频插件,统计表格等。figcaption元素表示figure元素的标题,它从属于figure元素,必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素,但是允许放置多个其他元素。
多用于用作文档中插图的图像。
details
details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字,也可以放置表单,插件或对于一个统计图提供的详细数据表格。
open属性
当该属性值为true时,该元素内部的子元素应该被展开显示;当该属性的值为false时,其内部的子元素应该被收缩起来不显示。默认值为false
summary子元素
summary元素从属于details,用鼠标单击summary元素中的内容文字时,details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素,浏览器会提供默认文字(详细信息)以供单击。
<!-- open="true" 内容默认展开 -->
<details open="true">
<summary>爱好</summary>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</details>
<figure>
<figcaption>这是图片</figcaption>
<img src="" alt="">
</figure>