讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

HTML5与CSS3基础教程第八版学习笔记11~15章 - 平凡世界平凡人

php中文网
发布： 2016-05-21 08:42:42
原创
1601人浏览过

第十一章，用CSS进行布局

开始布局注意事项

1、内容与显示分离
2、布局方法：固定宽度和响应式布局
固定宽度，整个页面和每一栏都有基于像素的宽度
响应式布局也称为流式页面，使用百分数定义宽度
3、浏览器问题
注：HTML5 shiv 是少有的必须在head中加载JavaScript的情况之一，否则就不起作用。
关于HTML5 shiv：
与其他主流浏览器不同，IE8及之前版本会忽略它们不原生支持的元素的CSS。HTML5 shiv是专门用于解决这一问题的一段JavaScript。

对默认样式进行重置或标准化

抹平各个浏览器的默认样式差异方法：
1、使用CSS重置（reset）开始主样式表，如Eric Meyer创建的Meyer重置（http://meyerweb.com/eric/tools/css/reset/）。以及其他的重置样式表
2、使用Nicolas Gallagher和Jonathan Neal创建的normalize.css开始主样式表，位于http://necolas.github.com/normalize.css/
CSS重置可以有效地将所有默认样式都设为“零”。

盒模型

CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型。
由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。
浏览器中元素的宽度与其width属性值并不一致（除非没有内边距和边框）。CSS中的宽度指示的是内边距里内容区域的宽度，而在浏览器中显示宽度则是内容宽度、左右内边距和左右边框的总和，显示高度与之类似。
当使用了box-sizing:border-box;则元素的显示宽度就等于width属性的值。内容宽度、内边距和边框都包含在里面。

控制元素的显示类型和可见性

块级元素，行内元素。
本质是display属性的值不同。
块级元素：display:block（li元素为display:list-item），行内元素：display:inline;，混合显示方式：inline-block，让元素与其他内容出现在同一行，同时具有块级元素属性。
注：设置为inline的元素会忽略任何width、height、margin-top、margin-bottom设置，不过，设置为inline-block元素可以使用这些属性
display:none，隐藏元素，并将其从文档流中完全移除，不占用任何视觉空间。
visibility：主要控制元素是否可见，与display不同，使用visibility隐藏元素时，会在视觉上留下一个空白空间。
visibility:hidden，让元素不可见，visibility:visible，让元素显示
提示：设置为display:inline;的元素接受padding的设置，但padding-top和padding-bottom会越界进入相邻元素的区域，而不是局限于该元素空间。可以设置背景色进行测试。
注：设置为display:none;或visibility:hidden;的元素里的所有内容（包括所有后代）都会受到影响，消失或隐藏。

设置元素的高度和宽度

对定宽页面使用像素，对响应式Web设计使用百分数。
设置min-height可以使元素至少具有某一特定高度，内容变多的话，元素高度会自动按需增长，这是height与min-height的区别
border-box规则：
<span style="color: #008000;">/*</span><span style="color: #008000;">
*   border-box规则
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
* </span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;">border-box</span>;<span style="color: #ff0000;">
    -moz-box-sizing</span>:<span style="color: #0000ff;">border-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;">border-box</span>;
}
登录后复制

在元素周围添加内边距

padding属性，padding简记法：padding:5px，应用于全部四个边，padding:5px 9px，第一个值应用于上下，第二个值应用于左右，padding:5px 9px 11px，第一个值用于上边，第二个值用于左右，第三个值用于下边，padding:5px 8px 9px 11px，分别用于上、右、下、左
内边距值可以使用像素、百分数、em或rem组合

设置边框

1、定义边框风格：border-style:type，type可以是none、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset（凹边）、outset（凸边）
2、设置边框宽度：border-width:n
3、设置边框用颜色：border-color:color
简记法：border，可选：-top，-right，-bottom，-left，限制效果为某一边；可选：-property，property可以是style，width，color
border简写属性及各个边框属性（border-width，border-style，border-color）均可接受1~4个值，用法与padding类似

设置元素周围外边距

margin属性的auto值依赖于width属性值
margin属性值也可以接受1~4个值，与padding用法类似
注：当em用于内边距和外边距时，它的值是相对于元素的字体大小的，而不是相对于父元素的字体大小。

使元素浮动

float属性使元素浮动在文本或其他元素之上，可以使用这种技术让文本环绕在图像或其他元素周围，也可以使用这种技术创建多栏布局。
float:left -- 让元素浮动到左边，其他内容围绕在它右边，float:right -- 浮动到右边，float:none -- 完全不浮动
注：选择的方向是应用于需要浮动的元素，而不是应用于环绕的元素
浮动元素并不会影响父元素或其他祖先元素的高度。
当一个父元素的所有子元素都是浮动元素时，它本身将不具有任何高度，即高度为0
使用clear属性清除浮动效果，对某个元素使用该属性，该元素和它后面的元素会显示在浮动元素下方。
clear:left -- 阻止元素浮动在该元素左边，clear:right -- 阻止元素浮动在该元素右边，clear:none -- 阻止元素浮动在该元素两边
如果要让浮动元素的祖先元素在高度上包含浮动元素，并清除浮动，可以使用.clearfix或overflow方法。
<span style="color: #008000;">/*</span><span style="color: #008000;">
*  .clearfix    清楚浮动
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clearfix:before,
.clearfix:after</span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> " "</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;
}<span style="color: #800000;">

.clearfix:after</span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;
}<span style="color: #800000;">

.clearfix</span>{<span style="color: #ff0000;">
    *zoom</span>:<span style="color: #0000ff;">1</span>;
}
登录后复制
注：浮动元素的display属性会变成display:block;，无论是否设置了display属性。

对元素进行相对定位

每个元素在页面文档流中都有一个自然位置，相对这个原始位置进行移动就称为相对定位。周围元素不受此影响。
<span style="color: #008000;">/*</span><span style="color: #008000;">
*  相对定位
</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.example</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 2px</span>;<span style="color: #ff0000;">
    right</span>:<span style="color: #0000ff;"> 3px</span>;<span style="color: #ff0000;">
....
</span>}
登录后复制
使用相对定位、绝对定位或固定定位时，对于相互重叠的元素，可以用z-index属性指定它们的叠放顺序。
对元素设置position:static，可以覆盖position: relative;，定位不继承

对元素进行绝对定位

通过对元素进行绝对定位，即指定它们相对于body或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流
与相对定位不同，绝对定位的元素不会在原先位置留下空白，这与让元素浮动也不同。对于绝对定位的元素，其他元素不知道他的存在，他也不知道其他内容的存在。
position:absolute;
对希望成为绝对定位参照体的祖先元素添加position: relative;，如果跳过这一步，将对元素相对于body元素计算偏移量

固定定位

在访问者滚动浏览器窗口时，设置position:fixed;的元素会固定在浏览器窗口中，并不会随着访问者滚动窗口而滚动。
建议：固定定位在移动浏览器中效果不佳，若网页要适应移动设备，最好不要使用固定定位。

在栈中定位元素

对于定位的元素，z-index最高的显示在最上面，不管该元素在HTML中出现的顺序。
z-index属性仅对于定位过的（即设为绝对定位、相对定位、固定定位）元素有效。
<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #5af</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1px solid #666</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 125px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box1</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> pink</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 110px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 120</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box2</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> yellow</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 130px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 530</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box3</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> static</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 静态的，没有任何效果 </span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
            z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 1000</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .box4</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> orange</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 285px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 65px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            z-index</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box1"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Box 1<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box2"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Box 2<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box3"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Box 3<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box4"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Box 4<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
登录后复制

效果：

立即学习“前端免费学习笔记（深入）”；

超能文献
超能文献

超能文献是一款革命性的AI驱动医学文献搜索引擎。

超能文献 123
查看详情 超能文献

处理溢出

overflow控制元素在盒子外面的部分
overflow:hidden -- 隐藏盒子容纳不了的内容，overflow:scroll -- 无论元素是否需要，都在元素上添加滚动条，overflow:auto -- 让滚动条仅在访问者访问溢出内容时出现。
overflow不是继承的

垂直对齐元素

vertical-align:baseline -- 使元素的基准线对齐父元素基准线
vertical-align:middle -- 使元素位于父元素中央
vertical-align:sub -- 成为父元素下标
vertical-align:super -- 成为父元素上标
vertical-align:text-top -- 使元素顶部对齐父元素顶部
vertical-align:text-bottom -- 使元素底部对齐父元素底部
vertical-align:top -- 使元素顶部对齐当前行里最高元素的顶部
vertical-align:bottom -- 使元素底部对齐当前行里最低元素的底部
或者可以输入行高百分比，可以是正数，也可以是负数
或者输入某个值正负均可，单位为px或em，分别按照特定的值向上或者向下移动元素。
可以使用vertical-align设置表格单元格对齐方式，除了表格外，vertical-align仅适用于行内元素

修改鼠标指针

cursor:pointer -- 表示停留在链接上时通常显示的指针形状（手指），default（箭头形状），crosshair（+），move（+加方向），wait（加载中的符号），help（帮助符号？或者指针带着问号），text（I），progress（箭头加加载中的符号）
cursor:auto -- 特定情形下通常使用的指针形状
cursor:x-resize -- 显示双向箭头，这里的x是其中一个箭头需要指向的方向，可以是n（北），nw（西北），e（东）等等

第十二章，构建响应式网站

只有HTML中不包含width和height属性，图像才有可能变成可伸缩的图像。
<span style="color: #800000;">.post-photo</span>{<span style="color: #ff0000;">
     max-width</span>:<span style="color: #0000ff;">100%</span>;
}
登录后复制
让图像变成可伸缩图像的一小段魔法CSS
图像缩放的可用空间是由其父元素建立的内容区域。
一定要使用max-width:100%，而不是width:100%。他们都能让图像在容器内缩放，但width:100%会在容器宽度比图像宽时放大图像，超过其本来大小，有可能会显得较为难看
图标字体和SVG可以创建无损缩放图形。
可以使用background-size属性对背景图像进行缩放。
流式布局又称弹性布局
内边距和外边距的em值是相对于元素的font-size，而基于百分数的值则是相对于包含元素的容器的。
对于设置了body{font-size:100%;}的页面，对font-size，margin，padding和max-width使用em值，还有一个好处，就是当用户改变了浏览器默认字体大小，页面也会跟着变大变小。

理解和实现媒体查询

可以包含在媒体查询里的媒体特性：
width：宽度
height：高度
device-width：设备宽度
device-height：设备高度
orientation：方向
aspect-ratio：高宽比
device-aspect-ratio：设备高宽比
color：颜色
color-index：颜色数
monochrome：单色
resolution：分辨率
scan：扫描
grid：栅格
非标准媒体特性：
-webkit-device-pixel-ratio：WebKit设备像素比
-moz-device-pixel-ratio：Mozilla设备像素比
除了orientation、scan、grid以外，以上属性均可添加min- 和max- 前缀
1、媒体查询语法
指向外部样式表的链接： 
<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> media</span><span style="color: #0000ff;">="logic type and (feature: value)"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="your-stylesheet.css"</span> <span style="color: #0000ff;">/></span>
登录后复制

位于样式表中的媒体查询：

<span style="color: #800000;">@media logic type and (feature: value)</span>{
     <span style="color: #008000;">/*</span><span style="color: #008000;"> 目标CSS样式规则写在这里 </span><span style="color: #008000;">*/</span>
}
登录后复制

示例：

<span style="color: #800000;">@media only screen and (min-width : 480px)</span>{<span style="color: #ff0000;">
     p{
          color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">
          font-weight</span>:<span style="color: #0000ff;">bold</span>;
     }<span style="color: #800000;">
}</span>
登录后复制
logic部分是可选的，其值可以是only或not。
type部分是媒体类型，如screen，print
feature：value是可选的，但一旦包含，必须用括号包围且前面要有and这个字。feature是预定义的媒体特性，如min-width、max-width、resolution。对color、color-index、monochrome特性来说value是可选的
提示：Eivind Uggedal的http://mediaqueri.es网站汇集了大量现实的响应式网站，值得借鉴。Screen Sizes网站（http://screensiz.es）提供了流行设备和显示屏的分辨率和设备宽度信息。Maximiliano Firtman维护了一个现代移动设备对HTML5和CSS3支持情况的表格（http://mobilehtml5.org）。
    <span style="color: #008000;"><!--</span><span style="color: #008000;"> 条件注释 </span><span style="color: #008000;">--></span>
    <span style="color: #008000;"><!--</span><span style="color: #008000;">[if lt IE 9]>
    <link rel="stylesheet" href="css/old-ie.css" />
    <![endif]</span><span style="color: #008000;">--></span>
登录后复制

第十三章，使用Web字体

CSS规则@font-face为Web字体创造了可能。
以下前三种字体类型是如今经常用到的：
1、内嵌OpenType（Embedded OpenType，.eot）
2、TrueType（.ttf）和OpenType（.otf），台式机使用的标准字体文件类型
3、Web开放字体格式（Web Open Font Format，.woff）
4、可缩放矢量图形（Scalable Vector Graphics，.svg），避免使用。
Chris Coyier收集了大量获取图标字体的资源（http://css-tricks.com/flat-icons-icon-fonts/），还演示了如何使用IcoMoon（http://icomoon.io）创建开发人员自己的图标字体（http://css-tricks.com/video-screencasts/113-creating-and-using-a-custom-icon-font/）

第十四章，使用CSS3进行增强

为不支持某些属性的浏览器使用polyfill（通常又称垫片，shim），通常使用js实现，可以为较弱的浏览器提供一定程度的对HTML5和CSS3的API和属性的支持。
提示：HTML5 Please（http://html5please.com）可以找出哪些HTML5和CSS3可以放心使用，以及哪些好的填补差距的polyfill。
学习更多CSS3效果：www.htmlcssvqs.com/resources/

厂商前缀

-webkit-：WebKit/Safari/旧版本的Chrome
-moz-：Firefox
-ms-：Internet Explorer
-o-：Opera
应该将前缀放在CSS属性名前面
<span style="color: #800000;">div</span>{<span style="color: #ff0000;">
     -webkit-border-radius</span>:<span style="color: #0000ff;">10px</span>;<span style="color: #ff0000;">
     border-radius</span>:<span style="color: #0000ff;">10px</span>;
}
登录后复制
如今，多数情况下一般只需要-webkit-前缀。

为元素创建圆角

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 150px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 150px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .all-corners</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .one-corners</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-border-top-left-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">75px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border-top-left-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 75px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .elliptical-corners</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50px / 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px / 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .circle</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            border-radius</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="all-corners"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="one-corners"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="elliptical-corners"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
登录后复制

效果：

立即学习“前端免费学习笔记（深入）”；

border-radius仅影响施加该样式的元素的角，并不会影响其子元素的角。因此如果子元素有背景，将可能影响圆角样式
有时元素背景（不是子元素背景）会透过其圆角，避免：在border-radius后加一条样式规则 --> background-clip:padding-box;

为文本添加阴影

text-shadow：x-offset（水平偏移），y-offset（垂直偏移），blur-radius（模糊半径，可选），color值（前三个带长度代为，四个值用空格分开）
添加多重阴影，使用逗号分隔每组阴影。
text-shadow:2px 2px 2px #333,3px 3px 3px #666;
改回默认值：text-shadow:none
x-offset，y-offset可以为正负，blur-radius只能为正。三个均可为0
text-shadow属性是继承的，不需要厂商前缀

为其它元素添加阴影

使用text-shadow属性为元素文本添加阴影，box-shadow属性则为元素本身添加阴影。基础属性集相同，不过box-shadow还允许使用两个可选属性：inset关键字，spread属性，用于扩张或收缩阴影，box-shadow需要厂商前缀来兼容
box-shadow：带长度单位：x-offset、y-offset；可选带长度单位：blur-radius；可选inset关键字，可选带长度单位的spread值，color值
<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .shadow</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">4px 4px 5px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 4px 4px 5px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .shadow-negative</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">-4px -4px 5px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -4px -4px 5px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .shadow-spread</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">4px 4px 5px 3px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 4px 4px 5px 3px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .shadow-offsets-0</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">0px 0px 9px 3px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px 0px 9px 3px #999</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .inset-shadow</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">2px 2px 10px #666 inset</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 2px 2px 10px #666 inset</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">

        .multiple</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            -webkit-box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">
                2px 2px 10px rgba(255,0,0,.75),
                5px 5px 20px blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
            box-shadow</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">
                2px 2px 10px rgba(255,0,0,.75),
                5px 5px 20px blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Shadow with Blur<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow-negative"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Shadow with Negative Offsets and Blur<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow-spread"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Shadow with Blur and Spread<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="shadow-offsets-0"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Shadow with Offsets Zero,Blur,and Spread<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inset-shadow"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Inset Shadow<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="multiple"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>Multiple Shadows<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
登录后复制

效果：

立即学习“前端免费学习笔记（深入）”；

x-offset，y-offset，spread正负均可，blur-radius必须为正，都可为0
inset关键字可以让阴影位于内部，box-shadow不继承

应用多重背景

1、为单个元素应用多重背景
（1）background-color：b，背景色
（2）background-image：u，引用的背景图
（3）background-position：p，p是成对的x-offset和y-offset的集合，用逗号分开。
（4）background-repeat：r，r是repeat-x，repeat-y或no-repeat

使用渐变背景

渐变背景是CSS3的新特性
1、创建备用背景颜色
background：color或者background-color：color
2、定义线性渐变
background：linear-gradient（方向,指定颜色）
方向属性：to top、to right、to left、to bottom right、to bottom left、to top right、to top left或者45deg、107deg（0代表最顶端的点，90代表最左边的点，180代表最底端的点，270代表最右边的点）
3、定义径向渐变
background：radial-gradient();参数有点多，以后再加
4、指定颜色
输入至少两种颜色，之间用逗号隔开
5、指定颜色和颜色的停止位置
手写渐变很坑爹，用CSS渐变背景生成器吧，百度，Google去。

为元素设置不透明度

使用opacity属性可以修改元素的透明度。
opacity:o，o表示元素的不透明程度（两位小数，不带单位），0完全透明，1完全不透明
opacity不继承，opacity值小于1的元素的子元素也会受影响

生成内容的效果

使用:before和:after伪元素可以很方便地为页面添加设计效果。

使用sprite拼合图像

将多个图像拼合成单个背景图像（sprite），再通过CSS控制具体显示图像哪一部分，关键在于background-position属性。
Project Fondue提供的CSS Sprite Generator（http://spritegen.website-performance.org）是一个帮助创建sprite和背景定位的工具。

第十五章，列表

有序列表：ol为父元素，li为列表项
无序列表：ul为父元素，li为列表项
描述列表：dl为父元素，dt和dd分别代表dl中的术语和描述。
大多数情况下均可以使用无序列表，如主导航链接、指向一组视频或相关报道的链接、页脚中的一组链接等。

选择标记

无论是有序列表还是无序列表，都可以选择出现在列表项目左侧的标记类型
1、选择标记
list-style-type:marker
marker是以下属性值中一种：
（1）disc（实心圆点）
（2）circle（空心圆圈）
（3）square（实心方块）
（4）decimal（数字1、2、。。。）
（5）upper-alhpa（大写字母A、B、。。。）
（6）lower-alpha（小写字母a、b、。。。）
（7）upper-roman（大写罗马数字I、II、III。。。）
（8）lower-roman（小写罗马数字i、ii、iii。。。）
2、显示无标记列表
list-style-type：none
使用定制标记
在目标列表或列表项的样式规则中，输入list-type：none，取消常规标记

选择列表的起始编号

1、设置整个列表编号方案的初始值
在ol开始标签中输入start="n"，n表示初始值
2、修改有序列表中某列表项目的编号
在目标li项目内输入value="n"，n表示列表值

控制标记的位置

list-style-position:inside -- 标记缩在文本块内，outside -- 标记显示在列表项目的左边
list-style-position可应用与ul，ol，li结果都一样。

同时设置所有列表样式属性

list-type简写。可以指定三个属性，也可以指定其中一个，多个属性顺序任意。

创建描述列表

HTML提供了专门用于描述成组出现的名称及其值之间关联的列表类型。在HTML5中称为描述列表。每个列表包含在dl中，每个名值对都有一个或多个dt元素（名称或术语）以及一个或多个dd元素（名称或术语的值）
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：css的学习 - 估计会 下一篇：html页面内容超出后显示水平滚动条的问题 - 林七七
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
jimdo如何添加html5表单_jimdo表单html5代码嵌入与字段设置【实操】 可通过嵌入HTML5表单代码、启用字段验证属性、添加CSS样式反馈及替换提交按钮并绑定JS事件四种方式在Jimdo实现自定义表单行为。
2025-12-23 20:14:41
902
html5怎么写备注_HT5用给代码添加注释说明【备注】 HTML5注释需用，script内用//或//，style内用//，禁在属性值中写HTML注释，编辑器可识别折叠代码。
2025-12-23 20:14:02
928
响应式HTML5按钮适配不同屏幕方法【方法】 实现响应式HTML5按钮需五种方法：一、CSS媒体查询按max-width断点调整样式；二、用rem/vw等相对单位替代px；三、Flexbox控制容器与按钮伸缩；四、CSS变量配合requestAnimationFrame优化的JS动态适配；五、Tailwind等框架的响应式工具类。
2025-12-23 20:11:32
612
jimdo能否添加html5弹窗_jimdo弹窗html5代码实现与触发条件【技巧】 可在Jimdo实现HTML5弹窗的四种方法：一、用内置“弹窗链接”模块；二、通过HTML区块注入精简dialog结构（需配合内联CSS）；三、外部托管HTML+iframe嵌入；四、纯CSS:target伪类无JS方案。
2025-12-23 20:09:09
831
html5怎么跳出页面_HT5用location.href或a标签实现页面跳转跳出【跳出】 HTML5页面跳转有五种方法：一、location.href直接跳转并替换历史；二、location.replace()跳转且不保留当前页历史；三、a标签href跳转，支持新窗口及历史回退；四、a标签+JavaScript事件控制条件跳转；五、metarefresh实现定时自动跳转。
2025-12-23 20:06:03
553
html5文件运行不出来怎么回事_析html5文件运行失败原因【解析】 首先检查文件扩展名和编码格式，确保为.html且使用UTF-8编码；接着验证HTML5结构完整性，包含及正确闭合的标签；然后排查外部资源路径是否正确，利用开发者工具查看404错误；排除浏览器兼容性问题，优先在现代浏览器中测试并避免未广泛支持的API；检查JavaScript语法错误与执行顺序，确保脚本无报错并在DOM加载后运行；最后确认是否需本地服务器环境，对AJAX等功能使用Python等工具启动HTTP服务测试。
2025-12-23 20:04:02
375
html5空行怎么表示_HTML5用换行或p标签占位表示空行分隔【表示】 HTML5中空行通过块级元素默认外边距或显式空白结构实现：一、用空标签；二、用带margin的；三、用配合line-height；四、用CSS伪元素生成装饰性空行。
2025-12-23 20:01:02
137
html5怎么设置月份_HTML5用input type="month"让用户选择年月月份【设置】 HTML5的inputtype="month"提供原生年月选择器，格式为“YYYY-MM”，支持value默认值、min/max范围限制、name表单提交，并需JavaScript降级兼容旧浏览器。
2025-12-23 20:00:13
475
html5怎么打包运行_HT5用Webpack或Gulp打包后浏览器打开运行【打包】 应通过HTTP服务运行打包后的HTML5页面，而非双击打开：一、Webpack配webpack-dev-server启动本地服务；二、Gulp配BrowserSync提供实时重载；三、用Python/Node.js轻量HTTP工具托管dist目录；四、仅当必须双击运行时，才配置publicPath为‘./’并手动管理资源路径。
2025-12-23 19:49:02
176
Html5如何监听蓝牙_Html5蓝牙监听实现方法【硬件交互】 需通过WebBluetoothAPI实现蓝牙数据实时监听：一、用CharacteristicValueChanged事件监听支持Notify/Indicate的特征；二、轮询readValue()应对不支持通知的特征；三、监听GATT连接状态确保链路稳定；四、统一管理多特征订阅防内存泄漏。
2025-12-23 19:44:37
602
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部