在线web工具
html教程-w3
html教程-runoob
范仁义
《零基础入门学习Web开发》(HTML5&CSS3)-视频-小甲鱼 配套资料 html5速查宝典-小甲鱼
Tips:
- HTML = Hyper Text Markup Language 超文本标记语言；
- 查看网站：
- 查看网页源代码：未解析的源代码，即服务器发送到浏览器的原封不动的代码；
- 检查：右击网页空白处或者某处某具体内容均可，看到的是经过JS渲染后的代码，即最终展示的效果所对应的的代码；
- 检查：右击网页空白处，选择Network，然后刷新网页，即可看到不同网站的加载各个对象的耗时；
- 注释：
- HTML：<!-- 记得在此处添加html注释信息 -->
- CSS：/* 记得在此处添加CSS注释信息 */，只有这一种注释，不管是多行注释还是单行注释，不管是内嵌到HTML(style标签里面)还是单独的CSS文件
- JS：// 单行注释，/* 多行/整段注释*/ ，这个和arduino(C/C++)的注释一样
- 换行和空格：
- <br/> 表示(强制)换行，Line Break，应该是类似word的软回车，wordpress模式下，似乎不能用多个<br/>实现空行；
- <p></p> 表示空一行；
- <p> </p> 表示空两行，这是在wordpress中的回车换行；
- 不换行空格non-breaking space；
- 行内元素里面的内容连续换行再多，连续空格再多，最后都在网页显示为一个空格；
- <hr/>表示水平线(分割线)，比如上面的那条线在text模式下可以找到；
- 非成对出现的标签，比如<br/>、<hr/>，去掉/是不那么规范的写法，不过可以接受，不影响显示；
- 本文编辑的时候，文本中可能需要\符号来转义某些小内容，以避免转成html后出现错误。
- 浏览器忽略了源代码中的排版(省略了多余的空格和换行)
- html5中用id，不用name属性?
字体：
- 【Monospaced font】 (等宽字体)：是指字符宽度相同的电脑字体。 东亚语言中，方块字基本上都作为等宽字体处理，如各个地区的汉字、日语假名的全形字符、韩语谚文音节等字符都是等宽的。
- 【Proportional font】 (比例字体)：是指字符不同则宽度不尽相同的电脑字体，代码编辑器、命令行／虚拟终端等纯文字接口也会用等宽字体以便对齐，有利阅读代码文字，尤其在显示比例过窄、小字体接口上不易分辨的字符。
- 语义与呈现分离；
缩写:
- a—Anchor ([ˈæŋkər]⚓超链接)
- alt—Alternative
- dd—Description Details element
- dl—Defined List
- dt—Description Term
- dd—Definition Description
- em—Emphasis
- h—Heading (h+数字n表示n级标题)
- hr— Thematic Break (Horizontal Rule) (主题分割（水平分割线）)
- href—Hypertext Reference (超文本引用)
- i—Italic
- li—List Item
- ol—Ordered List
- p—Paragraph
- q—Quote
- px—Pixel
- src—Source
- td—Table Data Cell Cell
- th—Table Header Cell
- tr—Table Row
- ul—Unordered List
- nbsp—Non-breaking Space
速查列表
🖹HTML 基本文档
下面的<!DOCTYPE> declaration是html5的，写法相较html4.0.1更简单。
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
可能
<b>粗体文本</b>
<strong>重要的文本-粗体</strong>
<!-- 二者都可以用来加粗，bold表示物理状态，而strong表示逻辑状态(语义上的强调)，建议用CSS替代-->
<i>斜体文本</i>
<em>强调文本-斜体</em>
<!-- 二者都是设置斜体，但是em有语义上的强调，建议用CSS替代-->
<u>下划线</u>
<ins>插入的文本-下划线</ins>
<!-- 二者都是添加下划线，但是ins有语义上插入文本的含义，建议用CSS替代-->
<s> 给文字添加删除线 </s>
<del> 删除的文本-添加删除线 </del>
<!-- 二者都是添加删除线，但是<s>represent things that are no longer relevant or no longer accurate
<del>有语义上删除的含义-->
<sub> (下标文本)
<sup> (上标文本)
<!-- 不能同时上标+下标，更复杂的情形比如latex建议用CSS替代-->
<small>更小的文本</small>
<big>更大的文本</big>
<!-- 建议用CSS的font size属性替代-->
<pre>预格式化，此处文本所见即所得</pre>
<code>计算机(短)代码</code>
<pre><code>计算机(长)代码，这就是我此时代码展示用的方法</code></pre>
<!-- 用处不大，如果为了展示代码视觉效果，
code有语义化，建议尖括号双引号用字符实体代替，建议用CSS-->
<!-- 额外三个和编程有关的元素 -->
<p>上面代码定义了一个变量<var>user_input</var>,用于接收用户的输入。</p>
<p>如果用户输入的是<kbd>user_input</kbd>,
那么程序将打印<samp>你最喜欢吃的水果是：香蕉</samp></p>
<!-- 注：kbd键盘输入，默认monospace字体显示-->
<q>短引用，添加引号</q>
<blockquote>块状引用，我的wordpress也有用到，需要配合css</blockquote>
<abbr>CSS</abbr>(语义，缩写，此处CSS = Cascading Style Sheets)
<abbr title = "鱼C工作室">FishC.com</abbr>
<dfn>HTML</dfn> (用于表现定义中的术语，HTML是一门xx标记语言)
<address>定义文档的作者/所有者的联系信息</address>
<cite>表示一个作品的引用，且必须包含作品的标题</cite>
<mark>标记，加背景颜色</mark>
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="万一图像不能正常显示的替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
🖼️图片(Images)
<img>没有结束标签，所以称为"空标签"。
<img src="URL" alt="替换文本" height="42" width="42">
样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
<ul>
<li>项目</li>
<li>项目</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
基本格式
标题的背景和居中、字体颜色尺寸修改，推荐的style属性来实现html样式，附录：[不赞成使用的标签和属性]
<!--这里是使用推荐的style属性来实现html样式-->
<body style="background-color:PowderBlue;text-align:center">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
<!--段落字体、颜色、尺寸、位置的控制-->
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;text-align:center">A paragraph.</p>
</body>
<!--XXXXXXXXXXXXXXXXXXXXXXXXXX下面的方法是不推荐的老用法XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<body bgcolor="yellow";
align="center"
color="orange">
<h2>请看: 改变了颜色的背景。</h2>
</body>
我的网站上面的menu就是利用列表来实现的。
有序列表还有三个常用的属性：
- reversed，降序编号；
- start，规定ol编号的起始值；
- type，规定ol编号的标记类型，比如1、A、a、Ⅰ、i 等；
<!--无序列表-->
<ul>
<li>coffee</li>
<li>tea</li>
<li>coakcola</li>
</ul>
<!--有序列表-->
<ol>
<li>coffee</li>
<li>tea</li>
<li>coakcola</li>
</ol>
<!--定义列表-->
<!--一(多)个术语对应一(多)条解释或定义, 序号dt元素和dd元素来配合实现-->
<dl>
<dt>Web前端简介</dt>
<dd>HTML（超文本标记语言）</dd>
<dd>CSS（层叠样式表）</dd>
<dd>JavaScript（脚本语言）</dd>
</dl>
<dl>
<dt>C语言中文网</dt>
<dd>HTML教程</dd>
<dd>CSS教程</dd>
<dd>JavaScript教程</dd>
</dl>
- src表示图片来源，可以是本地电脑，也可以是网络服务器；
- 高度和宽度的单位默认是px，可以省略；
- title是鼠标放在图片上显示的文字；
- alt是图片无法显示的时候作为替代显示的文字；
(图片作为超链接的用法见“插入超链接”；另外还有<map>标签定义图像地图；<area>定义图像地图中的可点击区域，参考这里 )
<img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Feynman_at_Los_Alamos.jpg"
width ="200"
height ="200"
title="这是C语言中文网的logo"
alt="这是C语言中文网的logo"
/>
- target 属性：
- "_blank" 单击之后在新的标签页打开，比如单击下面两个链接看看区别；
- "_top" 单击之后在原标签页跳转；
- 还有其他属性，我暂时不用理会，参考这里；
- 另外还有创建电子邮件链接，这里不介绍了。
<!--target="_blank"表示在点击之后在新的标签页打开/target="_top"当前页面跳转-->
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<!--用图片作为超链接-->
<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
</p>
<!--锚tips保证了二者的联系-->
<a href="#tips">有用的提示</a>
<a name="tips">基本的注意事项 - 有用的提示</a><!--似乎这里用id替换name也行-->
- 默认情况下，浏览器会对表头单元格，也就是th元素里面的内容进行加粗、居中的处理；
- td里面的元素，可以是文本、图像、列表、或另一个表格；
- HTML5中最基本的边框都需要CSS来实现，否则默认没有边框，这里还是提现的语义与实现分离的精神；
- 浏览器会自动根据内容的长度来调整单元格的尺寸；
<!--border展示的是边框，数值为零，就没有框；
cellpadding是设置内容距离边框的远近，
caption设定了表格的标题。tr中row,th中header,td中data，-->
<!--横排-->
<table border="1"
cellpadding="10">
<caption>Rich people information</caption>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Country</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>USA</td>
</tr>
</table>
<!--竖排-->
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
这里也可以用CSS来设置格式，参考小甲鱼视频如下：
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px
}
capation{
padding: 10px;
}
</style>
<!--border-collapse: collapse 让框线合并-->
附加例子(利用菜鸟工具展示行/列的合并)
head的六个标签元素
title> 元素:
- 定义了浏览器工具栏的标题；
- 当网页添加到收藏夹时，显示在收藏夹中的标题；
- 显示在搜索引擎结果页面的标题；
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
base> 元素：标签作为HTML文档中所有的链接标签的默认链接，即设定链接的相对地址(relative URLs)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<base href="//www.runoob.com/images/" target="_blank">
</head>
<body>
<img src="logo.png">
- 注意这里我们设置了图片的相对地址。
能正常显示是因为我们在head部分设置了base标签，
该标签指定了页面上所有链接的默认URL，
所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<a href="//www.runoob.com">菜鸟教程</a>
- 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。
因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="icon" href="favicon.ico" />
</head>
<style type="text/css">
body {background-color:yellow}
h1 {color: red}
p {color: blue}
a {color: yellow;
background: black;
}
</style>
<!--注意h1后面有个空格;a对应的是body中的超链接-->
HTML 中的 meta 标签有以下几种常见用处：
- SEO
- 描述页面内容：通过 meta 标签中的 "description" 属性，简要描述页面的内容，帮助搜索引擎了解页面的主要内容；
- 关键词：通过 meta 标签中的 "keywords" 属性，为页面提供关键词，帮助搜索引擎识别页面的主题；
- 作者：即author，这里不赘述；
- 🕷️搜索引擎抓取：通过 meta 标签中的 "robots" 属性，指示搜索引擎是否爬取页面；
- 编码设置：通过 meta 标签中的 "charset" 属性，声明页面使用的字符集(一般UTF-8)，便于浏览器正确显示页面内容(不出现乱码)；
- 📱移动设备适配：通过 meta 标签中的 "viewport" 属性，设置页面在移动设备上的显示效果；
- 页面刷新：通过 meta 标签中的 "refresh" 属性，设置页面自动刷新的时间间隔；
这些都是 meta 标签的常见用处，但它还有其他很多用途，如设置页面的创建日期、设置页面的语言、与第三方元数据协议等。
<!--SEO搜索引擎优化，帮助网站被百度、谷歌等搜索到-->
<head>
<meta name = "keywords" content = "小甲鱼web开发，html5,CSS3编程教学">
<meta name = "description" content = "《零基础入门Web学习》，案例实践，内容精彩，百度索引赶紧收了我吧">
<meta name = "author" content = "小甲鱼">
</head>
<!--固定编码格式，保证在网络服务器上也能正常解码-->
<head>
<meta charset="UTF-8">
</head>
<!--屏幕(终端)显示自适应-->
<head>
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<!--等待30秒之后，自动跳转到百度的官网-->
<head>
<meta http-equiv = "refresh" content = "30; http://baidu.com">
</head>
<!--XXXXXXXXXXXXX以上四个功能可以整合到一个head里面XXXXXXXXXXXXXXXX-->
- 内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。
- 内联样式表：当特殊的样式需要应用到个别元素时采用这种方法，优先级最高。
<!--外部样式表-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<!--内部样式表-->
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
<!--效果一样，去掉第一个style里面的type-->
</head>
<!--内联样式(优先级最高)-->
<body>
<h1 style="text-align:center;font-family:verdana;">居中对齐的标题</h1>
<p style="color: red; margin-left: 20px;">
This is a paragraph
</p>
</body>
块(级)元素-block element：它占据父元素(容器)的整个水平空间和等于其内容高度的垂直空间，从而创建一个"区块"
- 独占一行，自动换行；
- 以块的形式展现，相邻的块元素在不同的行显示；
- 占据全部的宽度；
- <div>、<p>、<<h1>、<ul>都是块；
内联元素(行内元素)：
- 不会换行；
- 只会占用必要的宽度(大小)；
- 相邻的元素在同一行显示(代码是否在两行不影响)；
- <a>、<<img>、<input>等都是内联元素；
二者对比：
- 一般情况下，行内元素只能包含数据和其他行内元素；
- 一般情况下，行内元素只能包含数据和其他行内元素；
- 这种结构上的包含继承区别可以使块级元素创建比行内元素更"大型"的结构。
<!--文档中的一个区域将显示为蓝色-->
<body>
<p>这是一些文本。</p>
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<p>这是一些文本。</p>
</body>
<!--使用 <span> 元素对文本中的一部分进行着色-->
<body>
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
</body>
首先需要明白，创建高级布局是非常耗时，推荐使用网上免费的网站模板，然后根据自己的需求优化。另外推荐在布局中使用CSS，如果将其放在外部样式表，那么站点更易维护。 可以使用块级元素<div>或者<table>来实现多列布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。下面只展示如何使用<
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
<iframe>标签，而<frameset>和<frame>用得少，一般用<
例子-2：(点击RUNOOB.COM超链接会在当前页面的一个独立框中显示内容，参见)
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
实际效果如下
RUNOOB.COM (点击该链接，上面的框架就会显示www.runoob.com网站的内容)
<script> 标签：标签用于定义客户端脚本，比如 JavaScript。该标签元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。关于<noscript>就不介绍了，现在的浏览器很少有支持这个的。JavaScript 最常用于图片操作、表单验证以及内容动态更新，下面是其三个简单的应用展示。
最常用的例子，比如一个网页要支持mathjax，那么直接添加<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>即可。
<!--普通内容输出--> <!--<script type="text/javascript">,也就是说指定JS，不加也能运行？-->
<script>
document.write("Hello World!");
</script>
<!--鼠标点击触发事件-->
<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我</button>
<!--处理 HTML 样式-->
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
字符实体
这是为了解决两个问题：一是打出键盘上不存在的字符；二是避免将文本内容和代码之间混淆。具体例子如下：
- 大于号和小号，容易和标签元素的括号混淆，所以用 < 和 > 来替代，比如查看我的代码展示的text会发现一定用到这些字符实体。
- © 等同于 ©
格式如下：scheme://host.domain:port/path/filename
http://www.runoob.com/html/html-tutorial.html
- scheme - 定义因特网服务的类型。最常见的类型是 http，还有其他如https，ftp(文件传输协议)；
- host - 定义域主机（http 的默认主机是 www）；
- domain - 定义因特网域名，比如 runoob.com；
- :port - 定义主机上的端口号（http 的默认端口号是 80）；
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）；
- filename - 定义文档/资源的名称。