【沿路行走】-html和CSS补充

HTML

main标签

<main>..</main>包围表示网页中心内容的元素，每个网页有一个该标签。

artile标签

<article>..</article>包围那些可以独立的文本

section标签

每个section中包含一些内容，但是各个section之间会有些许内容联系

article类似于独立的一本书，section就像书里的各个章节

div标签

如果section之间没有联系，替换使用div

header标签

包含网页的标题及一些元数据

nav标签

包含一些导航链接文本

footer标签

包含一些版权信息或者链接到文章底部的链接信息

音频标签audio

<audio controls> controls属性表示可以鼠标或键盘控制音频的播放进度

<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3 " type="audio/mpeg">

</audio>

figure标签

包围一些图片图表等元素

配合在其中使用figcaption标签标记图像的主题

form标签

包含一些单选多选输入框等

<form>

<p>Sign up to receive Camper Cat's blog posts by email here!</p>

<label for="email">Email:</label> 标签的for属性关联input框对应的id

<input type="text" id="email" name="email">

<input type="submit" name="submit" value="Submit">

</form>

fieldset标签

将单选选项组合起来，legend对选项主题的解释（为可选属性）

<fieldset>

<legend>What level ninja are you?</legend>

<input id="newbie" type="radio" name="levels" value="newbie">

<label for="newbie">Newbie Kitten</label><br>

<input id="intermediate" type="radio" name="levels" value="intermediate">

<label for="intermediate">Developing Student</label><br>

<input id="master" type="radio" name="levels" value="master">

<label for="master">Master</label>

</fieldset>

可以输入日期的input框

type="date"

<input type="date" id="pickdate" name="pickdate">

设置访问元素的快捷键

accesskey="快捷键"

该属性可以在button/link/form controls中生效

设置鼠标点击事件

tabindex="0";

<style>

p:focus { focus点击事件时的样式设置

background-color: yellow;

}

</style>

<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>

---

CSS

让图片显示合理

.responsive-img {

max-width:100%;最大宽度小于等于它所在元素的最大宽度

height:auto;高度保持原有分辨率

}

其他距离单位

vw: 10vw 可显示区域宽度的10%

vh: 10vh 可显示区域高度的10%

vmin: 10vmin可显示区域最小维度的10%

vmax: 10vmax可显示区域最大维度的10%

并排显示

• css格式中添加display:flex
• flex-direct决定排列方向，默认是row, 可以是row-reverse column-reverse colunm
• justify-content:决定排列位置布局：

                flex-start:横向时分布在左侧，纵向时分布在上部

                flex-end:横向时分布在右侧，纵向时分布在下部

                space-between 边缘元素分布在两端，其他居中用空格分割

                space-around 类似上面的between，但是第一个和最后一个元素不固定在两端

                space-envenly 均匀分布

                center分布在中间

• align-items决定排列布局，不过横向排列时纵向变化，纵向排列时横向变化

                flex-start:横向时分布在上部，纵向时分布在左侧

                flex-end:横向时分布在下部，纵向时分布在右侧                                

                center:横向时分布在纵向中间，纵向时分布在横向中间

                stretch：拉伸元素填满元素空间，横向时分布纵向填充，纵向时分布横向填充

                baseline:使用文本线对齐

• flex-wrap决定当元素大小比元素空间大时再添加元素的方式

                nowrap

                wrap:横向另起一行，纵向另起一排

                wrap-reverse:反向添加：从下到上，从右到左 

• flex-shrink

                缩小元素  1不变 2缩小一倍

• flex-grow放大元素

                放大元素  1不变 2放大一倍 

• flex-basis设置元素的初始大小

                flex-basis:10em/10px/80%(以前使用的长度单位都可以使用

• 组合使用 

                flex: 2 2 150px;grow shrink basis

•  元素摆放次序order

                order值小的在前面 

• align-self元素自己调节自己的位置，参数和align-items一样

CSS grid

display:grid;

• 给网格元素设置列

                display: grid;

                grid-template-columns: 100px 100px 100px; 参数的数量即列数，参数值为每个列的宽度

                grid-template-columns: repeat(3, 100px);3列，每列宽100px

                grid-template-columns: repeat(3, minmax(90px, 1fr));列宽可在90px到1fr之间变化

                grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));根据列宽自动扩展列

                grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));根据列宽自动拉伸列适应父元素大小

• 给网格设置行

                grid-template-rows: 50px 50px;同设置列

                也可以写作：

                grid-template-rows: repeat(2,50px);两行，每行宽50px

• 调节列间距

                grid-column-gap: 20px;

• 调节行间距

                grid-row-gap: 5px;

grid-gap: 10px 20px;一次调节行列间距，两个参数依次表示行列间距

• 调节元素占用的列宽

                grid-column: 2/4;起始线号/结束线号，两者之间的列为元素占用的列宽

                线编号规则如下图：

                

•  调节元素占用的行宽

                grid-row: 2/4;同列宽设置

•  调节每个元素在自己占据的小方块中的横向位置

                justify-self:start(在左边）/center(中间)/end（右边）

•  调节每个元素在自己占据的小方块中的横向位置

                align-self:start(在上边）/center(中间)/end（下边）

•  调节所有子元素在自己占据的小方块中的横向位置

                justify-items:start(在左边）/center(中间)/end（右边）

•  调节所有子元素在自己占据的小方块中的横向位置

                align-items:start(在上边）/center(中间)/end（下边）

• 划分网格区域并命名

                grid-template-areas:

                "header header header"

                "advert content content"

                "footer footer footer";

                名字相同的grid为一个区域。

•  根据区域摆放子元素位置

                grid-area: footer;该元素会占用最下面的所有网格。

                grid-area: 3/1/4/4;行起始线/列起始线/行终结线/列终结线围起来的区域