前端基础实战 10_第1页
前端基础实战 10_第2页
前端基础实战 10_第3页
前端基础实战 10_第4页
前端基础实战 10_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

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

文档简介

HTML页面布局实战课件目录01HTML常用标签02申请AI大模型Key03配置AI编程插件及插件应用HTML常用标签HTML简介1．什么是HTML超文本标记语言（HyperTextMarkupLanguage，HTML）是用来描述网页的一种语言。通过HTML的全称可以看出，HTML不是一种编程语言，而是一种标记语言，HTML使用诸多不同的HTML标签来完成对网页内容的描述。HTML是标准通用标记语言下的一个应用，也是一种规范、一种标准。它通过标记符来标记想要显示的网页中的各个部分。HTML文件本身是一种文本文件，通过在HTML文件中添加标记符即可告诉浏览器如何显示其中的内容（如文字如何处理、画面如何安排、图像如何显示等）。HTML常用标签HTML简介2．HTML的特点HTML文档制作不是很复杂，但其功能强大，支持不同数据格式的文件嵌入，其主要特点如下。（1）简易性：HTML版本升级采用超集方式，操作更加灵活、方便。（2）可扩展性：HTML的广泛应用带来了加强功能、增加标识符等要求，HTML采取子类元素的方式为系统扩展提供保证。（3）平台无关性：HTML可以在多种操作系统平台上使用，这也是万维网盛行的一个原因。（4）通用性：HTML是网络的通用语言，是一种简单、通用的标记语言。它允许网页制作者建立文本与图像相结合的复杂页面，这些页面可以被网络上的其他人浏览，且不考虑使用的是什么类型的计算机或浏览器。HTML常用标签HTML简介3．HTML标签HTML标签（HTMLTag）即HTML标记标签，是由角括号包围的标签，如<html>。HTML标签通常成对出现，如<font>和</font>，其中的第一个标签是开始标签（也称为开放标签），第二个标签是结束标签（也称为闭合标签）。HTML标签的语法格式如下。<标签名>内容</标签名>HTML常用标签HTML简介4．HTML版本从初期的网络诞生到现在，已经出现了许多HTML版本，其主要版本历史如表2-1所示。目前较为流行且对移动互联网支持最好的是HTML5。HTML常用标签HTML页面HTML文档是由纯文本构成的，可以使用记事本来编辑HTML文档。下面介绍一个最基本的HTML页面如何实现。打开记事本，输入图2-1所示的文本内容，并将其保存为扩展名为“.html”的文件。双击这个HTML文件，系统会用默认的浏览器打开页面，即可看到其运行结果，如图2-2所示。HTML常用标签HTML页面1．<!DOCTYPE>声明<!DOCTYPE>声明有助于浏览器正确显示网页。<!DOCTYPE>声明是不区分字母大小写的，以下书写方式均可。<!DOCTYPEhtml><!DOCTYPEHTML><!doctypehtml><!DoctypeHtml>2．<html>标签标签<html>与</html>表明了文档类型，表明这是一个按照HTML规范来书写的HTML文档。HTML常用标签HTML页面3．<head>标签标签<head>与</head>之间的内容主要用于描述页面的头部信息。4．<meta>标签<meta>标签主要用于设置页面的基础元信息。5．<title>标签<title>标签只用于设置页面的标题。6．<body>标签<body>标签是网页中最为重要的标签之一，主要用于展示网页的内容。7．网页注释在HTML中，<!--和-->是特殊标签，用于标注网页内容的注释部分。HTML常用标签文本上述代码中的标签及属性简单说明如下。（1）<font>表示格式化文本内容的文字大小、颜色和字体名称。（2）<h1>～<h6>表示文本内容标题文字大小，依次从大到小。（3）<i>表示斜体，<b>和<strong>表示粗体，<p>表示包含一个段落，会自动换行。（4）有的标签后面使用了<br/>标签，这个标签是一个特殊标签，表示让浏览器显示内容时强制换行。HTML常用标签超链接在HTML中，超链接的地位是极为重要的，使用标签<a>来设置超链接。超链接可以是一个字、一个词，或者一组词，也可以是一幅图像，单击这些内容可以跳转到新的文档或者当前文档中的某个部分。默认情况下，超链接以以下形式出现在页面中。（1）未访问过的超链接显示为蓝色字体并带有下画线。（2）访问过的超链接显示为紫色并带有下画线。（3）单击超链接时，超链接显示为红色并带有下画线。超链接的HTML代码很简单，定义超链接的语法如下。ahref="url">超链接文本</a>HTML常用标签图像在

HTML

中，图像的应用非常广泛，图像由<img>标签定义。<img>是单标签，即它只包含属性，且没有结束标签，可以使用“/>”结束该标签。要在页面中显示图像，需要使用源属性（src），src即source的缩写。源属性的值是图像的URL。定义图像的语法如下。<imgsrc="url"alt="some_text"/>1．HTML图像的alt属性alt属性用来为图像定义替换文本，替换文本是用户定义的。2．HTML图像的高度与宽度height与width属性用于设置图像的高度与宽度，属性值的默认单位为像素。HTML常用标签图像对于图文混排导致无法对齐的情况，还需要设置图像的附加属性align。图像的align属性取值及说明如表2-2所示。HTML常用标签表格在HTML中，表格一直以来都发挥着非常重要的作用。除显示表格化数据以外，表格也用于页面布局。HTML表格示例如表2-3所示。HTML常用标签表单元素1．文本框示例代码如下。<inputtype="text"value="admin"id="username"maxlength="20"/>其中，id表示该元素在网页中的唯一识别符；maxlength表示文本框允许输入的最大字符数。2．密码框示例代码如下。<inputtype="password"value="123456"id="password"name="password"/>3．按钮示例代码如下。<inputtype="button"value="单击我"onclick="alert('hi');"/>HTML常用标签表单元素4．单选框示例代码如下。<inputtype="radio"name="sex"/>男<inputtype="radio"name="sex"/>女单选框必须确保name属性的值是一样的。5．复选框示例代码如下。<inputtype="checkbox"value="car"/>汽车<inputtype="checkbox"value="game"/>游戏<inputtype="checkbox"value="travel"/>旅游HTML常用标签表单元素6．下拉列表示例代码如下。<selectid="city"><optionvalue="成都">成都</option><optionvalue="绵阳">绵阳</option><optionvalue="德阳">德阳</option><optionvalue="资阳">资阳</option></select>7．文本域文本域不同于一般的文本框，文本框只能输入一行内容，而文本域可以输入多行内容。HTML常用标签表单元素8．提交和重置表单示例代码如下。<formid="myform"action="http://服务器地址"method="post"><inputtype="text"value="123456"/><inputtype="reset"value="重置"/><inputtype="submit"value="提交"/></form>上述代码会生成一个表单，单击“重置”按钮会直接将表单内的元素重置为默认值，单击“提交”按钮会将表单的内容提交给服务器。HTML常用标签列表1．有序列表示例代码如下。<ol><li>这是第一项</li><li>这是第二项</li><li>这是第三项</li><li>这是第四项</li><li>这是第五项</li><li>这是第六项</li></ol>HTML常用标签列表2．无序列表示例代码如下。<ul><li>这是第一项</li><li>这是第二项</li><li>这是第三项</li><li>这是第四项</li><li>这是第五项</li><li>这是第六项</li></ul>HTML常用标签其他标签1．水平线示例代码如下。<hralign="center"width="100%"size="10"/>默认情况下，水平线是一条贯穿其父容器的线条，用于分隔部分内容，让界面整体布局显得更有层次感。通过设置其size属性，可以设置水平线的高度。2．iframeiframe主要用于在当前页面中显示另外一个页面的内容。3．盒模型盒模型是一种容器元素，本身并不直接显示任何内容，而是用于存放其他元素，特别是应用在页面布局上，比表格布局更加灵活，更加有优势。HTML常用标签其他标签4．特殊符号HTML中的特殊符号如表2-4所示，其中实体名称和实体编号都是在HTML中安全显示特殊符号的方法。HTML常用标签其他标签5．颜色取值在HTML中，颜色值有两种表示方式，一种是使用RGB编码来进行精确的颜色控制，另一种是使用颜色的英文单词来表示。在线计算器项目介绍本实战项目主要完成一个Web页面的计算器布局，在线计算器界面如图2-16所示。在线计算器开发思路1．绘制布局表格2．绘制结果框3．绘制按键在线计算器的按键并不需要使用<inputtype="button">或<button>标签来绘制，一个单元格加上背景，再加入按键的内容，同样可以起到按键的作用。4．设置按键样式按键即单元格，只需要使用<td>标签的bgcolor属性设置其背景色，同时使用<font>标签及其属性设置其显示内容即可。因为各单元格的背景色都是一样的，所以直接对该行设置背景色即可，即使用标签<tr>设置背景色。5．绘制红蓝绿三色小圆点在线计算器代码实现在线计算器利用Cline生成代码1．对接硅基流动因为现在只学习了最基础的HTML，并使用表格进行布局，所以需要在提示词中明确这些基本要求。提示词内容如下。请在当前目录的ai目录下，新建一个calc-1.html文件，并使用HTML+Table的传统的表格方式来布局一个计算器页面。在Cline中输入上述提示词，如图2-18所示。在线计算器利用Cline生成代码2．对接OpenRouter请在当前目录的ai目录下，新建一个calc-2.html文件，并使用HTML+Table的传统的表格方式来布局一个计算器页面。计算器界面设计风格和布局请参考并复制图片中的配色和布局。另外，本代码只能使用HTML标签，不允许使用CSS。在输入提示词后，需要同步上传计算器设计图，如图2-21所示。

蜗牛学苑宣传页项目介绍本实战项目主要完成蜗牛学苑鸿蒙宣传页的布局与美化，其效果如图2-23所示。蜗牛学苑宣传页开发思路通过手绘或绘图工具，对其网页结构进行初步分析。根据对线框图的分析，整个页面布局只需要4张表格，且4张表格均设置绝对的宽度和高度，同时相对于页面主体保持水平居中，且所有表格不需要边框。蜗牛学苑宣传页开发思路（1）为整个页面主体设置一张背景图，使用background属性即可设置背景图像。（2）第一个表格中共有1行6列，为单元格设置相应的宽度，并逐步调整到最

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

温馨提示

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

最新文档

评论

0/150

提交评论