《2022年html基础与表格笔 .pdf》由会员分享，可在线阅读，更多相关《2022年html基础与表格笔 .pdf（13页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1.* 千万不要你的网页裸奔hr 标记，标示分割线（单个标记）html 标记的语法标记分为两种：单标记双标记只有标记符没有结束的标记为单标记双标记：有头有尾单标记分两种形式：只有标记名没有属性值；有属性值的单标记* 源代码效果往往不是网页上的效果口诀：标记分单双div+css布局方式，从2000 年开始，国外就有了，2005 以后在国内流行出来了在 xthml 中， 所有 html 标记都要小写， 所有标记都要有关闭比如单标记换行（不换段）标记当中属性与属性之间用空格来区分，属性不区分先后顺序且不是必须的，所有标记都用小写网页的头部信息是给搜索引擎看的html 元素html 标签html 标记
2、这三个其实是一个东西有些 html 元素，有默认的值html 文件最好用英文名来命名*html语义说明我们在写html 代码时流程如下：先写我们的控制内容的标记，例如这内容比较重要，可以在语义上加权（有利于搜索引擎），例如： 关键字 这部门内容是该文章网页的主题推荐使用文章标题 该标记能自动加粗换行html 用于控制网页的内容2.网页段落文字内容-段落内容 -实际应用当中一般就是用到4 * 记住我们写代码，或者效果的演变过程* * 用适合的html 标记，去描述我们网页的内容-网站优化技巧在 html 中，所有标签都必须要用属性值，如果没有，则使用属性名，例如： -xhtml -html 定义
3、一个块引用：使用文本缩进. cite url 被引用的地址（表示某某信息来源于那个网站）预格式化： 用来表示文档当中的原来的代码显示名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 13 页 - - - - - - - - - 效果图：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 13 页 - - - - - - - - - 名师资料总结 - - -
4、精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 13 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 13 页 - - - - - - - - - 3.传统的网页布局方式使用table 表格table 原用于保存数据，保存有格式的清晰的数据布局 table改用 div+css 布局思想排版从大到小排版从左到右排版，从上向下排版按人视觉
5、名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 13 页 - - - - - - - - - 效果如下图：表格用于固定数据在网页上的位置。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 13 页 - - - - - - - - - 例子效果如下图：代码效果如下图：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - -
6、 - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 13 页 - - - - - - - - - 表格的边框和单元格的边框在默认的情况下cellspacing 的值为 2，改为 0 之后，在下面的例子效果图可以看到效果：单元格的合并：合并思想：当将多个内容合并时，就会有多余的东西，删除；例如：有三列3 个 td，当合并时，需要删除2 个。注：合并单元格就是删除多余的td。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 13 页 - - -
7、- - - - - - 效果图如下：表格的合并行效果：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 13 页 - - - - - - - - - 表格应用小练习：效果图如下：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 13 页 - - - - - - - - - 表格的凸起效果：bordercolorlight 表示表格边框左边和上边的颜色，
8、却是单元格边框右边和下边的颜色；而 bordercolordark 与之相反。注：立体表格效果其实就是将表格的亮边框颜色与暗边框颜色进行对比；表格自身有边框，单元格自身也有边框。凹 陷 效 果 就 是 将bordercolorlight和bordercolordark 的颜色只对调即可。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 13 页 - - - - - - - - - 细线表格效果：公式： 1.将表格自身边框粗细（border=0）2.给表格设置背景颜色3.给
9、表哥设置单元格之间的距离（该距离就是线条的粗细）名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 13 页 - - - - - - - - - th 标签还会自动居中如上图红圈里面所示，td 改为 th 注意：当 之间没有内容时，默认是不显示边框的，如果想看到，加个 ；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 13 页 - - - - - - - - -