HTML基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 这是title</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
- HTML 标签通常是成对出现的，比如 <b> 和 </b>，第一个标签是开始标签，
- 部分标签在开始标签中进行关闭，如：<br />
格式化
| 标签 | desc |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <del> | 定义删除字 |
属性
| 属性 | desc |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
- 在某些情况下，比如属性值本身就含有双引号，那么必须使用单引号，如：name='John "ShotGun" Nelson'
head头部标签元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
| 标签 | desc |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题，添加收藏夹标题，显示在搜索引擎结果页面的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
其他
<!-- 这是一个注释 -->
XHTML 是以 XML 格式编写的 HTML，是更严格更纯净的 HTML 版本，得到所有主流浏览器的支持
常用标签
<a> 超链接标签
HTML使用标签 <a>来设置超文本链接。
<a href="http://www.runoob.com#id_field" target="_blank">跳转锚点</a>
<a id="id_field">我是锚点</a>
请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.runoob.com/html/"。
img 标签
<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"/></a>
</p>
<!-- alt 是占位文本 -->
假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
表格 table
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
image
| 标签 | desc |
|---|---|
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
列表
无序列表使用 <ul> 标签，每个列表项始于 <li> 标签。无序列表使用 <ol> 标签
<ol type="A">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ol>
区块 div span
大多数 HTML 元素被定义为块级元素或内联元素。
- 块级元素在浏览器显示时，通常会以新行来开始（和结束）。
<h1>, <p>, <ul>, <table> - 内联元素在显示时通常不会以新行开始。
<b>, <td>, <a>, <img>
div
<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
span
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
表单
HTML 表单用于收集不同类型的用户输入。
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form action="demo-form.php">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
<input type="checkbox" name="vehicle" value="Bike" checked="checked">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
Password: <input type="password" name="pwd">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
<input type="reset" name="button" id="button" value="重置">
<input type="submit" value="提交">
</form>
script
JavaScript 使 HTML 页面具有更强的动态和交互性。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
<script>
document.write("Hello World!")
</script>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点我Hello</button>
<script>
function myFunction(){
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击改变样式</button>
其他
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
CSS
CSS修饰标签的样式
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
# 内联
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
# 内部样式表
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
# 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML5
DOM（文档对象模型）
image
网友评论