一、HTML简介
- HTML：超文本标记语言；Hypertext Mark-up Language；
- XML：可拓展的标记语言；Extensible Mark-up Language；
- HTML是XML的拓展语言，用于设计网页，它不算是一种编程语言。
- HTML5：它比之前的HTML扩展了一些新的功能（新的标签，新的样式，新的语法……）
侠义上说HTML5是HTML的第5个版本；广义上说HTML5是最新一代web开发技术的综合，包括HTML5，CSS3，ES6
二、html的基本结构
- ctrl + /：生成注释；
为什么要写注释：
注释可以作为代码的说明，供自己或者别人观看。
将代码注释起来，代码就不会再执行，可以方便删除和还原。 - 基本结构
DOC：Document ，TYPE：类型
定义文档类型（使用HTML的哪个版本），当前这个类型就是HTML5类型；
<!DOCTYPE HTML>
html标签是一个网页的跟标签，一个网页中必须有且只能有一个html标签;
<html>
head标签是页面的头标签，用于记录本页面的基本信息。例如：页面的字符集、页面的标题、页面的logo……
head标签中的内容不会显示在页面中;
<head>
meta标签用于设置页面元数据，例如页面的字符集（编码格式）;
<meta charset="utf-8" />
title标签，用于设置页面的标题;
<title>HTML基本结构</title>
</head>
body标签是页面主体部分，body中的内容显示在页面窗口中;
<body>
body标签是页面主体部分，body中的内容显示在页面窗口中;
</body>
</html>
三、html标签结构
- HTML标签从组成结构划分：单标签和双标签。
单标签：
在传统HTML版本中，单标签中需要加 /，
但是从H5开始，单标签不需要再添加闭合 /，
双标签：
前边的叫开始标签，后面的叫结束标签； - HTML标签从内容可分为三部分：标签名， 标签属性， 标签内容；
content
xx是标签名；
p1="v1"标签属性，其中p1是属性名，v1是属性值。一个标签可以有多个属性，每个属性之间用空格隔开。
一个属性也可以没有属性值，也可以有多个属性值。
content是标签内容； - HTML标签从布局方式可分为：行元素、块元素、行内块；
四、常用的HTML标签
- h1~h6用于设置页面正文的标题，h1字体较大，h6字体较小；
<h1>洪布斯的个人博客</h1> - p标签（paragraph），用于显示一个段落；
<p>心若不动，风又奈何！</p> - img标签（image），用于在页面中显示一个图片。
src（source）属性表示要显示的图片的位置（url）；
alt属性表示图片加载失败时，所替换的文本；
<img src="pic.jpg" alt="图片加载失败时显示" /> - br标签用于在页面中换行；
<br> - hr标签表示分割线;
<hr> - a标签用于显示一个超链接，点击之后可以跳转到另一个地址;
href属性用于设置要跳转的地址;
target属性用于设置跳转页面的打开方式，默认_self表示在当前页打开，_blank表示在新的标签页中打开;
<a href="http://www.baidu.com" target="_blank">百度一下</a> - div标签是division的缩写,表示划分,分别作用是将页面划分为不同的区域 ,div元素不设置宽高时,高度取决于自身内容,宽度和父元素等宽;
<div></div>
五、html转义字符
常用的转义字符：
转义字符（十进制）——> 对应的符号
<(<)——><>(>)——>> ( )——>小空格，一个字母的宽度 (　)——>大空格，一个汉字的宽度&(&)——>&"(")——>"
六、标签样式和CSS
- style标签中的内容必须是CSS样式；
2.css格式：
选择器{
样式名1: 样式值1;
样式名2: 样式值2;
} - div就是一个选择器（标签名选择器），表示本条规则（次css样式）是为页面中哪些标签元素设置的（添加的）;
- 所有可视的元素都可以通过style属性添加样式，通过这种方式添加的样式叫做行内样式（内联样式）;
- 使用行内样式有很多限制，不适合为大量的元素添加样式，所以很少使用。
设置样式更方便的方式是使用 CSS：层叠样式表
七、基本选择器
- 标签名选择器：p，表示选择本页面中所有名为p的标签
p{ color: red; } - class选择器：.smal，表示选择本页面中所有class属性中包含smal值的元素;
class属性可以有多个属性值，多个值之间用空格隔开;
.small{ color: red; } - id选择器：#linethrough，表示选择本页面中id=linethrough的标签元素;
id属性，是元素的唯一标识符，只能有一个值，且同一个页面中不能有重复的相同的id;
#linethrough{ color: red; } div#box.item表示选择页面中id为box并且class为item的div标签 ;- 如果需要单独给某个元素设置样式，使用id选择器；
如果给多个元素批量设置相同的样式，使用class选择器；
八、文本基本样式
- 字体颜色
color: red; - 字体大小
font-size: 50px; - 字体类型
font-family: "迷你简太极"; - 字体粗细 100-900 bold=700 normal=400
font-weight: bold; - 字体的样式 italic:斜体 normal:正常
font-style: italic; - 文本装饰，可以设置下划线或者是删除线
text-decoration: line-through; - 文字对齐方式 center:居中 right:居右
text-align: center; - 首行缩进
text-indent: 2em; - 背景颜色
background-color: rgba(255,0,0,0.5);
字符串表示颜色：red红色 green绿色 blue蓝色 yellow黄色 black黑色 white白色 pink粉红色 purple紫色……
九、文本标签和html语义化
- 加粗
b标签可以实现文本加粗；strong也可以实现文本加粗；
<b>洪布斯</b>，<strong>洪布斯</strong>
class样式进行加粗:font-weight: bold;
PS:以上三种情况都可以实现文本加粗,但是语义不同
b标签仅仅是将文本进行加粗,但是不对内容进行强调，strong标签除了加粗之外,还有强调的语义,表示文本标签中的内容是本页面内容中需要强调的重点区域,通过class设置的也可以加粗,同样没有语义； - 删除线
s会让文本有一个删除线的效果；del也是,同时具有删除的语义；
<s>洪布斯</s>，<del>洪布斯</del> - 在html5中新增了很多的语义化的标签,例如:header,footer,main,aside,nav,artical,section…这些标签从样式上和div一模一样,但是语义不同,对于界面分析就不同,比如header表示头部内容,footer表示页面尾部内容,nav设置导航内容,这些标签都增加了代码的可读性,优化搜索的速度SEO(搜索引擎优化) ;
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
