HTML学习笔记

来源：互联网发布：mysql数据库分组查询编辑：程序博客网时间：2024/06/05 08:03

2017.03.03
一、什么是 HTML？
HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它不是一种编程语言，而是一种标记语言 (markup language)。
网页也被称为HTML文档，HTML文档包含HTML标签和纯文本，浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

二、HTML标签
HTML标签是由尖括号包围的关键词，比如 <html>；
HTML标签通常是成对出现的，比如 <b> 和 </b>；
标签对中的第一个标签是开始标签，第二个标签是结束标签。

三、HTML链接
HTML 链接是通过 <a> 标签进行定义的，链接的地址在 href 属性中指定。示例如下：

<a href="http://www.w3school.com.cn">This is a link</a>

四、HTML图像
HTML 图像是通过 <img> 标签进行定义的。示例如下：

<img src="D:\HTML\我的照片.jpg" width="104" height="142" />

注意：该标签只有开始标签没有结束标签，尝试将末尾的/去掉或者尝试添加结束标签，结果都是没有问题的。解释是，因为内容为空，空元素在开始标签中进行关闭（以开始标签的结束而结束），形式就是<img />.

五、HTML属性
1. HTML 标签可以拥有属性，属性提供了有关 HTML 元素（指的是从开始标签到结束标签的所有代码）的更多的信息。属性总是以名称/值对的形式出现，比如：name=”value”，在 HTML 元素的开始标签中规定。
2. align=”center”表示的属性是居中，在标题或段落后使用（已淘汰）；bgcolor=”yellow”表示背景颜色，在body后使用（已淘汰）。这些属性将来应该避免使用，使用HTML样式style来替代。
3. 属性值要写在引号内。

六、HTML标题
通过 <h1>-<h6> 等标签进行定义的。<h1>定义最大的标题。<h6>定义最小的标题，标题的前后会自动添加空行。
<hr />标签在 HTML 页面中创建水平线，用来分节。
html注释用<! >写。

七、HTML段落
如果希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签，如：<p>This is<br />a para<br />graph with line breaks</p>。注意区分br和hr。

八、HTML样式
style=”text-align:center”表示居中
style=”background-color:red;” 设置背景颜色
style=”font-family:verdana;color:red”设置字体和字体颜色
style=”font-size:30px”设置字体大小
Q：为何居中属性不能在head标签使用？

九、HTML格式化
1. 用pre标签实现保留编辑时的空格和换行。
2. 在浏览器中，将鼠标移动到略缩词上时，会显示出全拼写来：

<abbr title="etcetera">etc.</abbr>

2017.03.06
一、HTML插入样式
HTML有三种插入样式的方式：外部样式表、内部样式表、内联样式。
1. 外部样式表:用于当样式需要被应用到很多页面的时候，使用外部样式表就可以实现通过更改一个文件来改变整个站点的外观。
2. 内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。比如在head中指定p {margin-left: 20px}，那么在下面的body中定义p段落时就可以不用再重写一遍了，非常方便。
3. 内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性，样式属性可以包含任何 CSS 属性。（这是最基本的方法，但是如果很多元素都是一样的样式，用这种方法就显得麻烦了）

二、HTML超链接
通过使用 <a> 标签在 HTML 中创建链接，分为href 属性和name属性两种建立链接方式。
1. herf属性：创建指向另一个文档的链接。
2. name属性：创建文档内的书签。方法是，首先在 HTML 文档中对锚进行命名（创建一个书签），<a name="tips">一、有用的提示</a>；然后在同一个文档中创建指向该锚的链接，<a href="#tips">第一节</a>。这样，网页上会出现带超链接的“第一节”字样，点击后跳转到“一、有用的提示”章节。（一般创建链接放在创建书签前面）

三、HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义，在tr内写）。表格的表头使用 <th> 标签进行定义，同样在tr标签内写。用border=”1”给表格加上边框。

四、HTML列表
分为无序、有序、自定义列表。
1. 无序列表：始于 <ul> 标签，每个列表项始于 <li> 标签。
2. 有序列表：始于 <ol> 标签，每个列表项始于 <li> 标签。
3. 自定义列表：以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

五、div和span
1. div：定义文档中的分区或节（division/section），块级元素。使用div可以使块元素成为一个具有共同特性的类，用class赋予属性，与CSS配合使用。
2. span：用来组合文档中的行内元素，内联元素。使用div可以使某行部分元素成为一个具有共同特性的类，用class赋予属性，与CSS配合使用。

六、HTML布局
两种方式：第一种，使用<div id = "header">，在前面用CSS定义#header {}就可以；第二种，直接用HTML5中的<header>，在前面用CSS定义header {}就可以。
HTML5中关于布局的有以下几个：
1. header 定义文档或节的页眉
2. nav 定义导航链接的容器
3. section 定义文档中的节
4. article 定义独立的自包含文章
5. aside 定义内容之外的内容（比如侧栏）
6. footer 定义文档或节的页脚
7. details 定义额外的细节
8. summary 定义 details 元素的标题

2017.03.07
一、响应式设计
能够以可变尺寸传递网页，平板和移动设备必需。
CSS的Bootstrap框架：<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

二、HTML框架
通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用方式如下：

<frameset cols="25%,75%">   <frame src="frame_a.html">   <frame src="frame_b.html"></frameset>

frameset是框架结构标签，定义按照怎样的比例进行框架划分，rows/cols 的值规定了每行或每列占据屏幕的面积。
frame是框架标签，定义了放置在每个框架中的 HTML 文档，在src中需要给出html文档的路径。如果不希望框架中各个模块的大小在页面上被改变，在src指定路径后加这个语句：noresize=”noresize”。
注意：不能将 <body> 标签与 <frameset>标签同时使用。

三、内联框架
用于在网页内显示网页：

<iframe src="URL"></iframe>

四、HTML脚本——JavaScript
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。JavaScript 最常用于图片操作、表单验证以及内容动态更新。
解决新老浏览器冲突：

<script type="text/javascript"><!--document.write("Hello World!")//--></script>

上面的代码如果老的浏览器无法读脚本，那么由于 是注释标签而不会直接将其中文字打在屏幕上；对于新的浏览器，如果支持脚本的话，由于 实际是不起作用的，因此可以按JS语法读其中的内容。

五、HTML头部
<head>元素是所有头部元素的容器，<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到头部分：
<title>定义文档标题。
<base>定义页面上所有链接的默认地址或默认目标。
<link>定义文档与外部资源之间的关系，最常用于连接CSS样式表。
<meta>定义关于 HTML 文档的元数据。
<script>定义客户端脚本，如JS。
<style>定义文档的样式信息。

六、HTML字符实体
有些符号是HTML预留的，比如大于小于号作为标签的一部分，如果想用大于小于号，需要用到字符实体。
常用的如下：
空格  
小于号<<
大于号>>
和号&&
乘号××
除号÷÷

2017.03.08
一、HTML URL
1. URL: Uniform Resource Locator统一资源定位器，也称为网址。
2. URL格式：scheme://host.domain:port/path/filename
解释：
scheme - 定义因特网服务的类型，最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）
filename - 定义文档/资源的名称
3. http 超文本传输协议——以 http:// 开头的普通网页，不加密。
https 安全超文本传输协议——安全网页，加密所有信息交换。
ftp 文件传输协议——用于将文件下载或上传至网站。

二、HTML文档类型
<!DOCTYPE html> ：声明是HTML5版本写的。

三、HTML快速参考——日常使用
查阅地址：http://w3school.com.cn/html/html_quick.asp

四、XHTML介绍
XHTML指可扩展超文本标记语言，是XML+HTML的组合。
与 HTML 相比最重要的区别：
1. 文档结构：
XHTML DOCTYPE 是强制性的
<html>中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的
2. 元素语法
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
3. 属性语法
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化(简写)也是禁止的

五、HTML表单（很重要）
1. HTML表单用于搜集不同类型的用户输入，<form> 标签内的form元素定义了HTML表单。
2. 表单属性:

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

解释：
accept-charset：规定在被提交表单中使用的字符集（默认：页面字符集）。
action：规定向何处提交表单的地址（URL）（提交页面）。
autocomplete：规定浏览器应该自动完成表单（默认：开启）。
enctype：规定被提交数据的编码（默认：url-encoded）。
method：规定在提交表单时所用的 HTTP 方法（默认：GET）。
name：规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate：规定浏览器不验证表单。
target：规定 action 属性中地址的目标（默认：_self）。
3. HTML表单包含表单元素，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。先介绍select和botton元素。
<select>元素：定义下拉列表。
示例：（selected表示预选项）

<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected>Fiat</option><option value="audi">Audi</option></select>

<button>元素：定义可点击的按钮。
示例：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<input> 元素：最重要的表单元素，根据不同的输入类型介绍。
（1）text类型：<input type="text">定义供文本输入的单行输入字段。
（2）password类型： <input type="password">定义密码字段。
（3）submit类型：<input type="submit">定义提交表单数据至表单处理程序的按钮。处理程序就是action中地址指向的内容。
（4）radio类型：<input type="radio">定义单选按钮。（checked表示预选项）
（5）checkbox类型：<input type="checkbox">定义复选框。
（6）botton类型：<input type="button">定义按钮。（与botton元素的区别？）
（7）number类型：<input type="number"> 用于应该包含数字值的输入字段。可以通过min和max给出数字范围。
<input>元素属性：
（1）value属性：规定输入字段的初始值。
（2）readonly属性：规定输入字段为只读（不能修改）。
（3）disabled属性：规定输入字段是禁用的。（显示灰色）
（4）size属性：规定输入字段的尺寸（以字符计）。
（5）maxlength属性：规定输入字段允许的最大长度。

2017.03.09
一、HTML5简介
1. HTML5 中默认的字符编码是 UTF-8：<meta charset="UTF-8">
2. HTML5 的一些最有趣的新特性：
新的语义元素，比如 <header>, <footer>, <article>, and <section>。
新的表单控件，比如数字、日期、时间、日历和滑块。
强大的图像支持（借由 <canvas> 和 <svg>）
强大的多媒体支持（借由 <video> 和 <audio>）
强大的新 API，比如用本地存储取代 cookie。
3. HTML5中frame、frameset、noframes已经被删除。

二、HTML5新元素
<article>定义文档内的文章。
<figure>定义自包含内容，比如图示、图表、照片、代码清单等等。
<header>定义文档或节的页眉。
<nav>定义文档内的导航链接。
<section>定义文档中的节。
<canvas>定义使用 JavaScript 的图像绘制。
新的媒介元素：
<audio>定义声音或音乐内容。
<embed>定义外部应用程序的容器（比如插件）。
<source>定义 <video>和<audio>的来源。
<track>定义<video>和<audio>的轨道。
<video>定义视频或影片内容。

三、HTML5 canvas
canvas 元素用于在网页上绘制图形，使用步骤如下：
1. 创建 canvas 元素:

<canvas id="myCanvas" width="200" height="100"></canvas>

表示创建了名为myCanvas的元素，接下来用JS进行绘画。
2. 通过 JavaScript 来绘制：

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

0 0