1. < meta > 属性名不加双引号，属性值加双引号 规定 HTML 文档的字符编码： 2. < lang> 这里了解一下SEO搜索引擎优化谈谈对SEO的认识与理解 3. < h> 对齐属性 3.< em> 与< strong>   空格 6.< ol>和< ul> 嵌套列表 作用： 主要的应用是记录位置，回到顶部，目录 9 < form> 这里我们考虑用户需求以及用户体验效果添加默认选中效果 默认选中第二个 1、Trident内核，也称IE内核。 项目开发时间=项目开发周期*3.5 调试时间比写代码花的时间多很多 注释可以用来备注，也可以用来改错 cascading style sheet 层叠样式表 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。 它只能改变当前标签的样式，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。 嵌入方式指的是在 HTML 头部中的 嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。 链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。 这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。 导入方式指的是使用 CSS 规则引入外部 CSS 文件。 2.计算机载入页面方式 （1）Id选择器 #（井号） 类选择器还是 ID 选择器？ 把包含标题（title）的所有元素变为红色， 优先级： 注意点：以256进制为计算单位 字体 / *qwdqedqwfdqef */ < del> = < span> a:link {color: #FF0000} /* 未访问的链接 / 标签归类 先定义功能的想法 通配符标签吃 控制台 标准调试 盒模型计算求真实展示的视觉宽高可视区大小 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 – 三种基本的定位机制：普通流、浮动和绝对定位。 position 属性值的含义： static relative（不影响后面元素，可以当做参照物） fixed 默认margin 8像素 黄色参照黑色定位 黑色则设为relative 奥运五环： float必须放在第一个子元素。 margin的方向必须同float方向， margin的值必须等于float元素的宽（这一点根据实际开发情况来定，一般项目开发两栏之间是需要间距的，这个时候可酌情多个10-20像素） – position配合margin float必须放在第一个子元素。 – display:flex需要给予父级，flex-grow放置自适应的子元素。（IE10一下不支持） display:table 给予父级，display:table-cell给予两个子集 我代码内有一个高100px的div是为了撑起div,如果有内容的话，高度将会是内容高度 这里因为是两栏布局，所以我给了第一个子元素一个200px最小宽度，如果说你内容宽度超过了200px,他将让你的第一个子元素的宽度等于内容宽度。 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 – Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 block-level box:display 属性为 block, list-item, table 的元素，会生成block-level box。并且参与 block fomatting context； inline-level box:display 属性为 inline, inline-block, inline-table run-in box: css3 中才有 – Formatting context Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。 二、哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible 因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。 根据BFC布局规则第四条： 我们可以通过通过触发main生成BFC， 来实现自适应两栏布局。 当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。效果如下： 为达到清除内部浮动，我们可以触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。 我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。 以上的几个例子都体现了BFC布局规则第五条： 因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。 清除浮动 -也可以使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 如果设置word-wrap : break-word; 这个单词就会进行换行显示 学习愉快 😃
文章目录
一.HTML常用标签类
html：hyperText markup language，超文本标记语言
告诉搜索引擎爬虫我们的网站关于什么内容
<head> <meta content="服装" name="Keywords"> </head>
charset：编码
① utf-8：万国码，包括所有国家的语言，8bit
② gb2312：国家标准码，不包括繁体
③ gbk：国家标准扩展码，包括繁体<head> <meta charset="UTF-8"> </head>
语法： < element lang=“language_code” >
lang：语言，为爬虫而标识
① en：英文
② ch：中文< html lang ="en,zh>
标题只有六级，每个都独占一行
六个不同的 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>：地址，成段，斜体
<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的框）<span> 我是& nbsp; & nbsp；宝宝</span> 
<：小于号（little）
>：大于号（great than）
<br> 可插入一个简单的换行符，是空标签意味着它没有结束标签。
< hr> 标签在 HTML 页面中创建一条水平线,< hr> 标签没有结束标签。
标签分类
）
< 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>
< 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
把标签设长一点看的到效果哈
传送数据必须：数据名、数据值
HTML 元素表示了文档中的一个区域，此区域包含有交互控制元件，用来向 Web 服务器提交信息。
下面我们来做一个简单的登陆框
<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。
四大内核：
2、Webkit内核。Google Chrome， Safari
3、Gecko内核。 Firefox
4、Presto内核。Opera
内核：识别代码路径，运行的快不快，
注释 < !– –>
注释掉一行代码排错
二.CSS常用样式
排查问题的顺序问题，自右向左更快
1.引入css的四种方式
<div style="background: red"></div>
< head> < style> .content { background: red; } </style> </head>
<head> <link rel="stylesheet" type="text/css" href="style.css"></head>
<style> @import url(style.css);</style>
下载一点执行一点，同时执行，异步操作
计算机中的同步异步与生活中相反
3.css中的选择器
css选择器
（2）class选择器 .（点）
（3）标签选择器 （标签名）
（4）通配符选择器 *（星号）
（5）属性选择器 []（中括号）
通配符 *
*[title] {color:red;}
css权重
1）!important infirity（无穷） （2）行间样式 1000（256进制） （3）id选择器 100（256进制） （4）class选择器|属性选择器|伪类（:）选择器 10（256进制） （5）标签选择器|伪元素（::）选择器 1（256进制） （6）通配符选择器 0（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.常用样式
line-heightem 单位 衡量标准 绝对单位 相对单位
相对单位
1em=1 fort-size;=16px;
一个屏幕多种颜色多个像素格组成 屏幕分辨率就是像素 每分钟所能容纳的像素点数
相对单位span{ text-decoration:none; }
a.hover{
color:red;
}
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */
几张图片拼接在一起，中间有空隙，为什么会触发？ 凡是带有inline都有文字特性,有文字特性就要被分割 ,margin 元素与元素之间的距离.正常文件压缩自动去除空格回车
先写css 先定义功能，选功能列表，组合就会更多，定义好的功能可以把写好的功能封装在文件，写好了代码css包提取出来放在文件里引入 css文件可以引入多个 叫css工具库自定义标签,初始化标签内
能初始化所有标签最好的方式没有任何影响 权重0 不存在冲突盒子模型 针对html’每一个元素 **盒子三大部分**
* { margin: 0; padding: 0; }
padding margin 四个值 上右下左
三个值 上左右下
两个 上下左右
一个值 上
不考虑margin
定位技术
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
应用于：
<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; } 两栏布局
- <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; } 
<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; } -
display:flex与flex-grow
<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; } 
比如你写三栏布局，要求两侧固定宽度200px，中间自适应。你只需要将两侧设置宽度，中间给予flex-grow就OK了。与之前两个相比较，还有一个好处就是，如若你的两个子元素，高度不统一，这个时候，给两个子元素vertical-align: middle;可以让两个子元素水平对齐。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> 
BFC
不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
的元素，会生成 inline-level box。并且参与 inline formatting context；
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
**自适应两栏布局**
<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条：
.main { overflow: hidden; }
**清除内部浮动**
<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布局规则第六条：
.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布局规则第二条：
<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内容参考https://www.cnblogs.com/mlw1814011067/p/10397999.html
– 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 属性
word-break 属性
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
