html-js初级阶段（问题总结）

html问题总结1

HTML+CSS:

Q1：单标签

meta： 元信息（例如视口标签）

img：图片

input

br：换行

hr：水平分隔线

link：引入标签 （rel：类型 href：地址）

base：基本跳转方式

Q2：table（边框合并，align=“center”）

边框合并的两种方式：

​ 1.内联：cellpadding = 0

​ cellspacing = 0

​ 2.CSS：border-collapse = collapse

​ tr,td{ 1px solid black}

table align = “center”：表格居中

CSS：margin : 0 auto;

Q3：input的一些小Tip

<!--
	input传递数据时最好带上name属性
	因为value是给用户看的，name是给后台看的

	**在table和form中获取input的值用value而不是innerText或者innerHtml
-->

<!--复选框  选中checked = true -->
<input type="checkbox">

<!--单选  选中checked = true 相同name时表示一组数据，这时候每一组数据只能选一个 -->
<input type="radio">

<!--下拉框 选中selected = true selectedIndex返回被选中的索引值  select.value返回的是被选中的value-->
<select name="" id="">
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
</select>

Q4：显示级别

<!--
	块级元素: div ,p ,h1~h6 ,ol ,ul ,li ,di ,dt ,dd ,table ,form
	行内元素: a ,span ,i
	行内块元素: img ,input			
-->

Q5：盒子阴影

box-shadow：X，Y ,模糊半径，扩散半径，color

inset：内阴影

模糊半径：数字越大越模糊

扩散半径：阴影大小的范围

Q6：Font简写

font：font-style | font-vdriant | font-weight | font-size | line-height | font-family

font-style：字体样式——正常，斜体

font-vdriant ： 字体变化，normal（正常） small-caps（小体）一般忽略这个属性

Q7：css3开启3D效果

设置3D视距：

​ perspective：100px

Q8：文字一行省略显示

<style>
    div {
        /* 强制一行显示 */
        white-space: nowrap;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 溢出以省略号显示 */
        text-overflow: ellipsis;
    }
</style>

Q9：媒体查询

@media mediatype and | not | only（条件）{

​ CSS Code

}

mediatype：媒体类型 all，print（打印机），screen（屏幕）

Q10：移动端body的设置

<style>
    body {
        margin: 0 auto;
        min-width: 320px;
        max-width: 750px;
        line-height: 1.5;
        overflow-x: hidden;
        user-select: none;
        -webkit-text-size-adjust: 100% !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
</style>

Q11：text的一些样式

文本修饰：text-decoration

文字缩进：text-indent

文字间距：letter-spacing(字母之间的距离) word-spacing(单词之间的距离)

行与行之间的距离：line-height

垂直对齐：vertical-align

Q12：三种视口

布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等

视觉视口：视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度

理想视口：理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度

• 理想视口通过 meta name=“viewport” content=“width=device-width, initial-scale=1.0” 使布局视口与理想视口保持一致

Q13：动画

animation : name duringtime ease in | step(8) infinite

name：动画名称

duringtime：持续时间

ease in | step(8)：过渡效果，其中step（8）表示分8步完成

infinite：循环播放