文章目录
本文参考：W3school
HTML 块
HTML元素大概分为两类：
- 一类是块级元素，块级元素在浏览器显示时，会在其前后都加上一行，常见的有<div>,<h1>, <p>, <ul>, <table>
- 另一类是内联元素，内联元素在显示时前后不会加一行，常见的有<b>, <td>, <a>, <img>
块级元素—div
- HTML <div>是一个很重要的(如果有css的话)块级元素，它是用于组合其他HTML元素的容器
- <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
内联元素—span
- HTML <span>是内联元素，可用作文本的容器
- 当与css一同使用时， <span>用于为文本设置样式等
HTML 类
- 在HTML中用class代表类，<p class=“cities”>代表该p属于cities类
- 将不同的HTML部分划分为不同的类，方便我们对不同的类设置CSS样式
- 前面讲到的div可以和类结合起来使用，如<div class=“cities”>此时可以指定css给div中所有元素，如图将两个div划分为同一类并指定css样式
- 将span和class结合使用，如<span class=“red”>，上面已经讲到了为所有class名相同的元素指定css，这里就讲一种只为某种元素的class指定css方法
HTML 布局
网页也可以像杂志、报纸等一样布局
HTML 布局—div
- div因其定位容易，常用于布局工具
- 对div元素id定位需用#+id值
HTML 布局—HTML5
- 后续在HTML5学习笔记里再讲
HTML 响应式web设计
响应式web设计(Responsive Web Design）：
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
- 简单来说，RWD就是让网页内容随网页大小变化而变化
RWD—float
- 在加float之后发现显示出来的网页会随网页大小变化
- css float：float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。若向左浮动，则会直到它碰到边框为止
RWD—Bootstrap
- 需要引入Bootstrap中的css，div以及class需要按Bootstrap中的命名，有点麻烦
- 效果
HTML 框架
- 使用框架可以在同一个浏览器窗口中不止显示一个页面
- 每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
框架的缺点
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
框架结构标签<frameset>
- frameset定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
- 示例
框架标签<frame>
- frame 标签定义了放置在每个框架中的 HTML 文档。
- 通常在frame中src属性中指定html链接
- 示例
注意
- 使用框架时，需要为不支持框架的浏览器添加 <noframes> 标签。
- 不能将<body></body> 标签与<frameset></frameset> 标签同时使用，文字只能嵌套在<body>中，<body>只能嵌套在<noframes>中
- 防止用户拖动边框，在frame中加noresize=“noresize” 如
<frame src="/example/html/frame_a.html" noresize="noresize" />
更多示例
行列混合框架
不可拖动边框
导航框架
HTML 内联框架
内联框架用于在网页中显示网页，效果如图
代码如下，有兴趣的可以试试
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<iframe src="https://blog.csdn.net/Late_whale/article/details/104944097" height="360px" width="50%"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
iframe
基本使用
<iframe src="URL"></iframe>
设置内联网页的宽度和高度，单位可以是像素值也可以是百分比
<iframe src="URL" width="200" height="200"></iframe>
设置边框不可见：将属性frameborder值设为0
<iframe src="URL" frameborder="0"></iframe>
将链接在内联框架中显示，链接的 target 属性必须引用 iframe 的 name 属性
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<iframe src="https://blog.csdn.net/Late_whale/article/details/104944097" height="360px" width="50%"
frameborder="0" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">百度一下</a></p>
</body>
</html>
HTML 背景
- 这里所说的背景是整个网页(body)的背景
- body有两个配置背景的标签，背景可以是颜色或图像
bgcolor
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
<!--将背景设为黑色-->
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
background
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
<!--如果图片和网页不在同一个文件夹需要在前面给出其路径-->
<body background="1.png">
<body background="2.gif">
HTML 脚本
script
- <script> 标签用于定义客户端脚本，比如 JavaScript。
- script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
- 必需的 type 属性规定脚本的 MIME 类型。
利用JavaScript输出简单的hello world
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>
noscript
-
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
-
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
-
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：
示例
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
HTML 头部
head
- <head> 元素是所有头部元素的容器。
- <head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
- 以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
title
- title标签用于定义文档的标题。
- title 元素在所有 HTML/XHTML 文档中都是必需的。
- title 元素的作用：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
style
-
style标签用于为 HTML 文档定义样式信息。
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
link
-
link标签定义文档与外部资源之间的关系。
-
link常用于连接样式表(css)
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
meta
- meta标签提供关于 HTML 文档的元数据。
- 元数据不会显示在页面上，但是对于机器是可读的。
- meta常用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据
- 有些浏览器会根据meta的name、content属性(两者用于描述网页)来索引网页
HTML 字符实体
- 在HTML中有些字符已经被预留来供HTML使用
- 在HTML中不能使用大于’>'小于’<‘，会被当做标签
- 如果需要正确使用HTML预留字符就需要使用到HTML字符实体
常用字符实体
| 效果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ’ | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
HTML URL
- URL（Uniform Resource Locator） 统一资源定位器，也称为网址
- URL 可以是域名，也可以是ip地址
URL的语法规则：scheme://host.domain:port/path/filename
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 baidu.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）
- filename - 定义文档/资源的名称
HTML URL字符编码
- URL 编码会将字符转化为可通过因特网传输的格式
- web浏览器通过URL从web服务器请求界面，URL只能用ASCII码来通过因特网进行发送，而URL常常会含有除ASCII码之外的字符，所以需要转化
- URL编码使用%加两位十六进制数来替换非ASCII码
- URL使用+来代替空格
查看更多URL编码 URL编码
HTML 颜色
颜色是由红色、绿色、蓝色混合而成
颜色值
- 颜色由一个十六进制符号来定义，这个符号由红色、绿色、蓝色的值组成（RGB）
- 每种颜色最小值为0(十六进制：#00)，最大值255(十六进制：#FF)
- 部分颜色效果及其值
颜色名
大多数的浏览器都支持颜色名集合。
HTML 表单
HTML表单用于搜集不同类型的用户输入
form
- form标签用于定义HTML表单
- HTML表单包含表单元素，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等
input元素
- input元素是最重要的表单元素
- input元素有很多类型(后续讲解)
<input type=“text”>
text类型的input元素，常用于文本输入的单行输入
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<input type=“radio”>
radio类型的input元素，用于在有限数量中选择一个
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
<input type=“submit”>
submit类型的input元素，用于定义提交表单的按钮
<input type="submit" value="Submit">
action属性
action属性用于定义提交表单时执行的动作
将用户输入提交(需要点击submit按钮)到action_page.php进行处理的代码如下
<form action="action_page.php">
method属性
method属性规定提交表单时所用的http方法(get/post)
采用get方法
<form action="action_page.php" method="GET">
采用post方法
<form action="action_page.php" method="POST">
get方法
- 不指定action时，默认使用的方法是get
- get方法适用于被动提交表单
- get方法安全性较低，数据在地址栏是可见的
- get方法适合少量数据的提交
post方法
- 安全性较高，数据在地址栏中是不可见的
- post方法适用于正在更新数据时使用
name属性
如果需要输入的数据能正确地被提交，则需为每个字段设置一个name属性
<input type="text" name="lastname" value="Mouse">
此时服务器接受到的信息为lastname=Mouse
fieldset
- fieldset标签用于组合表单中的相关信息
- legend标签用于为fieldset定义标题
HTML 表单元素
input元素
上面已经讲解过了，这里就不在累述
select元素
select元素用于定义下拉列表
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
option元素定义下来列表中的选项，通常列表中的首项默认选中，也可以通过selectd属性来定义选中项
<option value="fiat" selected>Fiat</option>
textarea元素
textarea元素定义多行输入字段（文本域）
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
button元素
button元素定义可点击的按钮
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
HTML 输入类型
输入类型：text
<input type=“text”> 定义供文本输入的单行输入字段
输入类型：password
<input type=“password”> 定义密码字段
输入类型：submit
<input type=“submit”> 定义提交表单数据至表单处理程序的按钮
输入类型：radio
<input type=“radio”> 定义单选按钮
输入类型：checkbox
<input type=“checkbox”> 定义复选框
输入类型：button
<input type=“button”> 定义按钮
HTML input属性
value 属性
value属性规定输入字段的初始值
<input type="text" name="firstname" value="John">
readonly 属性
readonly 属性规定输入字段为只读（不能修改)
<input type="text" name="firstname" value="John" readonly>
disabled 属性
disabled 属性规定输入字段是禁用的被禁用的元素是不可用和不可点击的,不会被提交。
<input type="text" name="firstname" value="John" disabled>
size 属性
size 属性规定输入字段的尺寸（以字符计）
<input type="text" name="firstname" value="John" size="40">
maxlength 属性
maxlength 属性规定输入字段允许的最大长度
最多只能输入10字符
<input type="text" name="firstname" maxlength="10">
HTML 多媒体
- 在web中多媒体指的是音效、音乐、视频和动画
多媒体格式
- 多媒体元素存储在媒体文件中
- 通常通过查看媒体文件扩展名来确定媒体文件的类型，如图片一般是.jpg或.png，视频一般为.avi或.wmv
HTML 对象
object 元素
- <object>的作用是支持 HTML 助手
- <object>用于加载HTML 助手
HTML 助手
- HTML助手也称为插件、辅助应用程序
- 辅助应用程序是可由浏览器启动的程序
- 辅助应用程序可用于播放音频和视频等多媒体元素
HTML 音频
在HTML中播放音频的方法有很多，这里简单介绍几种
<object>
object可用于播放多媒体，用法如下
<object height="100" width="100" data="音频url"></object>
缺陷：
- 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
- 如果用户的计算机未安装插件，无法播放音频。
最简单的播放音频方法
使用雅虎播放器来帮助我们播放音频，它支持很多格式
<a href="音频url">需要显示的文字</a>
<!--下面这句JavaScript必须加-->
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
注意：
- 雅虎播放器会每个多媒体元素提供一个播放按钮
- 当点击该按钮时，会弹出完整播放器
使用超链接
如果网页使用指向多媒体文件的超链接，则大多数浏览器会使用“辅助程序”来播放该文件
<a href="url">Play the sound</a>
内联声音
- 网页中含有声音的称为内联声音
- 最好不要使用内联声音，让用户需要的自己点击播放
HTML 视频
HTML 视频大多和HTML 音频一样
<object>
object可用于播放多媒体，用法如下
<object height="100" width="100" data="视频url"></object>
缺陷：
- 如果浏览器不支持该文件格式，没有插件的话就无法播放该视频。
- 如果用户的计算机未安装插件，无法播放视频。
雅虎播放器
使用雅虎播放器来帮助我们播放视频，它支持很多格式
<a href="视频url">需要显示的文字</a>
<!--下面这句JavaScript必须加-->
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
注意：
- 雅虎播放器会每个多媒体元素提供一个播放按钮
- 当点击该按钮时，会弹出完整播放器
使用超链接
如果网页使用指向多媒体文件的超链接，则大多数浏览器会使用“辅助程序”来播放该文件
<a href="url">Play the sound</a>
内联视频
- 网页中含有视频的称为内联视频
- 最好不要使用内联视频，让用户需要的自己点击播放
