学习如何构造页面结构和内容

  • 安装HBuilderX
  • 一、HTML
  • 创建第一个HTML页面
  • 写完html后如何测试
  • 写在body中的常见标签有哪些？
  • 注释快捷键 Ctrl+Shift+/
  • 1.文本相关标签
  • 2.列表标签
  • 3.图片标签img
  • 4.超链接a
  • 5.表格table
  • 6.表单form
  • 7.分区标签
  • 8.实体引用(类似特殊字符)


安装HBuilderX
  • 从doc.canglaoshi.org网站中找到 常用下载->windows->HBuilder X
  • 或从官网下载下载后 解压到某个可以找得到的地方 双击运行HBuilderX.exe
  • 第一次关闭提示是否创建快捷方式 点击 是
  • Ctrl+M 显示项目管理器 在左侧空白区域右键->新建->项目
  • 在项目上右键新建目录day01

一、HTML

  • Hyper Text Markup Language: 超文本标记语言
  • 超文本： 不仅仅是纯文本还包括：字体效果（大小，颜色，风格等）和多媒体信息（图片、音频、视频）
  • 标记语言： 由一对尖括号组成，有单标签 和双标签xxx
    双标签之间的内容成为标签体,写在开始标签里面的键值对称为属性
  • 和XML不同点： XML是可扩展标记语言，标签可以随意写没有任何规范
  • 学习HTML主要学习的就是有哪些HTML标签 以及标签和标签之间的嵌套关系
创建第一个HTML页面
  • 页面结构：
<!DOCTYPE html> 文档声明：告诉浏览器使用html的哪个版本的标准解析页面，此写法是告诉浏览器使用html5的标准解析页面
  <html> 根标签： 页面中级别最高的标签
  	<head> 头标签：给浏览器看的内容写在头标签里面 
  		<meta charset="utf-8"> 告诉浏览器页面内容使用的字符集是utf-8
  		<title></title>页面标题
  	</head>
  	<body> 体标签：给用户看的内容写在体标签里面
  		
  	</body>
  </html>
写完html后如何测试
  1. 在HBuilder窗口右上角点击预览 第一次点击会提示是否下载 点击 是， 如果下载失败重试几次
  2. 在HBuilder菜单栏中点击运行-》运行到浏览器-》Chrome （前提是已经安装了Chorme浏览器）
    从苍老师文档服务器中 找到 Chrome浏览器 下载
写在body中的常见标签有哪些？
注释快捷键 Ctrl+Shift+/
1.文本相关标签
  1. 内容标题h1-h6
    字体加粗，独占一行，自带上下行间距
  2. 段落标签p
    独占一行，自带上下行间距
  3. 水平分割线hr
  4. 换行br 在html中回车只能识别成一个空格 如果需要换行使用br标签
  5. 加粗b 斜体i 小字small
  6. 删除线s 下划线u
2.列表标签
  1. 无序列表
<ul type="square"><!-- unordered list -->
 	<li>刘备</li><!-- list item列表项 -->
 	<li>关羽</li>
 	<li>孙尚香</li>
 	<li>诸葛亮</li>
 	<li>刘禅</li>
 </ul>
  1. 有序列表
<ol type="1" start="10" reversed="reversed"> 
 	<li>打开冰箱门</li> 
 	<li>把大象装进去</li>
 	<li>关上冰箱门</li>
 </ol>
  1. 列表嵌套： 有序和无序可以任意无限嵌套
3.图片标签img
  • 支持的图片格式： jpg/jpeg, png, gif
  • src图片路径：
    相对路径：访问站内资源时使用
  1. 和页面同级目录： 直接写图片名
  2. 在页面的上级： …/图片名
  3. 在页面的下级： 文件夹名/图片名
    绝对路径：访问站外资源时使用，访问站外资源又称为图片盗链（好处：可以节省本站资源，坏处：有可能会找不到图片）
  • width/height:设置图片的宽高
    两种赋值方式:1. 像素 2. 上级元素的百分比
    如果只设置宽度,高度会等比例缩放
  • title: 鼠标在图片上悬停时显示的文本
  • alt: 图片不能正常显示时显示的文本
4.超链接a
  • href: 资源路径, 使用方式类似src,支持相对路径和绝对路径, 如果访问的资源浏览器支持浏览则直接浏览如果浏览器不支持浏览则触发下载
  • 图片超链接: 用a标签包裹图片就是图片超链接
  • 页面内部跳转: 在目的地标签里面添加id=“xxx”, 在点击的超链接中href="#xxx" 即可跳转到页面中id为xxx的元素位置
5.表格table
  • 标签: table tr表示行 td表示列 th表头(加粗并且居中) caption表格标题
  • 属性: table:border边框 cellspacing单元格间距 cellpadding单元格距内容的距离 td:colspan跨列rowspan跨行
6.表单form
  • 作用:用于获取用户输入的信息,并且将信息提交到服务器
  • 学习表单就是学习表单中有哪些控件
  • 文本框
<input type="text" name="username" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" >
  • 密码框
<input type="password" name="pwd" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" >
  • 单选
<input id="xxx" type="radio" name="xxx" value="xx" checked="checked">
  <label for="xxx">xxxx</label>
  • 多选
<input id="xxx" type="checkbox" name="xxx" value="xx" checked="checked">
  • 日期
<input type="date" name="xxx">
  • 文件
<input type="file" name="xxxx">
  • 文本域
<textarea name="xxx" cols="20" rows="5" placeholder="xxxx"></textarea>
  • 下拉选 city=bj
<select name="city">
  	<option value="bj">北京</option>
  	<option>xxxx</option>
  	<option>xxxx</option>
  </select>
7.分区标签
  • 分区标签可以理解成是一个容器,对多个有相关性的标签进行统一管理
  • 常见的分区标签div和span
  1. div:块级分区元素, 特点:独占一行
  2. span:行内分区元素,特点:共占一行
  • 如何对页面内容进行分区?
    一个页面至少分为三大区: 头 体 脚, 每个大区内再细分n个小的区域
<div>头</div>
  <div>体</div>
  <div>脚</div>
  • html5标准中新增了分区标签,作用和div是一样的 主要是为了提高代码的可读性,包括: header头 footer脚 article正文 nav导航 section区域
<header></header>
  <article></article>或<section></section>
  <footer></footer>
8.实体引用(类似特殊字符)
  • 空格: 如果html页面中连续出现多个空格,只能识别出一个,这个现象称为空格折叠现象. 如果需要显示多个空格使用以下内容进行转义  （& nbsp）
  • 小于号: <（& lt；）
  • 大于号: > （& gt；）