W前端技术基础开发概述 1_第1页
W前端技术基础开发概述 1_第2页
W前端技术基础开发概述 1_第3页
W前端技术基础开发概述 1_第4页
W前端技术基础开发概述 1_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端开发技术基础任务

红色文化资源网结构搭建通关任务1引导页结构搭建——HTML概念及基本结构AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述本任务采用HTML5的结构标签来完成简单的网站首页的搭建任务描述任务目标1.了解HTML的概念。2.掌握HTML的基本结构。3.掌握HTML5新增的结构标签。4.能够使用HTML5编写简单网页。图2-1-1任务效果图任务实施——结构分析任务实施——构建HTML结构（1）创建站点并保存网页图2-1-3

HTML

页面基础结构代码1）在HBuilderX软件中输入标签前面的几个字母并按<Tab>键，可以自动补齐剩下的标签及相关的属性。2）加入注释的快捷方式是选中文字后按<Ctrl+/>组合键。3）所有表示结构的代码标签是不会显示在页面上的。企业说1）运行HBuilderX软件，单击菜单上的文件—新建—项目命令，选择“普通项目”单选按钮，将项目名称命名为web2,单击“浏览”按钮选择存放路径，勾选“基本HTML项目”单击“创建”按钮创建新项目。2）在菜单中点击文件—新建HTML文件，在弹出的对话框中将文件重命名，找到<title></title>标签对，输入网页标题，单击HBuilderX软件工具栏的“保存”按钮或按ctrl+S快捷键保存文档。（

2）创建HTML主体结构图2-1-4

页面主体结构代码任务实施——构建HTML结构（

3）创建页面头部模块代码结构图2-1-5

页面头部模块代码及效果图任务实施——构建HTML结构（

4）创建页面主体模块代码结构图2-1-6页面主体模块代码及效果图任务实施——构建HTML结构（

5）创建页面尾部模块代码结构版权信息的构成及版权符号的书写方式：表述格式为“Copyright©+时间+版权所有者名称+ICP备案号”。版权符号©的代码为“©”。任务实施——构建HTML结构知识宝典-——HTML语言介绍HTML（HyperTextMarkupLanguage，超文本标记语言）不是编程语言，而是一种描述性的标记语言。它通过标签符号来标记网页中要显示的内容。网页中的文本、图像、表格、超链接等内容，都有特定的

HTML标签。（

1

）HTML

基本的语法格式双标签：<标签

>

内容

</标签

>。单标签：<标签

>

内容。例如：<title>红色文化资源网

</title>。表2-1-1

HTML

网页标签分类

标签举例双标签<p></p>、<div></div>、<html></html>、<body></body>、<title></title>、

<h1>…<h6>、</h1>…</h6>单标签<hr>、<br>、<meta>、<img>、<link>（2）标签的属性属性在标签中的使用格式如下<标签属性1=“属性值1”属性2=“属性值2”.....>标签内容</标签>例如：<imgsrc="img/chongzuo.jpg">说明：

大部分标签都是成对出现的，即双标签，有一个开始符号和一个结束符号，结束符号只是在开始符号前面加一个反斜杠“/”。少部分标签只有开始符号，没有结束符号，即单标签。1

.HTML

介绍知识宝典-——HTML的基本结构标签说明<!DOCTYPE>文档类型声明，位于文档最前面，用于向浏览器说明当前文档使用的

HTML标准的规范<html><html>标签标志着整个

HTML文档的开始，</html>标签标志着整个

HTML文档的结束。它们之间是文档的头部和主体内容<head>头部标签，主要用于定义描述文档标题

<title>、样式

<style>、元数据

<meta>、脚本<script>等信息。标签里面定义的内容不显示在页面中<body>主体标签。浏览器中显示的所有文本、图像、音视频都必须写在此标签中<meta>元数据标签，用于定义

HTML文档中的编码、关键字等信息。例如，charset用于定义字符编码，name用于定义描述信息，content用于定义关键字<title>用于定义文档的标题，预览后显示在浏览器的标题栏或状态栏<link>用于链接文档的外部样式<style>用于定义文档的内部样式<script>用于定义或链接客户端的脚本，如

JavaScript脚本表2-1-2

HTML

基本结构标签

标准的html文件都有一个基本的结构，即HTML文件的开头和结尾标签以及HTML的头部和主体两部分，当我们在HBuilder软件中新建HTML文件时，HBuilder软件会给我们生成默认的如下结构：知识宝典——HTML5新增结构标签标签说明<header>页面头部，通常是一些引导和导航信息<nav>可以作为页面导航的链接组<main>页面主体，一个网页只有一个<section>页面中的一个内容区块，通常由内容及标题组成<article>一个独立的、完整的相关内容块，可独立于页面其他内容使用<aside>非正文的内容，与页面的主要内容是分开的，被删除后不会影响网页的内容<footer>页面或页面中某一个区块的页脚部分表2-1-3

HTML5新增的网页结构标签HTML发展至今，经历了

HTM

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论