Html、CSS 学习 5.0
2024-04-29 06:04:28
文章目录
- 1.strong 和 b 、em 和 i
- 2.引用标签
- blockquote：引用大段的段落解释
- q：引用小段的短语解释
- abbr：缩写或者首字母缩略词
- address：引用文档地址信息
- cite：引用著作的标题
- 3.iframe 嵌套页面(属于inline-block)
- 常见属性：
- frameborder：规定是否显示框架周围的边框
- width：定义 iframe 的宽度
- height：定义 iframe 的高度
- scrolling：规定是否在 iframe 中显示滚动条
- src：规定在 iframe 中引入的URL
- srcdoc：规定在 iframe 中显示的页面内容
- 4.br（换行） 与 wbr（软换行）
- 5.pre 与 cod（针对网页中的程序代码显示效果）
- 6.map 与 area（给特殊图像添加链接）
- 7. embed 与 object（给flash和一些插件进行渲染操作的标签）
- 8.audio 与 video（引入音频和视频的标签）
- 9.文字注解与文本方向
- ruby、rt 标签
- bdo 标签
- 10.扩展 link 标签
- 添加网址标题栏前的小图标
- dns解析
- 11. 扩展 mate 标签
- 12.HTML5 新的常见的语义化标签
- header：页眉
- footer：页脚
- main：主体
- hgroup：标题组合
- nav：导航
- article：独立的内容
- aside：辅助信息的内容
- section：区域
- figure：描述图像或视频
- figcaption：描述图像或视频标题的部分
- datalist：选项列表
- details / summary：文档细节 / 文档标题
- progress(prog) / meter：定义进度条 / 定义度量范围
- time：定义日期或时间
- mark：带有记号的文本
- 13.Flex 弹性布局
- 作用在flex容器上
- 1.flex-direction(方向)
- 2.flex-wrap
- nowrap
- wrap
- wrap-reverse
- 3.flex-flow(复合写法)
- 4.justify-content
- flex-end
- center
- space-between(两端对齐)
- space-around(环绕)
- space-evenly(平均，平等)
- 5.align-items
- stretch
- flex-start
- flex-end
- center
- 6.align-content
- flex-end
- center
- space-between(两端对齐)
- space-around(环绕)
- space-evenly(平均，平等)
- 作用在flex子项上
- 1.order
- 2.flex-grow
- 3.flex-shrink
- 4.flex-basis
- 5.flex(复合写法)
- 6.align-self
- flex骰子练习
- flex左右固定中间自适应
- flex百度弹性导航
- 13.Grid 网格布局
- 作用在grid容器上
- 1.grid-template-columns 与 grid-template-rows
- repeat()
- 2.grid-template-areas 与 grid-template
- 3.grid-column-gap 与 grid-row-gap 与 grid-gap
- 4.justify-items 与 align-items
- 5.justify-content 与 align-content
- 作用在grid子项上
- 1.grid-column 与 grid-row
- 2.grid-area
- 3.justify-self 与 align-self 与 place-self
- grid骰子练习
- grid百度索搜风云榜
- 14.大前端补充
- 表单进阶-下拉菜单
- 表单进阶-字段集
- 引入音频
- 引入视频
- 表单type属性
- 选项列表
- 盒子阴影
1.strong 和 b 、em 和 i
strong 和 em 都是表示强调的标签，表现形态为文本加粗和斜体。
b 和 i 同样也表示文本加粗和斜体。
<body><strong>文本strong</strong><b>文本b</b><br><em>文本em</em><i>文本i</i>
</body>
区别在于：strong 和 em 是具备语义化的，而且 b 和 i 是不具备语义化的。类似于span标签
2.引用标签
blockquote：引用大段的段落解释
q：引用小段的短语解释
abbr：缩写或者首字母缩略词
address：引用文档地址信息
cite：引用著作的标题
<p>1111111111111111111111 <blockquote>22222222222</blockquote> <q>333333333333333</q>
<br><abbr title="World Health Organization">WHO</abbr>成立于1948年
<br>什么什么公司 <address>地址：某某地</address> <cite>某某文章</cite></p>
3.iframe 嵌套页面(属于inline-block)
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
简单来说：在一个已有的页面当中可以嵌入一另外一个页面在一个 html 中显示出来，就是一个引入其他的 html 到当前 html 中显示的功能
主要是利用 iframe 的属性进行样式调节
常见属性：
frameborder：规定是否显示框架周围的边框
width：定义 iframe 的宽度
height：定义 iframe 的高度
scrolling：规定是否在 iframe 中显示滚动条
src：规定在 iframe 中引入的URL
srcdoc：规定在 iframe 中显示的页面内容
应用场景：数据传输、共享代码，局部刷新、第三方介入
因为 iframe 属于inline-block 所以：
<head><style>/* 如果取消 position: absolute 的注释，那么#a2 和 #a3会因为position: fixed和float: right从而覆盖在#a1上面 *//* 如果取消 display: none 的注释，那么#a1会不显示 */#a1{width: 100%;height: 200px;position: absolute;/* display: none; */}#a2{position: fixed;}#a3{ float: right;}</style>
</head>
<body><iframe id="a1" src="../千锋第二次.游戏网页/首页.html" frameborder="0"></iframe><br><iframe id="a2" src="https://www.baidu.com/" frameborder="1" width="300" height="300"></iframe><iframe id="a3" src="https://www.taobao.com/" frameborder="0" width="400" height="400"></iframe><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul><ul><li>1</li></ul>
</body>
4.br（换行） 与 wbr（软换行）
br 标签表示换行操作，而 wbr 标签表示软换行操作
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）
<body><p>aaaaaaa aaaaaa aaaaaaa aaaaaaa aaaa <br> aaaaa aaaaaa aaaaaa aaaaaa aaaaaaaaa</p><p>aaaaaaa aaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaa aaaa aaaabbbbcccccc aaaaa aaaaaa aaaaaa aaaaaa aaaaaaaaa</p><p>aaaaaaa aaaaaa aaaaaaa aaaaaaa aaaaaaa aaaaaa aaaaaaa aaaaaaa aaaa aaaa<wbr>bbbb<wbr>cccccc aaaaa aaaaaa aaaaaa aaaaaa aaaaaaaaa</p>
</body>
5.pre 与 cod（针对网页中的程序代码显示效果）
pre元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 code 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码
6.map 与 area（给特殊图像添加链接）
area能添加的热区形状有：矩形、圆形、多边形
定义一个客户端图像映射。图像（image-map）指带有可点区域的一副图像。area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域
area 元素的 href 属性定义区域的 URL ，shape属性来定义区域的形状，coords 属性定义热区的坐标
rect：矩形
circle：圆形
poly：多边形
<body><img src="../千锋第二次.游戏网页/img/QQ图片20221116213553.png" alt="" usemap="#tu">（图片路径） （设置map对应的name记得加 # ）<map name="tu">（设置name）<area shape="rect" coords="左上角坐标 右下角坐标" href="" alt=""><area shape="circle" coords="圆心坐标 半径" href="" alt=""><area shape="" coords="各个点坐标" href="" alt=""></map>
</body>
7. embed 与 object（给flash和一些插件进行渲染操作的标签）
embed 和 objcet 都表示能够嵌入一些多媒体，如 flash 动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已
object 元素需要配合 param 元素一起完成
<body><embed src="./img/flash.swf" type=""><object data="" type=""><param name="movie" value="./img/flash.swf"></object>
</body>
8.audio 与 video（引入音频和视频的标签）
audio 标签表示嵌入音频文件，video 标签表示嵌入视频文件。默认控件是不显示的，可通过 controls 属性来显示控件
为了能够支持多个备选文件的兼容，可以配合 source 标签
<body><audio src="引入地址.mp3" controls loop autoplay></audio>显示控件 循环 刷新自动播放<video src="引入地址.mp4" controls></video>显示控件.ogg 音频.ogv 视频<video src=""><source src="引入地址.ogv"><source src="引入地址.mp4">果然第一句识别后浏览器无法播放.ogv那么就会执行下一条，以此类推</video>
</body>
9.文字注解与文本方向
ruby 标签定义 ruby 注释（中文注音或者字符），rt 标签定义字符（中文注音或字符）的解释或发音
ruby、rt 标签
<body><ruby>我的名字<rt>wǒ dě míng zì</rt>：regou</ruby>
</body>
bdo 标签
bdo 标签可以覆盖默认的文本方向
<body><p>我在CSDN里写了博客</p><p><bdo dir="rtl">我在CSDN里写了博客</bdo></p>
</body>
也可以在 css 中实现
<head><style>#b{ direction: rtl;unicode-bidi: bidi-override;}</style>
</head>
<body><ruby>我的名字<rt>wǒ dě míng zì</rt>：O_oregou</ruby><p>我在CSDN里写了博客</p><p><bdo dir="rtl">我在CSDN里写了博客</bdo></p><span id="a">大家可以去看看</span><br><br><span id="b">大家可以去看看</span>
</body>
10.扩展 link 标签
添加网址标题栏前的小图标
在一个 html 页面中，header main footer 这些标签只能出现一次
<head><link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
</head>
dns解析
<head><link rel="dns-prefetch" href="//static.360buying.com">
</head>
11. 扩展 mate 标签
mate 添加一些辅助信息
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ，吃喝玩乐1折起。">
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ，吃喝玩乐1折起。">
<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">|
12.HTML5 新的常见的语义化标签
<body><header></header><main></main><footer></footer>
</body>
header：页眉
footer：页脚
main：主体
hgroup：标题组合
<head><style>header{border: 10px solid red;}hgroup{border: 10px solid blue;}</style>
</head>
<body><header><hgroup><h1>主标题</h1><h2>副标题</h2></hgroup></header>
</body>
nav：导航
article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频标题的部分
datalist：选项列表
details / summary：文档细节 / 文档标题
<details open><summary>HTML</summary><p>超文本标记语言</p>
</details>
加入open属性 默认展开
progress(prog) / meter：定义进度条 / 定义度量范围
<progress min="0" max="10" value="8"></progress>
<meter min="0" max="100" value="40" low="10" high="60"></meter>
<meter min="0" max="100" value="80" low="10" high="60"></meter>
time：定义日期或时间
<p>今天是<time title="1-1">元旦节</time>，大家很开心
</p>
mark：带有记号的文本
<p>今天是<mark>元旦节</mark>，大家很开心
</p>
13.Flex 弹性布局
| 作用在flex容器上 | 作用在flex子项上 |
|---|---|
| flex-directioon | order |
| flex-wrap | flex-grow |
| flex-flow | flex-shrink |
| justify-content | flex-basis |
| align-items | flex |
| align-content | align-self |
作用在flex容器上
1.flex-direction(方向)
用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上
| 取值 | 含义 |
|---|---|
| row | 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右 |
| row-reverse | 显示为行。但方向和row属性值相反 |
| column | 显示为列 |
| column-reverse | 显示为列。但方向和colum属性值相反 |
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-direction:column-reverse;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}#div1 .div2{width: 50px;height: 50px;background-color: aqua; color: white;line-height: 50px;text-align: center;float: right;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div class="div2">4</div><div class="div2">5</div></div></body>
2.flex-wrap
用来控制子项整体单行显示还是换行显示
| 取值 | 含义 |
|---|---|
| nowrap | 默认值，表示单行显示，不是换行 |
| wrap | 宽度不足换行显示 |
| wrap-reverse | 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面 |
nowrap
当元素块过多，但块内内容不会溢出时会使块等比缩小
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
如果块内内容过多
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1******</div><div>2******</div><div>3******</div><div>4******</div><div>5******</div><div>6******</div><div>7******</div><div>8******</div><div>9******</div></div>
</body>
wrap
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
wrap-reverse
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap-reverse;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
3.flex-flow(复合写法)
(flex-direction 和 flex-wrap 的复合写法)
flex-flow 属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向第二值表示换行，中间用空格隔开
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-flow: column-reverse wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
4.justify-content
justify-content属性决定了主轴方向（flex-direction）上子项的对其和分布方式
| 取值 | 含义 |
|---|---|
| flex-start | 默认值，表现为起始位置对齐 |
| flex-end | 表现为结束位置对齐 |
| center | 表现为居中对齐 |
| space-between | 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配 |
| space-around | around是环绕的意思，意思是每个flex的子项两侧都环绕互不相干扰的等宽空白间距，最终视觉上边缘两侧的空白只有中间空白宽度的一半 |
| space-evenly | evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等 |
flex-end
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:flex-end;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
center
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:center;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
space-between(两端对齐)
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:space-between;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
space-around(环绕)
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:space-around;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
space-evenly(平均，平等)
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content:space-evenly;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
5.align-items
align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式
| 取值 | 含义 |
|---|---|
| stretch | 默认值，flex子项拉伸 |
| flex-start | 表现为容器顶部对齐 |
| flex-end | 表现为容器底部对齐 |
| center | 表现为垂直居中对齐 |
stretch
<style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content: space-evenly;align-items: stretch;flex-wrap: wrap;}#div1 div{width: 50px;min-height: 50px;background-color: red;}</style>
</head>
<body><div id="div1"><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div></div>
</body>
flex-start
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content: space-evenly;align-items: flex-start;}#div1 div{width: 50px;min-height: 50px;background-color: red;}</style>
</head>
<body><div id="div1"><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div></div>
</body>
flex-end
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content: space-evenly;align-items: flex-end;}#div1 div{width: 50px;min-height: 50px;background-color: red;}</style>
</head>
<body><div id="div1"><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div></div>
</body>
center
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;justify-content: space-evenly;align-items: center;}#div1 div{width: 50px;min-height: 50px;background-color: red;}</style>
</head>
<body><div id="div1"><div>测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本测试文本</div><div>测试文本</div></div>
</body>
6.align-content
align-content可以堪称和just-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。
| 取值 | 含义 |
|---|---|
| start | 默认值。每一行flex子元素都等比拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50% |
| flex-start | 表现为起始位置对齐 |
| flex-end | 表现为结束位置对齐 |
| center | 表现为居中对齐 |
| space-between | 表现为两端对齐 |
| space-around | 每一行上下都享有独立不重叠的空白空间 |
| space-evenly | 每一行元素上下完全等分 |
flex-end
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content: flex-end}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
center
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content: center;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
space-between(两端对齐)
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content:space-between;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
space-around(环绕)
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content:space-around;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
space-evenly(平均，平等)
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-wrap: wrap;align-content:space-evenly;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
作用在flex子项上
| 取值 | 含义 |
|---|---|
| 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子项的垂直对齐方式 |
1.order
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-direction:row;flex-wrap: wrap;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(8){order: -3;}#div1 div:nth-child(2){order: -1;}#div1 div:nth-child(3){order: 1;}#div1 div:nth-child(4){order: 1;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</body>
2.flex-grow
总的类似于把空白间隙看作为1，若flex-grow的值总和大于1，则对flex-grow对1进行等比例均分侵占
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-direction:row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: red; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;flex-grow: 0.5;}#div1 div:nth-child(4){background-color: aqua;color: black;flex-grow: 2;}总的类似于把空白间隙看作为1，然后flex-grow对1进行等比例均分侵占</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
3.flex-shrink
默认值都是1，如果不想让一个子项收缩就设置0，数值越大收缩越大
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;flex-direction:row;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;flex-shrink: 2;}#div1 div:nth-child(4){background-color: aqua;color: black;flex-shrink: 3;}#div1 div:nth-child(6){background-color: gray;color: black;flex-shrink: 0;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</body>
4.flex-basis
类似与width的作用，但与width同时存在时，flex-basis优先级更高，若超出容器范围则自适应调解的优先级高于flex-basis
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;width: 60px;}#div1 div:nth-child(4){background-color: aqua;color: black;flex-basis: 60px;width: 70px;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
5.flex(复合写法)
flex-grow 和 flex-shrink 和 flex-basis 的复合写法
flex的默认值就是：0 1 auto
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;flex: 0 1 auto ;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
但是如果单独写一个值时，那个值为flex-grow，单独写flex一个值则弹性的优先级更高，即宽不起作用
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex;align-items: center;}#div1 div{width: 50px;height: 50px;background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(2){background-color: pink;color: black;flex: 0 ;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
6.align-self
针对子项的 align-items ,而 align-items是整体设置
<head><style>#div1{width: 300px;height: 300px;border: 1px solid black;margin: 10px auto;display: flex; align-items: center;}#div1 div{width: 50px; background-color: black; color: white;line-height: 50px;text-align: center;}#div1 div:nth-child(1){background-color: pink;color: black;align-self:flex-end;}#div1 div:nth-child(2){background-color: pink;color: black;align-self:center;}</style>
</head>
<body><div id="div1"><div>测试文字</div><div>测试文字测试文字</div><div>a</div><div>a</div><div>a</div></div>
</body>
flex骰子练习
<head><style>#div1{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;justify-content: center;align-items: center;}#div1 div{width: 30%;height: 30%;background-color: black;border-radius: 50%;}#div2{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;justify-content: space-between;}#div2 div{width: 30%;height: 30%;background-color: black;border-radius: 50%;}#div2 div:last-child{align-self: flex-end;}#div3{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;justify-content: space-between;align-items: center;}#div3 div{width: 30%;height: 30%;background-color: black;border-radius: 50%;}#div3 div:first-child{align-self: stretch;}#div3 div:last-child{align-self: flex-end;}#div4{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}#div4 div{width: 100%; display: flex;justify-content: space-between;}#div4 div i{display: block;width: 30%;height: 60%;background-color: black;border-radius: 50%;}#div4 div:last-child{align-items: flex-end;}#div5{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}#div5 div{width: 100%; display: flex;align-items: center;justify-content: center;}#div5 div i{display: block;width: 30%;height: 90%;background-color: black;border-radius: 50%;}#div5 div:first-child{justify-content: space-between;align-items: flex-start;}#div5 div:last-child{justify-content: space-between;align-items: flex-end;}#div6{width: 100px;height: 100px;margin-left: 10px; border: 1px solid black;border-radius: 5px;display: flex;flex-wrap: wrap;}#div6 div{width: 100%; display: flex;align-items: center;justify-content: space-between;}#div6 div i{display: block;width: 30%;height: 90%;background-color: black;border-radius: 50%;}#div6 div:first-child{align-items: flex-start;}#div6 div:last-child{align-items: flex-end;}.l{float: left;}</style>
</head>
<body><div id="div1" class="l"><div></div></div><div id="div2" class="l"><div></div><div></div></div><div id="div3" class="l"><div></div><div></div><div></div></div><div id="div4" class="l"><div><i></i><i></i></div><div><i></i><i></i></div></div><div id="div5" class="l"><div><i></i><i></i></div><div><i></i></div><div><i></i><i></i></div></div><div id="div6" class="l"><div><i></i><i></i></div><div><i></i><i></i></div><div><i></i><i></i></div></div>
</body>
flex左右固定中间自适应
<head><style>*{margin: 0;padding: 0;}#main{display: flex;}#main .left{width: 300px;height: 300px;background-color: aqua;}#main .center{background-color: pink;flex: 1;}#main .right{width: 200px;height: 350px;background-color: gray;}</style>
</head>
<body><div id="main"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body>
flex百度弹性导航
<head><style>*{margin: 0;padding: 0;}#main{width: 100%;height: 200px; display: flex;flex-wrap: wrap;}#main div{width: 100%; justify-content: space-around;display: flex;align-items: center;}#main div i{width: 50px;height: 50px; background-color: pink;border-radius: 50%;}</style>
</head>
<body><div id="main"><div><i></i><i></i><i></i><i></i><i></i></div><div><i></i><i></i><i></i><i></i><i></i></div></div>
</body>
13.Grid 网格布局
grid 布局是一个二维的布局方法，纵横两个方向总是同时存在
| 作用在 grid 容器上 | 作用在 grid 子项上 |
|---|---|
| grid-template-columns | grid-coolumn-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 |
作用在grid容器上
1.grid-template-columns 与 grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）
有时候，我们网格的划分是很规律的，如果需要添加多哦咯横纵网格时，可以利用repeat()语法进行简化操作
<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: 1fr 1fr 1fr 2fr;grid-template-columns: 1fr 1fr 2fr;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
</body>
<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: .1fr .1fr .1fr .2fr;grid-template-columns: 1fr 1fr 2fr;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
</body>
repeat()
<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1r);grid-template-columns: repeat(4,1fr);}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
</body>
2.grid-template-areas 与 grid-template
area 是区域的意思，grid-template-areas 就是给我们的网格划分区域的。此时 grid 子项只要使用 grid-area 属性指定隶属哪个区
grid-template 是 grid-template-rows ，grid-template-columns 和 grid-template-areas 属性的缩写
<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;/* grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);grid-template-areas: "a1 a1 a1 a1""a2 a2 a3 a4""a2 a2 a3 a4" */grid-template: "a1 a1 a1 a1"1fr"a2 a2 a3 a4"1fr"a2 a2 a3 a4"1fr/1fr 1fr 1fr 1fr ;}#div1 div{background-color: pink;border: 1px solid black;}#div1 div:nth-child(1){grid-area: a1;}#div1 div:nth-child(2){grid-area: a2;}#div1 div:nth-child(3){grid-area: a3;}#div1 div:nth-child(4){grid-area: a4;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
3.grid-column-gap 与 grid-row-gap 与 grid-gap
grid-column-gapa 和 grid-row-gap 属性是用来定义网格中网格间隙的尺寸
CSS grid-gap 属性是 grid-column-gap 和 grid-row-gap 属性的缩写
<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);grid-template-areas: "a1 a1 a1 a1""a2 a2 a3 a4""a2 a2 a3 a4";/* grid-row-gap: 10px;grid-column-gap: 20px; */grid-gap: 10px 20px;}#div1 div{background-color: pink;border: 1px solid black;}#div1 div:nth-child(1){grid-area: a1;}#div1 div:nth-child(2){grid-area: a2;}#div1 div:nth-child(3){grid-area: a3;}#div1 div:nth-child(4){grid-area: a4;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div></div></body>
4.justify-items 与 align-items
just-items 指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items 指定了网格元素的垂直呈现发放时，是垂直拉伸显示，还是上中下对齐。
place-items 可以让 align-items 和 justify-items 属性写在单个声明中。
| 取值 | 含义 |
|---|---|
| stretch | 默认值，拉伸。表现为水平或者垂直填充 |
| start | 表现为容器左侧或顶部对齐 |
| end | 表现为容器右侧或底部对齐 |
| center | 表现为水平或垂直居中对齐 |
<head><style>#div1{width: 400px;height: 400px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);/* justify-items: start;align-items: center; */place-items: center center;}#div1 div{background-color: pink;border: 1px solid black;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
</body>
5.justify-content 与 align-content
justify-coontent 指定了网格元素的水平分布方式。align-content 指定了网格元素的垂直分布方式。place-content 可以让 align-coontent 属性写在一个CSS声明当中
类似于flex中的justify-content和align-content
| 取值 | 含义 |
|---|---|
| stretch | 默认值，拉伸。表现为水平或垂直填充 |
| start | 表现为容器左侧或顶部对齐 |
| end | 表现为容器右侧或底部对齐 |
| center | 表现为水平或垂直居中对齐 |
| space-between | 表现为两端对齐 |
| space-around | 享有独立不重叠的空白空间 |
| space-evenly | 平均分配空白空间 |
<head><style>#div1{width: 500px;height: 500px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,100px);grid-template-columns: repeat(4,100px);justify-content: space-between;align-content: space-around;}#div1 div{background-color: pink;border: 1px solid black;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
</body>
作用在grid子项上
| 取值 | 含义 |
|---|---|
| gird-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 的缩写 |
1.grid-column 与 grid-row
<head><style>#div1{width: 500px;height: 500px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);}#div1 div{background-color: pink;/* grid-column-start: 2;grid-column-end: 5;grid-row-start: 2;grid-row-end: span 2; */grid-column: 2 / 5;grid-row: 2/span 2;}</style>
</head>
<body><div id="div1"><div></div></div>
</body>
2.grid-area
<head><style>#div1{width: 500px;height: 500px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);}#div1 div{background-color: pink;grid-area: 2/2/3/5;}</style>
</head>
<body><div id="div1"><div></div></div>
</body>
3.justify-self 与 align-self 与 place-self
<head><style>#div1{width: 500px;height: 500px;border: 1px solid black;display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);}#div1 div{background-color: pink;border: 1px solid black;}#div1 div:nth-child(6){justify-self: center;align-self: center;place-self: center center;}</style>
</head>
<body><div id="div1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
</body>
</html>
grid骰子练习
<head><style>.l{float: left;}#div1{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div1 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div1 div:nth-child(1){grid-area: 2/2/3/3;}#div2{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div2 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div2 div:nth-child(2){grid-area: 3/3/4/4;}#div3{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div3 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div3 div:nth-child(2){grid-area: 2/2/3/3;}#div3 div:nth-child(3){grid-area: 3/3/4/4;}#div4{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div4 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div4 div:nth-child(2){grid-area: 1/3/2/4;}#div4 div:nth-child(3){grid-area: 3/1/4/2;}#div4 div:nth-child(4){grid-area: 3/3/4/4;}#div5{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div5 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div5 div:nth-child(2){grid-area: 1/3/2/4;}#div5 div:nth-child(3){grid-area: 3/1/4/2;}#div5 div:nth-child(4){grid-area: 3/3/4/4;}#div5 div:nth-child(5){grid-area: 2/2/3/3;}#div6{width: 100px;height: 100px;margin-right: 10px;border: 1px solid black;border-radius: 5px;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items: center center;}#div6 div{width: 25px;height: 25px;border-radius: 50%;background-color: black;}#div6 div:nth-child(2){grid-area: 1/3/2/4;}#div6 div:nth-child(3){grid-area: 3/1/4/2;}#div6 div:nth-child(4){grid-area: 3/3/4/4;}#div6 div:nth-child(5){grid-area: 2/1/3/2;}#div6 div:nth-child(6){grid-area: 2/3/3/4;}</style>
</head>
<body><div id="div1" class="l"><div></div></div><div id="div2" class="l"><div></div><div></div></div><div id="div3" class="l"><div></div><div></div><div></div></div><div id="div4" class="l"><div></div><div></div><div></div><div></div></div><div id="div5" class="l"><div></div><div></div><div></div><div></div><div></div></div><div id="div6" class="l"><div></div><div></div><div></div><div></div><div></div><div></div></div>
</body>
grid百度索搜风云榜
<head><style>*{margin: 0;padding: 0;list-style: none;text-decoration: none;}#main{width: 350px;height: 450px;padding: 25px;margin: 0 auto;border: 1px solid black;display: grid;position: relative;border-radius: 5px;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(4,1fr);grid-template-areas: "a1 a2 a2""a3 a2 a2""a4 a4 a5""a6 a7 a7";grid-gap: 10px 10px;}#main div{background-color: pink;border: 1px solid black;border-radius: 5px;display: grid;grid-template-rows: repeat(3,1fr);}#main div:nth-child(1){grid-area: a1;background-color: #1C95F2;}#main div:nth-child(2){grid-area: a2;background-color: #1C95F2;}#main div:nth-child(3){grid-area: a3;background-color: #FF629D;}#main div:nth-child(4){grid-area: a4;background-color: #1C95F2;}#main div:nth-child(5){grid-area: a5;background-color: #1C95F2;}#main div:nth-child(6){grid-area: a6;background-color: #E68909;}#main div:nth-child(7){grid-area: a7;background-color: #E68909;}a{display: block;width: 100%;height: 100%;color: black;}#main ul{position: absolute;bottom: 1.5px;right: 25px;}#main li{float: left;width: 20px;height: 20px;border: 1px solid black ;margin-left: 5px;border-radius: 3px;}#main li a{display: block;width: 100%;height: 100%;color: black;line-height: 20px;text-align: center;}h2{position: absolute;top: 0;left: 25px;font-size: 20px;line-height: 25px;}#main div h3 {font-size: 18px;color: white;font-weight: normal;justify-self: end;align-self: flex-start;}#main div p {font-size: 16px;justify-self: center;align-self: center;}</style>
</head>
<body><div id="main"><h2>今日上榜</h2><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><div><h3>七日关注</h3><p>高通技术授权</p></div><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li></ul></div>
</body>
14.大前端补充
表单进阶-下拉菜单
select
属性1：size，显示几个下拉菜单
属性2：multiple，设置多选option
属性1：value，提供给后端的value值
属性2：selectde，默认选中
表单进阶-字段集
<!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>fieldset{width: 300px;height: 50px;}legend{border: 5px solid pink;text-align: center;}</style>
</head>
<body><fieldset><legend>性别</legend><input type="radio" name="gender" id="man"><label for="man">男</label><input type="radio" name="gender" id="women"><label for="women">女</label></fieldset>
</body>
</html>
引入音频
audio
属性1：controls，控制栏
属性2：loop，循环播放
属性3：autoplay，自动播放
属性4：muted，静音
引入视频
video
属性1：controls，控制栏
属性2：loop，循环播放
属性3：autoplay，自动播放
属性4：muted，静音
表单type属性
type=“color”，生成一个颜色选择的表单
type=“tel”，唤起拨号键盘（移动端）
type=“search”，产生一个搜索意义的表单
type=“range”，产生一个滑动条表单
type=“number”，产生一个数值标单
type=“email”，限制用户必须输入email类型
type=“url”，限制用户必须输入url（网址地址）类型
type=“date”，限制用户必须输入日期
type=“month”，限制用户必须输入月类型
type=“week”，限制用户必须输入周类型
type=“time”，限制用户必须输入时间类型
type=“datetime-local”，选取本地时间
选项列表
<!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><input type="text" list="mylist"><datalist id="mylist"><option value="手机"></option><option value="手表"></option><option value="手环"></option><option value="手镯"></option></datalist>
</body>
</html>
盒子阴影
属性值
h-shaow，必须的。水平阴影位置，可负值
v-shaow，必须的。垂直阴影位置，可负值
blur，可选。模糊距离
spred，可选。阴影的颜色
inset，可选。改变为内层阴影
<!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>div{width: 100px;height: 30px;border: 1px solid black;margin: 0 auto;box-shadow: 5px 5px 3px gray;}</style>
</head>
<body><div></div>
</body>
</html>
Html、CSS 学习 5.0相关推荐
- Html、CSS 学习 4.0
文章目录 1.position定位 position取值: 1.static:静态定位(默认) 2.relative:相对定位 3.absolute:绝对定位 4.fixed:固定定位 5.stick ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- HTML CSS 学习整理
HTML CSS 学习整理 码字不易,转载请务必注明原文出处.常用单位整理,不断学习,后期的新增笔记会继续加到文章上方 点击链接后退页面: 回到上一个网页 这是一个简单的跳转页面操作 --修改plac ...
- 7.8 css 学习
7.8 css 学习 1.css 学习 i) 学习目的 : 为了把样式和内容剥离, 打包更好的处理样式 ii) 范例 : <style>td{background-color:green; ...
- HTML与CSS学习总结
HTML与CSS学习总结 一.HTML总结 1 概念 HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的 标准标记语言. 标记语言是由 ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
最新文章
- 页面置换算法简单对比----《operating system concepts》《操作系统原理》
- python 字符串填充0
- php中strrpos函数的返回值类型是型_PHP常用函数总结
- Redis添加主节点
- scala能进入交互模式但是无法执行本地文件、长时间卡住的问题
- div获取第一个子节点jquery_【antd】Tree组件子节点不完全勾选获取父节点的值
- YYT 0659 - 2008全自动凝血分析仪
- html教程padding,HTML CSS——margin和padding的学习
- java定义一个方法，返回整数数组的元素最大值
- 这样准备，面试成功率提升30%
- 使用内存数据库的.NET Core 3.0中基于身份(Identity-Based)的身份验证
- mysql 主从宕机切换_mysql主从复制配置操作以及主从宕机切换演练
- mysql like 多个条件_MySQL之用通配符进行过滤
- Unity3D新手入门教程 （b站阿发） 总结框架笔记
- 数据仓库的项目的概况
- 《python》002 网络爬虫 -0A 基础
- 战地4稳定的服务器,战地4 游戏服务器
- 儒猿秒杀季！微服务限流熔断技术源码剖析与架构设计
- Pytorch+LSTM+Attention 实现 Seq2Seq
- linux什么意思中文翻译,linux中文