上海营销型网站设计希爱力
一,HBuilder
–1,使用
直接解压就可以用,
创建项目: 直接点击 新建项目,输入项目名和选中项目存放位置,创建.
创建资源: 选中项目,右键,新建…
二,HTML
–1,概述
是超文本标记语言,专门用来制作网页的.
超文本: 网页中可以包含各种类型的元素.包括: 文字,数字,符号,图片,音频,视频…
标记语言: 是一个独特的语言,有独特的语法. 由大量的标记来描述的一门语言…
网页文件的后缀名: .html / .htm
–2,入门案例
<!-- 这是HTML的注释,这行用来作为文档声明行,声明这是一个HTML文档 -->
<!DOCTYPE html>
<!-- HTML是由大量标记组成,有开始标签和结束标签 -->
<html><!-- head用来描述网页的属性 --><head><meta charset="utf-8"> <!-- 设置网页的编码--><title>html</title><!-- 设置网页的标题 --></head><!-- body用来控制浏览器即将展示的内容 --><body>hello html~hello html~ <br/> <!-- br是换行,自闭标签-->hello html~ <!-- 是空格 --></body>
</html>三,HTML的常用标签
–1,标题标签
在网页中插入一些标题元素(居中,字号加大)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用标签</title></head><body><!-- hbuilder的常用快捷键:复制粘贴ctrl c/v剪切ctrl x--><!-- 1.标题标签 h1大~h6小,自动换行,字体加粗 --><h1>31省份新增本土确诊41例 陕西35例</h1><h2>31省份新增本土确诊41例 陕西35例</h2><h3>31省份新增本土确诊41例 陕西35例</h3><h4>31省份新增本土确诊41例 陕西35例</h4><h5>31省份新增本土确诊41例 陕西35例</h5><h6>31省份新增本土确诊41例 陕西35例</h6></body>
</html>–2,列表标签
在网页中加入列表效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用标签</title></head><body><!-- 2.列表标签: 有序无序,列表项自动换行 --><h3>热搜榜</h3><!-- 2.1 无序列表:使用ul+li , unorderlist+list --><ul> <li>31省份新增本土确诊41例 陕西35例</li><li>稳住农业基本盘做好三农工作</li></ul><!-- 2.2 有序列表:使用ol+li , orderlist+list --><ol> <li>31省份新增本土确诊41例 陕西35例</li><li>稳住农业基本盘做好三农工作</li></ol></body>
</html>–3,图片标签 & 超链接标签
在网页中加入图片元素
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用标签</title></head><body><!-- 练习:做一个能被点击的图片 --><a href="https://www.baidu.com"> <img src="3.jpg"/> </a><br /><!-- 4.超链接 href属性用来让超链接可以被点击,也可以指定点击的跳转网址target属性用来让指定超链接的打开方式,默认是_self当前窗口打开_blank是用新窗口打开--><a href="#">百度一下</a> <br /><a href="https://www.baidu.com/" target="_blank">百度一下</a> <br /><!-- 4.2.锚定:从一个位置回到指定的另一个位置 --><a name="top">我是顶部</a><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><h1>北京富婆通讯录</h1><a href="#top"> ^ </a> <br /><!-- 3.图片标签: 同行展示多个图片src属性用来指定图片位置/路径(如果图片和网页文件在同级文件夹可以直接写图片名称)width属性用来指定图片的宽度,单位是像素pxheight属性用来指定图片的高度,单位是像素px--><img src="3.jpg" width="30%" height="800px"/><img src="3.jpg"/><img src="3.jpg"/></body>
</html>–4,Input标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用标签</title></head><body><!-- 1.input标签,表示输入框 -->普通的输入框: <input type="text"/> <br />密码输入框: <input type="password"/><br />数字输入框: <input type="number"/><br />日期输入框: <input type="date"/><br />星期输入框: <input type="week"/><br />单选框: <input type="radio"/>男 <br />多选框: <input type="checkbox"/>吃饭 <br />普通按钮:<input type="button" value="保存"/><button>注册</button><br />提交按钮:把用户在浏览器输入的数据,提交给后端的java程序来处理<input type="submit" value="保存"/><button type="submit">保存</button></body>
</html>