|
|
什么是HTML：Hyber Text Markup Language(超文本标记语言)是由W3C组织来制定和修改该标准
路径问题：
绝对路径：
C:\win\hello.html(本地)
http://xxx.com/xxx/hello.html(网络)
相对路径：相当于当前打开这个网页的浏览器的地址栏的所在路径
table属性：
<tbody></tbody>在没有编写情况下，也会自动生成，建议写上
td和th区别：th就是一个文字加粗，且水平剧中的td
align属性：如果写在table标签上，会让表格本身水平居中
如果写在tr上，会使得tr里的文字内容水平居中
取值范围：left/center/right
行列合并：
行合并：rowspan=“X”
列合并：colspan=“X”
form表单：
action属性:数据提交的服务器地址
method属性：数据提交的方式：get/post
input标签：
type="text":文本输入框，可以输入文字内容
type="password"：密码输入框，输入的内容会自动屏蔽
type="radio"：单选框，name相同为一组
type="checkbox"：复选框
type="submit"：提交按钮，点击该按钮，会自动提交表单
type="reset"：重置，点击会重置表单中的所有输入域
type="data"：日期控件
type="number":只能输入数字的输入框
value属性：代表输入框内容，并不是所有的input都需要写value值
placeholder属性：文本框的默认提示
textarea(多行文本输入框)：
rows属性
cols属性
容器标签：
div：它没有任何显性作用，仅作为一个容器，用来包裹其他标签，用来区分网页的结构，最重要的作用就是网页区域的划分，以及内容排版。
默认大小：width:100%跟网页保持一致，height：随内容变化
可以容纳一切标签
div默认独占一行，无论它的宽度是否被修改
span(文本容器)：
它无法设置大小，没有宽度，大小随内容变化
通常容纳文字内容
它无法用来做页面布局排版
基本标签（后续会补充）：
H1~H6:标题标签，独占一行，随数字的增大，字体逐渐减小
P：段落标签，独占一行，段落跟段落之间，上下有间距
i:斜体字
hr：分割线
b：字体加粗
br：强制换行
ul（无序列表）：type=disc 实心圆，type=square 实心正方形， type=circle 空心圆
ol（有序列表）： type=a 小写字母排序 type=A 大写字母排序 type=i 小写罗马数字排序 type=1 阿拉伯数字排序
img：单标签，src属性：存放图片路径，alt属性：当图片未显示或者无法显示时，替换文字
a标签：
href属性：链接地址（可以是网页，可以是资源文件，也可以是程序接口，只要能够访问的）
target属性：用来指定点击之后，打开网页是当前跳转，还是打开新页面
<a target="_self">xxx</a> 在当前页面跳转
<a target=" _blank">xxx</a>创建新的页面跳转
src和href的区别：
src引用的资源通常是不可或缺的，例如img当中的src，如果引用失败会导致页面不完整
href表达的是一种关联性，例如超链接关联的页面，理论上来说，即使href地址错误，并不影响当前页面的完整性。
css层叠样式（用来修饰网页的各种元素的样式）：
三种写法：
行内样式（内联样式）：
直接在标签上添加，style属性，将样式内容直接写在style属性中
内部样式：
在页面上编写style标签，将所有样式编写再style标签中。不同的样式如何针对不通风的标签生效？靠选择器来选取不同元素
外部样式：
将style标签中的样式内容，写在单独的文件中，该文件的后缀名，叫.css，html网页需要引入该css文件
<link rel="stylesheet",type="text/css",href="xxx.css">
选择器（用来选取对应的元素，添加样式）：
ID选择器：#box{。。。}，通过#号+ID号选择元素
类（别）选择器：。.ist{。。。}，通过.加上类别名称
标签选择器：直接写标签名称或者自定义标签式也可以生效
属性选择器：input[type="xxx"]，p[id=abc]完全等价于p#abc
通用选择器：*{....}
组合选择器：input,#box,.abc{.......}//div#box.abc{当多个选择器中间没有空格的时候，选择器之间不再有层次级关系，表示同一元素}
层次选择器：.box >p (>号表示选取下级的子元素 ) .box p (表示选取所有后代元素 )
伪选择器：xxx:hover(....)---当鼠标滑过的时候生效
xxx:nth-child(n)-----选择xxx元素的第n个
xxx:nth-child( even )----选择xxx元素的偶数
xxx:nth-child( odd )------选择xxx元素的奇数
xxx:checked-------选择被选中的元素（并不是所有元素都有选中状态）
如何判断选择器的优先级：选择器范围越小，优先级越高，选择越精准，优先级越高。
css属性：
背景属性：background-color:背景色
文本属性：
color：字体颜色
font-size：字体大小
text-decoration:文本修饰：none/underline/overline/line-through
text-indent：首行缩进
font-family：字体种类
font-weight：字体粗细
排列方式：
text-align（文本的水平对齐方式）：left/center/right
line-height(行高):文字总是会垂直于这一行的中间，当行高和父容器的高度一致时，文字就会在容器中垂直居中。
大小：width/height(宽/高)
列表样式清除：list-style:none
背景图：（背景图与背景色可以并存，如果图片没有占用整个容器，则依然可以看见背景色）
background-image: url('图片路径')-------背景图默认是被元素的大小限制的超出的部分不可见
background-size:300px 500px(背景图的宽度300px，高度500px)------背景图依然在默认情况下可以保持宽高比，设定大小时，可以只设定宽或高
background-position:left bottom;(将背景图位置改在左下角)
background-position:200px 100px(背景图位置，横坐标200px，纵坐标100px)-------需要各位注意的是，在浏览器的坐标中原点始终在左上角，并且，y轴向下为正
background-repeat：no-repeat;(禁止背景图平铺（重复）)
background:linear-gradient(线性渐变)(to left,#ccc,#fff)
渐变方向，开始颜色，结束颜色
浮动：
float:left/right：左浮动右浮动
浮动元素脱离文档流，不占据页面空间，因此，他会与其他元素重叠，但是不会遮掩文字内容（文字环绕效果）
子元素浮动会导致父元素高度塌陷-----给父元素增加固定高度------给父元素增加overflow：auto；
当一个宽度100%的容器浮动时，宽度会自动改为随内容变化，简单说，就是没有了宽度，需要靠内容撑开
所有浮动元素水平横向排列
如何清除浮动元素影响（平级相邻元素）：如果哪个元素不想受到前面浮动元素的影响，在该元素身上增加 clear:both;
元素类型：
块元素（h1/h2/div/p）：可以设置宽高大小，独占一行
行内元素（span/a/b/i）:设置高度无效，水平排列，排在一行，当放不下时候换行，只有水平边距生效的
行内块元素（img/input/表单元素）：可以设置宽高大小，水平排列，排在一行，当放不下了会换行
如何进行类型转换：
dispaly属性：
block（块）/ inline(行内)/inline-block(行内块)
盒模型：
margin(外边框)：两个元素上下边距会重叠在一起，当大小不一样得时候，以大的为准，左右不重叠
margin：10px------表示边框四周有10像素的距离
margin：10px 15px------表示上下边距10像素，左右边距15像素
margin：auto；--------自动调整边距，会使得这个元素在水平方向上居中
padding（内边距）：padding：20px；----表示向元素填充20px的距离，内容与边框之间会产生空袭，同时元素会被撑大，也就是所，会改变元素的大小
border（边框）：border：2px solid black；--边框宽度2px，实线，黑色
边框类型：solid(实线)/dashed(虚线)/dotted(点线)
overflow属性：
scroll(出现滑动条)-----未超出时，滚动条不显示，但是滚动框出现
hidden(超出部分隐藏)
auto(自动处理)：为超出时，滚动框不出现，超出时，滚动框出现
overflow-x------设置水平方向
overflow-y-------设置竖直方向
精灵图（背景图）----------整合小的图片为一张大图，然后通过调整背景图片位置，来显示其中部分内容，图片整合的作用时为了减少网络请求，提高网页加载效率
如何时框四周棱角变得圆滑：
border-radius:5px;--------以5个像素点为半径的圆
如何设置阴影：
box-shadow:0 0 8px 0 #444
阴影横坐标，阴影纵坐标，阴影虚化程度，阴影扩展大小，阴影颜色
如何设置背景透明程度：
background:rgba(255,255,255,0.9)
前三位表示3原色的数值，第四位（最后一位）是表示透明程度，数值越小越透明
定位：
position:absolute;-------------绝对定位，相对于有定位方式的父元素（坐标系的原点，如果父元素有定位方式，则以父元素为参考系
如果父元素，以及所有上层元素都没有定位，最终，以页面为参考系（页面左上角为原点））
position:relative;--------------相对定位，相对于元素原来位置-----坐标原点在哪？这个元素原本的位置就是原点
position:fixed;-----------------固定定位，相对于浏览器窗口进行定位
ps:凡是有定位的元素，宽不再是100%，而是跟随内容变化的
凡是有定位的元素，层数都比没有定位的要高
伪元素：
一个每日有标签的元素，不能独立存在，要依附于其他真实元素
元素内容由content属性提供
伪元素的其他特征跟真实元素没区别
xxx::after{......}/xxx::before{.....} --------两种写法,可以同时生成两个伪元素
生成的伪元素会出现在主元素的内部，也就是相当于它的子元素
css3动画：
transition（过渡）
transition: 3s;-----------过渡三秒，可以在秒前加方向或者别的
translate(变形)
rotate()----旋转---------rotateX(20deg)/rotateY(45deg)/rotateZ(30deg)-----deg代表角度名叫杜为正时候顺时针旋转
translate()--位移--------translateX(20px)/translateY(20px)/translateZ(20px)---在原来的基础上产生的位移偏移，该偏移不会对网页布局产生任何影响
scale()------缩放--------scale(2.5)--放大至2.5倍----scale(0.7)--缩小至0.7倍
ps: transfrom:translateX(50px) rotateZ(360deg) scale(1.4);---------三种变形效果可以同时叠加，注意编写顺序，会影响执行顺序
@keyframes:
第一种编写方式：该动画表示的含义是，元素的背景颜色从红色变为绿色
@keyframes bgchange{
from{
background:red;
}
to{
background:green;
}
}
第二种编写方法：该动画表示的含义是：元素的背景色，从红色开始，在40%的时候变为黄色，70%时候变为粉色，在100%时候变为绿色
@keyframes bgchange{
0%{
background:red;
}
40%{
background:yellow;
}
70%{
background:pink;
}
100%{
background:green;
}
如何调用帧动画？
div.info{
animation:bgchange 5s infinite;----------------------元素使用了bgchange这个动画，并且持续5秒完成，动画无限循环播放
}
补充：：
css属性的简写
背景相关：
background: gray url(XXX/XX.png) norepeat;
(背景色) (背景照片) (平铺方式)
边框相关：
border : 1px solid #D31402;
(边框宽度)(边框样式)(边框颜色)
字体相关： (字体大小) (默认字体) (备用字体)
font: italic bold 20px/35px arial,sans-serif,"微软雅黑"；
(斜体字)(加粗) (行高) (备用字体)
外边距(内边距同理)：
margin: 10px 15px 10px 15px;
(上) (右) (下) (左)
margin: 10px 15px 15px;
(上) (左右) (下)
margin: 10px 15px;
(上下) (左右)
margin: 10px;---(上下左右)
HTML和CSS部分更新完了，接下来更新JS部分了，也夹杂着java的部分知识。
|
|
|Archiver|手机版|小黑屋|爱好网
( 赣ICP备14007844号-1 )
发表于 2021-8-7 17:36:07
提升卡
沉默卡
千斤顶