<!DOCTYPE html>
<html>
---------------------------标题部分---------------------------------
<head>
<meta charset="utf-8">
<title> 网页名称 </title>
<base> - 定义了所有链接的URL默认的链接目标地址
<link rel="stylesheet" type="text/css" href="mystyle.css">---------链接到外部样式表
<style type="text/css"> ---------直接添加样式来渲染 HTML 文档
body {background-color:yellow}
</style>---------以上定义了该页面的标签的样式
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">------------为搜索引擎定义关键词
<meta name="description" content="Free Web tutorials on HTML and CSS">----------------为网页定义描述内容
<meta name="author" content="Hege Refsnes">------------定义网页作者
<meta http-equiv="refresh" content="30">-------------每30秒中刷新当前页面
</head>
-------------------------------网页内容-----------------------------
<body>
<h1> 一级标题标签 </h1> ---------其他的如：<h2> 二级标题 </h2>
<p style="color:blue;margin-left:20px;"> 段落标签 </p> ---------段落，使用内联样式
-------------------------链接及图片---------------------------------
<a href="http://www.XXX.com" target="_blank" style="text-decoration:none;" >这是一个链接</a> ---------链接，在新标签中打开，样式：无下划线链接
<img src="w3cschool.png" width="104" height="142" alt="school"> ---------图像，alt 属性用来为图像定义一串预备的可替换的文本
-------------------------换行及水平线------------------------------
<br /> ---------换行
<p>这个<br>段落<br>演示了分行的效果</p>
---------水平线
<q>引用标签</q>----------------显示效果： “引用标签”
--------------------------列表与表格（具体内容见后面补充）--------------
<table border="1">---</table>----------
<tr><td>普通单元格</td></tr>----------用<th>替换<td>即为表头单元格
<ul>-------------无序列表，有序列表为<ol>，其他不变
<li>XXX</li>---------单项内容
</ul>
---------------------------块元素------------------------------
<div id="X" style="X"> 元素，一个常见的用途是文档布局，与 CSS 一同使用可用于对大的内容块设置样式属性
<span id="X" style="X"> 元素，当与 CSS 一同使用时，可用于为部分文本设置样式属性。-----------一般id=container/header标题/menu菜单/content内容/footer脚注
---------------------------表单(具体见后面内容)-----------------------
<form action="">
XXX: <input type="text" name="xxx"><br>
</form>
----------------------------其他显示框------------------------
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>------------------在同一个浏览器窗口中开辟一个框，显示另一个页面
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>---------------链接的target为iframe_a，即链接内容在iframe框架中显示
------------------------------web颜色------------------------------
216 种 Web 安全色作为 Web 标准被建议使用，使用格式为： #000000
或者直接使用规定的颜色名，如：Blue 对应 #0000FF
--------------------------脚本(具体见后面内容)------------------------
<script>
document.write("<h1>这是一个标题</h1>")------直接作为页面内容输出
</script>
---------------------------特殊定义-----------------------------
- 特殊符号：如< > 等等有固定的输入，如： © 等同于 ©
</body>
</html>
<b> 加粗</b> 或者使用： <strong> 加粗 </strong>
<big> 放大 </big>
<small> 缩小 </small>
这个文本包含 <sub>下标</sub> ----------数学符号a2 a<sub>2</sub>
这个文本包含<sup>上标</sup>------------数学符号X的平方 X<sup>2</sup>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> ---------显示效果：blue：删除，red:插入（删除文字中间划线，插入文字下划线）
----------
利用pre标签进行文本格式化（控制空格和换行）：
<pre>含空格 文本区域</pre>----------显示效果在网页中也将有空格和换行
- 在HTML中添加 id：————–帮助链接到文档中的特定部分
<a id="tips">有用的提示部分</a>
<a href="#tips">访问有用的提示部分</a>
<a href="http://www.runoob.com/html/html-links.html#tips">
从另外一个页面访问有用的提示部分</a>
--------------------head当中定义默认链接目标地址------------
<base> - 定义了所有链接的URL默认的链接目标地址
示例：<base href="//www.runoob.com/images/" target="_blank">
<body>
<img src="logo.png">该图片的访问地址为"https://www.runoob.com/images/logo.png"
<a href="//www.runoob.com">链接会在新窗口打开,等于添加了target="_blank"
-------------------------链接样式---------------------
<a href="http://www.XXX.com" target="_blank" style="text-decoration:none;" >这是一个链接</a> ---------链接，在新标签中打开，样式：无下划线链接
<a href="//www.runoob.com/html/html-tutorial.html"><img border="0" src="smiley.gif" alt="XXX" width="32" height="32"></a>-------无边框的图片链接
------------------------邮箱链接-------------------------
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送邮件</a>------------电子邮件链接，注意: 单词之间空格使用 %20 代替
--------------------------图片链接----------------------------
<a href="//www.runoob.com/html/html-tutorial.html"><img border="0" src="smiley.gif" alt="XXX" width="32" height="32"></a>-------无边框的图片链接
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<link rel="stylesheet" type="text/css" href="mystyle.css">---------链接到外部样式表
<style type="text/css"> ---------直接添加样式来渲染 HTML 文档
body {background-color:yellow}
h1 {color:red;}
p {color:blue;}
</style>---------以上定义了该页面的body h1 p标签的样式
<p style="color:blue;margin-left:20px;">链接</p>
<h2 style="background-color:red;">这是一个标题</h2>--------直接在标签中使用内联样式 ，格式："XXX:xxx;XXX:xxx……"；
属性可以用到：使用background-color定义背景色
---使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式
---text-align（文字对齐）属性指定文本的水平与垂直对齐方式
<table border="1" cellpadding="10" cellspacing="10">--------------
<tr>
<th>Header 1</th>----------表头（横向，也可以竖向，总之注意好th,td的位置摆放关系就好）
<th>Header 1</th>
</tr>
<tr>
<td>row 1, cell 1</td>----------单元格
<td>row 1, cell 1</td>
</tr>
</table>
<th colspan="2">Telephone</th> -------跨两列的横向表头
<th rowspan="2">Telephone:</th>-----------跨两行的竖向表头
每个单元格内同样可以包含其他标签
<ul>-------------无序列表，有序列表为<ol>，其他不变
<li>XXX</li>---------单项内容
</ul>
----------设定列表样式-----
<ol type="X">---------有序可以设定方式：type="A"：ABC；type="a"：abc；type="I"：罗马数字序列；type="i"：小写罗马数字序列；
<ul style="list-style-type:xxx">-----------无序列表可以设定方式：style="list-style-type:disc":圆点列表---circle:圆圈列表---square:正方形列表
<ul>-----------嵌套列表-----------------------
<li>Coffee</li>
<ul> -------------内部的嵌套
<li>Black tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<dl>--------------自定义列表-----------------
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">-----------发送邮件
-------------------------输入框------------------------------
First name: <input type="text" name="firstname"><br>-----text:默认宽度为20个字符
Password: <input type="password" name="password">--------密码字段：字符是隐藏的(显示为星号或圆圈)
<input list="browsers" name="browser">-------输入框（带下拉）
<datalist id="browsers">--------------下拉的可能输入值（根据输入调整）
<option value="Internet Explorer">
<option value="Firefox">
</datalist>
--------------------------下拉框------------------------------
<select name="cars">------------------下拉列表
<option value="volvo">Volvo</option>-----下拉选项
<option value="fiat" selected>Fiat</option>--------可选：设为预选项
<select>----------------选择框
<optgroup label="Swedish Cars">-------------把相关的选项组合在一起
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">------------------相关选项
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<textarea rows="10" cols="30">文本框</textarea>--------文本框区域
------------------------------按钮---------------------------------
<input type="radio" name="sex" value="male">Male<br>----------单选按钮：同name只能选一个
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>--------------------复选按钮，同name可选多个
<input type="submit" value="Submit">--------提交按钮
<input type="button" value="Hello world!">----------按钮
<input type="reset" value="重置">--------------重置按钮
</form>
-------------------------带边框的form表单--------------------------
<form action="">
<fieldset>--------------------定义了一组相关的表单元素，并使用外框包含起来
<legend>标题：</legend>------------- 定义了 <fieldset> 元素的标题
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
</fieldset>
</form>
------------------------实时输出结果表单-----------------------------
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100--------带滚动条默认从0~100内的值
+<input type="number" id="b" value="50">---------数值输入框
=<output name="x" for="a b"></output>---------------输出结果
</form>
<script>
document.write("<h1>这是一个标题</h1>")------直接作为页面内容输出
</script>
<noscript><p>抱歉，你的浏览器不支持 JavaScript!</p></noscript>--------------------------只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容
---------------------------定义脚本函数----------------------------
<script>
function myFunction()-------------脚本函数点击后显示"Hello JavaScript!"
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我！</button>
---------------------------另一个例子：----------------------------
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()------------------点击后将字体变为红色
{
x=document.getElementById("demo")
x.style.color="#ff0000";
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
扫一扫
1061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
