《Web前端开发技术》课件T-第一章_第1页
《Web前端开发技术》课件T-第一章_第2页
《Web前端开发技术》课件T-第一章_第3页
《Web前端开发技术》课件T-第一章_第4页
《Web前端开发技术》课件T-第一章_第5页
已阅读5页，还剩30页未读， 继续免费阅读

下载本文档

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

文档简介

第一章

HTML5基础知识HTML（HyperTextMarkupLanguage）即超文本标签语言。2014年10月HTML的第5版本标准定稿后，现在使用的基本是该版本，简称HTML5。概述1.1文档基本结构HTML文档元素有很多种类型，它们的功能也是多种多样的。HTML5文档有严格文档结构，其中结构元素定义了整个文档结构，划分了HTML文档的层次。文档基本结构1.1.1文档结构元素文档基本结构元素分为<html>元素、<head>元素、<body>元素、<meta>元素等。如：<html>元素由<html>和</html>标签对表示文档基本结构1.1.2文档语义元素HTML5新增了很多新的文档语义元素。文档语义元素能让浏览器更好地读取页面结构，更便于团队开发和维护。常用的文档语义元素包括<header>（头部）、<nav>（导航栏）、<section>（区块）、<article>（主要内容）、<aside>（侧边栏）、<footer>（底部）等。有了语义元素，HTML文档大致可以按图1-2所示设计摆放的块。语义元素不带渲染格式，渲染格式还依赖于CSS或者内联style属性。文档基本结构1.1.3行内元素和块级元素HTML5行内元素在浏览器上显示的时候通常不会以新行开始，如：<b>,<td>,<a>,<img>等元素等。如例1-3块级元素在显示时会另起新行，典型的块级元素如<p>和<div>。如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。<div>元素的一个常见的用途是文档布局，如例1-4.文档基本结构1.2文字排版页面制作时需要对内容进行排版，主要涉及如何在浏览器中输出文本，以及设置文本输出的格式和文本输出的字体，如斜体、黑体字、下加一划线等等。文字排版1.2.1分段在网页进行排版时经常要在HTML5文档中创建自然段，<p>元素是用来创建一个段落。文字排版1.2.1分段在网页进行排版时经常要在HTML5文档中创建自然段，<p>元素是用来创建一个段落。例1-5.文字排版1.2.2换行HTML文档的换行效果必须通过<br>元素实现，<br>用来告诉浏览器在此处创建一个换行符。<br>是一个很简单的元素，它没有结束标签。例1-6.文字排版块引用页面中块引用效果是<blockquote>元素实现，该元素作用是对加入<blockquote></blockquote>之间文本在浏览器中按两边缩进的方式显示出来，如例1-7。文字排版块引用页面中块引用效果是<blockquote>元素实现，该元素作用是对加入<blockquote></blockquote>之间文本在浏览器中按两边缩进的方式显示出来，如例1-7。文字排版1.2.4预定义有时页面中希望出现特定排版格式的内容，如带多层缩进的程序代码，此时使用<pre>元素来对文本进行预处理操作，这使得浏览器上渲染出的内容带预定义格式。例1-8.文字排版1.2.5标题页面中经常需要出现分多级标题排版的情形，HTML语言提供了一系列对文本中的标题进行操作的元素：<h1>……<h6>，即一共有六级标题的标题元素。例1-9.文字排版1.2.6字体在HTML文档中需用特定元素来表示特定的字体形式。<b>元素和<strong>元素用来使文本以黑体字的形式输出；<i>元素和<em>元素用来使文本以斜体字的形式输出；<u>元素用来使文本以下加一划线的形式输出。而<sub>元素则表示内部文本是下标，<sup>元素则表示内部文本为上标，<q>元素则表示内部内容是引用别人的话语，如例1-10所示。文字排版1.3表单制作表单在Web网页中用来让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序进行处理，从而使得Web服务器与用户之间具有交互功能。表单制作1.3.1表单HTML5中使用<form>元素来创建一个表单，也即定义表单的开始和结束位置，在标签对之间的一切都属于表单的内容。<form>标签具有action、method和target属性。例1-11.表单制作1.3.2输入框页面中用户录入信息时，需要使用<input>元素来创建输入框。按input的类型可以为把表单元素分为有文本框、密码框、单选按钮、复选框、图片按钮、文件域、邮箱、网址、数字、滑动条、搜索框等，用户通过指定<input>的type属性。详见表1-1.例1-12，各种<input>的type属性类型使用开发实例。表单制作<input>元素除了type属性之外还有很多其他属性。表1-2.各种<input>元素的属性值用法实例如例1-13所示。

表单制作1.3.3下拉列表和选项用户在固定选项中选择的时候，是由<select>元素和<option>元素来共同完成的。<select>元素来创建一个下拉列表框或可以复选的列表框。<select>和</select>标签对用于<form>和</form>标签对之间。<select>具有multiple、name和size属性。例1-14.表单制作1.3.4文本域页面中经常要录入大段的文字，使用<textarea>元素用来创建一个可以输入多行的文本域，<textarea></textarea>标签对用于<form>和</form>标签对之间。<textarea>具有name、cols和rows属性。例1-15所示。表单制作1.3.5数据列表页面中使用datalist元素来创建数据列表，使得数据列表在页面中可以复用，是辅助表单中文本框输入的，它本身是隐藏的，与表单文本框的list属性绑定，即将list属性值设置为datalist元素的id值。如例1-16。表单制作1.3.5输出框页面中经常需要输出计算结果，使用<output>元素来显示各种不同内容，如输入的值、JavaScript代码执行后的结果等。该元素必须从属于某个表单，或通过属性指定某个表单。如例1-17所示。表单制作1.3.6表单综合案例使用表单做一个用户信息登记页面开发实例。需求分析：使用<input>标签实现图1-19的用户信息登记页面，其中<input>的类型分别有text、number、checkbox、radio等类型，还有下拉框和文本域，必要的时候使用<select>和textarea等标签。例1-18。表单制作1.4表格和列表页面中经常出现表格和列表，两者都经常用来展示数据，或者用来进行页面布局。表格和列表1.4.1表格表格对于制作网页是很重要的，表格主要用于展示页面数据，也有利用表格的规整性进行布局的，现在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。一个HTML表格需要用到<table>元素、<th>元素、<tr>元素、<td>元素等。表格和列表2.表头、行、单元格<th>元素表示表头，<th>和</th>标签对须置于<table>元素内部，在浏览器上输出为表格的一行。如例1-19.表格和列表3.表格应用有时表格用于布局或者在表单中排列组件，不需要边框，一般<table>对齐方式用居中对齐，表单和表单控件就自然美观。具体开发实例如例1-20所示。表格和列表1.4.2列表页面中经常使用到的列表分为序列表和有序列表，分别用<ul>元素和<ol>元素来实现。1.无序列表<ul>元素用于创建一个含项目符号的列表，type属性能够用来设置项目符号的类型，type=”circle”项目符号为空心圆，type=”disc”项目符号为实心圆，type=”square”项目符号为为方块，type=”none”没有项目符号。<li>元素用来创建无序列表的列表项，<li></li>标签对只能在<ul></ul>（或者<ol></ol>）标签对之间使用。如例1-22。表格和列表2.有序列表<ol>元素用于创建一个标有数字的列表。<li>元素也可用来创建有序列表的列表项，<li></li>放在<ol></ol>之间。如例1-23.表格和列表3.自定义列表<dl></dl>用于创建一个自定义列表，<dt></dt>用于创建列表中的上层项目，<dd></dd>用于创建列表中最下层项目，<dt></dt>和<dd></dd>都必须放在<dl></dl>标签对之间。如例1-24.表格和列表4.列表应用列表常用于控制表单的控件摆放，在对要求分行摆放工整的表单，通常使用<ul>和<li>进行控件布局。如例1-25.常见的导航条很多都是使用<ul>和<li>元素完成效果（指的是什么效果），下例就是一个使用<ul>元素和<li>元素来完成导航条的一个例子，并且为了把其做成水平导航条，设置了<a>元素的style属性。如例1-26.表格和列表1.5超链接超链接是互联网赖以生成的一个基本原理，也是HTML语言的最基本的一个功能和特色，正因为有了它，我们对内容的浏览才能够具有灵活性和网络性。HTML语言中以<a>元素生成超链接。超链接的动作是点击该超链接时，页面的转向的页面或者执行的程序，用<a>元素的属性href来表示的。如例1-27.超链接1.6图文混排页面设计中，图文混排情况非常常见，主要通过<img>元素的设置来完成。1.6.1图像导入<img>元素向网页中嵌入一幅图像。从技术上讲，<img>元素并不会在网页中生成图像，而是从网页上链接图像。<img>元素创建的是被引用图像的占位空间。<img>元素有两个必需的属性：src属性

和alt属性。<img>标签的src属性是必需的。它的值是图像文件的URL，也就是引用该图像的文件的绝对路径或相对路径。<img>元素的alt属性指定了替代文本，用于在图像无法显示或者用户禁用

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

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

最新文档

评论

0/150

提交评论