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`样式表

<table width="800" border="0" align="center" cellpadding="0"

cellspacing="0">该标记标示表格的开始，该表格宽度为800像素，边框粗细为0( 即不显示边框 )，对齐方式"水平居中"，单元格边距"0"，单元格间距"0"。表格属性的设置及相关说明：border: 用于设置表格边框的粗细，属性值为数值，数值越大，框线越粗，如果设置border="0"，则表示不显示表格框线background: 用于设置表格的背景图片，属性值为URL( 图片所在路径及图片文件的文件名 )例：<table background="URL"> <!--设置表格背景图片-->cellspacing: 用于设置表格内框线宽度( 即单元格间距 )，属性值为数值( 单位为像素 )，数值越大，单元格间距越大，若未设置，默认值为2例：<table cellspacing="1"> <!--设置表格中单元格间距为1-->cellpadding: 用于设置表格内文字与表格框线之间的间距( 单元格边距 )，属性值为数值( 单位为像素 )，数值越大，表格内文字与表格框线的间距越大，该属性的设置值必须是大于或等于0的正整数值，若未设置，默认值为1例：<table cellpadding="0"> <!--设置表格中单元格边距为0-->width: 用于设置表格的宽度( 也可用于设置单元格<td>或<th>宽度 )，属性值可以是数值( 单位为像素 )，也可以是百分比( 相对于父级目标的比例值 )，数值越大，表示宽度越大( 注: 设置width属性时，可以先设置表格的宽度，再依次设置各单元格的宽度，也可以不设置表格的宽度，仅设置表格中各单元格的宽度 )例：<table width="100"> <!--设置表格宽度为100像素--><td width="20%"> <!--设置单元格宽度为所在表格宽度的20%-->height: 用于设置表格的高度( 也可用于设置单元格<td>或<th>高度 )，属性值可以是数值( 单位为像素 )，也可以是百分比( 相对于父级目标的比例值 )，数值越大，表示高度越大( 注: 设置height属性时，可以先设置表格的高度，再依次设置各单元格的高度，也可以不设置表格的宽度，仅设置表格中各单元格的高度 )例：<td height="30"> <!--设置单元格高度为30像素-->bgcolor: 用于设置表格或单元格或表格中的行或列的背景颜色，属性值可以使用颜色名称，或使用三原色混色值例：<table bgcolor="blue"><!--设置表格背景颜色为蓝色--><td bgcolor="black"> <!--设置单元格背景颜色为黑色-->align: 用于设置表格或单元格的对齐方式。在<table>标记中设置align属性用于设置表格的对齐方式，包括: center( 表格居中对齐 )，left( 表格左对齐，默认值 )，right( 表格右对齐 )。在行<tr>或单元格<td>或<th>标记中设置align属性用于设置单元格内文字的对齐方式，包括: center( 单元格内文字居中对齐 )，left( 单元格内文字左对齐，默认值 )，right( 单元格内文字右对齐 )valign: 用于设置单元格内文字垂直对齐方式，包括: top( 单元格内文字顶端对齐 )，middle( 单元格内文字垂直居中对齐，默认值 )，bottom( 单元格内文字底端对齐 ) <tr>表格中的行标记，tr即table row的缩写，<tr>标记为成对标记，用于设置表格中一行的开始和结束及该行的相关属性，表格中有多少行，则该表格的<table>…</table>标记内就有多少对<tr>…</tr>标记与之对应。例：<tr valign="top">该标记标示行的开始，垂直对齐方式"顶端对齐"( 默认为垂直居中对齐 )。<tr>标记中的水平对齐属性：align="left"( 左对齐 )align="center"( 居中 )align="right"( 右对齐 )。<tr>标记中的垂直对齐属性：valign="top"( 顶端 )valign="middle"( 居中 )valign="bottom"( 靠下 )。 <td>表格中的字段( 列 )数据标记，td即table Data的缩写，<td>标记为成对标记，用于设置字段数据的开始和结束及字段的相关属性，表格中有多少列，则该表格的<table>…</table>标记内就有多少对<td>…</td>标记与之对应。例：<td width="50%">该标记标示一个单元格的开始，该单元格宽度设置为父级目标宽度的50%。<th>表格中列标题( 字段名 )定义标记，th是Table Header的缩写，<th>标记为成对标记，用于设置表格的表头名称( 字段名 )，该标记内文字的对齐方式为水平居中且垂直居中，字体加粗。也可以在该标记内使用align和valign设置该字段内的对齐方式，其设置值的有效范围只限于该数据。在<tr>标记内，align和valign对该行中的所有字段均有效。<border><table>标记中的属性之一，用于设置表格边框的粗细。Border属性值可用数值表示，其值为0或省略此项设置表示不显示边框，数值越大表示框线越粗。

---