使用Hbuiderx进行代码编写
HTML基础
1、HTML文档编写规范
1、1 HTML页面编码基本规范
1.所有标记均以“<”开始、以“>”结束。
2.根据标记类型，正确输入标记，单个标记最好在右尖括号前加1个斜杠“/”，如换行标记是单标记<br/>，成对标记最好同时输入起始标记和结束标记，以免忘记。
3.标记可以嵌套使用，但不能交叉使用。
4.在HTML代码中不区分大小写。
6.标记中可以设置各种属性，属性值建议用双引号标注起来
7.书写开始与结束标记时，在左尖括号与标记名或与斜杠“/”之间不能留有多余空格，否则浏览器标记不能识别，导致错误标记直接显示在页面上，影响页面美观效果。
8.编写HTML代码时，应该使用锯齿结构，即采用缩进风格，使代码结构清晰，便于理解和分析页面的结构，便于代码后期阅读和维护。
1、2 HTML文档命名规则
1.文档的扩展名为html或者htm，建议统一用html作为文件名的后缀。
2.文档名中只可由英文字母、数字或下划线组成，建议以字母或下划线开始。
3.文档名中不能包含特殊符号，如空格、$、&等。
4.文档名区分大小写。
5.Web服务器主页一般是index.html或default.html。
2、HTML文档结构
基本结构
l HTML 文档由头部 head和主体body 两个部分组成。在头部 <head> 标记中，可定义标题、样式等；在主体 <body> 标记中，可定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。HTML文档以<html>标记开始以</html>标记结束，所有的HTML代码都位于这两个标记之间每个HTML文档都应该有且只能用一个html、head和body标记
3、 头部<head>
3、1 页面标题<title> </title>
基本语法<title>这里就是显示浏览器标题栏的信息 </title>
3、2 元信息<meta>
meta标记用来描述一个HTML网页文档的属性，也称为元信息（meta-information），这些信息并不会显示在浏览器的页面中。例如作者、日期和时间、网页描述、关键词、页面刷新等。该标记位于文档的头部(其属性形式是“名称/值”对)。
<meta>标记 基本语法
<meta name="" content="">
<meta http-equiv="" content="">
<meta>标记最常用的可能就是<meta charset = "utf-8">编码格式为utf-8
4、主体body
主体body是一个Web页面的主要部分，其设置内容是读者实际看到的信息。所有WWW文档的主体部分都是由body标记定义的。在主体body标记中可以放置的是页面中所有的内容，如图片、图像、表格、文字、超链接等元素。
4、1 body标记
基本语法<body>… </body>
语法说明＜body＞是开始标记，＜/body＞是结束标记。两者之间所包括的内容为网页上显示的信息。
4、2 body标记的属性
设置body标记属性可以改变Web页面显示效果。body标记主要属性有
text、bgcolor、background、link、alink、vlink、topmargin、leftmargin。
基本语法<body leftmargin="50px" topmargin="50px"
text="#000000" bgcolor="#339999"
link="blue" alink="white" vlink="red"
background="body_image.jpg">
属性说明
属性
值
描述
text
规定文档中所有文本的颜色。
不赞成使用。请使用样式取代它。
bgcolor
规定文档的背景颜色。不赞成使用。
alink
规定文档中活动链接的颜色。
link
规定文档中未访问链接的默认颜色。
vlink
规定文档中已被访问链接的颜色。
background
URL
规定文档的背景图像。
topmargin
规定文档中上边距的大小
leftmargin
规定文档中左边距的大小
颜色的代码编写有很多种：不区分大小写
1：rgb函数，rgb(R,G,B)，R,G,B取值范围为0~255。
2、rbg函数，rgb(R%,G%,B%)，r，g，b取值范围为0~100%
3、十六进制，#rrggbb或#rgb，取值范围为0~9，A~F，#0f0 = #00ff00;
、
5、 HTML基本语法
标记通常分为单个标记和成对标记两种类型。
5、1标记的类型
1.单个标记
单个标记仅单独使用就可以表达完整的意，最常用的单标记有<br>、<hr>。<br>、<br/>表示换行，<hr>、<hr/>表示水平分隔线。可以加 / 也可以不加 / 这里建议是加 /
2.成对标记
成对标记由开始标记和结束标记两部分组成，必须成对使用。开始标记也称为首标记，告诉Web浏览器从此处开始执行该标记所表示的功能；结束标记也称为尾标记，告诉Web浏览器在这里结束该标记。
基本语法<标记名称>内容</标记名称>
语法说明不允许交叉其中“内容”部分就是要被这对标记施加作用的部分。
<h3><i>这是错误的交叉嵌套的代码</h3></i> ×
<h3><i>这是正确嵌套不交叉的代码</i></h3> √
5、2 属性语法
标记有默认的显示效果
有的标记中可以使用属性，属性可以选择属性值。基本语法<标记名称 属性1=“属性值1” 属性2=“属性值2” … 属性n="属性值n">
属性应在开始标记（首标记）内定义，并且和标记名之间有一个空格分隔。
多个属性与属性值在一个标记中，不同属性之间不需要加分号
有的属性值可以不写，空着的话则为默认值
填写属性值可以加“”也可以不加但是建议加“”
<hr size="3" color="red" align="center">属性和标记名之间有一个空格
6、 注释
HTML代码中添加注释的方法：
<!-- 注释信息 -->基本语法<!-- 显示一个段落 -->
语法说明以左尖括号和感叹号组合开始（<!--），以右尖括号（-->）结束
有<style> ...</style>在头部head的话可以用 /*注释内容 */ 进行注释
7、两个实验例题
1
1.按图所示的效果完成页面设计。3 号标题内容为“天下兴亡,匹夫有责”,文字居中。水平分隔线的粗细为1颜色为#FF3333。img 标记的 src 属性值为imageex-2-ltianxia.jpg、宽度为 350px。段落内容:“天下兴亡，匹夫有责”源自顾炎武的《日知录·正始》中“保天下者,匹夫之贱与有责焉耳矣”一句，后被梁启超精炼为“天下兴亡,匹夫有责”这句话说的是，国家的振兴或衰亡,每一个普通人都负有责任。
要求：
1、3号标题文字居中
2、水平分隔符的各个条件
3、图像宽度
4、段落中有加黑字体，段落的开头有两个空格（图像不太明显）
解决方法
3号标题文字居中HTML代码：<h3 align = "center">天下兴亡匹夫有责</h3>。
水平分隔符的各个条件 <hr size="1" color = "#ff3333"/>。
src选择图片有俩种方式选择:
1、绝对路径从从最上层开始的文件路径（我这里没有通过..但是是可以从绝对路径这里的）
<img src="D:/image-ex-2-1-tianxia.jpg" width = 350px hspace ="400px"/>
2、相对路径从html所写的文件夹找
<img src="image-ex-2-1-tianxia.jpg" width = 350px hspace ="400px"/>
按题目描述加入图片的话图片不会再上述图片这样位置所以我们再img标记中增加一个属性
hspace 其所取得值类型为pixel（像素）作用为定义图片左侧和右侧得空白
段落得标记<p> 空格，这个段落的内容<strong>这里是这个段落被加粗加黑的字</strong></p>
html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>天下兴亡，匹夫有责</title> </head> <body> <h3 align = "center">天下兴亡，匹夫有责</h3> <hr size="1" color = "#ff3333"/><!-- 将图片宽度设置为350px，与左右两侧空白与图片的间距为500px --> <img src="image-ex-2-1-tianxia.jpg" width = 350px hspace ="400px"/> <!-- <img src="D:/image-ex-2-2-tiananmen.jpg" width = 350px hspace ="400px"/> --> <p > “天下兴亡，匹夫有责”源自顾炎武的《日知录·始》中“保天下者,匹夫之殿与有责焉耳矣” 一句, 后被梁启超精炼为“天下兴亡，匹夫有责”。<strong>这句话说的是,国家的振兴或衰亡,每一个普通人都负有 责任。</strong> </p> </body> </html>
2
2. 按图 所示的效果完成页面设计。页面标题为“天安门”,在浏览器窗口中显示标题、水平分隔线、图像和段落。其中网页的背景颜色为#FFFFEE;标题为 h2、水平居中;水平分隔线的粗细为1、颜色为红色;图像为image-ex-2-2-tiananmen,jpg、宽度为 512px。段落内容: 天安门,坐落在中华人民共和国首都北京市的中心、故宫的南端,与天安门广场以及人民英雄纪念碑、毛主席纪念堂、人民大会堂、中国国家博物馆隔长安街相望，占地面积4800 平方米,以杰出的建筑艺术和特殊的政治地位为世人所瞩目。
与第一题基本一致这里就直接给代码了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>天安门</title> </head> <body background="#ffffee"> <h2 align = "center">天安门</h2> <hr size ="1" color ="red"/> <!-- 将图片宽度设置为350px，与左右两侧空白与图片的间距为500px 让图片适当居中--> <img src ="image-ex-2-2-tiananmen.jpg" width ="512px" hspace = "500px"/> <p> 天安门,坐落在中华人民共和国首都北京市的中心、故宫的南端, 与天安门广场以及人民英雄纪念碑、毛主席纪念堂、人民大会堂、中国国家博物馆隔长安街相望， 占地面积4800 平方米,以杰出的建筑艺术和特殊的政治地位为世人所瞩目。 </p> </body> </html>
本人主要是做后端的，这个web前端开发技术是学校开设的课程，写博客是为了日后的复习。如果觉得写得还行，帮助到您的话，希望您能给来个三连，来个小关小注感谢感谢感谢！！！
2313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
