HTML5和CSS3自我学习认知基础知识

1、网页的组成、对应的语言、标准
结构表现行为
html css js
xhtml、xml css DOM、ECMAscript

2、html与xhtml的区别

3、<!doctype html> 声明文档类型

根元素编码格式
网页标题页面主体

html 超文本标记语言

4、html语法
<标签属性=“属性值”></标签>
<标签属性=“属性值”/>

5、文本标签
h1-h6、p、br、b、strong、em、i、hr、del、u、sup、sub

相对路径：
1、返回上一级用…/
2、打开文件夹写文件夹名，例:img/

绝对路径：
file:///D:/ZZ-1914/day02/code/html/load.html

链接文本/图片
属性： target 链接打开方式
_blank 新窗口
_self 当前窗口

width=“表格的宽度”
height=“表格的高度”
border=“表格的边框”
bgcolor=“表格的背景色”
cellspacing=“单元格与单元格之间的间距”
cellpadding=“单元格与内容之间的空隙”
水平对齐方式：align=“left/center/right”;
垂直对齐方式：valign=“top/middle/bottom/baseline”
colspan合并列
rowspan 合并行
单元格间距(该属性必须给table添加)
border-spacing:value;
合并相邻单元格边框
border-collapse:separate(边框分开)/collapse(边框合并)；
无内容单元格显示、隐藏
empty-cells:show/hide;

固定单元格宽高(只能固定宽度)
表格布局算法
table-layout：auto/fixed
表格基本组成
table（表格） tr（行） td（列） th:表格列标题（放在tr里）
属性（html）：
rules=“rows/cols/all/none/groups” 添加组分隔线

说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条

表头表体表尾

BFC的生成

根元素
float的值不为none
overflow的值不为visible，可用(hidden、auto、scroll)
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

表单域：包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法。
表单控件（对象、元素）:包含了文本框、密码框、隐藏、多行文本框（文本域）、复选框、单选框、下拉列表、文件上传框、提交按钮、复位按钮、一般按钮。
提示信息：同一个表中还应该添加一些说明性文字，提示用户填写操作。
表单控件
文本框 text 密码框Password 提交submit 重置resrt 跳转button

选择符
类型选择符
ID选择符
class选择符
群组选择符
包含选择符
子选择符
伪类选择符

伪类选择器
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标划过超链接时的状态;
a:active{属性：属性值;}即鼠标按下时超链接的状态;

溢出属性（容器的）
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承 overflow 属性的值(ie浏览器不支持此属性值) 。

空余空间
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白；
normal：默认值，空白会被浏览器忽略，
pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；
pre-wrap：保留空白符序列和换行符，但是正常的进行换行(碰到边缘)；
pre-line:合并空隔符，但是保留换行符；

nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止；

文本溢出:text-overflow:clip/ellipsis
取值：
clip：不显示省略号（…），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；

单行文本溢出显示省略号
1、容器宽度：width：value；
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;

font-size设置文字大小
font-style字体风格属性：设置字体是否倾斜
语法：
font-style：normal/italic/oblique 分别为正常/斜体
font-weight字体加粗属性：设置字体加粗方式
语法：
font-weight：normal/100-900/bold/bolder 分别为正常/加粗
font-family字体名称属性
text-align：文本对齐属性。设定文本对齐方式。
语法：
text-align：left/right/center/justify 两端对齐

vertical-align：垂直对齐方式
语法：
vertical-align:top/bottom/middle;

line-height：行高属性。设定行距。
值为数值或倍数。文字一定会出现行高的（值）最中间

text-decoration：文本修饰属性，设定文本划线的属性。
值有：none/underline/overline/line-through/blink
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
blink:文字闪烁(高版本浏览器不支持)

text-indent：文本缩进属性，设定文本首行缩进。值为数值，常用单位有px
1）text-indent可以取负值；2）text-indent属性只对第一行起作用。

color : 颜色值 ;
说明：
用十六进制表示颜色值：
0  1  2  3  4   5  6  7  8  9  A  B  C  D  E  F
颜色模式：光色模式
  R      G      B
ff   ff   ff
颜色值的缩写：
当表示三原色的三组数字同时相同时，可以缩写为三位;
当用十六进制表示颜色值时，需要在颜色值前加“#”

ist-style-type:disc(实心圆)/circle（空心圆）/square(实心方块 )none(去掉列表符号)；

background-color：为元素设定背景色

background-image:为元素设定背景图

background-repeat:值有：repeat/repeat-x/repeat-y/no-repeat

background-position背景定位属性

background-clip 指定背景的显示范围/裁切位置 border-box/padding-box/content-box
background-origin 指定绘制背景图像时的起点 border-box/padding-box/content-box
background-size 指定背景中图像的尺寸 auto | <长度值> | <百分比> | cover |
border-image:url(url) A B C D 显示方式图像边框
border-image: url(borderimage.png) 25 25 25 25 stretch/repeat/round;
stretch: 拉伸
repeat: 平铺
round：平铺，不会出现断层

浮动float:none/left/right

清除浮动
clear: left/right/both/none

none 默认值。允许浮动元素出现在两侧。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。

属性选择器介绍
E[att] {} : 选择具有att属性的E元素。
E[att=“val”] {} : 选择具有att属性且属性值等于val的E元素。
E[att~=“val”] {}:用于选取属性值中包含指定词汇的元素。
E[att|=“val”] {}:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择

E[att*=“val”] {}:选择具有att属性且属性值为包含val的字符串的E元素。
E[att^=“val”] {}:选择具有att属性且属性值为以val开头的字符串的E元素
E[att$=“val”] {}:选择具有att属性且属性值为以val结尾的字符串的E元素

结构性伪类选择器
:root 将样式绑定到页面的根元素中
:not 排除某个选择器样式
:empty 使用该选择器来制定当元素内容为空白时使用的样式
:target 使用该选择器来对页面中的某个target元素（锚记链接）指定样式
:first-child 单独指定第一个子元素的样式
:last-child 单独指定最后一个子元素的样式

target
使用该选择器来对页面中的某个target元素（锚记链接）指定样式

UI元素状态伪类选择器
1）E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
2）E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
3）E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
4 ) E::selection 匹配E元素中被用户选中或处于高亮状态的部分

动态伪类选择器

1）E:link 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。
2）E:visited 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。
3）E:active 选择匹配的E元素，且匹配元素被激活。(以上常用于链接描点和按钮上)
4 ) E:hover 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
5 ) E:focus 选择匹配的E元素，而且匹配元素获取焦点

层级选择器
相邻兄弟选择器
li + li:后边相邻的选择器会被选中，第一个li不会被选中
通用兄弟选择器
li ~ li:li后面的所有li元素被选中

子选择器
ul> li:ul后面直接的li元素被选中

前缀

Presto 前缀-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀
Trident 前缀-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀
Gecko 前缀-moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
Webkit 前缀-webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀

优雅降级，渐进增强
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

文本阴影：text-shadow:5px 5px 5px #f66;
指定多个阴影：(参数形式为X坐标 Y坐标阴影的模糊程度阴影颜色)

b)自动换行：word-break normal ：使用浏览器默认换行规则 keep-all：只能在半角空格或连接字符处换行 break-all：允许在单词内换行（对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的）

c)word-wrap：让长单词与URL地址自动换行 normal：只在允许的断字点换行（浏览器保持默认处理）
word-break：属性允许长单词或 URL 地址换行到下一行。

设置圆角
border-radius:5px;

盒子阴影
box-shadow:5px 5px 10px #f66

css3自适应
width : fill-available/fit-content/max-content/min-content
fill-available 充满整个可用宽度和可用高度
fit-content 将元素宽度收缩为内容宽度
max-content 内部元素宽度值最大的那个元素的宽度=最终容器的宽度。如出现文本，则相当于文本不换行
min-content 内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度

CSS3渐变
分为线性渐变(linear)和径向渐变(radial)
径向渐变
语法：
background: radial-gradient(center, shape, size, start-color, …, last-color);
说明：
center：渐变起点的位置，可以为百分比，默认是图形的正中心。
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，它有四个值。

closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
线性渐变：
语法：
background: linear-gradient(direction, color-stop1, color-stop2, …);

说明：
direction：默认为to bottom，即从上向下的渐变；
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

css3 2d变换
transform
rotate() 旋转函数取值度数
Transform-origin 旋转的基点
skew() 倾斜函数取值度数 (扭曲)
skewX() skewY()
scale() 缩放函数取值正数、负数和小数
scaleX()scaleY()
translate() 位移函数
translateX()translateY()
rotate() 方法
单位：deg
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
skew() 方法
通过 skew() 方法，元素翻转（倾斜/扭曲）给定的角度，
根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，
根据给定的宽度（X 轴）和高度（Y 轴）
translate() 方法
通过 translate() 方法，元素从其当前位置移动，根据给定的
left（x 坐标）和 top（y 坐标）位置参数

css3过度

transition
transition-property 要运动的样式（all || [attr] || none）
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）

css3 3D属性
3D转换

语法：transform： rotate3d()/ translate3d()

rotate3d(x,y,z,angle)：旋转
translate3d(x,y,z)：平移
rotate3d(x,y,z,angle)
x: 在x轴是否旋转，是为1，否为0
y: 在y轴是否旋转，是为1，否为0
z: 在z轴是否旋转，是为1，否为0
angle：旋转角度

rotateX(angle) 定义沿 X 轴的 3D 旋转。正值前，负值后
rotateY(angle) 定义沿 Y 轴的 3D 旋转。正值右，负值左
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

translate3d(x,y,z)

translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z轴的值

perspective 设置从何处查看一个元素的角度

transform-style:规定被嵌套元素如何在 3D 空间中显示

@keyframes 创建动画

     语法：@keyframes animationname {keyframes-selector {css-styles;}}keyframes-selector     动画持续时间的百分比例： @keyframes mymove{ 0%   {top:0px;}25%  {top:200px;}50%  {top:100px;}75%  {top:200px;}100% {top:0px;}}

animation 动画属性的简写属性

     语法：animation：name duration timing-function delay iteration-countname   动画名称duration   动画指定需要多少秒或毫秒完成timing-function    动画效果的速度delay     延时iteration-count：value/infinite   动画播放次数animation-direction: normal|alternate;   是否反向播放动画animation-play-state: paused|running;  动画正在运行还是暂停

动画关键帧

animation-timing-function：
step-start/step-end

弹性布局属性
lex-direction属性决定主轴的方向
.box{
flex-direction: row |row-reverse | column | column-reverse
}
Row(默认值)：主轴为水平方向，起点在左端。
Row-reverse:主轴水平方向，起始点在右端。
Column:主轴为垂直方向，起点在上沿。
Column-reverse:主轴在垂直方向，起点在下沿
Justify-content属性：定义了项目在主轴上的对齐方式
.box{
justify-content:
flex-start |flex-end |center |space-between |space-around;
}

flex-start:默认值左对齐
flex-end 右对齐
Center居中
Space-between 两端对齐，项目之间的间隔都相等
Space-around 每个项目两侧的间隔相等。
所以，项目之间的间隔比项目与边框的间隔大一倍

align-items属性定义项目在交叉轴上如何对齐
align-items:flex-start | flex-end | center |
baseline |stretch;

Flex-wrap属性flex-wrap:nowrap | wrap | wrap-reverse;

align-content属性
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

flex-grow属性

页面布局

固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；

可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；

弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；

混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。

布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；移动优先（从移动端向上设计）；无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）

响应式布局

优点：
1）：面对不同分辨率设备灵活性强2）：能够快捷解决多设备显示适应问题
缺点：
1）：兼容各种设备工作量大，效率低下2）：代码累赘，会出现隐藏无用的元素，加载时间加长

新增标签
header : 头部信息
footer ：页脚
nav：导航链接的部分。
main: 主体。元素中的内容对于文档来说应当是唯一的
section：独立的内容区块
aside：侧边栏导航
article：文章标签
hgroup：标签用于对网页或区段（section）的标题进行组合
mark：标记，内容显示背景颜色，可以修改
address：地址标签
time：表示日期或时间，也可以同时表示两者，相当于span
figure+figcaption表示一段独立的内容，一般表示文档主体流内容中的一个独立单元。figcaption表示 figure 的标题。从属于 figure ，并且， figure 中只能放置一个 figcaption

dialog：标记定义一个对话框(会话框)类似微信
open(指示这个对话框是激活的和能互动的。当这个 open 特性没有被设置，对话框不应该显示给用户。)

embed：标记定义外部的可交互的内容或插件比如flash

source：标记定义媒体资源
video：用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放
autoplay autoplay 视频就绪自动播放 muted
controls controls 向用户显示播放控件
width pixels(像素) 设置播放器宽度
height pixels(像素) 设置播放器高度
loop loop 播放完是否继续播放该视频，循环播放
src url 视频url地址
poster imgurl 加载等待的画面图片
audio：于在文档中表示音频内容
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
src url 要播放的音频的 URL。
canvas：可被用来通过脚本（通常是JavaScript）绘制图形

新增的智能表单
新增类型（type属性）
搜索
号码
网址
电子邮件地址
数字
范围
颜色

有关时间的：

月份
周数
时间
本地时间

Datalist ：选项列表
input中输入list属性，属性值为该标签的id值，标签中子标签使用option，设置value和label
例：
<input type=“text” list=“id名" />
<datalist id=“id名">

required:表示该项是必填项，如果表单未填写，会弹出相应的提示信息
placeholder:占位符，当获取焦点或者输入框中的值输入为空时显示，否则显示自己填写的内容
autofocus：进入该页面自动获取焦点，原则上只允许设置一个，如果设置多个，则只有第一个有效果
autocomplete：是否在输入的时候自动补全，默认值为on，另一个值为off
multiple:支持用户输入多个此类行的文本，以逗号隔开，每个文本均会进行验证,适用于类型type为email属性值和file属性值
pattern：正则表达式,一般和title属性配合说明该项填写的内容
国家代码：

min:最小值，适用于属性type为number和range
max:最大值，适用于属性type为number和range
step:间隔
list属性：结合datalist元素使用
取消验证：可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证

vw+rem
vw、vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比

vmin/vmax

vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值
750px设计图：
html{font-size: 13.3333333333vw;}

640px设计图：
html{font-size: 15.625vw;}

1080px设计图：
html{font-size: 9.259259vw;}
表单组成
表单域表单控件提示信息

单选按钮 radio
复选框 checkbox (disabled=“disabled” :禁用)
(checked=“checked” :默认选中)
文件上传
允许gif、jpeg格式
图像形式提交按钮
<input type=“image” src=“submit.gif” alt="Submit” />
隐藏字段：

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用（一般在地址栏可见）
下拉列表（菜单）：

菜单内容

文本域/多行文本框：

表单字段集

字段级标题

定位
检索对象的定位方式；
语法：position：static/relative/absolute/fixed／sticky/unset/initial/inherit
取值：
1、static：默认值，无特殊定位，对象遵循HTML原则；
2、relative ：相对定位
依据 right:; top:; left:; bottom:;
等属性在正常文档流中偏移位置
(相对自己原来的位置偏移)。

absolute：绝对定位，将对象从文档流中拖离出来，
使用left/right/top/bottom等属性相
对其最接近的一个并有定位设置的父元
素进行绝对定位；如果不存在这样的父对象，
则依据html(根元素)，而其层叠通过z-index属性
定义；

包含块是绝对定位的基础，包含块就是为决对定位元素提供坐标，偏移和显示范围的参照物；

1、父元素上面没有定位属性，根据html进行位置移动
2、父元素上有定位属性，找最近的一个含有定位属性的父元素进行位置的移动

定义元素为包含块：
给绝对定位元素的父元素添加声明position：relative；

绝对定位和相对定位的区别
1、参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；
2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，
元素仍然占据原来的空间

fixed：固定定位
对象定位遵从绝对定位方式（absolute）；
但是要遵守一些规范
只能根据浏览器的窗口（html）来定义自己的位置。

sticky(粘性定位)有以下几个特点：

1、该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
2、当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定
在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达
距离相对定位的元素顶部50px的位置时固定，不再向上移动。
3、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素
，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素
的偏移量

z-index : auto | number
检索或设置对象的层叠顺序。
auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
说明：
1）较大 number 值的对象会覆盖在较小
number 值的对象之上。如两个绝对定位对
象的此属性具有同样的 number 值，那么将
依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。
透明属性
opacity:value;(value的取值范围0-1,0.1,0.2,0.3-----0.9)

高度塌陷解决方式
after{content:“.”
; display:block; clear:both; height:0;
overflow:hidden; visibility:hidden ; }
元素类型
HTML元素被分为两种类型:块状元素，内联元素

块状元素（block element）
1、块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域
2、默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
3、块状元素都可以定义自己的宽度和高度。
4、块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

常见的块状元素有：div ul li h1-h6 p ol
常见的块状元素有：

div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格

内联、行内元素（inline element）
1、内联元素的表现形式是始终以行内逐个进行显示
2、内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状
3、内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top:;margin-top/bottom:

HTML5和CSS3自我学习认知基础知识相关推荐

python语言的单行注释以井号开头_推荐｜零基础学习Python基础知识
原标题:推荐|零基础学习Python基础知识 Python是一种面向对象.解释型计算机程序设计语言.语法简洁清晰,强制用空白符作为语句缩进. Python具有丰富和强大的库,又被称为胶水语言.能把其他 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
Hadoop学习笔记—15.HBase框架学习（基础知识篇）
Hadoop学习笔记-15.HBase框架学习(基础知识篇) HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase ...
关于图计算图学习的基础知识概览：前置知识点学习（PGL）[系列一]
关于图计算&图学习的基础知识概览:前置知识点学习(Paddle Graph Learning (PGL)) 0.1图计算基本概念首先看到百度百科定义: 图计算(Graph Processin ...
快速学习mysql_快速学习MySQL基础知识
这篇文章主要梳理了 SQL 的基础用法,会涉及到以下方面内容: SQL大小写的规范数据库的类型以及适用场景 SELECT 的执行过程 WHERE 使用规范 MySQL 中常见函数子查询分类如何选 ...
三计算机知识的重要性分析,学习计算机基础知识对中专学生的重要性分析
学习计算机基础知识对中专学生的重要性分析 [摘要]本文主要介绍了计算机基础知识的内容,阐述了学习计算机基础知识对中专学生的作用,并且通过对计算机基础操作的学习,提高中专学生的计算机应用水平.希望本文 ...
谈计算机知识对学生的作用,浅谈学习计算机基础知识对中专学生的重要性
[摘要]本文主要介绍了计算机基础知识的内容,阐述了学习计算机基础知识对中专学生的作用,并且通过对计算机基础操作的学习,提高中专学生的计算机应用水平.希望本文可以让中专学生认识到学习计算机基础知识的重 ...
《机器学习》理论——速读学习1 基础知识
<机器学习>理论--速读学习1 基础知识该系列文章系个人读书笔记及总结性内容,任何组织和个人不得转载进行商业活动! Time: 2021-12-05 学习目标:我需要了解神经网络除了工程 ...
A.关于图计算图学习的基础知识概览：前置知识点学习（Paddle Graph L）【一】
图学习图神经网络算法专栏简介:主要实现图游走模型(DeepWalk.node2vec):图神经网络算法(GCN.GAT.GraphSage),部分进阶 GNN 模型(UniMP标签传播.ERNIESa ...

HTML5和CSS3自我学习认知基础知识

HTML5和CSS3自我学习认知基础知识相关推荐

最新文章

热门文章