第二章 HTML基础标签
1、学会使用标签做静态页面；
2、掌握设置标签属性的方法；
3、能够完成静态图文网页的开发；
4、理解注释的目的和意义。
1、学会使用<div><img><font><b><br><textarea><button>等标签定义网页结构；
2、理解标签的style属性，src属性，alt属性以及赋值方法，包括：style，margin，text-align，width，background-image，background-size，background-repeat，background-color，height，display，text-indent，vertical-align等；
1、<div>块标签的使用，即网页结构构建；
2、使用注释，标注网页内容；
3、对<body>标签属性使用及赋值；
4、<img>标签的使用；
5、<font>设置字体大小；
6、将标签统一设置为一行；
7、<b>，<font>，<br>对文章的编辑；
8、<textarea>多行文本框的使用；
9、<button>标签的使用；
1、Windows10操作系统专业版；
2、HBuilderX编程工具；
3、Chrome浏览器。
通过上节课对HTML网页原理和语言的认识和熟悉，这节课我们重点开展静态网页的开发。
所谓静态网页，不是指网页会不会有闪烁，变化等动态效果，而是指网页不能与数据库进行交互。动态网页就是能根据数据库中的数据变化而动态显示的网页。
因此这节课我们的主要内容就是找到一个网页并照着开发出来。
1、需求分析与框架设计
我们可以去找到一个新闻网页或微博网页，下载，复制文字，并设计一下网页架构。
首先我们简单设计一下网页架构，包括欢迎页，文章标题，相关信息，文章内容和回复模块。要求网页有背景，内容清晰规整，能够具有将来实现回复功能的标签。
有了简单设计和需求分析以后，我们开始利用HBuilderX新建网页，设置网页标题。
然后开始使用<div>标签设计结构，结构包括欢迎图，标题，相关信息，文章内容，回复标签。相关内容包括文章权属，发表时间，浏览量。回复模块包括“回复：”字样，多行文本输入框，回复按钮。
同时要设置各部分的实现功能注释。HBuilderX的可以先写注释，然后选择文本右键点击注释/反注释（/），同时也可以选中要注释的内容后利用“Ctrl+/”快捷键进行注释。
图1-2-1 注释/反注释功能
2、背景图设置
我们需要通过<body>标签设置网页的背景图。
现有的HTML标签中，样式标签style属性，通常是一个属性集合或者大属性。很多样式属性都在这个属性下面进行编写和设置。写法是：
style=""
需要注意的是属性集合用“=”赋值属性；其中的子属性用“:”赋值属性。
我们在style属性中利用background-image设置背影的路径位置，采用“url(img/b.jpeg)”写法。这里需要注意的是url就是我们常说的网址，可以放相对地址，类似“img/b.jpeg”，也可以放绝对地址，类似“C://img/b.jpeg”，还可以放网址，类似“https://www.img.com/b.jpeg”。
获取到以后，我们利用background-size属性设置背景图属性，可以使用像素px等，也可以是百分比，这里100%就是根据标签大小定义背景图的大小。通常的写法是“100% 100%”，空格前面100%代表宽，空格后面100%代表高，表示设置背景填满标签。
接下来用background-repeat属性用来设置是拉伸填满，还是重复填满。“no-repeat”表示设置背景拉伸占满空间。
通过这三步设置，即可得到较为满意的背景图设置样式。
3、标签居中及宽度设置
首先进行主题宽度的设置，我们这里使用width属性设置为1200px。表示<body>标签的宽度为1200px。
然后我们要将<body>标签中<div>块元素标签设置为位置居中设置，位置居中采用的代码为：
margin:0px auto;
Margin属性表示标签的外边界的距离，标签最外围到其他标签的距离。前一个数值代表上下，后一个数值代表左右。“0px auto”表示上下外边距为零，没有缝隙，左右外边距自动，根据标签与标签的关系左右等距设置。当然，也可以设计为“10px 20px 30px 40px”表示上外边距为10px，下外边距为20px，左外边距为30px，右外边距为40px。
4、设置各<div>标签的关系
我们利用width属性，height属性和background-color属性设置网页所有<div>标签的相对结构和关系。这里width属性和height属性用来设置<div>标签的宽和高，单位是px等。
background-color属性可以是颜色单词和六位十六进制的代码等，例如：#ffffff，white等。
设置完结构，我们可以清楚看出网页的结构，以及要开发的内容。
5、欢迎图设置
利用<img>标签设置欢迎，与背景图设置不同。<img>标签用src属性表示地址。一般是相对地址或绝对地址。写法为：
src="img/heat.jpg"
因为受限于网速或者服务器地址错误，有时候网页中的会不显示，为了不影响文字内容的显示，<img>标签给出了alt属性，用来在不显示时，显示该的说明信息。写法是：
alt="欢迎图"
同时我们通过style属性设置的宽和高，用的是width属性和height属性。
6、设置题目字体和居中位置
题目居中我们在<div>标签中设置，采用style属性设置text-align为center居中。
并利用<font>标签设置face字体属性，size大小属性，以及color颜色属性。
最后利用<b>标签设置将文字设置为加粗。这里不需要属性的设置。
7、设置多个<div>同行显示
这里要设置多个<div>标签同行显示，利用style属性中display属性的inline-block值，写法为：
style="display: inline-block;"
需要注意的是，每一个要同行显示的标签都要设置。设置之后，标签内部的子标签不用再设置，也同行显示。
8、利用标签属性为文档排版
首先要在文档父标签里设置style属性的text-align属性和text-indent属性。将text-align属性设置为justify，表示文字两端对齐。text-indent属性表示首行紧缩，2em表示两个字符的大小。em单位名称为相对长度单位，1em=16px，16px为浏览器的默认字体大小，相对于当前对象内文本的字体尺寸。代码如下：
style="text-align: justify;text-indent:2em;"
其次利用<font>标签设置文字的字体、大小、颜色。利用<b>标签设置粗体。
同时利用<br>标签进行换行设置。
9、设置回复模块
首先设置模块的居中、宽度，以及内容的居中。代码如下：
style="margin:20px auto; text-align: center; width: 900px;"
其实设置“回复：”、多行文本输入框、提交按钮等三个部分在同行显示，利用display属性的inline-block值。
然后设置“回复：”文字部分设置为向上对齐，利用style属性中的vertical-align属性设置为top值。
接下来，利用<textarea>标签，设置多行文本输入框。其中cols列属性和rows行属性，分别设置行数和列数。具体代码如下：
cols="100" rows="5"
表示文本框每行可以输入100个字符，一共可以输入5行。
最后设置提交按钮，利用<button>标签，标签中文字，即是按钮上显示的文字。
10运行
运行网页，显示全部内容。如果遇到问题再局部调整。如图所示：
图1-2-2 静态网页
1、需求分析，找到一个模拟开发的静态网页作为开发目标，同时确定网页结构；
2、利用HbuilderX新建一个html文件,并修改网页<title>标签；
3、利用<div>标签确定网页结构，并撰写标注；
4、设置整体样式，包括内容主体居中，宽度，颜色，背景图等；
5、利用<img>标签设置欢迎图，以及尺寸、以及不显示时的提示信息；
6、利用<font>设置题目文字和格式，包括：字体、大小、加粗等；
7、学习将多个标签在一行中显示，以及和文字同行显示等；
8、拷贝一段文字进行段落编辑，包括首行紧缩，换行，加粗等；
9、设置回复功能标签，包括“回复：”，多行文本输入框和按钮，以及设置相关行数、列数、顶部对齐等属性。
10、保存，运行，查看网页内容。
1、编写网页时，先构建网页结构，然后再分别构建结构中的内容；
2、编写注释，就是确定开发需求，有助于我们达成开发目标；
3、本课程使用的标签；
标签
说明
<div>
块元素标签，定义网页结构，也是网页功能实现的要素单元；
<img>
标签，用来在网页上显示。
<font>
字体标签，用来设置网页字体的大小、样式、颜色。
<b>
粗体标签，用来加粗网页字体。
<br>
换行标签，用来将网页中的文字换行；
<textarea>
多行文本输入框标签，用来进行多行文字输入和显示的标签。
<button>
按钮标签，用来在网页上构建一个按钮。
4、标签属性及含义。
标签属性
含义
style
是标签的样式类属性，是很多属性的父属性。
margin
元素外边距属性，“20px auto”的意思是上下边距为20px，左右边距为等距自适应。
text-align
内容对齐位置设置。
width
标签宽度属性。
height
标签高度属性。
background-image
标签背景属性。
background-size
背景大小设置。
background-repeat
背景重复平铺设置。
background-color
标签背景颜色设置。
display
显示位置、状态和是否显示设置设置。
text-indent
首行进缩属性
vertical-align
标签对齐设置属性。
1、构建自己的微博网页；
2、尝试模拟网友留言部分。
发表评论 取消回复