简介
网页
- 网站是因特网上, 使用HTML等制作的用于展示特定内容的网页集合.
- 网页是网站中的一"页", 通常是HTML格式的文件, 它要通过浏览器来阅读.
- 网页是构成网站的基本元素, 由图片, 链接, 文字, 声音等元素组成, 网页常以.htm或.html后缀结尾的文件, 故俗称HTML文件.
HTML
- HTML是超文本标记语言, 来描述网页的信息.
- 它不是编程语言, 而是标记语言(一套标记标签)
- 超文本
- 可以加载图片, 声音, 动画等.
- 可以从一个文件跳转到另一个文件(超级链接文本)
网页的形成
- 网页是由网页元素组成, 利用html标签描述, 再被浏览器渲染形成.
浏览器
- 浏览器内核(渲染引擎): 负责读取网页内容, 整理讯息, 计算网页的显示方式并显示页面.
Web标准的构成
- 结构: 用于对网页元素进行整理和分类.
- 表现: 用于设置网页元素的版式, 颜色, 大小等外观样式.
- 行为: 指网页模型的定义及交互的编写.
- 结构, 样式, 行为相分离.
语法规范
基本语法
- HTML标签由尖括号包围的关键词, 如<html>
- 标签通常成对出现, 如<html></html>, 称为双标签
- 还有一些特殊的单标签, 如<br />
标签关系
- 包含关系
<head>
<title>HelloWorld</title>
</head>
- 并列关系
<head></head>
<body></body>
HTML结构
- 结构图
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
</body>
</html>
- 骨架标签
- <html></html> 页面中最大的标签, 称为根标签.
- <head></head> 文档的头部
- <title></title> 文档的标题
- <body></body> 文档的主体, 页面内容基本都放到body中
- 文档类型声明
- <!DOCTYPE html>
- 作用是告诉浏览器使用html5来显示网页.
- 必须写在最前面
- lang语言种类
- 字符集
- 在<head>标签内, 通过<meta>标签的charset属性来规定.
标签
标题标签
- 从h1到h6六个等级
<h1>一级标题</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显.</h2>
<h3>由小到大依次减,</h3>
<h4>从重到轻随之变.</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果刷新见.</h6>
- 特点
- 加了标题的文字会变粗, 字号也逐渐变大.
- 一个标题独占一行.
段落标签
- 在网页中, 要把文字有条理显示出来, 就要把这些文字分段显示, <p>标签用于定义段落, 它可将整个网页分为若干个段落.
- 特点
- 文本会根据浏览器窗口大小自动换行.
- 段落和段落之间保有空隙.
换行标签
- 是个单标签, 强制换行
文本格式化标签
- 在网页中, 有时需要为文字设置粗体, 斜体, 下划线等.
<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>
<div>标签和<span>标签
- 没有语义, 就是个盒子, 来装内容.
<div> div单独占一行, 大盒子 </div>
<span> 一行能放多个, 小盒子 </span>
图像标签和路径
- <img>用于定义HTML页面中的图像
- src是<img>的必须属性, 用户指定图像文件的路径和文件名
<img src="1.jpg" alt="小明"" title="鼠标放在图片上" width="121" height="140 />
目录与路径
- 目录文件夹和根目录
- 目录文件夹: 普通文件夹, 存放了相关素材.
- 根目录: 目录文件夹的第一层.
- 相对路径
- 以引用文件所在位置为参考基础, 而建立出的目录路径.
同一级路径 <img src="1.jpg" >
下一级路径 <img src="images/1.jpg" >
上一级路径 <img src="../1.jpg" >
- 绝对路径
- 目录下的绝对路径从盘符开始的路径
- 或者完整的网络地址
超链接标签
- <a>标签用于定义超链接, 作用是从一个页面链接到另一个页面.
- 语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
- 属性作用
- href用于指定链接目标的url地址, 是必须属性.
- target用于指定链接的打开方式, _self为默认值(当前窗口打开), _blank(新建窗口打开)
- 链接分类
- 外部链接: 目标url地址必须以http://或https://开头.
<a href="https://www.baidu.com target="_self"> 百度一下</a>
- 内部链接: 网站内部页面之间的相互链接, 直接链接内部页面名称即可.
<a href="index.html"> 首页</a>
- 空链接: 暂时没有确定链接目标
- 下载链接: 如果href里边地址是一个文件或压缩包, 会下载这个文件.
特殊字符
- HTML页面中, 一些特殊符号很难直接使用, 此时要用下面字符来代替.
-
表格标签
- 表格的主要作用: 用来显示, 展示数据, 因为它可以让数据显的非常规整, 可读性非常好.
- 基本语法
- <table></table>用于定义表格的标签.
- <tr></tr>用于定义表格中的行, 必须嵌套在<table>中
- <td></td>用于定义表格中的单元格, 必须嵌套在<tr>中.
- <th></th>表头单元格内容加粗并居中显示
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>文字11</td>
<td>文字12</td>
</tr>
<tr>
<td>文字21</td>
<td>文字22</td>
</tr>
</table>
列表标签
- 主要作用
- 表格是来显示数据的, 而列表是用来布局的.
- 列表最大的特点就是整齐, 有序, 作为布局会更加自由, 方便.
- 可分为三大类: 无序列表, 有序列表, 自定义列表.
- 无序列表
- <ul>标签表示无序列表, 而列表项使用<li>标签定义.
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
- 注意
- <ul>标签中只能使用<li>标签, 直接在<ul>中放其他标签或文字是非法的.
- <li>中可以放任何东西.
- 有序列表
- <ol>表示有序列表, 列表中使用<li>定义.
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
表单标签
- 作用: 收集用户信息, 网页中, 也需要跟用户进行交互, 收集用户资料, 此时需要表单.
- 表单的组成: 一个完整的表单由表单域, 表单控件(表单元素)和提示信息三部分构成.
- 表单域: 是包含表单元素的区域
- 作用
- <form>标签用于定义表单域, 以实现用户信息的收集和传递.
- <form>标签会把它范围内的表单元素信息提交给服务器.
- 语法格式
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
- 常用属性
- 表单控件
- 这些表单元素就是允许用户在表单中输入或选择的内容控件
- 三种
- input: 输入表单元素
- select: 下拉表单元素
- textarea: 文本域表单元素.
- input表单元素
- <input>标签中, 根据type属性不同的属性值, 输入字段有多种形式
- type的属性值
- 其他属性
- name: 自定义表单的名字(单选按钮和复选框要有相同的name值)
- value: 自定义input元素的值
- checked="checked" 规定次input元素首次加载时应被选中(主要针对单选按钮和复选框)
- maxlength="正整数": 规定输入文本框中最大字符长度.
<form action="#" method="post">
用户名: <input type="text" name="username" value="请输入用户名" />
性别: 男<input type="radio" value="man" name="sex" checked="checked"/> 女<input type="radio" value="woman" name="sex"/>
爱好: 吃饭<input type="checkbox" value="eat"/> 睡觉<input type="checkbox" value="sleep"/> 打豆豆<input type="checkbox" value="beat"/>
<input type="submit" value="提交"> <input type="reset" value="重置"/>
</form>
- select下拉表单元素
- 页面中, 若有多个选项让用户选择, 想要节约页面控件, 使用<select>标签控件定义下拉列表.
<select>
<option>选项1</option>
<option selected="selected">选项2</option>
...
</select>
- 注意
- <select>中至少应包含一对<option>
- 在<option>中定义selected="selected"时, 当前选项为默认选项
- textarea文本域元素
- 当用户输入内容较多时, 就不能使用文本框了, 要使用<textarea>标签
- <textarea>标签用于定义多行文本输入空间, 常见留言板, 评论等.
<textarea row="3" cols="20">
文本内容
</textarea>
- label标签
- <label>标签为input元素定义标注.
- <label>标签用于绑定一个表单元素, 当点击<label>标签内文本时, 浏览器会自动将光标转到对应表单元素上, 以此增加用户体验.
- <label>标签中for属性应对应<input>标签中id属性
<label for="tex" /> 用户名: <input type="text" id="tex" />
<label for="man" /> 男 </label> <input type="radio" id="man" />