html和css学习总结

本周我大概用了六天的时间完成了html和css的复习、制作考核网页以及完成了学长布置的五个学习小任务，总的来说，虽然完成了这一周的学习，但是对于一些知识点掌握的不是很牢固，使用不太熟练，之后还需要多加练习，对于本周的学习我有如下总结：

对于写网页需要的基础知识一定要牢牢掌握，比如，每个网页都需要的导航栏，一定要熟练掌握；下拉菜单最常用的是 ul 和 li 标签，也就是列表元素；对于一些标签，一定要知道是块级元素还是行内元素，要掌握他们之间的转换方法，这个也是非常常用的。对于css的盒子模型，一定要认真地学习，并且能熟练的运用。

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入d性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、 对齐和分配空白空间。

 d性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为d性容器。

 d性容器内包含了一个或多个d性子元素。

 注意： d性容器外及d性子元素内是正常渲染的。d性盒子只定义了d性子元素如何在d性容器内布局。

d性子元素通常在d性盒子内一行显示。默认情况每个容器只有一行。

 当为父盒子设为flex布局，子元素的float、clear和vertical—align属性将失效

    flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置好排列方式

  flex布局父项常见的属性：

                1.flex-diretion:设置主轴的方向

                 默认的主轴方向是x轴方向，水平方向；默认的侧轴方向是y轴方向，水平向下

                    属性值：row 默认值从左到右

                           row-reverse 从右到左

                           column 从上到下

                           column 从下到上

                2.jusity-content:设置主轴上的子元素排列方式

                    属性值： flex-start 默认值从头开始 如果主轴是x轴，则从左到右

                             flex-end  从尾部开始排列

                             center 在主轴居中对齐（如果主轴是x轴则水平居中）

                             space-around平分剩余空间

                             space-between 先两边贴边再平分剩余空间（重要）

                3.flex-wrap:设置子元素是否换行

        属性值： nowrap 默认子元素不换行 如果装不下，会缩小子元素的宽度，一块放到父元素中

                        wrap 换行

                4.align-content:设置侧轴的子元素排列方式（多行 需要换行） 单行无效

                    属性值： flex-start 默认值在侧轴的头部开始排列

                             flex-end  在侧轴的尾部开始排列

                             center 在侧轴中间显示

                             space-around 子轴在侧轴平分剩余空间

                             space-between 轴在侧轴先分布在两头，再平分剩余空间

                             stretch   设置子项元素高度平分父元素高度

                5.align-items:设置侧轴的子元素排列方式（单行）

                    属性值： flex-start 从上到下

                             flex-end  从下到上

                             center    挤在一起（垂直居中）

                             stretch   拉伸（默认值） 使用时子盒子不要给高度

                    例如：子元素居中  默认主轴是x轴

                       主轴居中 jusity-content:center

                       侧轴居中 align-items:center

                6.flex-flow:复合属性，相当于同时设置了flex-diretion和flex-wrap

            flex布局子项常见属性

                1.flex定义子项目分配剩余空间，用flex来表示占多少份数

                    flex:<number>默认值 0

                2.align-self控制子项自己在侧轴的排列方式

                3.order属性定义子项的排列顺序（前后顺序）

 给父元素添加 display:grid

      display关于网格的取值分为两个，grid(块网格)和 inline-grid (行内网格 行内块)

      grid 容器从上向下排列

      inline-grid 容器从左向右排列

   grid-template-row规定行属性

    grid-template-column规定列属性

    1.绝对大小（根据列数或者行数确定值得个数）

       grid-template-row：200px 200px 200px

       grid-template-column：200px 200px 200px

    2.百分比（根据列数或者行数确定值得个数）

       grid-template-row：33.33% 33.33% 33.33%

       grid-template-column：33.33% 33.33% 33.33%

    3.repeat函数

       grid-template-rows: repeat(3,33.3%)

       grid-template-columns: repeat(3,33.3%)

    4.repead auto-fill  自动填充

        grid-template-rows: repeat(auto-fill,33.3%)

        grid-template-columns: repeat(auto-fill,33.3%)

    5.fr 片段  

        grid-template-rows: 100px 1fr 300px

        grid-template-columns: 100px 1fr 300px

    6.minmax

       grid-template-rows:minmax(100px,200px) 200px 300px

       grid-template-columns:200px 200px 200px

    7.auto

        grid-template-rows: 100px auto 300px

        grid-template-columns: 100px auto 300px

    列间距

    1.grid-row-gap: 10px

      grid-column-gap: 10px

      复合写法

      grid-gap: 10px 10px

    指定区域

     1.grid-template-areas: 'a b c '

                                         'd e f'

                                        'g h i'

        区域合并时  需要让合并的区域名字相同

        grid-template-areas: 'a a c '

                                         'd e f'

                                         'g h i'

        .box div:nth-child(1){

            grid-area: a

        }

以上两种网页布局方式是我制作网页时比较常用的，也是学习前端必须掌握的。

除了以上这些，还有很多是我们需要掌握的，加油吧继续学习！！！！！！下周分享js学习总结

HTML标签 英文全称 中文释义

a Anchor 锚

abbr Abbreviation 缩写词

acronym Acronym 取首字母的缩写词

address Address 地址

dfn Defines a Definition Term 定义定义条目

kbdKeyboard 键盘（文本）

sampSample 示例（文本

var Variable 变量（文本）

tt Teletype 打印机（文本）

code Code 源代码（文本）

pre Preformatted 预定义格式（文本 ）

blockquote Block Quotation 区块引用语

citeCitation 引用

q Quotation 引用语

strong Strong 加重（文本）

emEmphasized 加重（文本）

b Bold 粗体（文本）

i Italic 斜体（文本）

bigBig 变大（文本）

smallSmall 变小（文本）

supSuperscripted 上标（文本）

subSubscripted 下标（文本）

bdoDirection of Text Display 文本显示方向

br Break 换行

center Centered 居中（文本）

fontFont 字体

uUnderlined 下划线（文本）

s/ strikeStrikethrough 删除线

divDivision 分隔

spanSpan 范围

ol Ordered List 排序列表

ul Unordered List 不排序列表

li List Item 列表项目

dl Definition List 定义列表

dt Definition Term 定义术语

dd Definition Description 定义描述

del Deleted 删除（的文本）

ins Inserted 插入（的文本）

h1~h6 Header 1 to Header 6 标题1到标题6

p Paragraph 段落

hr Horizontal Rule 水平尺

href hypertext reference 超文本引用

alt alter 替用(一般是图片显示不出的提示)

src Source 源文件链接

cell cell 巢

cellpadding cellpadding 巢补白

cellspacing cellspacing 巢空间

nl navigation lists 导航列表

tr table row 表格中的一行

th table header cell 表格中的表头

td table data cell 表格中的一个单元格

另一个网站上的

<a>:anchor 定义锚

<abbr>:abbreviation 定义缩写

<acronym>: 定义只取消首字母的缩写

<address>:定义地址元素

<area>:定义图像映射内部的区域

<b>:bold 定义粗体字

<base>:定义页面当中的所有链接的基准链接

<bdo>: bidirectional override 定义文字的显示方向

<big>:定义大号字

<blockquote>:定义长的引用

<body>:定义body元素

<br>:break 插入一个回车

<button>:定义按钮

<caption>:定义表格标题

<cite>:citation 定义引用

<code>:computer code 定义计算机代码文本

<col>:column 定义用于表格列的属性

<colgroup>:column group 定义表格的列祖

<dd>:definition description 定义定义的描述

<del>:delete 定义被删除的文本

<div>:division 定义文档中的节

<dfn>:defining instance 定义定义的项目。

<dl>:definition list 定义定义列表

<dt>:definition term 定义定义的项目

<em>:emphasized 定义强调文本

<fieldset>:定义域结构

<form>:定义表单

<frame>:定义框架的子窗口

<frameset>:定义框架集

<h1>to<h6>:定义标题1到标题6

<head>:定义关于文档的信息

<hr>:horizontal 定义水平线

<html>:hypertext markup language 定义html文档

<i>:italic 定义斜体字

<iframe>:inline frame 定义内联框架

<img>:image 定义图像

<input>: 定义输入域

<ins>:inserted 定义被插入的文本

<kbd>:keyboard 定义键盘文本

<label>:定义针对表单控件的标签

<legend>:定义框架集的标题

<li>:list item 定义列表的项目

<link>:定义资源引用

<map>:定义图像映射

<meta>:定义元信息

<noframe>:定义无框架的节

<noscript>:定义无脚本的节

<object>:定义内嵌对象

<ol>:ordered list 定义有序列表

<optgroup>:option group 定义选项组

<option>:定义下拉列表的选项

<p>:paragraph 定义段落

<param>:定义对象的参数

<pre>:preformatted 定义预格式文本

<q>:quotation 定义短的引用

<samp>:sample 定义计算机代码样本

<script>:定义脚本

<select>:定义选择列表

<small>:定义小字体文本

<span>:定义文档中的节

<strong>:stronger empasis定义强调文本

<style>:定义样式的定义

<sub>:subscript 定义下标文本

<sup>:superscript 定义上标文本

<table>:定义表格

<tbody>:table body 定义表格的主体部分

<td>:table data cell定义表格单元

<textarea>:定义文本区域

<tfoot>:table foot定义表也的脚注

<th>:table header cell定义表格的表头单元格

<thead>:table head定义表格的标题

<title>:定义文档的标题

<tr>:table row定义表格的行

<tt>:teletype 定义打字机文本

<ul>:unordered list 定义无序列表

<var>:variable 定义变量

head`头信息

title`标题

body`正文

font`字体

br`换行

p`段落

pre`预格式化

hr`水平分界线

sup`上标

sub`下标

b`粗体

i`斜体

u`下划线

em`强调(斜体)

strong`强调(粗体)

tt`等宽字体(打印机字体)

<ol>

<li></li>

<li></li>

</ol>有序列表

<ul>

<li></li>

<li></li>

</ul>无序列表

<a href=#>超链接

<img src=#>图片链接

th`表头单元

td`表格单元

tr`表格行

table`表格

caption`表格标题

form`交互式表单

input`输入表单控件

option`菜单类控件可选项`select中使用

select`菜单类控件

textarea`多行文本域

style`样式表

---