热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

《网页设计与制作》学习进度

一、HTML5网页基本结构:1、HTML5文档基本格式:HTML5文档的基本格式主要包括文档类型声明、根标记、头部标记、主体

一、HTML5网页基本结构:
1、HTML5文档基本格式:HTML5文档的基本格式主要包括文档类型声明、根标记、头部标记、主体标记

2、HTML5语法:

(1)标签不区分大小写

HTML5采用宽松的语法格式,标签可以不区分大小写,这是HTML5语法变化的重要体现。例如:

这里的p标签大小写不一致

(2)允许属性值不使用引号

(3)允许部分属性值的属性省略

3、HTML标记及标记属性

HTML标记:在HTML页面中,带有“ <> ”符号的元素被称为HTML标记,、、都是HTML标记,将HTML标记分为三大类,分别是“双标记”、“单标记”、“注释标记”

标记属性:其基本语法格式如下:

<标记名 属性1="属性值1" 属性2="属性值2" …> 内容

标题文本

(其中align为属性名,center为属性值,表示标题文本居中对齐,对于标题标记还可以设置文本左对齐或右对齐,对应的属性值分别为left和right。如果省略align属性,标题文本则按默认值左对齐显示)

4、HTML5文档头部相关标记:在标记内

 

二、HTML5的常用基本标记:

1、文本控制标记:(1)标题和段落标记

                               (2)文本格式化标记

                               (3)特殊字符标记

2、图像标记:(1)常用图像标记

                        (2)图像标记

                        (3)绝对路径和相对路径

3、链接标记:(1)创建超链接

                        (2)锚点链接

 

三、HTML5页面元素:(1)列表元素

                                     (2)结构元素

                                     (3)分组元素

                                     (4)页面交互元素

 

四、CSS基本选择器

1、CSS样式规则:

具体格式如下:选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

具体规则如下:

 CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照书写 习惯一般将“选择器、属性和值”都采用小写的方式;

 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可 以省略,但是,为了便于增加新样式最好保留;

 如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加 上英文状态下的引号;

 在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释

2、标记选择器

3、类选择器

4、id选择器

 

五、CSS复合选择器

1、交集选择器

2、合集选择器

3、后代选择器

 

六、CSS3高级

选择器:(1)CSS3属性选择器

               (2)关系选择器

               (3)伪类及伪元素选择器

属性:(1)CSS3的变形属性

           (2)CSS3的过渡属性

 



推荐阅读
  • Vue 2 中解决页面刷新和按钮跳转导致导航栏样式失效的问题
    本文介绍了如何通过配置路由的 meta 字段,确保 Vue 2 项目中的导航栏在页面刷新或内部按钮跳转时,始终保持正确的 active 样式。具体实现方法包括设置路由的 meta 属性,并在 HTML 模板中动态绑定类名。 ... [详细]
  • 本文探讨了如何通过最小生成树(MST)来计算严格次小生成树。在处理过程中,需特别注意所有边权重相等的情况,以避免错误。我们首先构建最小生成树,然后枚举每条非树边,检查其是否能形成更优的次小生成树。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
author-avatar
谭小牙笑不漏齿
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有