web前端基础——第五章
目录
- 五十、strong和b、em和i
- 五十一、引用标签
- 五十二、iframe嵌套页面
- 五十三、br与wbr
- 五十四、pre与code
- 五十五、map与area
- 五十六、embed与object
- 五十七、audio和video
- 五十八、文字注解与文字方向
- 五十九、link标签扩展学习
- 六十、meta标签扩展学习
- 六十一、HTML5新语义化标签
- 六十二、Flex弹性盒模型
- 1.作用在flex容器上的CSS属性
- （1）flex-direction
- （2）flex-wrap
- （3）flex-flow
- （4）justify-content
- （5）align-items
- （6）align-content
- 2.作用在flex子项上的CSS属性
- 3.练习
- （1）骰子的点数
- （2）两列固定，一列自适应
- 六十三、Grid网格布局
- 1.作用在grid容器上的CSS属性
- （1）grid-template-columns和grid-template-rows
- （2）grid-template-areas和grid-template
- （3）grid-column-gap和grid-row-gap
- （4）justify-items和align-items
- （5）justify-content和align-content
- 2.作用在grid子项上的CSS属性
- 3.练习
- 骰子的点数
五十、strong和b、em和i
strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
区别 ：strong和em是具备语义化的，而b和i是不具备语义化的。
五十一、引用标签
blockquote ：引用大段的段落解释
q ：引用小段的短语解释
abbr ：缩写或首字母缩略词
address ：引用文档地址信息
cite ：引用著作的标题
五十二、iframe嵌套页面
iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
可以引入其他的html到当前html中显示
主要是利用iframe的属性进行样式的调节
应用场景 ：数据传输，共享代码，局部刷新，第三方介入等。
| 常见的属性 | 含义 |
|---|---|
| frameborder | 规定是否显示框架周围的边框 |
| width | 定义iframe的宽度 |
| height | 定义iframe的高度 |
| scrolling | 规定是否在iframe中显示滚动条 |
| src | 规定在iframe中引入的URL |
| srcdoc | 规定在iframe中显示的页面内容 |
五十三、br与wbr
br标签表示换行操作，而wbr标签表示软换行操作。
提示 ：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr元素来添加Word Break Opportunity（单词换行时机）
五十四、pre与code
pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。
针对网页中的程序代码的显示效果。
五十五、map与area
给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形…
定义一个客户端图像映射。图像映射( image-map )指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area元素的href属性定义区域的URL , shape属性来定义区域的形状,coords属性定义热区的坐标。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="" alt="" usemap="#star"><map name="star"><!-- <area shape="rect" coords="205 83 286 173" href="https://www.taobao.com" alt=""> --><!-- <area shape="circ" coords="300 130 50" href="https://www.taobao.com" alt=""> --><area shape="poly" coords="305 9 233 156 256 250 172 197" href="https://www.taobao.com" alt=""></map>
</body>
</html>
五十六、embed与object
给flash和一些插件进行渲染操作的标签。
embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有多大区别，主要是为了兼容不同的浏览器而已。
object元素需要配合param元素一起完成。
<!-- <embed src="./img/flash.swf" type=""> --><object data="" type=""><param name="movie" value="./img/flash.swf"></object>
五十七、audio和video
引入音频与视频的标签，属于H5的功能
audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持，可以配合source标签。
<!-- <audio src="" controls loop autoplay></audio> --><!-- <video src="" controls></video> --><video src=""><source src=""><source src=""></video>
五十八、文字注解与文字方向
ruby、rt这样一个组合
ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。
bdo标签可覆盖默认的文本方向。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span{direction: rtl;unicode-bidi: bidi-override;}</style>
</head>
<body><ruby>寒<rt>hán</rt>冬</ruby><p><bdo dir="rtl">爱神的箭</bdo>卡无敌哈市佛</p><p><span>爱神的箭</span>卡无敌哈市佛</p>
</body>
</html>
五十九、link标签扩展学习
<!-- 添加网址标题栏前的小图标： -->
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
<!-- DNS预解析 -->
<link rel="dns-prefetch" href="//static.360buyimg.com">六十、meta标签扩展学习
<meta name="description" content="大连美团网精选大连美食餐厅，酒店预订，电影票，旅游景点，外卖订餐，大连团购信息，您可查询商家评价店铺信息。大连生活，下载美团官方APP，吃喝玩乐1折起。">
<meta name="keywords" content="大连美食，大连酒店，大连团购">
<meta name="renderer" content= "webkit"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url=""><meta http-equiv="expires" content= "Wed,20 Jun 2019 22:33:00 GMT">
六十一、HTML5新语义化标签
header ：页眉
footer ：页脚
main ：主体
hgroup ：标题组合
nav ：导航
注:header、footer、main在一个网页中只能出现一次。
article ：独立的内容
aside ：辅助信息的内容
section ：区域
figure ：描述图像或视频
figcaption ：描述图像或视频的标题部分
datalist ：选项列表
details / summary ：文档细节 / 文档标题
progress / meter ：定义进度条 / 定义度量范围
time ：定义日期或时间
mark ：带有记号的文本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><header><hgroup><h1>主标题</h1><h2>副标题</h2></hgroup><nav><ul><li>首页</li><li>论坛</li><li>关于</li></ul></nav></header><main><article><section><input type="text" list="elems"><datalist id="elems"><option value="a"></option><option value="ab"></option><option value="abc"></option><option value="apple"></option><option value="abbr"></option><option value="around"></option></datalist><details open><summary>HTML</summary><p>超文本标记语言</p></details><progress min="0" max="10" value="8"></progress><meter min="0" max="100" value="80" low="10" high="60"></meter><p>今天是<time title="2-14">情人节</time>，街上人很多。</p><p>今天是<mark>情人节</mark>，街上人很多。</p></section><section><ul><li><figure><img src="" alt=""><figcaption>新水果篮子 高甜<br>十二生肖恋上美少女！</figcaption></figure></li><li><figure><img src="" alt=""><figcaption>新水果篮子 高甜<br>十二生肖恋上美少女！</figcaption></figure></li><li><figure><img src="" alt=""><figcaption>新水果篮子 高甜<br>十二生肖恋上美少女！</figcaption></figure></li></ul></section><section></section></article><aside></aside></main><footer></footer>
</body>
</html>
六十二、Flex弹性盒模型
随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
| 作用在flex容器上 | 作用在flex子项上 |
|---|---|
| flex-direction | order |
| flex-wrap | flex-grow |
| flex-flow | flex-shrink |
| justify-content | flex-basis |
| align-items | flex |
| align-content | align-self |
1.作用在flex容器上的CSS属性
（1）flex-direction
flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
| 取值 | 含义 |
|---|---|
| row | 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。 |
| row-reverse | 显示为行。但方向和row属性值是反的 |
| column | 显示为列 |
| column-reverse | 显示为列。但方向和column属性值是反的 |
（2）flex-wrap
flex-wrap用来控制子项整体单行显示还是换行显示。
| 取值 | 含义 |
|---|---|
| nowrap | 默认值，表示单行显示，不换行。 |
| wrap | 宽度不足换行显示 |
| wrap-reverse | 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。 |
（3）flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。
（4）justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式。
| 取值 | 含义 |
|---|---|
| flex-start | 默认值，表现为起始位置对齐。 |
| flex-end | 表现为结束位置对齐。 |
| center | 表现为居中对齐。 |
| space-between | 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。 |
| space-around | around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。 |
| space-evenly | evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。 |
（5）align-items
align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
| 取值 | 含义 |
|---|---|
| stretch | 默认值，flex子项拉伸。 |
| flex-start | 表现为容器顶部对齐。 |
| flex-end | 表现为容器底部对齐。 |
| center | 表现为垂直居中对齐。 |
（6）align-content
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。
| 取值 | 含义 |
|---|---|
| stretch | 默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。 |
| flex-start | 表现为起始位置对齐。 |
| flex-end | 表现为结束位置对齐。 |
| center | 表现为居中对齐。 |
| space-between | 表现为两端对齐。 |
| space-around | 每一行元素上下都享有独立不重叠的空白空间。 |
| space-evenly | 每一行元素都完全上下等分。 |
2.作用在flex子项上的CSS属性
| 取值 | 含义 |
|---|---|
| order | 可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0. |
| flex-grow | 属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0. |
| flex-shrink | 属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。 |
| flex-basis | flex-basis定义了在分配剩余空间之前元素的默认大小。 |
| flex | flex属性是flex-grow，flex-shrink和flex-basis的缩写。 |
| align-self | align-self指控制单独某一个flex子项的垂直对齐方式。 |
3.练习
（1）骰子的点数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: center;align-items: center;}#box1 div{width: 30%;height: 30%;background: black;border-radius: 50%;}#box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: space-between;}#box2 div{width: 30%;height: 30%;background: black;border-radius: 50%;}#box2 div:last-child{align-self: flex-end;}#box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;}#box3 div{width: 30%;height: 30%;background: black;border-radius: 50%;}#box3 div:first-child{align-self: flex-start;}#box3 div:last-child{align-self: flex-end;}#box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}#box4 div{width: 100%;display: flex;justify-content: space-between;}#box4 div:last-child{align-items: flex-end;}#box4 i{display: block;width: 30%;height: 60%;background: black;border-radius: 50%;}#box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}#box5 div{width: 100%;display: flex;justify-content: center;align-items: center;}#box5 div:first-child{align-items: flex-start;justify-content: space-between;}#box5 div:last-child{align-items: flex-end;justify-content: space-between;}#box5 i{display: block;width: 30%;height: 90%;background: black;border-radius: 50%;}#box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}#box6 div{width: 100%;display: flex;justify-content: space-between;align-items: center;}#box6 div:first-child{align-items: flex-start;}#box6 div:last-child{align-items: flex-end;}#box6 i{display: block;width: 30%;height: 90%;background: black;border-radius: 50%;}</style>
</head>
<body><div id="box1"><div></div></div><div id="box2"><div></div><div></div></div><div id="box3"><div></div><div></div><div></div></div><div id="box4"><div><i></i><i></i></div><div><i></i><i></i></div></div><div id="box5"><div><i></i><i></i></div><div><i></i></div><div><i></i><i></i></div></div><div id="box6"><div><i></i><i></i></div><div><i></i><i></i></div><div><i></i><i></i></div></div>
</body>
</html>
（2）两列固定，一列自适应
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#main{display: flex;}#left{width: 200px;height: 200px;background: red;}#center{flex: 1;height: 300px;background: yellow;}#right{width: 150px;height: 200px;background: blue;}</style>
</head>
<body><div id="main"><div id="left"></div><div id="center"></div><div id="right"></div></div>
</body>
</html>
六十三、Grid网格布局
Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。
| 作用在grid容器上 | 作用在grid子项上 |
|---|---|
| grid-template-columns | grid-column-start |
| grid-template-rows | grid-column-end |
| grid-template-areas | grid-row-start |
| grid-template | grid-row-end |
| grid-column-gap | grid-column |
| grid-row-gap | grid-row |
| grid-gap | grid-area |
| justify-items | justify-self |
| align-items | align-self |
| place-items | place-self |
| justify-content | / |
| align-content | / |
| place-content | / |
1.作用在grid容器上的CSS属性
（1）grid-template-columns和grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。
（2）grid-template-areas和grid-template
area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid- area属性指定其隶属于那个区。
grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。
（3）grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
（4）justify-items和align-items
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
| 取值 | 含义 |
|---|---|
| stretch | 默认值，拉伸。表现为水平或垂直填充。 |
| start | 表现为容器左侧或顶部对齐。 |
| end | 表现为容器右侧或底部对齐。 |
| center | 表现为水平或垂直居中对齐。 |
（5）justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的水平分布方式。place -content可以让align-content和justify-content属性写在一个CSS声明中。
| 取值 | 含义 |
|---|---|
| stretch | 默认值，拉伸。表现为水平或垂直填充。 |
| start | 表现为容器左侧或顶部对齐。 |
| end | 表现为容器右侧或底部对齐。 |
| center | 表现为水平或垂直居中对齐。 |
| space-between | 表现为两端对齐。 |
| space-around | 享有独立不重叠的空白空间。 |
| space-evenly | 平均分配空白空间。 |
2.作用在grid子项上的CSS属性
| 取值 | 含义 |
|---|---|
| grid-column-start | 水平方向占据的起始位置。 |
| grid-column-end | 水平方向上占据的结束位置。(span属性) |
| grid-row-start | 垂直方向上占据的起始位置。 |
| grid-row-end | 垂直方向上占据的结束位置。(span属性 ) |
| grid-column | grid-column-start+grid-column-end的缩写。 |
| grid-row | grid-row-start+grid-row-end的缩写。 |
| grid-area | 表示当前网格所占用的区域，名字和位置两种表示方法。 |
| justify-self | 单个网格元素的水平对齐方式。 |
| align-self | 单个网格元素的垂直对齐方式。 |
| place-self | align-self和justify-self的缩写。 |
3.练习
骰子的点数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}.box div{width: 20px;height: 20px;background: black;border-radius: 50%;}.box div:nth-child(1){grid-area: 2/2/3/3;}.box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}.box2 div{width: 20px;height: 20px;background: black;border-radius: 50%;}.box2 div:nth-child(2){grid-area: 3/3/4/4;}.box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;grid-template-areas: "a1 a2 a3""a4 a5 a6""a7 a8 a9";}.box3 div{width: 20px;height: 20px;background: black;border-radius: 50%;}.box3 div:nth-child(2){grid-area: a5;}.box3 div:nth-child(3){grid-area: a9;}.box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;grid-template-areas: "a1 a2 a3""a4 a5 a6""a7 a8 a9";}.box4 div{width: 20px;height: 20px;background: black;border-radius: 50%;}.box4 div:nth-child(2){grid-area: a3;}.box4 div:nth-child(3){grid-area: a7;}.box4 div:nth-child(4){grid-area: a9;}.box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;grid-template-areas: "a1 a2 a3""a4 a5 a6""a7 a8 a9";}.box5 div{width: 20px;height: 20px;background: black;border-radius: 50%;}.box5 div:nth-child(2){grid-area: a3;}.box5 div:nth-child(3){grid-area: a7;}.box5 div:nth-child(4){grid-area: a9;}.box5 div:nth-child(5){grid-area: a5;}.box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;grid-template-areas: "a1 a2 a3""a4 a5 a6""a7 a8 a9";}.box6 div{width: 20px;height: 20px;background: black;border-radius: 50%;}.box6 div:nth-child(2){grid-area: a3;}.box6 div:nth-child(3){grid-area: a7;}.box6 div:nth-child(4){grid-area: a9;}.box6 div:nth-child(5){grid-area: a4;}.box6 div:nth-child(6){grid-area: a6;}</style>
</head>
<body><div class="box"><div></div></div><div class="box2"><div></div><div></div></div><div class="box3"><div></div><div></div><div></div></div><div class="box4"><div></div><div></div><div></div><div></div></div><div class="box5"><div></div><div></div><div></div><div></div><div></div></div><div class="box6"><div></div><div></div><div></div><div></div><div></div><div></div></div>
</body>
</html>
如何学好web前端
感兴趣,够努力。
web前端基础——第五章相关推荐
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
- 前端基础知识第一章---HTML
前言 ❤️ 天空黑暗到一定程度,星辰就会熠熠生辉 ❤️ 前端基础知识第一章---HTML 一.HTML 简介 (1)网页 1.1 什么是网页 1.2 什么是 HTML (2)常用浏览器 2.1 常用的 ...
- WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础 当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础 一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
- 《计算机应用基础》第05章在线测试,计算机应用基础.第五章测试及答案.doc
计算机应用基础.第五章测试及答案 <计算机应用基础>第05章在线测试及答案 ?<计算机应用基础>第05章在线测试 剩余时间: 59:05 第一题.单项选择题(每题1分,5道题共 ...
- Web前端基础知识整理
1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...
- 计算机应用基础第五章试题及答案,计算机应用基础第五章测试题
计算机应用基础第五章单元测试卷 考试时间:60分钟 总分:100分 一.单选题(每小题3分,共20题,计60分) 1.PowerPoint中,显示出当前被处理的演示文稿文件名的栏是( ) [A]工具栏 ...
- Web前端学习第五周
Web前端学习第五周 strong和b.em和i strong 和 em 都是表示强调的标签,表现形态为文本加粗和斜体. b 和 i 标签同样也表示文本加粗和斜体. 区别在于,strong和em 是具 ...
- web前端基础与CSS入门
web前端基础 1.嵌套列表 注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
最新文章
- 在进行正式托管之前，服务器托管用户需要做哪些准备？
- Linux驱动修炼之道-SPI驱动框架源码分析(中)
- SAP CRM interactive report的各种输入字段
- python 绘制围棋棋盘_围棋之规则基础（一）
- error:java:无效的源发行版_IDEA java出现无效的源发行版14解决方案_java
- 剖析微软Hyper-V的最佳部署方式
- [存档]使用.Net开发web程序时现在比较流行的前台技术都有什么？
- 《Linux编程》课堂测验 ·002【Shell编程】
- 2018前端面试题总结
- SoundPool循环播放
- WCF服务系列——定义宿主（IIS服务宿主）
- CTC5610-VPLS开发
- kubelet启动pod源码分析（三）
- OpenGL ES EGL eglQueryContext
- 前端学习CSS3(day3)盾牌案例
- 常见的海外广告投放平台，海外社交广告平台的开户流程与要求
- c++中的fork函数_fork函数
- NAS如何搭建Plex影音中心？
- 深度思考：无关生智，局外生慧
- 【NodeJs】使用ffmpeg将视频webm转换为mp4
热门文章
- 转 - dx8和dx9的差异
- crypto buuctf 权限获得第一步
- Java实现转账业务
- Rational Rhapsody 检查模式
- oracle中执行某sql语句后，如一系列delete、update等操作，怎么看影响的行数？如我执行了n个表的delete语句，得看我删除了多少数据，万一sql写的有问题，误删了数据，不是灾难？
- Python版本的温湿度+Nokia5110 display（SPI）
- C语言及gnuplot任意波形产生及作图-以三角波为例
- 理解 Array.prototype.slice.apply
- VR进化论|教你搭建通用的WebVR工程
- php投票ip限制的二维表,关于投票系统刷票方式原理(突破ip限制刷票PHP版)