html+css笔记

2023年6月20日发(作者：)

HTML#dsadasdsadasddacursor: pointer; //鼠标的指针变成一只手!important 权重最高。strong标签 加粗有强调语义；b标签  也是加粗，但没有语义；em标签 倾斜标签，具有强调语义；

i标签 倾斜标签font-style: italic; 给字体添加斜体font-style: normal; 消除字体斜体strong标签的强调语义比em标签更强；sup 上标标签

sub 下标标签del 删除线标签 文字中间添加和横线text-decoration: none; 去掉下划线text-indent：2em;  首行缩进2字符 空格> 大于号< 小于号© 版本" 单引号® 已注册™ 商标vertical-align:middle; //用户来指定行内样式的对齐方式 :text-top; text-bottomtext-overflow:ellipsis;white-space:nowrap;overflow:hidden; 未显示的文字呈...显示import $clamp from 'clamp-js' //插件可以解决多行文本内容//可以在规定的行数进...显示，并且不能给盒子设置高度，完全靠内容进行填充；//是一个不规范的属性，兼容性不好 建议使用伪元素来模拟...号overflow:hidden;    text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;   //指定在第几行进行省略  -webkit-box-orient:vertical;textarea,input,select:focus{outline: 0;} //取消输入框的默认边框隐藏滚动条> ul {      width: 100%;      height: 765px;      font-size: 18px;      color: white;      scrollbar-width: none; /* firefox */      -ms-overflow-style: none; /* IE 10+ */      overflow-x: hidden;      overflow-y: auto;} > ul::-webkit-scrollbar {      display: none; /* Chrome Safari */ }图像标签有绝对路径和相对路径有   wight   图片宽度     height 图片高度     title 图片点击显示信息 src 导入图片地址 ./ 代表同级同目录的图片 ../ 返回当前目录的上一级目录 / 根目录 指向C盘 alt 为图片无法加载时的显示内容

有序列表

是有序列表
2. 是列表的每一个项目
   type的常见设置属性有： A I a i

   无序列表

   • type的常见属性有：circle 空心圆圈disc实行圆圈square实心方块

     list-style:none;消除实心点

     定义列表

     是定义列表

     分组的列表 dt之间同级

     分组的条目

     超链接href 表示跳转的地址或是路径、图片、也可以跳转到本地的一个指定id位置 如".html#xx"target 表示页面的打开方式     _self 在本页面窗口打开     _blank 新创建一个窗口打开代码效果：    本页面跳转    第三方跳转 伪函数，禁止a链接的跳转    

     表格 1.表格:

       //表格的行首   //行           * xx 行首的列，文字为自动居中和加粗                 //表格的主题             * xx //主题的单元格；                      //让表格的标签对应输入框      表格常用的属性

     border="1" 设置表格的边框

     width="80%" 设置表格的宽度

     align="center" 设置表格的对齐方式

     cellspacing="0px" 设置单元格与单元格的间距

     cellpadding="0px" 设置单元格与文本内容的间距

     bgcolor="blue" 设置表格的背景颜色

     colspan="2" 跨列

     rowspan 跨行border-collapse:collapse;合并单元格 相邻边框被合并border-sapcing 设置单元格之间的距离       有两个参数值，第一个值代表横向间距 第二个值代表纵向间距       有一个参数值，作用于横向和纵向的间距语义化（面试题）1、需要使用一些合理的HTML标签和属性去规定网页上内容，比如段落内容使用p标签，网页上的标题就使用h1-h6，或者给一些重要的图片添加alt属性等。2、当没有Css样式的时候，页面也能呈现良好的结构3、从开发者角度来说，可以也能使代码结构清晰4、语义化有利于用户体验；5、有利于SEO(搜索引擎)优化 //语义化只要有利于网站和搜索引擎建立起的良好沟通，爬虫可以抓取到更好的网页内容；

     from表单1、网页的登录以及账号的注册页面都需要from表单来进行提交2、用于收集用户的信息，并向服务器提交数据3、from表单的组成部分：   容器、2.输入框、3.提交的按钮4、form表单的属性       action 表示from表单提交的地址       method 表示提交的方式 有两种提交方式：get和post           get提交为明文提交安全性较差并且提交的数据有长度限制不得超过4kb   所以一般使用get来下载数据。           post则相反           enctype="mul input标签用于接收来自用户输入的信息input里type所拥有的常用属性有： form 指定表单元素所属的form标签    text 文本框 border: 0; outline:none; 去除蓝色边框    password 密码输入框    radio 单选按钮==注意单选按钮要给予name类名，类名值必须要一致    checkbox 多选按钮 注意单选按钮要给予name类名，类名值必须要一致    file 表示提交文件

     multiple //可以选择多个进行提交； checked="true" 表示默认选中 placeholder="请输入密码" 输入框的背景提示信息 autofocus 设置输入框自动获取焦点，一个form不可以设置多个 自动补全，默认浏览器是开启自动补全的，只记录同字段的历史记录 autocomplete="off"关闭 ="on"开启 required //指定输入框为必填的选项；

     时间分类    date 表示年月日 至允许选择 datetime-local 表示到年月日 时分 datetime 日期时间输入框，只允许输入    time 表示显示时间    month 表示年月份    week 表示周    range 表示滑块{       min="10" 表示最小值       max="100" 表示最大值       value="10" 表示默认值       step="10" 表示间隔的变动数值 } nmber 表示数值{       min="10" 表示最小值       max="100" 表示最大值       value="10" 表示默认值          step="10" 表示间隔的变动数值 }    search 搜索框    email 邮箱   tel 电话号码 url网址验证    color 颜色    hidden 隐藏

        button 普通按钮    reset 重置按钮    submit 提交按钮input的标签属性-------------------    id 主要用于获取该输入框    name 主要用于给服务器获取其值    maxlength 限制输入框的最大长度    size 设置输入框的大小    readonly="readonly" 只能读，不可被修改    value 设置默认的数值    disabled 禁用按钮------------------------------------ //给普通文本输入框定义选项的列表；

     xx下拉列表  50L  40L

     文本域<textarea/> </p><p>CSS样式在页面引入样式<link href="" rel="stylesheet"/><style> @import url("");<style/>!important 权重最高。 </p><p> </p><p>字体样式font-size 设置字体的大小font-weight:200px; 设置字体的粗细font-style：italic; 设置字体样式font-family："宋体" 设置字体类型 </p><p>文本样式text-decoration //文本装饰text-decoration：overline; 文本上方加横线 line-through 文本中间加删除线 underline 文本下加横线 none 没有横线color 文本颜色text-align 设置文本的对齐方式 //可以让图片以及子元素进行继承line-height 设置文字的行高 盒子高度多少，行高给多少letter-spacing：xxpx； 设置文字之间的间距word-spacing: xxpx; 设置单词之间的间距 //需要单词之间有空格才能使用 </p><p>a 标签伪劣样式 a:link{color:red;} 未被点击前的默认状态a:visited{color:blue;} 点击后的状态a:hover{color:yellow;} 鼠标移入的状态a:active{color:orange;}鼠标点击后未松开的状态a:focus 鼠标点击后的状态a:enabled 选择可用状态的表单元素， 默认都是可以选择，可设置disabled进行禁用；a:disabled 选择禁用状态的表单元素a:checked 选中状态的表单元素；边框样式border:2px solid red;三个值一定要写solid 实线dashed 虚线dotted 点状线double 双实线radius：10px; 50%为圆角transparent 隐藏 </p><p>背景样式background-color:red; 背景颜色background-image:url();插入背景图片background-repeat:no-repeat;表示图片不平铺background-repeat：repeat-x; 仅在水平方向平铺 </p><p>background-repeat:repeat-y; 仅在垂直方向平铺；background-position:center; 也可以用100px/-100px设置图片的偏移rgba(r,g,b,a) 红 绿 蓝 透明度；0-1opacity:0-1; 使当前元素的所有内容都进行透明background:url() no-repeat xx xx;background:content-box; //边框布满背景图片；background-clip:padding-box; 内边距以外的背景图被裁剪； border-box 边框以外的背景图被裁剪； content-box; 内容以外的背景图被裁剪 </p><p>背景的渐变属性background-image:linear-gradient(to right,red 50%,blue 50%); //从右开始的背景色渐变 渐变结束的方向：to top等等，也可以使用0-360 deg; 渐变的占比占多少 %；background-image:repeating-linear-gradient(xxxx); //颜色不到百分百时，会自动重复颜色；----------------------------------------------------------background-image:radial-gradient(圆心半径,圆心半径,水平半径，水平半径，颜色); //从圆心的位置开始渐变； </p><p> 盒子模型 content 内容padding 内边距 </p><p>margin 外边距border 边框padding:xxpx;两值为上下、左右。三值为上、左右、下。四值为上 下、右，左。清除浮动clear:both;清除两边的浮动clear:all; 清除全部浮动clear:right; 清除右边浮动 </p><p>定位position: relative；相对定位,相对于本身原有位置进行定位 但本身任由占位left:20px; top:20px;position:absolute; 绝对定位：相对其他父级的定位元素进行定位 本身不占位，脱离文档流 没有父级定位元素则以html开始定位position: fiexd; 固定定位：相当于浏览器窗口来进行定位position: static; 默认没有定位z-inde：xx; 给元素的叠加进行定级 </p><p>元素之间的转换元素共划分为 块元素、行状元素、行块元素行块元素:input、img等等display:block; 转化为块元素display：inline；转化为行元素display：inline-bloc; 转化为行块元素display:none; 隐藏元素visibility: visible; 默认值； visibility: hidden; 隐藏元素，但是仍然占据空间 </p><p>CSS hack技术hack技术是为了兼容各个浏览器和浏览器版本推出的技术；hack技术不支持IE10+以上版本的使用，都是在IE5--9来做测试不能大量的使用，会影响页面的性能<!-- [if lt ie 9]> xxxxxx<![endif]-->gt 大于号gte >=号lt 小于号lte <=号! 非感叹号，不等于；--------------------------------------------------css属性hack，可以在某些属性值的前缀和后缀添加属性_下划线 在IE6--以下的版本可以进行使用* 号 在IE7--以下的版本可以进行使用/0 可以在IE8以上的版本进行使用-background-color:red;*background-color:red; background-color:red/0; 动画过渡动画的样式transition-property:color,width(all全部);指定需要动画过渡的CSS样式transition-duration:1s; 指定一次动画持续的时间 </p><p>transition-delay: 1s; 指定动画延迟多久才开始过渡transition-timing-function:ease; 平滑过渡 :linear; 匀速过渡   ：ease-in; 开始慢后面快   ：ease-out; 开始快后面慢   ：ease-in-out; 开始慢然后快最后慢-------------------------------------------------------------单个过渡动画写法：transition:样式 持续时间 延迟时间 过渡效果;多个过渡动画写法：transition:width 1s linear,color 1s linear;   transtion: all 5s linear; //当前属性下所有属性参与动画效果； </p><p> </p><p>2D动画动画的移动不会造成文档流的脱离；transform:translate(10px,-10px); 代表x、y轴方向移动 :translateX(xxpx); 动画向x轴移动 :translateY(xxpx); 动画向Y轴移动--------------------------------------------动画的缩放和旋转 占位依然存在，不会脱离文档流`transform:scale(1.1,1.2); 向X轴和Y轴同时缩放 :scaleX(1.1); 向X轴进行缩放 :scaleY(1.1);   向y轴进行缩放 :scaleZ(1.1); 向盒子的厚度进行缩放transform:rotate(45deg); 旋转 </p><p>//同时进行缩放和旋转transform:scale(1.1,1.2) rotate(45deg);------------------------------------------tranform:skew(xxdeg,xxdeg); //两个同时进行倾斜，不太常用tranform:skewX(xxdeg); //水平方向进行倾斜，高度不变，横线拉伸tranform:skewY(xxdeg);//竖直方向进行倾斜，宽度不变，竖直拉伸动画的中心点transform-origin:center top; 中心为动画的顶部中间 ：xxpx xxpx； 中心点为指定的位置像素点 ：xx% xx%;   初始的中心点在左上角3D动画 z轴可以想象成正对着自己，；tranform:translateZ(); //沿着Z轴进行移动；tranform:translate3D(x,y,z); 水平、竖直、Z轴； </p><p>perspective:600px-2000px; //视距：让3d变形呈现立体效果，默认的视距为0px；transform:rotateX(xxdeg); //朝正反面进行3D翻转；transform:rotateY(xxdeg); //朝左右面进行3D翻转；transform:rotateZ(xxdeg)； //朝Z轴进行选择transform:rotate3d(x-d,y-d,z-d) //进行旋转 </p><p> d可以值可以有3个 1 表示顺时针 -1表示逆时针， 0表示不参与旋转；如果父盒子和子盒子都要使用3D动画效果，则需要在父盒子上添加transform-style:preserve-3d; 父元素会保留3D效果；动画格式：@keyframes name{    from{} //开始    to{} //结束}或是：@keyframes name{    10%{}    50%{}    100%{}}animation:none; //取消动画；然后再div{xxx;xxx;xx; animation:name} //在属性中插入动画的名称；状态写法1：from ，to； 代表初始值和终点值  2： 百分比写法，  0%~100% 中间可以多个状态  播放动画： animation-name:name; 指定播放动画片段的名称 animation-duration:1s; 指定一次播放动画的时间； animation-delay: 2s; 延迟多久开始播放动画 animation-iteration-count: infinite;(循环播放) 指定动画播放的次数 animation-timing-function:     指定动画播放的模式 linear;匀速 ease 慢 快 慢 结束 ease-in animation-direction:normal;指定动画播放的方向 reverse;反向播放动画 alternate; 正向和反向的循环播放 alternate-reverse; 反向和正向的循环播放； animation-play-state:running; 默认的播放状态 :paused; 暂停播放动画animation: name duration delay iteration-cout;等等可以直接简写animation: 名字 播放时间 延迟时间 播放的模式;持续时间必须要在延迟时间之前 </p><p>HTML5新增的标签布局标签 </p><p> nav标签； //多用于网页最顶部的导航链接，和侧边导航，翻页导航等header标签 //用于定义网页头部信息，如标题、相关的logo图片等等footer标签 //用户定义网页尾部信息，如版本信息，相关的阅读链接；<article>标签 //定义页面中语义相对独立的区域。如评论区，商品分类等等； <section> //表示一个页面中内容的分区，一般是和article配套使用； <h1> //一般于他两进行配套使用； <p>       figure标签 //安插图片、表格等； </section></article>aside标签 //用于定义网页中的附属信息部分，例如侧边导航、引用，广告区域；不要使用div盒子包裹住，不然没有使用意义其他标签mark标签； //带有标记的文本标签； 当初拿来标记，没有语义化；time标签； //定义日期和时间； 没有具体效果，就语义化效果；！！！<time datetime="2021-04-04">清明节</time> 定义日期时需要添加上该属性，不然没有任何语义作用；figure标签； //定义网页中的流内容(图片、表格、代码片段) 这个也是没有语义<figure> <figcaption><figcaption> //图片的标题</figuer> </p><p>html5的兼容问题1、使用js代码来创建元素来在页面上插入标签【注意】使用在IE9--以下版本的浏览器，创建出来的标签都是行内元素；Element("header");2、使用html5 shiv插件js插件插入移除的标签 //建议不要使用；font标签； //设置字体的样式；big //放大字体center </p><p>framedirbasefont 定义body默认字体颜色或是字号appleft </p><p>acronym </p><p>framesetstrikeus </p><p>多媒体标签<audio src="" controls loop autoplay muted> //音频标签 <source src="mp3格式"><source>    <source src="ogg格式"><source>    <source src="wav格式"><source>   你的浏览器暂不支持此控件；</audio> </p><p><video src="" controls loop autoplay muted> //视频标签； <source src="mp4格式"><source>    <source src="ogg格式"><source>    <source src="wav格式"><source></video> </p><p>src为音频资源的路径controls调出音频的控制器；loop 循环播放autopaly 自动播放；是和网站的设置有关系的；muted 是否静音-----------------------------视频的标签能设置宽高和大小poster=""; 可以设置视频的封面图片； </p><p>CSS的新增属性；CSS2的属性选择器；[type="text"]{}[type~="text"]{} //~= 选择带有text类名的标签；CSS3的属性选择器[href^="xx" $= *=]; //^首位等于 $尾部等于 *全部等于p:first-child{} //选择同级中的第一个p标签元素；p:last-child{} //选择同级中的最后一个p标签元素；p:nth-child(n){} //选择同级中的第n个p标签元素；可以2n 2n-1等数学算法；even可以为偶数 odd 为奇数 与2n 2n-1等价；p:only-child{} //匹配没有任何兄弟元素的p标签；----------------------------------------------------p:first-of-type{}; 选择同级中同种类型的第一个元素p:last-of-type{}; 选择同级中同种类型的最后一个元素p:nth-of-type(n){};选择同级中同种类型的第n个元素标签；p:only-of-type{}; 匹配到没有任何兄弟类型的p标签； </p><p>盒子阴影box-shadow: x1px x2px x3px x4px red inset; </p><p> :h-shadow  x1//水平方向阴影的位置 允许负值； :v-shadow  x2// 垂直方向的阴影位置，允许负值； :blur x3//可选的值，模糊的距离 :spread x4//可选的值，阴影的尺寸； :color //默认为黑色 :inset(内侧) //盒子的内侧阴影；text-shadow:x1px x2px x3px red; //属性同上； </p><p>多列布局对文本进行布局column-count: 3; //将父盒子内的所有内容进行自动分割3列数；column-width: 300px; //指定每列的宽度；column-gap: 100px; //指定每列的宽度的间隔；column-rule: 1px solid red; //指定每列中间分割线的样式； </p><p>盒子的模式 box-sizing     //改变盒子的模式 :border-box; //设置为怪异盒子，元素的尺寸为盒子的宽高所决定； :content-box; //标准盒模型；----------------------------------------------------resize:both;//可以在页面上让用户决定盒子的尺寸resize:vertical; //允许用户调整盒子的高度resize:horizontal; //允许用户调整盒子的宽度overflow:auto; //需要在盒子上加入该属性才能使用；弹性盒子【注意】弹性盒子的排序只会作用于直接的子代元素，孙代元素则不影响设置成弹性盒子的元素叫做容器，弹性盒子中的子元素叫做项目；容器默认有两根轴，水平的默认为主轴，竖直的为交叉轴，项目默认在主轴进行排序；display:flex; //设置盒子为弹性盒子 该元素里面的子代元素会应用弹性盒子的排序规则display:inline-flex; //在页面上不会独占一行-----------------------------------------------------------------white-space: nowrap; 盒子内元素不换行1、flex-direction: //主轴的方向 row; //默认主轴为水平方向 row-reverse; //主轴的起点位置在右端； column; //主轴方向为竖直方向 column-reverse; //主轴为垂直且起点在下方；2、justify-content: //决定项目在主轴上的排序方式； :flex-start; //默认方向； :flex-end; //沿着主轴的结尾进行排序； :center; //居中对齐； :space-around; 每个项目的两侧边距相同； </p><p> :space-evenly;项目和项目之间，以及项目于边框之间的间隔一样的 :space-between;两端对齐，项目之间的间隔相同3、aling-items: //适用于不换行的项目 flex-start; //以交叉轴的起点为对齐 flex-end; //以交叉轴的结束点为对齐； center； //以交叉轴的中间为对齐； baseline； //以项目中的第一行文字的基线对齐 aling-content: //【注意这里适用于有换行的子项】 flex-start 默认值 flex-end 在交叉轴的的尾部开始排序 center 在交叉轴中间显示 space-around 子项在交叉轴中平分剩余空间 space-between 子项在交叉轴分布在两头 stretch 设置子项元素高度平分父元素高度； aling-self:center; //可以单独给某个盒子设置排序方式；4、flex-wrap: nowrap; //默认值不换行； wrap; //盒子会自动进行换行； wrap-reverse; //盒子自动从下开始往上排序；5、order:2; //给单独的盒子定义的排序等级，等级越高，排序越前；6、flex-grow: xx; //会将父容器的定义项目的放大比例，默认为0；7、filex-shrink: xx; //定义项目的缩放比例，默认值为1；如果空间不足，则等比例缩放；如果设置为0，则不参与等比例的缩放；flex: xx; //平均来进行等分；<div>p*3 </div>flex: 1; //3个p标签平均将div的宽度进行1:1:1的等分；p:nth-child(2){flex:2} //第二个p标签的宽度为2分 按1:2:1 来分配；简写： flex-flow: colum wrap; //设置主轴的方向和换不换行媒体查询根据我们的设备来设置特定的CSS样式；@media scree and (max-width:800px) and (xx) {}; width height min-width:    all //适用于所有设备 and //可以将多个媒体设备连接到一起    print //用于打印机和打印预览  not //排除某个指定的媒体类型，    scree //用于电脑屏幕、数码设备  only //指定摸个特定的媒体设备 </p><p>网格布局display:grid; 设置为网格布局disaplay:inline-grid; //不会让设置网格布局的父容器独占一行grid-template-columns: xxpx xxpx xxpx; //将盒子分成三列； :repeat(x,xxpx); //将盒子分成x列 :1fr 2fr 3fr; //将盒子分成6列 :auto; //浏览器自动填充宽高； :repeat(auto-fill,100px);//容器不确定，盒子会自动进行填充和换行grid-template-row:xxpx xxpx xxpx; //将盒子分成三行；--------------------------------------------grid-row-gap:xxpx; //给项目添加间距grid-colums-gap:xxpx; //给项目添加间距；grid-gap:xxpx xxpx;  gap:xxpx xxpx;//简写；----------------------------------------------------//盒子的排序方式：指定盒子的排序是行还是列排序；grid-auto-flow:row/column/   :row dense column dense;//排序时不留空格；--------------------------------------------------grid-template-areas:"a a a""b b c""c c c";//项目的对齐方式；justify-items:     //项目的排序方式；align-items:   //垂直排列place-items:xx xx; 简写//容器的对齐方式；justify-content:     //项目的排序方式；align-content:   //垂直排列place-content:xx xx; 简写 </p><p> </p><p><p></p></img></p><p>2023年6月20日发(作者：)</p><p></p><p></img></p><p>HTML#dsadasdsadasddacursor: pointer; //鼠标的指针变成一只手!important 权重最高。strong标签 加粗有强调语义；b标签  也是加粗，但没有语义；em标签 倾斜标签，具有强调语义； </p><p>i标签 倾斜标签font-style: italic; 给字体添加斜体font-style: normal; 消除字体斜体strong标签的强调语义比em标签更强；sup 上标标签 </p><p>sub 下标标签del 删除线标签 文字中间添加和横线text-decoration: none; 去掉下划线text-indent：2em;  首行缩进2字符 空格> 大于号< 小于号© 版本" 单引号® 已注册™ 商标vertical-align:middle; //用户来指定行内样式的对齐方式 :text-top; text-bottomtext-overflow:ellipsis;white-space:nowrap;overflow:hidden; 未显示的文字呈...显示import $clamp from 'clamp-js' //插件可以解决多行文本内容//可以在规定的行数进...显示，并且不能给盒子设置高度，完全靠内容进行填充；//是一个不规范的属性，兼容性不好 建议使用伪元素来模拟...号overflow:hidden;    text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;   //指定在第几行进行省略  -webkit-box-orient:vertical;textarea,input,select:focus{outline: 0;} //取消输入框的默认边框隐藏滚动条> ul {      width: 100%;      height: 765px;      font-size: 18px;      color: white;      scrollbar-width: none; /* firefox */      -ms-overflow-style: none; /* IE 10+ */      overflow-x: hidden;      overflow-y: auto;} > ul::-webkit-scrollbar {      display: none; /* Chrome Safari */ }图像标签有绝对路径和相对路径有   wight   图片宽度     height 图片高度     title 图片点击显示信息 src 导入图片地址 ./ 代表同级同目录的图片 ../ 返回当前目录的上一级目录 / 根目录 指向C盘 alt 为图片无法加载时的显示内容 </p><p>有序列表<ol type="A">是有序列表 <li><li/>是列表的每一个项目<ol/>type的常见设置属性有： A I a i </p><p>无序列表<ul type=""><li><li/><ul/>type的常见属性有：circle 空心圆圈disc实行圆圈square实心方块 </p><p>list-style:none;消除实心点 </p><p>定义列表<dl>是定义列表 <dt><dt/>分组的列表 dt之间同级 <dd><dd/>分组的条目<dl/> </p><p>超链接<a><a/>href 表示跳转的地址或是路径、图片、也可以跳转到本地的一个指定id位置 如".html#xx"target 表示页面的打开方式     _self 在本页面窗口打开     _blank 新创建一个窗口打开代码效果：    <a href="" target="_blank">本页面跳转</a>    <a href="" target="_self">第三方跳转</a> <a href="javascript:;">伪函数，禁止a链接的跳转</a>     </p><p>表格 1.表格:<table>   <thead> //表格的行首   <tr> //行           <th></th> * xx 行首的列，文字为自动居中和加粗            </tr>   </thead>   <tbody> //表格的主题   <tr>           <td></td> * xx //主题的单元格；            </tr>   </tbody>    <table/>    <label for="x1"></label>//让表格的标签对应输入框      <input id="x1">表格常用的属性 </p><p>border="1" 设置表格的边框 </p><p>width="80%" 设置表格的宽度 </p><p>align="center" 设置表格的对齐方式 </p><p>cellspacing="0px" 设置单元格与单元格的间距 </p><p>cellpadding="0px" 设置单元格与文本内容的间距 </p><p>bgcolor="blue" 设置表格的背景颜色 </p><p>colspan="2" 跨列 </p><p>rowspan 跨行border-collapse:collapse;合并单元格 相邻边框被合并border-sapcing 设置单元格之间的距离       有两个参数值，第一个值代表横向间距 第二个值代表纵向间距       有一个参数值，作用于横向和纵向的间距语义化（面试题）1、需要使用一些合理的HTML标签和属性去规定网页上内容，比如段落内容使用p标签，网页上的标题就使用h1-h6，或者给一些重要的图片添加alt属性等。2、当没有Css样式的时候，页面也能呈现良好的结构3、从开发者角度来说，可以也能使代码结构清晰4、语义化有利于用户体验；5、有利于SEO(搜索引擎)优化 //语义化只要有利于网站和搜索引擎建立起的良好沟通，爬虫可以抓取到更好的网页内容； </p><p>from表单1、网页的登录以及账号的注册页面都需要from表单来进行提交2、用于收集用户的信息，并向服务器提交数据3、from表单的组成部分：   容器、2.输入框、3.提交的按钮4、form表单的属性       action 表示from表单提交的地址       method 表示提交的方式 有两种提交方式：get和post           get提交为明文提交安全性较差并且提交的数据有长度限制不得超过4kb   所以一般使用get来下载数据。           post则相反           enctype="mul input标签用于接收来自用户输入的信息<input type="" name=""><input/>input里type所拥有的常用属性有： form 指定表单元素所属的form标签    text 文本框 border: 0; outline:none; 去除蓝色边框    password 密码输入框    radio 单选按钮==注意单选按钮要给予name类名，类名值必须要一致    checkbox 多选按钮 注意单选按钮要给予name类名，类名值必须要一致    file 表示提交文件 </p><p> multiple //可以选择多个进行提交； checked="true" 表示默认选中 placeholder="请输入密码" 输入框的背景提示信息 autofocus 设置输入框自动获取焦点，一个form不可以设置多个 自动补全，默认浏览器是开启自动补全的，只记录同字段的历史记录 autocomplete="off"关闭 ="on"开启 required //指定输入框为必填的选项； </p><p>时间分类    date 表示年月日 至允许选择 datetime-local 表示到年月日 时分 datetime 日期时间输入框，只允许输入    time 表示显示时间    month 表示年月份    week 表示周    range 表示滑块{       min="10" 表示最小值       max="100" 表示最大值       value="10" 表示默认值       step="10" 表示间隔的变动数值 } nmber 表示数值{       min="10" 表示最小值       max="100" 表示最大值       value="10" 表示默认值          step="10" 表示间隔的变动数值 }    search 搜索框    email 邮箱   tel 电话号码 url网址验证    color 颜色    hidden 隐藏 </p><p>    button 普通按钮    reset 重置按钮    submit 提交按钮input的标签属性-------------------    id 主要用于获取该输入框    name 主要用于给服务器获取其值    maxlength 限制输入框的最大长度    size 设置输入框的大小    readonly="readonly" 只能读，不可被修改    value 设置默认的数值    disabled 禁用按钮------------------------------------ <input type="text" list="list1"> //给普通文本输入框定义选项的列表；<datalist id="list1"> <option value="xx">xx</option> </p><p> <option value="xx">xx</option></datalist>下拉列表<select name="" id="">  <option value="">50L</option>  <option value="">40L</option></select> </p><p>文本域<textarea cols="100"(跨行) rows="50"(跨列) ><textarea/> </p><p>CSS样式在页面引入样式<link href="" rel="stylesheet"/><style> @import url("");<style/>!important 权重最高。 </p><p> </p><p>字体样式font-size 设置字体的大小font-weight:200px; 设置字体的粗细font-style：italic; 设置字体样式font-family："宋体" 设置字体类型 </p><p>文本样式text-decoration //文本装饰text-decoration：overline; 文本上方加横线 line-through 文本中间加删除线 underline 文本下加横线 none 没有横线color 文本颜色text-align 设置文本的对齐方式 //可以让图片以及子元素进行继承line-height 设置文字的行高 盒子高度多少，行高给多少letter-spacing：xxpx； 设置文字之间的间距word-spacing: xxpx; 设置单词之间的间距 //需要单词之间有空格才能使用 </p><p>a 标签伪劣样式 a:link{color:red;} 未被点击前的默认状态a:visited{color:blue;} 点击后的状态a:hover{color:yellow;} 鼠标移入的状态a:active{color:orange;}鼠标点击后未松开的状态a:focus 鼠标点击后的状态a:enabled 选择可用状态的表单元素， 默认都是可以选择，可设置disabled进行禁用；a:disabled 选择禁用状态的表单元素a:checked 选中状态的表单元素；边框样式border:2px solid red;三个值一定要写solid 实线dashed 虚线dotted 点状线double 双实线radius：10px; 50%为圆角transparent 隐藏 </p><p>背景样式background-color:red; 背景颜色background-image:url();插入背景图片background-repeat:no-repeat;表示图片不平铺background-repeat：repeat-x; 仅在水平方向平铺 </p><p>background-repeat:repeat-y; 仅在垂直方向平铺；background-position:center; 也可以用100px/-100px设置图片的偏移rgba(r,g,b,a) 红 绿 蓝 透明度；0-1opacity:0-1; 使当前元素的所有内容都进行透明background:url() no-repeat xx xx;background:content-box; //边框布满背景图片；background-clip:padding-box; 内边距以外的背景图被裁剪； border-box 边框以外的背景图被裁剪； content-box; 内容以外的背景图被裁剪 </p><p>背景的渐变属性background-image:linear-gradient(to right,red 50%,blue 50%); //从右开始的背景色渐变 渐变结束的方向：to top等等，也可以使用0-360 deg; 渐变的占比占多少 %；background-image:repeating-linear-gradient(xxxx); //颜色不到百分百时，会自动重复颜色；----------------------------------------------------------background-image:radial-gradient(圆心半径,圆心半径,水平半径，水平半径，颜色); //从圆心的位置开始渐变； </p><p> 盒子模型 content 内容padding 内边距 </p><p>margin 外边距border 边框padding:xxpx;两值为上下、左右。三值为上、左右、下。四值为上 下、右，左。清除浮动clear:both;清除两边的浮动clear:all; 清除全部浮动clear:right; 清除右边浮动 </p><p>定位position: relative；相对定位,相对于本身原有位置进行定位 但本身任由占位left:20px; top:20px;position:absolute; 绝对定位：相对其他父级的定位元素进行定位 本身不占位，脱离文档流 没有父级定位元素则以html开始定位position: fiexd; 固定定位：相当于浏览器窗口来进行定位position: static; 默认没有定位z-inde：xx; 给元素的叠加进行定级 </p><p>元素之间的转换元素共划分为 块元素、行状元素、行块元素行块元素:input、img等等display:block; 转化为块元素display：inline；转化为行元素display：inline-bloc; 转化为行块元素display:none; 隐藏元素visibility: visible; 默认值； visibility: hidden; 隐藏元素，但是仍然占据空间 </p><p>CSS hack技术hack技术是为了兼容各个浏览器和浏览器版本推出的技术；hack技术不支持IE10+以上版本的使用，都是在IE5--9来做测试不能大量的使用，会影响页面的性能<!-- [if lt ie 9]> xxxxxx<![endif]-->gt 大于号gte >=号lt 小于号lte <=号! 非感叹号，不等于；--------------------------------------------------css属性hack，可以在某些属性值的前缀和后缀添加属性_下划线 在IE6--以下的版本可以进行使用* 号 在IE7--以下的版本可以进行使用/0 可以在IE8以上的版本进行使用-background-color:red;*background-color:red; background-color:red/0; 动画过渡动画的样式transition-property:color,width(all全部);指定需要动画过渡的CSS样式transition-duration:1s; 指定一次动画持续的时间 </p><p>transition-delay: 1s; 指定动画延迟多久才开始过渡transition-timing-function:ease; 平滑过渡 :linear; 匀速过渡   ：ease-in; 开始慢后面快   ：ease-out; 开始快后面慢   ：ease-in-out; 开始慢然后快最后慢-------------------------------------------------------------单个过渡动画写法：transition:样式 持续时间 延迟时间 过渡效果;多个过渡动画写法：transition:width 1s linear,color 1s linear;   transtion: all 5s linear; //当前属性下所有属性参与动画效果； </p><p> </p><p>2D动画动画的移动不会造成文档流的脱离；transform:translate(10px,-10px); 代表x、y轴方向移动 :translateX(xxpx); 动画向x轴移动 :translateY(xxpx); 动画向Y轴移动--------------------------------------------动画的缩放和旋转 占位依然存在，不会脱离文档流`transform:scale(1.1,1.2); 向X轴和Y轴同时缩放 :scaleX(1.1); 向X轴进行缩放 :scaleY(1.1);   向y轴进行缩放 :scaleZ(1.1); 向盒子的厚度进行缩放transform:rotate(45deg); 旋转 </p><p>//同时进行缩放和旋转transform:scale(1.1,1.2) rotate(45deg);------------------------------------------tranform:skew(xxdeg,xxdeg); //两个同时进行倾斜，不太常用tranform:skewX(xxdeg); //水平方向进行倾斜，高度不变，横线拉伸tranform:skewY(xxdeg);//竖直方向进行倾斜，宽度不变，竖直拉伸动画的中心点transform-origin:center top; 中心为动画的顶部中间 ：xxpx xxpx； 中心点为指定的位置像素点 ：xx% xx%;   初始的中心点在左上角3D动画 z轴可以想象成正对着自己，；tranform:translateZ(); //沿着Z轴进行移动；tranform:translate3D(x,y,z); 水平、竖直、Z轴； </p><p>perspective:600px-2000px; //视距：让3d变形呈现立体效果，默认的视距为0px；transform:rotateX(xxdeg); //朝正反面进行3D翻转；transform:rotateY(xxdeg); //朝左右面进行3D翻转；transform:rotateZ(xxdeg)； //朝Z轴进行选择transform:rotate3d(x-d,y-d,z-d) //进行旋转 </p><p> d可以值可以有3个 1 表示顺时针 -1表示逆时针， 0表示不参与旋转；如果父盒子和子盒子都要使用3D动画效果，则需要在父盒子上添加transform-style:preserve-3d; 父元素会保留3D效果；动画格式：@keyframes name{    from{} //开始    to{} //结束}或是：@keyframes name{    10%{}    50%{}    100%{}}animation:none; //取消动画；然后再div{xxx;xxx;xx; animation:name} //在属性中插入动画的名称；状态写法1：from ，to； 代表初始值和终点值  2： 百分比写法，  0%~100% 中间可以多个状态  播放动画： animation-name:name; 指定播放动画片段的名称 animation-duration:1s; 指定一次播放动画的时间； animation-delay: 2s; 延迟多久开始播放动画 animation-iteration-count: infinite;(循环播放) 指定动画播放的次数 animation-timing-function:     指定动画播放的模式 linear;匀速 ease 慢 快 慢 结束 ease-in animation-direction:normal;指定动画播放的方向 reverse;反向播放动画 alternate; 正向和反向的循环播放 alternate-reverse; 反向和正向的循环播放； animation-play-state:running; 默认的播放状态 :paused; 暂停播放动画animation: name duration delay iteration-cout;等等可以直接简写animation: 名字 播放时间 延迟时间 播放的模式;持续时间必须要在延迟时间之前 </p><p>HTML5新增的标签布局标签 </p><p> nav标签； //多用于网页最顶部的导航链接，和侧边导航，翻页导航等header标签 //用于定义网页头部信息，如标题、相关的logo图片等等footer标签 //用户定义网页尾部信息，如版本信息，相关的阅读链接；<article>标签 //定义页面中语义相对独立的区域。如评论区，商品分类等等； <section> //表示一个页面中内容的分区，一般是和article配套使用； <h1> //一般于他两进行配套使用； <p>       figure标签 //安插图片、表格等； </section></article>aside标签 //用于定义网页中的附属信息部分，例如侧边导航、引用，广告区域；不要使用div盒子包裹住，不然没有使用意义其他标签mark标签； //带有标记的文本标签； 当初拿来标记，没有语义化；time标签； //定义日期和时间； 没有具体效果，就语义化效果；！！！<time datetime="2021-04-04">清明节</time> 定义日期时需要添加上该属性，不然没有任何语义作用；figure标签； //定义网页中的流内容(图片、表格、代码片段) 这个也是没有语义<figure> <figcaption><figcaption> //图片的标题</figuer> </p><p>html5的兼容问题1、使用js代码来创建元素来在页面上插入标签【注意】使用在IE9--以下版本的浏览器，创建出来的标签都是行内元素；Element("header");2、使用html5 shiv插件js插件插入移除的标签 //建议不要使用；font标签； //设置字体的样式；big //放大字体center </p><p>framedirbasefont 定义body默认字体颜色或是字号appleft </p><p>acronym </p><p>framesetstrikeus </p><p>多媒体标签<audio src="" controls loop autoplay muted> //音频标签 <source src="mp3格式"><source>    <source src="ogg格式"><source>    <source src="wav格式"><source>   你的浏览器暂不支持此控件；</audio> </p><p><video src="" controls loop autoplay muted> //视频标签； <source src="mp4格式"><source>    <source src="ogg格式"><source>    <source src="wav格式"><source></video> </p><p>src为音频资源的路径controls调出音频的控制器；loop 循环播放autopaly 自动播放；是和网站的设置有关系的；muted 是否静音-----------------------------视频的标签能设置宽高和大小poster=""; 可以设置视频的封面图片； </p><p>CSS的新增属性；CSS2的属性选择器；[type="text"]{}[type~="text"]{} //~= 选择带有text类名的标签；CSS3的属性选择器[href^="xx" $= *=]; //^首位等于 $尾部等于 *全部等于p:first-child{} //选择同级中的第一个p标签元素；p:last-child{} //选择同级中的最后一个p标签元素；p:nth-child(n){} //选择同级中的第n个p标签元素；可以2n 2n-1等数学算法；even可以为偶数 odd 为奇数 与2n 2n-1等价；p:only-child{} //匹配没有任何兄弟元素的p标签；----------------------------------------------------p:first-of-type{}; 选择同级中同种类型的第一个元素p:last-of-type{}; 选择同级中同种类型的最后一个元素p:nth-of-type(n){};选择同级中同种类型的第n个元素标签；p:only-of-type{}; 匹配到没有任何兄弟类型的p标签； </p><p>盒子阴影box-shadow: x1px x2px x3px x4px red inset; </p><p> :h-shadow  x1//水平方向阴影的位置 允许负值； :v-shadow  x2// 垂直方向的阴影位置，允许负值； :blur x3//可选的值，模糊的距离 :spread x4//可选的值，阴影的尺寸； :color //默认为黑色 :inset(内侧) //盒子的内侧阴影；text-shadow:x1px x2px x3px red; //属性同上； </p><p>多列布局对文本进行布局column-count: 3; //将父盒子内的所有内容进行自动分割3列数；column-width: 300px; //指定每列的宽度；column-gap: 100px; //指定每列的宽度的间隔；column-rule: 1px solid red; //指定每列中间分割线的样式； </p><p>盒子的模式 box-sizing     //改变盒子的模式 :border-box; //设置为怪异盒子，元素的尺寸为盒子的宽高所决定； :content-box; //标准盒模型；----------------------------------------------------resize:both;//可以在页面上让用户决定盒子的尺寸resize:vertical; //允许用户调整盒子的高度resize:horizontal; //允许用户调整盒子的宽度overflow:auto; //需要在盒子上加入该属性才能使用；弹性盒子【注意】弹性盒子的排序只会作用于直接的子代元素，孙代元素则不影响设置成弹性盒子的元素叫做容器，弹性盒子中的子元素叫做项目；容器默认有两根轴，水平的默认为主轴，竖直的为交叉轴，项目默认在主轴进行排序；display:flex; //设置盒子为弹性盒子 该元素里面的子代元素会应用弹性盒子的排序规则display:inline-flex; //在页面上不会独占一行-----------------------------------------------------------------white-space: nowrap; 盒子内元素不换行1、flex-direction: //主轴的方向 row; //默认主轴为水平方向 row-reverse; //主轴的起点位置在右端； column; //主轴方向为竖直方向 column-reverse; //主轴为垂直且起点在下方；2、justify-content: //决定项目在主轴上的排序方式； :flex-start; //默认方向； :flex-end; //沿着主轴的结尾进行排序； :center; //居中对齐； :space-around; 每个项目的两侧边距相同； </p><p> :space-evenly;项目和项目之间，以及项目于边框之间的间隔一样的 :space-between;两端对齐，项目之间的间隔相同3、aling-items: //适用于不换行的项目 flex-start; //以交叉轴的起点为对齐 flex-end; //以交叉轴的结束点为对齐； center； //以交叉轴的中间为对齐； baseline； //以项目中的第一行文字的基线对齐 aling-content: //【注意这里适用于有换行的子项】 flex-start 默认值 flex-end 在交叉轴的的尾部开始排序 center 在交叉轴中间显示 space-around 子项在交叉轴中平分剩余空间 space-between 子项在交叉轴分布在两头 stretch 设置子项元素高度平分父元素高度； aling-self:center; //可以单独给某个盒子设置排序方式；4、flex-wrap: nowrap; //默认值不换行； wrap; //盒子会自动进行换行； wrap-reverse; //盒子自动从下开始往上排序；5、order:2; //给单独的盒子定义的排序等级，等级越高，排序越前；6、flex-grow: xx; //会将父容器的定义项目的放大比例，默认为0；7、filex-shrink: xx; //定义项目的缩放比例，默认值为1；如果空间不足，则等比例缩放；如果设置为0，则不参与等比例的缩放；flex: xx; //平均来进行等分；<div>p*3 </div>flex: 1; //3个p标签平均将div的宽度进行1:1:1的等分；p:nth-child(2){flex:2} //第二个p标签的宽度为2分 按1:2:1 来分配；简写： flex-flow: colum wrap; //设置主轴的方向和换不换行媒体查询根据我们的设备来设置特定的CSS样式；@media scree and (max-width:800px) and (xx) {}; width height min-width:    all //适用于所有设备 and //可以将多个媒体设备连接到一起    print //用于打印机和打印预览  not //排除某个指定的媒体类型，    scree //用于电脑屏幕、数码设备  only //指定摸个特定的媒体设备 </p><p>网格布局display:grid; 设置为网格布局disaplay:inline-grid; //不会让设置网格布局的父容器独占一行grid-template-columns: xxpx xxpx xxpx; //将盒子分成三列； :repeat(x,xxpx); //将盒子分成x列 :1fr 2fr 3fr; //将盒子分成6列 :auto; //浏览器自动填充宽高； :repeat(auto-fill,100px);//容器不确定，盒子会自动进行填充和换行grid-template-row:xxpx xxpx xxpx; //将盒子分成三行；--------------------------------------------grid-row-gap:xxpx; //给项目添加间距grid-colums-gap:xxpx; //给项目添加间距；grid-gap:xxpx xxpx;  gap:xxpx xxpx;//简写；----------------------------------------------------//盒子的排序方式：指定盒子的排序是行还是列排序；grid-auto-flow:row/column/   :row dense column dense;//排序时不留空格；--------------------------------------------------grid-template-areas:"a a a""b b c""c c c";//项目的对齐方式；justify-items:     //项目的排序方式；align-items:   //垂直排列place-items:xx xx; 简写//容器的对齐方式；justify-content:     //项目的排序方式；align-content:   //垂直排列place-content:xx xx; 简写 </p><p> </p><p><p></p></img></p></div></article></div><div class="torson info"><div><span>本文发布于:2023-06-20，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="http://torson.com.cn/news/1687262564a453.html" title="html+css笔记">http://torson.com.cn/news/1687262564a453.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/3.html" target="_blank">html滚动条样式</a></span></div><div class="torson post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论 <span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/453.html?safe_token=rCRyb1klWuyzdymHKjK_2Fp9SFwazzd4uudRqvLni_2B1PA9d2aDmAvE1qsBLmbw7hO4rTItvYq_2FbNKimnzetilpSw_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="torson tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5">

     评论列表（有0条评论）

     最近发表

     • 修改bootstraptable源码实现固定高时自定义滚动条的样式
     • html网页的代码大全
     • HTML选择题练习
     • 网易云音乐虚化图片html,CSS之高斯模糊—(网易云歌单)
     • java 简历解析
     • 黑马程序员全套Java教程_Java基础教程_概述(一)
     • 移动公司java面试,程序员都在收藏的移动开发java面试题
     • css设置表单提交
     • 前端可能问到的面试题(ts,js,css,es6)
     • 安卓手机无法开机解决方案四种
     • 权重-评价方法
     • AI常见面试35题
     • jQuery练习题及答案
     • mysql安装使用及.net连接mysql
     • SQL_2008安装教程(完整版)
     • xp垃圾清理bat
     • @Select注解动态sql语句
     • 接口与类继承
     • 位图BITMAP结构
     • 串的匹配 (KPM算法由来引导)

     

     拓祥电子编程网

     拓祥电子编程提供编程程序员技术分享技术，经验代码。

     相关推荐

     • 网页设计_HTML标签
     • Dreamweaver中部分bHTMLb标签及其属性
     • 网易云音乐虚化图片html,CSS之高斯模糊—(网易云歌单)
     • 如何为文本添加滚动条
     • bootstraptable表头固定、冻结列、横向纵向滚动条
     • WEB_HTML网页基本语法
     • HTML指令大全
     • jquery设置css样式、style属性
     • 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
     • scroll系列相关属性
     • HTML5 标签 和属性 列表
     • CSS文字样式
     • htmlcss表头,css固定表格表头(各浏览器通用)
     • HTML页面中解决内容元素随窗口变化布局变乱问题
     • html题目
     • html中select的属性
     • html文本内容自动滚动,html文本滚动滚动文字的HTML代码是什么_ ...
     • HTML、JS、CSS实现Matrixrain效果代码解读
     • Tkintercanvas的画布参数,删除组件,添加垂直滚动条详解
     • QTQTextEdit滚动条自动(往下、往上)滚动

     标签列表

     • 轻量云服务器可以干什么呢视频
     • 为什么一用微信就无服务器
     • 4核4g服务器能干什么
     • 为什么网吧的gta5总是连不上服务器
     • 天龙八部服务器叫什么原因
     • 阿里云服务器端口不通是什么情况
     • 什么情况下需要手动设置DNS服务器
     • steam泰拉瑞亚为什么服务器被封禁
     • ff14服务器不同有什么区别吗
     • ps4为什么连不上2k服务器
     • 端游吃鸡不同服务器有什么区别
     • nba2k20为什么无法连接服务器
     • 腾讯云ftp服务器原始密码是什么意思
     • 艾尔登法环服务器有什么用
     • 台湾同胞玩ps5上什么服务器
     • 2c4g服务器能干什么
     • cf频值和服务器有什么关系
     • 6s为什么地图无法定位服务器
     • cf维护完为什么一直服务器满
     • 光遇登录服务器失败的原因是什么