HTML标签+CSS样式（一）

文章目录

- - 一.HTML常用标签类
  - 二.CSS常用样式

一.HTML常用标签类

html：hyperText markup language，超文本标记语言

1. < meta >
告诉搜索引擎爬虫我们的网站关于什么内容

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
在 HTML 中，标签没有结束标签,永远位于 head 元素内部。

<head>
<meta content="服装" name="Keywords">
</head>

属性名不加双引号，属性值加双引号

标签的属性定义了与文档相关联的名称/值对, 元数据总是以名称/值的形式被成对传递的。

规定 HTML 文档的字符编码：
charset：编码
① utf-8：万国码，包括所有国家的语言，（utf-8中最少用8位表示一个字节，也就是最小占位符为八位）
② gb2312：国家标准码，不包括繁体
③ gbk：国家标准扩展码，包括繁体

<head>
<meta charset="UTF-8">
</head>

2. < lang>

HTML全局属性，lang 属性规定元素内容的语言。
lang 属性在以下标签中无效：< base>, < br>, < frame>, < frameset>, < hr>, < iframe>, < param> 以及 < script>。
语法： < element lang=“language_code” >
lang：语言，为爬虫而标识
① en：英文
② ch：中文

< html lang ="en,zh>

这里了解一下SEO搜索引擎优化谈谈对SEO的认识与理解

3. < h>
标题只有六级，每个都独占一行
六个不同的 HTML 标题：
< h1>这是标题 1
< h2>这是标题 2
< h3>这是标题 3
< h4>这是标题 4
< h5>这是标题 5
< h6>这是标题 6
效果如下：

在这里插入图片描述
HTML < h1> - < h6> align 属性

对齐属性
< h1 align=“center”>这是标题 1
< h2 align=“left”>这是标题 2
< h3 align=“right”>这是标题 3
< h4 align=“justify”>这是标题 4

在这里插入图片描述 < p>：段落标签，成段
< address>：地址，成段，斜体

3.< em> 与< strong>

在这里插入图片描述

<strong><em>举个例子</em></strong>

在这里插入图片描述 **
4.< del>**
定义文档中已被删除的文本，就是中划线

< del >￥1000</del>

在这里插入图片描述
5.< span>
被用来组合文档中的行内元素，使得容器更加结构化，能分块。

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，
我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

在这里插入图片描述
< div>：成段,里面的一个单词（没有空格）不换行，会溢出（文字超出div的框）

&nbsp 空格

<span> 我是& nbsp; & nbsp；宝宝</span>

在这里插入图片描述
&lt：小于号（little）
&gt：大于号（great than）
<br> 可插入一个简单的换行符，是空标签意味着它没有结束标签。

< hr> 标签在 HTML 页面中创建一条水平线,< hr> 标签没有结束标签。
标签分类

单标签：不需要修饰，自己带有功能（< meta > < br > < hr >）
双标签：包裹东西，修饰东西

6.< ol>和< ul>
< ol> 标签定义有序列表, < ul> 标签定义无序列表。
在这里插入图片描述

< ol start="3">< li>咖啡</li>< li>牛奶</li>< li>茶</li>
< /ol>

在这里插入图片描述

< ul>< li>咖啡</li>< li>茶</li>< li>牛奶</li>
< /ul>

在这里插入图片描述

嵌套列表

< ul>< li>茶</li>< li>咖啡< ul>< li>红茶< /li>< /ul>< /li>< li>奶茶< /li>< /ul>

在这里插入图片描述
7.< img>

alt 图片占位符
title 图片提示符
img 元素向网页中嵌入一幅图像，没有结束标签
< img title=“这是两个男孩” src=“QQ图片20200217100543.jpg” alt=“boys”/>
加上title的效果是鼠标移上去可以显示内容，修复页面页面加载慢图片没出来用户感差的情况

8.< herf>

href：hyperText reference，超文本引用

作用：
①超链接
②锚点（本页目录跳转）
③打电话 tel
④发邮件 mailto
⑤协议限定符 javascript:

 < a herf="#demo ">find demo</a>

主要的应用是记录位置，回到顶部，目录
下面是小应用，快速找到位置：

<p><a href ="#demo_3"> find me</a></p><h2>demo_1</h2><p> this demo is smart</p><h2>demo_2</h2><p> this demo is cute</p>
<h2><a name="demo_3"> demo_3</a></h2><p> this demo is handsome</p>

在这里插入图片描述点击find me照到demo_3
把标签设长一点看的到效果哈

9 < form>
传送数据必须：数据名、数据值
HTML 元素表示了文档中的一个区域，此区域包含有交互控制元件，用来向 Web 服务器提交信息。
下面我们来做一个简单的登陆框

required 属性是一个布尔属性。
required 属性规定必需在提交表单之前填写输入字段。

<form action="" method="get" class="form-example"><div class ="form-example"> <label for="name">Enter your name:</label><input type="text" name="name" id="name" required></div><div class="form-example"><label for="password">Enter your password:</label><input type="password" name="password"  id="pasword" required></div><div class="form-example"><input type="submit" value="Submit!"></div></form>

form.form-example{display: table;
}
div.form-example{display: table-row;
}
label,input{display: table-cell;margin-bottom: 10px;
}
label{padding-right:10px; 
}

在这里插入图片描述
产品吸引注意力的3个特点
（1）刚需
（2）用户体验
（3）用户粘性（懒惰性），如默认选中
10.复选框，单选框，下拉列表

1.apple<input type="checkbox" name="fruit" value="apple">
2.orange<input type="checkbox" name="fruit" value="orange">
3.bananan<input type="checkbox" name="fruit" value="bananan">

这里我们考虑用户需求以及用户体验效果添加默认选中效果
checked=’"

1.apple<input type="checkbox" name="fruit" value="apple" >
2.orange<input type="checkbox" name="fruit" value="orange" checked="">
3.bananan<input type="checkbox" name="fruit" value="apple">

默认选中第二个
在这里插入图片描述
下拉表单

<h1>Province</h1><select><option value="江西">江西</option><option value="重庆">重庆</option><option value="广东">广东</option></select>

在这里插入图片描述
HTML常用标签讲到这就结束了

穿插一个小知识：
作为前端工程师，我们和什么打交道最多？？
浏览器
那么现在市场上主流浏览器和他的内核分别列举？？
主流浏览器指的是在市场有一定市场份额，必须有独立研发的内核，shell和内核。
五大浏览器四大内核
主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。
四大内核：

1、Trident内核，也称IE内核。
2、Webkit内核。Google Chrome， Safari
3、Gecko内核。 Firefox
4、Presto内核。Opera
内核：识别代码路径，运行的快不快，

项目开发时间=项目开发周期*3.5 调试时间比写代码花的时间多很多
注释 < !-- -->

注释可以用来备注，也可以用来改错
注释掉一行代码排错

二.CSS常用样式

排查问题的顺序问题，自右向左更快

在这里插入图片描述

cascading style sheet 层叠样式表
1.引入css的四种方式

内联方式（行间样式）

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

<div style="background: red"></div>

它只能改变当前标签的样式，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

嵌入方式（页面级）

嵌入方式指的是在 HTML 头部中的

< head> 
< style> .content { background: red; } </style>
</head>

嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

链接方式（外部文件）

链接方式指的是使用 HTML 头部的标签引入外部的 CSS 文件。

<head> <link rel="stylesheet" type="text/css" href="style.css"></head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

导入方式（推荐）

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

<style> @import url(style.css);</style>

2.计算机载入页面方式
下载一点执行一点，同时执行，异步操作
计算机中的同步异步与生活中相反
3.css中的选择器
css选择器

（1）Id选择器 #（井号）
（2）class选择器 .（点）
（3）标签选择器（标签名）
（4）通配符选择器 *（星号）
（5）属性选择器 []（中括号）
其他：
直接子元素选择器（eg：div>p）
包含选择器（eg：div span）
属性选择器（eg：【type=input】）
伪类选择器（eg：hover）
伪元素选择器（eg：：afer）

类选择器还是 ID 选择器？

区别 1：只能在文档中使用一次,与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
区别 2：不能使用 ID 词列表,不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
区别 3：ID 能包含更多含义

通配符 *

把包含标题（title）的所有元素变为红色，

*[title] {color:red;}

优先级：
在这里插入图片描述

css权重

1）!important							   infirity（无穷）
（2）行间样式								1000（256进制）
（3）id选择器							    100（256进制）
（4）class选择器|属性选择器|伪类（:）选择器	10（256进制）
（5）标签选择器|伪元素（::）选择器			1（256进制）
（6）通配符选择器							0（256进制）

在这里插入图片描述

注意点：以256进制为计算单位

父子选择器/派生选择器（空格）

<div class="wrapper"><strong class="box"><em>2333</em></strong></div>

.wrapper .box em{background: red;
}

直接子元素选择器（直接下一级）（>）

<body><div><em>1</em><strong><em>2</em></strong></div>

div >em{
background-color: red;
}

在这里插入图片描述

并列选择器

<div>1</div><div class="demo">2</div><p class="demo">3</p>

div.demo{background-color: red;
}

在这里插入图片描述

分组选择器（多个标签共用）

字体
Arial 通用字体，乔布斯发明

4.颜色选择方式颜色是通过对红、绿和蓝光的组合来显示的。

在这里插入图片描述

5.常用样式

唯一一种注释方式

/ *qwdqedqwfdqef */

单行文本垂直居中
line-height
首行缩紧
text-indent

em 单位衡量标准绝对单位相对单位
相对单位
1em=1 fort-size;=16px;
一个屏幕多种颜色多个像素格组成屏幕分辨率就是像素每分钟所能容纳的像素点数
相对单位

< del> = < span>

span{
text-decoration:none;
}

伪类选择器
用于向某些选择器添加特殊的效果,当鼠标移上去的样式
a.hover{
color:red;
}
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */

标签归类
在这里插入图片描述

图片设置大小只设置一个，会等比例缩放

几张图片拼接在一起，中间有空隙，为什么会触发？凡是带有inline都有文字特性,有文字特性就要被分割 ,margin 元素与元素之间的距离.正常文件压缩自动去除空格回车

开发经验：

先定义功能的想法
先写css 先定义功能，选功能列表，组合就会更多，定义好的功能可以把写好的功能封装在文件，写好了代码css包提取出来放在文件里引入 css文件可以引入多个叫css工具库

自定义标签,初始化标签内

在这里插入图片描述

通配符标签吃

能初始化所有标签最好的方式没有任何影响权重0 不存在冲突

盒子模型针对html'每一个元素盒子三大部分

盒子壁 border
内边距 padding
盒子内容 width + height

 * {margin: 0;padding: 0;
}

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
外边距可以是负值，而且在很多情况下都要使用负值的外边距。

控制台标准调试
padding margin 四个值上右下左
三个值上左右下
两个上下左右
一个值上

盒模型计算求真实展示的视觉宽高可视区大小
盒子内容区不考虑margin

盒子总大小的计算公式为：盒子的实际高度X盒子的实际宽度。
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
元素实际宽度（盒子的高度）=上边界+上边框+上填充+内容高度+下填充+下边框+下边界。

定位技术

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

- 三种基本的定位机制：普通流、浮动和绝对定位。

position 属性值的含义：

static

默认值，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。不允许设置位置。
relative（不影响后面元素，可以当做参照物）

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。相对自身原来位置定位，（没有设置定位的位置）定位

absolute（会使元素脱离正常的文档流）

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。相对最近有定位的父级，如果没有最近有定位的父级，那么相对于视口定位

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。相对视口定位，会脱离文档流

默认margin 8像素

stycky 相对于最近的含有滚动的元素（overflow不为visible，默认值）
不会使元素脱离正常的文档流

黄色参照黑色定位黑色则设为relative
应用于：

广告定位
滚动条动我不动
居中定位定位左定点，相对文档居中

奥运五环：

<div class="plat"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div><div class="circle5"></div></div>

*{margin: 0;padding: 0;
}
.plat{position: absolute;left: 50%;top: 50%;margin-left: -190px;margin-top: -93px;height: 186px;width: 380px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{position: absolute;width: 100px;height: 100px;border:10px solid black;border-radius: 50%;
}
.circle1{border-color:black;left: 0;right: 0;
}
.circle2{border-color:blue;left:80px;top:0;z-index: 5;
}
.circle3{border-color:red;left: 170px;top: 0;z-index: 5px;
}
.circle4{border-color: greenyellow;left: 45px;top:60px;
}
.circle5{border-color:purple;left:130px;top:60px;
}

两栏布局

浮动布局（利用float配合margin）

- <div class="box"><div class="left"><div class="right"></div></div></div>

.box div{height: 100px;width: 500px;}
.left{width: 100px;float: left;background-color: hotpink;}
.right{margin-left: 100px;background-color:deepskyblue;
}

在这里插入图片描述

float必须放在第一个子元素。
margin的方向必须同float方向，
margin的值必须等于float元素的宽（这一点根据实际开发情况来定，一般项目开发两栏之间是需要间距的，这个时候可酌情多个10-20像素）

- position配合margin

<div class="box"><div class="left"><div class="right"></div></div></div>

.box
{position: relative;
}
.box div{height: 100px;width: 500px;}
.left{width: 100px;right: 0;position: absolute;background-color: hotpink;}
.right{margin-left: 100px;background-color:deepskyblue;
}-

float必须放在第一个子元素。
display:flex与flex-grow

- display:flex需要给予父级，flex-grow放置自适应的子元素。（IE10一下不支持）

<div class="box"><div class="left"><div class="right"></div></div></div>

.box{display: flex}
.box div{height:100px;width: 500px;}
.left{width:200px;flex-grow:1;background-color:pink;}
.right{background-color:blueviolet;}

在这里插入图片描述

写入固定宽度，flex-grow会将剩余的补全
可以按照写入的顺序在任何地方插入
比如你写三栏布局，要求两侧固定宽度200px，中间自适应。你只需要将两侧设置宽度，中间给予flex-grow就OK了。与之前两个相比较，还有一个好处就是，如若你的两个子元素，高度不统一，这个时候，给两个子元素vertical-align: middle;可以让两个子元素水平对齐。

display:table和display:table-cell

display:table 给予父级，display:table-cell给予两个子集

.box{display: table;}
.box div{display: table-cell;}
.left{width:200px;background-color:pink;}
.right{height: 100px;width: 100px;background-color:blueviolet;}

<div class="box"><div class="left"><div class="right"></div></div></div>

在这里插入图片描述

不需要给高，自适应的选出你两个子元素最高的作为公共高度`

我代码内有一个高100px的div是为了撑起div,如果有内容的话，高度将会是内容高度

甚至你可以不给宽

这里因为是两栏布局，所以我给了第一个子元素一个200px最小宽度，如果说你内容宽度超过了200px,他将让你的第一个子元素的宽度等于内容宽度。

BFC

在解释 BFC 是什么之前，需要先介绍 Box、Format Context的概念，块级格式化上下文

- Box: CSS布局的基本单位

Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。
不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

block-level box:display 属性为 block, list-item, table 的元素，会生成block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table
的元素，会生成 inline-level box。并且参与 inline formatting context；
run-in box: css3 中才有

- Formatting context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。（不是属性，是渲染概念）
　　BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

二、哪些元素会触发BFC?

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible，可为hidden

自适应两栏布局

<style>body {width: 300px;position: relative;}.aside {width: 100px;height: 150px;float: left;background: #f66;}.main {height: 200px;background: #fcc;}
</style>
<body><div class="aside"></div><div class="main"></div>
</body>

在这里插入图片描述
根据BFC布局规则第3条：

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

根据BFC布局规则第四条：

BFC的区域不会与float box重叠。

我们可以通过通过触发main生成BFC，来实现自适应两栏布局。

.main {overflow: hidden;
}

当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下：
在这里插入图片描述

清除内部浮动

浮动元素产生浮动流，所有产生了浮动流的元素块级元素看不到他们
产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素

<style>.par {border: 5px solid #fcc;width: 300px;}.child {border: 5px solid #f66;width:100px;height: 100px;float: left;}
</style>
<body><div class="par"><div class="child"></div><div class="child"></div></div>
</body>

在这里插入图片描述
根据BFC布局规则第六条：

计算BFC的高度时，浮动元素也参与计算

为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。

.par {overflow: hidden;
}

在这里插入图片描述

防止垂直与margin重叠

<style>p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p><p>Hehe</p>
</body>

在这里插入图片描述
两个p之间的距离为100px，发送了margin重叠。
　　根据BFC布局规则第二条：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

<style>.wrap {overflow: hidden;}p {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
</style>
<body><p>Haha</p><div class="wrap"><p>Hehe</p></div>
</body>

在这里插入图片描述

以上的几个例子都体现了BFC布局规则第五条：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

bfc内容参考https://www.cnblogs.com/mlw1814011067/p/10397999.html

清除浮动 -也可以使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素，必须是块级元素，为元素。
- clear:both;

<p><img src="QQ图片20200217100543.jpg" alt="图片"  />文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
文字环绕文字环</p>

img {height: 100px;float:left;padding:0px 0px 0px 0px;
}
p {width: 500px;
}

在这里插入图片描述
问题：
当遇到英文的时候

浏览器默认解析英文或者数字时，是按照单词进行解析。
也就是说，每个单词是一个整体，遇到空间不足时，不会对单词进行拆分。、
解决：

img {height: 100px;float:left;padding:0px 0px 0px 0px;word-wrap : break-word;
}p {word-wrap : break-word;width: 500px;
}

在这里插入图片描述

如果设置word-wrap : break-word; 这个单词就会进行换行显示
word-wrap 属性
在这里插入图片描述

word-break 属性
在这里插入图片描述

学习愉快 😃