首页 > Web开发 > 详细

HTML5+CSS3笔记

时间：2020-05-04 11:08:06      阅读：36      评论：0      收藏：0      [点我收藏+]

html5+css3

html

html基础

HTML列表

    • 无序列表
      • li定义列表项
      • 有序列表

    编辑器

    • hbulider
    • hbuliderx
    • vscode
    • 记事本等等……

    html表格标签

    • table

      • 定义表格

    • th

      • 定义表头

    • tr

      • 定义表格行

    • td

      • 定义表格单元

    html图像

    • img标签

      • src

        • 图像的链接位置

      • alt

        • 如果图像加载失败提示文本

      • width

        • 宽

      • height

        • 高

    • map图像地图

    • area图像地图可点击区域

    html样式

    • 内联样式

      • 利用style写在标签定义部分的样式

    • 外部样式

      • 利用link导入的css文件

    HTML头部标签

    • <ul> <li>定义在浏览器工具栏的标题</li> <li>在搜索引擎的标题</li> <li>在收藏网页时的默认标题</li> </ul> </li> <li> <base> <ul> <li>HTML文件内所有未定义链接标签设置默认链接</li> </ul> </li> <li> <link> <ul> <li>用于链接外部文件常常用于链接样式表</li> </ul> </li> <li> <style> <ul> <li>用于写css样式表渲染HTML页面样式</li> </ul> </li> <li> <meta>name元素 <ul> <li> <p>keywords</p> <ul> <li>定义搜索引擎关键字</li> </ul> </li> <li> <p>description</p> <ul> <li>定义网页描述</li> </ul> </li> <li> <p>author</p> <ul> <li>定义网页作者</li> </ul> </li> <li> <p>refresh</p> <ul> <li>刷新页面（秒）</li> </ul> </li> <li> <p>content</p> <ul> <li>不会显示网页上</li> </ul> </li> </ul> </li> <li> <script> <ul> <li>加载脚本文件，例如：JavaScript</li> </ul> </li> </ul> <h3 id="html链接标签">HTML链接<a>标签</h3> <ul> <li> <p><a href="url">链接文本</a></p> </li> <li> <p>例如：<a href="www.baidu.com">百度</a></p> </li> <li> <p>target</p> <ul> <li> <p>_blank</p> <ul> <li>新窗口打开</li> </ul> </li> <li> <p>framename</p> <ul> <li>指定框架打开文档</li> </ul> </li> </ul> </li> </ul> <h3 id="html属性">html属性</h3> <ul> <li> <p>class</p> <ul> <li>一个html元素可以有多个类</li> </ul> </li> <li> <p>id</p> <ul> <li>id是惟一的</li> </ul> </li> <li> <p>style</p> <ul> <li>定义一个元素的行内样式</li> </ul> </li> <li> <p>title</p> <ul> <li>描述HTML元素的额外信息</li> </ul> </li> </ul> <h3 id="html区块元素">HTML区块元素</h3> <ul> <li> <p>浏览器显示的时候通常新开一行</p> <ul> <li>h1</li> <li>p</li> <li>ul</li> <li>table</li> </ul> </li> <li> <p>内联元素</p> <ul> <li>b</li> <li>td</li> <li>a</li> <li>img</li> </ul> </li> <li> <p>div</p> <ul> <li>常常用于文档布局</li> </ul> </li> <li> <p>span</p> <ul> <li>内联元素</li> </ul> </li> </ul> <h3 id="html表单">HTML表单</h3> <ul> <li> <p>用于收集不同类型的用户输入</p> </li> <li> <p>input标签（type属性）</p> <ul> <li> <p>text文本域，用于输入文本</p> </li> <li> <p>password，用于输入密码</p> </li> <li> <p>CheckBoxes，复选框</p> </li> <li> <p>submit</p> <ul> <li>提交按钮</li> </ul> </li> </ul> </li> <li> <p>select（下拉菜单）</p> <ul> <li> <p>selected</p> <ul> <li>预选定</li> </ul> </li> </ul> </li> </ul> <h3 id="html框架">html框架</h3> <ul> <li> <p>iframe</p> <ul> <li> <p>src</p> <ul> <li>设置网页链接</li> </ul> </li> <li> <p>height</p> <ul> <li>设置内嵌网页高度</li> </ul> </li> <li> <p>width</p> <ul> <li>设置内嵌网页宽度</li> </ul> </li> <li> <p>frameborder</p> <ul> <li>如果等于0就是移除边框</li> </ul> </li> <li> <p>a标签接入iframe的name就可以切换iframe内容</p> </li> </ul> </li> </ul> <h2 id="html5">html5</h2> <h3 id="新元素">新元素</h3> <ul> <li> <p>canvas</p> <ul> <li>绘图标签</li> </ul> </li> </ul> <h3 id="geolocation">Geolocation</h3> <ul> <li>地理定位</li> </ul> <h3 id="多媒体元素">多媒体元素</h3> <ul> <li> <p>audio</p> <ul> <li> <p>音频内容</p> </li> <li> <p>格式</p> <ul> <li>mp3</li> <li>ogg</li> <li>wav</li> </ul> </li> </ul> </li> <li> <p>video</p> <ul> <li> <p>视频内容</p> </li> <li> <p>autoplay</p> <ul> <li>加载完成自动播放</li> </ul> </li> <li> <p>controls</p> <ul> <li>显示一系列控件</li> </ul> </li> <li> <p>height</p> <ul> <li>设置播放器高度</li> </ul> </li> <li> <p>width</p> <ul> <li>宽度</li> </ul> </li> <li> <p>loop</p> <ul> <li>循环播放</li> </ul> </li> <li> <p>muted</p> <ul> <li>默认静音</li> </ul> </li> <li> <p>poster</p> <ul> <li>设置视频没有播放前显示的图片</li> </ul> </li> <li> <p>preload</p> <ul> <li>类似autoplay</li> </ul> </li> <li> <p>src</p> <ul> <li>视频的位置</li> </ul> </li> </ul> </li> <li> <p>source</p> <ul> <li>定义多媒体资源，多用于audio和video</li> </ul> </li> <li> <p>embed</p> <ul> <li>定义嵌入内容，比如插件</li> </ul> </li> <li> <p>track</p> <ul> <li> <p>子主题 1</p> <ul> <li>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。</li> </ul> </li> </ul> </li> </ul> <h3 id="表单">表单</h3> <ul> <li> <p>datalist</p> <ul> <li>定义选项列表</li> </ul> </li> <li> <p>keygen</p> <ul> <li>规定表单密钥生成器字段</li> </ul> </li> <li> <p>input</p> <ul> <li> <p>color</p> <ul> <li>颜色</li> </ul> </li> <li> <p>date</p> <ul> <li>日期</li> </ul> </li> <li> <p>datetime</p> <ul> <li>时间</li> </ul> </li> <li> <p>datetime-local</p> <ul> <li>日期加时间</li> </ul> </li> <li> <p>email</p> <ul> <li>邮件：自动判断格式</li> </ul> </li> <li> <p>month</p> <ul> <li>年月，相对于日期少了一个日</li> </ul> </li> <li> <p>number</p> <ul> <li> <p>数字</p> <ul> <li>可以设置最大最小值</li> </ul> </li> </ul> </li> <li> <p>range</p> <ul> <li>滑动条</li> </ul> </li> <li> <p>search</p> <ul> <li>子主题 1</li> </ul> </li> <li> <p>tel</p> <ul> <li>电话</li> </ul> </li> <li> <p>time</p> <ul> <li>时间</li> </ul> </li> <li> <p>url</p> <ul> <li>链接</li> </ul> </li> <li> <p>week</p> <ul> <li>年加周</li> </ul> </li> </ul> </li> <li> <p>output</p> <ul> <li>定义不同的输出，例如脚本</li> </ul> </li> <li> <p>属性</p> <ul> <li> <p>form</p> <ul> <li>autocomplete</li> <li>novalidate</li> </ul> </li> <li> <p>input</p> <ul> <li>autocomplete</li> <li>autofocus</li> <li>form</li> <li>formaction</li> <li>formenctype</li> <li>formmethod</li> <li>formonvalidate</li> <li>formtarget</li> <li>height&width</li> <li>list</li> <li>min&max</li> <li>multiple</li> <li>pattern（regexp</li> <li>placholder</li> <li>required</li> <li>step</li> </ul> </li> </ul> </li> </ul> <h3 id="新语义的结构元素">新语义的结构元素</h3> <ul> <li> <p>article</p> <ul> <li>定义页面独立的内容区域</li> </ul> </li> <li> <p>aside</p> <ul> <li>定义页面侧边栏内容</li> </ul> </li> <li> <p>bdi</p> <ul> <li>定义一段文本脱离父元素的文本方向</li> </ul> </li> <li> <p>command</p> <ul> <li>命令按钮例如：单选，复选框，按钮</li> </ul> </li> <li> <p>details</p> <ul> <li>用于描述文档某个部分的细节</li> </ul> </li> <li> <p>dialog</p> <ul> <li>定义对话框比如提示框</li> </ul> </li> <li> <p>summary</p> <ul> <li>标签包含 details 元素的标题</li> </ul> </li> <li> <p>figure</p> <ul> <li>规定独立的流内容</li> </ul> </li> <li> <p>figcaption</p> <ul> <li>定义figure的标题</li> </ul> </li> <li> <p>footer</p> <ul> <li>定义section或document页脚</li> </ul> </li> <li> <p>header</p> <ul> <li>定义文档头部区域</li> </ul> </li> <li> <p>mark</p> <ul> <li>定义带有记号的文本</li> </ul> </li> <li> <p>meter</p> <ul> <li>定义度量衡</li> </ul> </li> <li> <p>nav</p> <ul> <li>定义导航链接的部分</li> </ul> </li> <li> <p>progress</p> <ul> <li>定义任何类型的任务进度</li> </ul> </li> <li> <p>ruby</p> <ul> <li>定义ruby注释（中文注音或者字符）</li> </ul> </li> <li> <p>rt</p> <ul> <li>定义字符的解释或发音</li> </ul> </li> <li> <p>rp</p> <ul> <li>不支持ruby就显示</li> </ul> </li> <li> <p>section</p> <ul> <li>定义文档中的节</li> </ul> </li> <li> <p>time</p> <ul> <li>定义日期或时间</li> </ul> </li> <li> <p>wbr</p> <ul> <li>合适的地方添加换行</li> </ul> </li> </ul> <h2 id="csscss3">css&css3</h2> <h3 id="css">css</h3> <ul> <li> <p>语法</p> <ul> <li>选择器{属性:值}</li> <li>h1{color:red;}</li> </ul> </li> <li> <p>选择器</p> <ul> <li> <p>id选择器</p> <ul> <li> <h1 id="id">id</h1> </li> </ul> </li> <li> <p>class选择器</p> <ul> <li>.class</li> </ul> </li> <li> <p>后代选择器</p> <ul> <li>以空格分隔</li> </ul> </li> <li> <p>子元素选择器</p> <ul> <li>以>分隔</li> </ul> </li> <li> <p>相邻兄弟选择器</p> <ul> <li>+分隔</li> </ul> </li> <li> <p>普通兄弟选择器</p> <ul> <li> <ul> <li></li> </ul> </li> </ul> </li> </ul> </li> <li> <p>插入样式表方法</p> <ul> <li> <p>内部样式</p> <ul> <li>网页内</li> </ul> </li> <li> <p>外部样式</p> <ul> <li>用link链接的样式</li> </ul> </li> <li> <p>内联样式</p> <ul> <li>行内</li> </ul> </li> <li> <p>优先级</p> <ul> <li>内联样式>内部样式>外部样式</li> </ul> </li> </ul> </li> <li> <p>css背景</p> <ul> <li> <p>background-color</p> <ul> <li>背景颜色</li> </ul> </li> <li> <p>background-image</p> <ul> <li>背景图片</li> </ul> </li> <li> <p>background-repeat</p> <ul> <li> <p>repeat-x/y</p> <ul> <li>水平垂直平铺</li> </ul> </li> <li> <p>no-repeat</p> <ul> <li>不平铺</li> </ul> </li> </ul> </li> <li> <p>background-position</p> <ul> <li> <p>right top</p> <ul> <li>设置定位</li> </ul> </li> </ul> </li> <li> <p>background-attachment</p> <ul> <li>固定背景图像还是跟随页面滚动</li> </ul> </li> </ul> </li> <li> <p>css文本格式</p> <ul> <li> <p>color</p> <ul> <li>文本颜色</li> </ul> </li> <li> <p>text-align</p> <ul> <li>对齐方式</li> </ul> </li> <li> <p>text-decoration</p> <ul> <li>文本装饰，多用于删除链接下划线</li> </ul> </li> <li> <p>text-transform</p> <ul> <li>大转小，小转大，首字母大写</li> </ul> </li> <li> <p>text-indent</p> <ul> <li>首行缩进</li> </ul> </li> <li> <p>direction</p> <ul> <li>文本方向</li> </ul> </li> <li> <p>letter-spacing</p> <ul> <li>设置字符间距</li> </ul> </li> <li> <p>line-height</p> <ul> <li>行高</li> </ul> </li> <li> <p>text-shadow</p> <ul> <li>设置文本阴影</li> </ul> </li> <li> <p>vertical-align</p> <ul> <li>设置文字垂直对齐</li> </ul> </li> <li> <p>white-space</p> <ul> <li>处理空白的方式</li> </ul> </li> <li> <p>word-spacing</p> <ul> <li>设置字符间距</li> </ul> </li> </ul> </li> <li> <p>css字体</p> <ul> <li> <p>font</p> <ul> <li>声明设置中所有字体属性</li> </ul> </li> <li> <p>font-family</p> <ul> <li>设置字体</li> </ul> </li> <li> <p>font-size</p> <ul> <li>设置字体大小</li> </ul> </li> <li> <p>font-style</p> <ul> <li>设置字体样式</li> </ul> </li> <li> <p>font-variant</p> <ul> <li>以正常字体显示文本</li> </ul> </li> <li> <p>font-weight</p> <ul> <li>指定字体粗细</li> </ul> </li> </ul> </li> <li> <p>css链接</p> <ul> <li> <p>link</p> <ul> <li>正常未访问的链接</li> </ul> </li> <li> <p>visited</p> <ul> <li>已访问过的链接</li> </ul> </li> <li> <p>hover</p> <ul> <li>鼠标悬浮</li> </ul> </li> <li> <p>active</p> <ul> <li>单击时刻</li> </ul> </li> <li> <p>例如：a:link{color : red;}</p> </li> </ul> </li> <li> <p>css列表</p> <ul> <li> <p>list-style</p> <ul> <li> <p>none</p> <ul> <li>取消列表前的东西（常用）</li> </ul> </li> </ul> </li> <li> <p>list-style-image</p> <ul> <li>将图像设为列表项标志</li> </ul> </li> <li> <p>list-style-position</p> <ul> <li>设置列表项标志的位置</li> </ul> </li> <li> <p>list-style-type</p> <ul> <li>设置列表项标志的类型</li> </ul> </li> </ul> </li> <li> <p>css盒子模型</p> <ul> <li> <p>想象一个div就是一个盒子</p> </li> <li> <p>margin</p> <ul> <li>div外面一圈</li> </ul> </li> <li> <p>border</p> <ul> <li>div的边框</li> <li>颜色 像素 线型</li> </ul> </li> <li> <p>padding</p> <ul> <li>div内部和内容之间的距离</li> </ul> </li> <li> <p>content</p> <ul> <li>内容</li> </ul> </li> </ul> </li> <li> <p>css尺寸</p> <ul> <li> <p>height</p> <ul> <li>高度</li> </ul> </li> <li> <p>width</p> <ul> <li>宽度</li> </ul> </li> <li> <p>line-height</p> <ul> <li>行高</li> </ul> </li> <li> <p>max-height</p> <ul> <li>最大高度</li> </ul> </li> <li> <p>max-width</p> <ul> <li>最大宽度</li> </ul> </li> <li> <p>min-height</p> <ul> <li>最小高度</li> </ul> </li> <li> <p>min-width</p> <ul> <li>最小宽度</li> </ul> </li> </ul> </li> <li> <p>css的display与是visivility</p> <ul> <li> <p>display</p> <ul> <li> <p>none</p> <ul> <li>隐藏</li> </ul> </li> <li> <p>inline</p> <ul> <li>可以把块元素设置为内联元素</li> </ul> </li> <li> <p>block</p> <ul> <li>把内联元素设置为块元素</li> </ul> </li> </ul> </li> <li> <p>visibility</p> <ul> <li> <p>hidden</p> <ul> <li>隐藏，影响布局</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>css定位position</p> <ul> <li> <p>static</p> <ul> <li>没有定位，遵循正常文档流对象</li> </ul> </li> <li> <p>fixed</p> <ul> <li>相对与浏览器定位，页面滚动不会影响</li> </ul> </li> <li> <p>relative</p> <ul> <li>相对自己原来位置</li> </ul> </li> <li> <p>absolute</p> <ul> <li>相对于自己的父元素定位</li> </ul> </li> <li> <p>sticky</p> <ul> <li>粘性定位，会出现在浏览器窗口且向下滑动不会消失只会停留在顶部</li> </ul> </li> <li> <p>z-index:-1</p> <ul> <li>与文档流无关，与其它元素重叠</li> </ul> </li> </ul> </li> <li> <p>css布局-Overflow</p> <ul> <li> <p>防止内容溢出元素框</p> </li> <li> <p>visible</p> <ul> <li>默认值，不会修剪</li> </ul> </li> <li> <p>hidden</p> <ul> <li>内容会被隐藏</li> </ul> </li> <li> <p>scroll</p> <ul> <li>显示滚动条以便查看剩下内容</li> </ul> </li> <li> <p>auto</p> <ul> <li>如果内容被修剪浏览器显示滚动条</li> </ul> </li> <li> <p>inherit</p> <ul> <li>继承父元素的属性</li> </ul> </li> </ul> </li> <li> <p>css浮动float</p> <ul> <li> <p>left&right</p> </li> <li> <p>清除浮动</p> <ul> <li>clear:both</li> </ul> </li> </ul> </li> <li> <p>css布局水平垂直居中</p> <ul> <li> <p>margin:auto</p> <ul> <li>元素居中</li> <li>图片居中</li> </ul> </li> <li> <p>text-align：center</p> <ul> <li>文本居中</li> </ul> </li> </ul> </li> <li> <p>css透明</p> <ul> <li> <p>opacity</p> <ul> <li> <p>0.0-1.0</p> <ul> <li>值越小越模糊</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>css计数器</p> <ul> <li> <p>counter-reset</p> <ul> <li>创建或者重置计数器</li> </ul> </li> <li> <p>counter-increment</p> <ul> <li>递增变量</li> </ul> </li> <li> <p>content</p> <ul> <li>插入生成内容</li> </ul> </li> <li> <p>counter或者counters（）</p> <ul> <li>把计数器值添加到元素</li> </ul> </li> </ul> </li> </ul> <h3 id="css3">css3</h3> <ul> <li> <p>选择器</p> </li> <li> <p>盒子模型</p> </li> <li> <p>背景和边框</p> <ul> <li> <p>border-radius</p> <ul> <li>圆角</li> <li>top,left,right,bottom</li> </ul> </li> <li> <p>box-shadow</p> <ul> <li>阴影</li> </ul> </li> <li> <p>border-image</p> <ul> <li>图片边框</li> </ul> </li> <li> <p>背景</p> <ul> <li> <p>background-image</p> <ul> <li>添加背景图片</li> </ul> </li> <li> <p>background-size</p> <ul> <li>背景图片大小</li> </ul> </li> <li> <p>background-origin</p> <ul> <li> <p>背景图片区域位置</p> </li> <li> <p>border-box</p> <ul> <li>覆盖边框</li> </ul> </li> <li> <p>padding-box</p> <ul> <li>覆盖边框以内</li> </ul> </li> <li> <p>content-box</p> <ul> <li>覆盖内容</li> </ul> </li> </ul> </li> <li> <p>background-clip</p> <ul> <li>背景剪裁属性是从指定位置开始绘制</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>渐变（gradients）</p> <ul> <li> <p>线性渐变</p> <ul> <li> <p>linear-gradient(颜色1,颜色2……）</p> </li> <li> <p>linear-gradient（方向，颜色1，颜色2……）</p> <ul> <li>向哪个方向</li> </ul> </li> <li> <p>linear-gradient（角度deg，颜色1，颜色2……）</p> <ul> <li>顺时针计算</li> </ul> </li> <li> <p>repeating-linear-gradient(red, yellow 10%, green 20%)</p> <ul> <li>重复渐变</li> </ul> </li> </ul> </li> <li> <p>径向渐变</p> <ul> <li> <p>radial-gradient</p> <ul> <li>径向渐变</li> <li>可以重复</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>文字特效</p> <ul> <li> <p>text-shadow</p> <ul> <li> <p>文本阴影</p> <ul> <li>可以设置大小和阴影</li> </ul> </li> </ul> </li> <li> <p>box-shadow</p> <ul> <li>盒子阴影</li> </ul> </li> <li> <p>text-overflow</p> <ul> <li>文本溢出如何显示</li> </ul> </li> <li> <p>word-wrap</p> <ul> <li>按照单词拆分换行</li> </ul> </li> <li> <p>word-break</p> <ul> <li>强制换行文本</li> </ul> </li> </ul> </li> <li> <p>2d/3d转换</p> <ul> <li> <p>2D转换transform</p> <ul> <li> <p>translate()</p> <ul> <li>根据左上角定点参数移动元素位置</li> </ul> </li> <li> <p>rotate()</p> <ul> <li>顺时针旋转</li> </ul> </li> <li> <p>scale（）</p> <ul> <li>放大或者减小</li> </ul> </li> <li> <p>skew（）</p> <ul> <li>x和y轴的倾斜角度</li> </ul> </li> <li> <p>matrix（）</p> <ul> <li> <p>六合一</p> <ul> <li>旋转，缩放，移动，倾斜</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>3D转换</p> <ul> <li> <p>rotateX()</p> <ul> <li>围绕给定的x轴旋转</li> </ul> </li> <li> <p>rotatey()</p> <ul> <li>围绕给定的y轴旋转</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>过渡</p> <ul> <li> <p>transition</p> <ul> <li> <p>加上元素加上时间</p> <ul> <li>例如：transition: width 2s;</li> </ul> </li> </ul> </li> </ul> </li> <li> <p>动画</p> <ul> <li> <p>@keyframes</p> <ul> <li>规定动画</li> </ul> </li> <li> <p>anmiation</p> <ul> <li>所有动画属性的简写属性</li> </ul> </li> <li> <p>animation-name</p> <ul> <li>规定动画名称</li> </ul> </li> <li> <p>animation-duration</p> <ul> <li>规定动画完成一个周期所花费的秒或毫秒默认0</li> </ul> </li> <li> <p>animation-timing-function</p> <ul> <li>规定动画速度曲线默认ease</li> </ul> </li> <li> <p>animation-fill-mode</p> <ul> <li>动画播放完成或者还没播放时应用元素的样式</li> </ul> </li> <li> <p>animation-delay</p> <ul> <li>规定动画开始时间</li> </ul> </li> <li> <p>animation-iteration-count</p> <ul> <li>规定动画播放次数默认是1</li> </ul> </li> <li> <p>animation-direction</p> <ul> <li>规定动画是否在下个周期逆向播放，默认normal</li> </ul> </li> <li> <p>animation-play-state</p> <ul> <li>规定动画是否正在运行或暂停，默认running</li> </ul> </li> </ul> </li> <li> <p>多列布局（分栏）</p> <ul> <li> <p>column-count</p> <ul> <li>列数</li> </ul> </li> <li> <p>column-gap</p> <ul> <li>列之间的间隔</li> </ul> </li> <li> <p>column-rule-style</p> <ul> <li>列边框</li> </ul> </li> <li> <p>column-rule-width</p> <ul> <li>边框厚度</li> </ul> </li> <li> <p>column-rule-color</p> <ul> <li>边框颜色</li> </ul> </li> <li> <p>column-rule</p> <ul> <li>类似border，就是rule简写</li> </ul> </li> <li> <p>column-span</p> <ul> <li>指定元素跨多少列</li> </ul> </li> <li> <p>column-width</p> <ul> <li>指定列的宽度</li> </ul> </li> </ul> </li> <li> <p>用户界面</p> <ul> <li> <p>resize</p> <ul> <li> <p>由用户定义div大小</p> <ul> <li>overflow</li> </ul> </li> </ul> </li> <li> <p>box-sizing</p> </li> <li> <p>outline-offset</p> </li> <li> <p>icon</p> <ul> <li>图标</li> </ul> </li> <li> <p>nav-index</p> <ul> <li>指定tab顺序</li> </ul> </li> <li> <p>子主题 6</p> </li> </ul> </li> <li> <p>css图片</p> <ul> <li> <p>border-radius</p> <ul> <li>圆角</li> </ul> </li> </ul> </li> </ul><p><a href="http://www.bubuko.com/infodetail-3533903.html" title="HTML5+CSS3笔记,bubuko.com" style="color:#ffffff">HTML5+CSS3笔记</a></p><p>原文：https://www.cnblogs.com/hwx1999/p/12825194.html</p></span> </div> <script type="text/javascript"> bubuko_load('content_after');</script> <div id="divcomment"> <div> <div class=" divtextaligncenter"> <div class="detailcai" id="infono"> <div class="detailcai1 colorboldlv"> 踩</div> <div class="detailcai2 colorboldlv"> (<span id="spanNo">0</span>)</div> </div> <div class="detailzan" id="infoyes"> <div class="detailzan1 colorboldCheng"> 赞</div> <div class="detailzan2 colorboldCheng"> (<span id="spanYes">0</span>)</div> </div> <div class="divfloatclear"> </div> </div> <div class="divtextalignright margintop10"> <div class="width100bi paddingleft10right10"> <span id="spanYesContent" class="colorboldCheng"></span>  <span id="spanNoContent" class="colorboldlv"></span>  <span id="spanBadContent" class="colorboldCheng"> </span> </div> </div> </div> <div class="divtextalignright margintop10"> <span class="detailjubao" id="infobad">举报</span> </div> <script type="text/javascript"> bubuko_load('comment_before');</script> <div id="comment" class="divtextalignleft margintop20"> <div class="detailpinglun1"> <span class="detailpinglun2 title6">评论</span> <span class="detailpinglun3">一句话评论（<span id="commentCount" class="colorboldCheng">0</span>）</span> </div> <div class="paddingtop20"> <div id="commentlistend" name="commentlistend" class="divtextaligncenter margintop20"> <span id="lblpage"></span> </div> </div> <div class="margintop20"> <form method="post" action="/ajaxjs/info_detail_commentadd.aspx"> <div class="divtextalignleft paddingtop20"> <div id="commenthf" class="divbackgroundcolor1"> </div> <div> <textarea name="tbcommentcontent" id="tbcommentcontent" disabled="disabled" class="tb" style="width: 680px; height: 120px;" ></textarea> </div> </div> <div class="divtextalignright paddingtop10 " style="display:none;"> <span id="addCommentTishi" class="colorboldCheng">登录后才能评论！</span> <span id="loginno"><input type="button" class="mbtn1" value="登录" onclick="location.href='login.aspx?returnUrl='+document.URL.replace(new RegExp('&', 'g'), '(_)')" /></span> </div> </form> </div> </div> </div> <script type="text/javascript"> bubuko_load('comment_after');</script> </div> </div> <div class="width30bi divfloatright"> <div class="paddingbottom20"> <!-- <script type="text/javascript"> document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E%3Cscript charset="utf-8" src="http://znsv.baidu.com/customer_search/api/js?sid=10743263978424259100') + '&plate_url=' + (encodeURIComponent(window.location.href)) + '&t=' + (Math.ceil(new Date() / 3600000)) + unescape('"%3E%3C/script%3E'));</script> --> </div> <script type="text/javascript"> bubuko_load('right_top');</script> <div class="width100bi divborder"> <div class="divtitle"> <div id="infofile1_div1" class="divfloatleft divtitlefont"> 分享档案</div> <div class="divfloatright"> <a href="/infotimemore.html" title="分享档案更多" class="colorCheng">更多></a> </div> <div class="divfloatclear"> </div> </div> <div class="divtextalignleft paddingleft10right10 margintop10bottom10 heightline30px"> <a class="taga" href="/infotime-20210923-1.html" title="2021年09月23日技术分享文章"> 2021年09月23日 (328)</a><br /> <a class="taga" href="/infotime-20210924-1.html" title="2021年09月24日技术分享文章"> 2021年09月24日 (313)</a><br /> <a class="taga" href="/infotime-20210917-1.html" title="2021年09月17日技术分享文章"> 2021年09月17日 (191)</a><br /> <a class="taga" href="/infotime-20210915-1.html" title="2021年09月15日技术分享文章"> 2021年09月15日 (369)</a><br /> <a class="taga" href="/infotime-20210916-1.html" title="2021年09月16日技术分享文章"> 2021年09月16日 (411)</a><br /> <a class="taga" href="/infotime-20210913-1.html" title="2021年09月13日技术分享文章"> 2021年09月13日 (439)</a><br /> <a class="taga" href="/infotime-20210911-1.html" title="2021年09月11日技术分享文章"> 2021年09月11日 (398)</a><br /> <a class="taga" href="/infotime-20210912-1.html" title="2021年09月12日技术分享文章"> 2021年09月12日 (393)</a><br /> <a class="taga" href="/infotime-20210910-1.html" title="2021年09月10日技术分享文章"> 2021年09月10日 (160)</a><br /> <a class="taga" href="/infotime-20210908-1.html" title="2021年09月08日技术分享文章"> 2021年09月08日 (222)</a><br /> </div> </div> <div class="width100bi margintop20 divborder"> <div class="divtitle"> <div id="infonew1_divtitle" class="divfloatleft divtitlefont">最新文章</div> <div class="divfloatright"> <a href="/info.html" id="infonew1_amore" class="colorCheng" title="最新文章更多>">更多></a></div> <div class="divfloatclear"> </div> </div> <div> <ul> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830785.html" title=" 6.0 scripts元素 1) 内嵌的 JavaScript 代码 <script type="text/javascript"> document.write("I love FishC.com!") </script> 2) 通过 src 属性引用来自外部代码文件 ..."> 2021/09/28 scripts  <span class="colorlv">2022-05-27</span></a> </li> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830783.html" title=" 问题场景 后台不提供富文本存储，所以emoji表情入库会报错 需求要求前端在输入的时候过滤掉表情符号 全局的input 和富文本textarea输入框都需要过滤emoji表情 问题分析 1.每一个input写事件写正则校验代码量实在太多了还很麻烦；所以想用自定义全局指令，就不需要每个用到的地方都去引 ..."> vue自定义全局指令v-emoji限制input输入表情和特殊字符  <span class="colorlv">2022-05-27</span></a> </li> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830781.html" title=" （1）今日计划 四则运算第二阶段 （2）源代码 package size; import java.util.*; import java.lang.Math; public class size { static int count=0; static int ccount=0; static i ..."> 9.26学习总结  <span class="colorlv">2022-05-27</span></a> </li> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830780.html" title="vim操作 1. 只在指定的特定行中搜索 /pattern\%>27l # 搜索pattern, 搜索范围是27行以后, 其中l表示按行搜索 /pattern\%>27l\%<40l # 搜索pattern, 搜索范围是27行以后40行以前, 其中l表示按行搜索 注意, 不要在%>27l两边随便加空 ..."> vim操作  <span class="colorlv">2022-05-27</span></a> </li> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830779.html" title=" 说明 主要是学习汇编 windows10 + notepad++ + DOSBox0.74 网上也有notepad++配置自动编译运行的教程，感觉不如手敲命令行原始链接来的快 中断和中断调用 就是调用Dos下的系统接口 中断一览表 MOV AH,09H INT 21H ..."> 深入理解计算机基础 第三章  <span class="colorlv">2022-05-27</span></a> </li> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830778.html" title="记录一下自己将string作为参数传递的结果。（自己感觉与int等基本类型无异。） 1. string 以引用形式传递 #include <iostream>#include<string> using namespace std;void change_string(string& s){ cha ..."> C++ string 作为形参与引用传递（转）  <span class="colorlv">2022-05-27</span></a> </li> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830777.html" title=" 常用加解密 1. md5 加密 import hashlib def private_passwd(passwd: str) -> str: return hashlib.md5(passwd.encode(encoding='UTF-8')).hexdigest() 2. base64 加解密 i ..."> python 加解密  <span class="colorlv">2022-05-27</span></a> </li> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830775.html" title=" let array = [ { id: 1, name: "001", children: [ { id: 2, name: "002", }, ], }, { id: 3, name: "003", children: [] }, ]; function getFlatArr(arr) { ret ..."> JavaScript-对象数组里根据id获取name，对象可能有children属性  <span class="colorlv">2022-05-27</span></a> </li> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830773.html" title=" SQL语句，追加内容： update 表名 set 字段=CONCAT(字段,'追加的内容') where 字段=? 参考链接：https://www.jb51.net/article/113454.htm ..."> SQL语句——保持现有内容在后面增加内容  <span class="colorlv">2022-05-27</span></a> </li> <li class="divullititle heightline25px divtextalignleft"><a href="/infodetail-3830769.html" title=" virsh [options]... [<command_string>]virsh [options]... <command> [args...] options: -c | --connect=URI hypervisor connection URI -d | --debug=NUM deb ..."> virsh命令文档  <span class="colorlv">2022-05-27</span></a> </li> </ul> </div> </div> <div class="width100bi margintop20 divborder"> <div class="divtitle"> <div id="jctop1_divtitle" class="divfloatleft divtitlefont">教程昨日排行</div> <div class="divfloatright"> <a href="/jiaocheng/" id="jctop1_amore" class="colorCheng">更多></a></div> <div class="divfloatclear"> </div> </div> <div class="divtextalignleft"> <ul> <li class="divullilist"> 1.<a href="/jiaocheng/detail-3742.html" title="list.reverse()" >list.reverse()</a></li> <li class="divullilist"> 2.<a href="/jiaocheng/detail-898.html" title="Django Admin 管理工具" >Django Admin 管理工具</a></li> <li class="divullilist"> 3.<a href="/jiaocheng/detail-1027.html" title="AppML 案例模型" >AppML 案例模型</a></li> <li class="divullilist"> 4.<a href="/jiaocheng/detail-51.html" title="HTML 标签列表（功能排序）" >HTML 标签列表（功能排序）</a></li> <li class="divullilist"> 5.<a href="/jiaocheng/detail-57.html" title="HTML 颜色名" >HTML 颜色名</a></li> <li class="divullilist"> 6.<a href="/jiaocheng/detail-64.html" title="HTML 语言代码" >HTML 语言代码</a></li> <li class="divullilist"> 7.<a href="/jiaocheng/detail-208.html" title="jQuery 事件" >jQuery 事件</a></li> <li class="divullilist"> 8.<a href="/jiaocheng/detail-303.html" title="jEasyUI 创建分割按钮" >jEasyUI 创建分割按钮</a></li> <li class="divullilist"> 9.<a href="/jiaocheng/detail-305.html" title="jEasyUI 创建复杂布局" >jEasyUI 创建复杂布局</a></li> <li class="divullilist"> 10.<a href="/jiaocheng/detail-336.html" title="jEasyUI 创建简单窗口" >jEasyUI 创建简单窗口</a></li> </ul> </div> </div> <script type="text/javascript"> bubuko_load('right_bottom');</script> </div> <div class="divfloatclear"> </div> </div> <script type="text/javascript"> bubuko_load('bottom');</script> <div class="width1000px divmargin0auto paddingtop20bottom20"> <div class="width1000px divborder margintop20"> <div class="youqingtitle"> <a title="友情链接">友情链接</a> </div> <div class="youqingcontent"> <a href='http://www.hubwiz.com/' title='汇智网在线编程学习' target='_blank'>汇智网</a>   <a href='http://www.5ibc.net' title='专注PHP程序员一站式免费学习站点' target='_blank'>PHP教程</a>   <a href='http://www.cnplugins.com/' title='插件网' target='_blank'>插件网</a>   <!--<a href='http://m.bubuko.com/doc3v35e/2022-03-31.html' title='王者荣耀' target='_blank'>王者荣耀</a> <a href='http://m.bubuko.com/doc0tx77/6.html' title='刺激战场' target='_blank'>刺激战场</a> <a href='http://m.bubuko.com/doc27/60.html' title='金铲铲' target='_blank'>金铲铲</a> <a href='http://m.bubuko.com/doc2022-03-31/rolne.html' title='冰封王座' target='_blank'>冰封王座</a> <a href='http://m.bubuko.com/doc20dq0/2022-03-31.html' title='魔兽世界' target='_blank'>魔兽世界</a> <a href='http://m.bubuko.com/docovgq9/2022-03-31.html' title='哔哩哔哩' target='_blank'>哔哩哔哩</a> <a href='http://m.bubuko.com/docuiwrn/27.html' title='狼人杀' target='_blank'>狼人杀</a> <a href='http://m.bubuko.com/doc91/74.html' title='元神' target='_blank'>元神</a> --> </div> </div> </div> <div class="bottomdiv"> <div class="width1000px divmargin0auto paddingtop20"> <div class="divfloatleft width500px"> <div class="height30px"> <a href="/about.html" title="bubuko.com关于我们">关于我们</a> - <a href="/contactus.html" title="bubuko.com联系我们">联系我们</a> - <a href="/guest.html" title="bubuko.com留言反馈">留言反馈</a> - 联系我们:wmxa8@hotmail.com </div> <div class="height30px"> © 2014 <a href="http://www.bubuko.com" title="bubuko.com技术分享">bubuko.com</a> 版权所有 </div> <div> <span class="colorlv">打开技术之扣，分享程序人生！</span> </div> <div class="paddingtop20 paddingbottom20"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5bb992e19249070395266c385ebea7c6"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>        <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </div> <div class="divfloatright width500px"> </div> <div class="divfloatclear"> </div> </div> </div> <script type="text/javascript"> toptopmenu_i = "3"; infomenu_i = "2"; var mid = ''; var id = '3533903'; var idm = 'fea849'; var commentitemcount = '0'; var memberhost = ''; prettyPrint(); </script> <script src="/js/infodetail.js" type="text/javascript" charset="utf-8"></script> <script src="/js/member.js" type="text/javascript" charset="utf-8"></script> <script src="/js/bubukojs.js" type="text/javascript"></script> </body> </html>