初识HTML与CSS
HTML是HyperText Markup Language(超文本标记语言)
它不是一种编程语言,而是一种标记语言,用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。HTML也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
HTML特点
1.简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。
2.可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类 元素的方式,为系统扩展带来保证。
3.平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用 在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
4.通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文 本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏 览器。
CSS (Cascading Style Sheets) 层叠样式表
是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用户
##2.初识HTML
开发环境搭建
可用于编写HTML的编译工具有很多
-
记事本:特点:无代码提示、无代码高亮显示、用户界面不友好;
-
Sublime(推荐):特点:运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件;
-
VSCode(推荐):特点:丰富的插件支持、可进行git管理;
-
Idea:特点:集成开发工具、类似DW,node,npm…运行速度较慢;
语法
1.注释
html中只有一种注释,即 <!--注释内容-->
2.元素
单标签元素,仅有一个标签
<meta /> 、<img />、<br/>
双标签元素,由开始标签和结束标签组成
<div></div>
<p></p>
3.属性
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>
4.块级元素
作用:搭建网页结构
特点:
- 独占一行空间
- 默认宽度为100%
- 高度由子元素或内容决定
- 可以通过css指定其宽度
元素:html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…
建议:不要将块级元素嵌套在行内元素中。
4.行内元素
作用:在结构中填充网页内容
特点:
- 与其他行内元素共享一行空间
- 宽高由自身决定
- 由于不用来搭建网页结构,所以也无需通过css指定其宽度
- 行内元素中不可以嵌套块元素
元素:span、a、img、strong、b、i、em、sub、sup…
基础标签的使用
1.h标签
h标签 标题标签
在HTML中,一共有六级标题标签
h1~h6
在显示效果上,h1最大,h6最小,但是文字的大小我们并不关心
6级标题中,h1的最总要,表示一个网页中的主要内容,h2~h6重要性依次降低,对于搜索引擎来说,
h1的重要性仅仅次于title,搜索引擎检索完title会立即查看h1中的内容
h1标签非常重要,它会影响到页面在搜索引擎中的排名,一个页面最好只写一个h1标签
一般的页面中,我们只使用h1 h2 h3,其他的基本不用
2.p标签
段落标签,段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字,会独占一行,并且段与段之间会有一个间距
3.br标签
br标签 表示换行标签 br标签是一个自结束标签 br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签
4.hr标签
hr标签 可以在页面中生成一个分割线
5. img标签
img标签 告诉浏览器要显示一张图片
src:设置一个图片的路径(绝对路径和相对路径,最好使用相对路径)
alt:可以用来设置在图片不能显示的时,对图片的描述
img标签的其他属性
width:设置图片的宽度
height:设置图片的高度
title:用于告诉浏览器,鼠标悬停的时候,需要弹出的描述框中显示什么内容。
6.a标签
a标签的作用 用于控制页面与页面之间的跳转
a标签中还有一个叫做target的属性,这个属性专门用于控制如何跳转
self:用于当前的选项卡中进行跳转,也就是不新建页面跳转,默认就是_self
_blank:用于在新的选项卡中进行跳转,也就是新建页面跳转
a标签也有一个title属性,效果和img标签的title类似
注意点:
1.a标签不仅可以让文字点击,也可以让图片被点击
2.一个a标签必须有一个href属性,否则a标签不知道要跳转到什么地方
3.如果通过a标签href属性指定一个URL地址,那么必须在地址前面加上http://或者https://
除了URL地址,还可以指定一个本地地址
7.假链接
什么是假链接?
就是点击之后不需要跳转的链接我们称之为假链接
在企业开发初期,其他的界面都没有完成,所以不知道跳转到什么地方,这个时候先用假链接来代替,项目完成后再换成真链接
假链接的格式
1.# 直接回到页面的顶部
2.javascript: 不会自动回到页面的顶部
8.锚点
1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
2.如何和HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的
3.所以要想实现通过a标签跳转到指定的位置分为两步
3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
- em
意为强调,突出文章重点
- strong
意为强调,内容更为有用
- b
加粗
- i
斜体
- u
下划线
- div
div是一个无语义的标签,就是一个纯粹的块元素,并且不会为它里边的元素设置任何的默认样式,div元素主要用来进行页面基本结构的搭建
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
- span
span没有任何的语义,span标签专门用来选中文字,然后为文字来设置样式
- video(H5新增)
作用:播放视频
webm 网页中专用的视频格式
格式:<video src=""></video>
video标签的属性
src:告诉video标签需要播放的视频地址
autoplay:用于告诉video标签是否需要自动播放视频
controls:用于告诉video标签是否需要控制条
poster:用于告诉video标签视频没有播放之前显示的占位图片
loop:一般用于做广告视频,用于告诉video标签视频播放完毕之后是否需要循环播放
muted:静音
width/height: 和img标签中的一模一样
- audio(H5新增)
作用: 播放音频
格式:
<audio src=""></audio>
<audio>
<source src="" type="">
</audio>
注意点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
HTML5新增语义化标签
除语义外,与div相同。新的标签带来的是网页布局的改变及提升对搜索引擎的友好。
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; }
但是上述方法有局限性,比如在IE8以及更早版本,是无法对未知元素进行样式的修饰
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元素,浏览器会提供默认文字(详细信息)以供 单击。