提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
HTML CSS
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部
<head>
区域使用
<style>
元素 来包含CSS
外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在
<head>
部分通过
<style>
标签定义内部样式表:
代码如下（示例）：
<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>
HTML图像
在 HTML 中，图像由
<img>
标签定义。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
<img src="boat.gif" alt="Big Boat">
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素:
<img>
定义图像
<map>
定义图像地图
<area>
定义图像地图中的可点击区域
HTML 表格
HTML 表格由
<table>
标签来定义。
tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。
<table>
元素表示整个表格，它包含两个主要部分：
<thead>
和
<tbody>
。
<thead >
用于定义表格的标题部分: 在
<thead >
中，使用
<th >
元素定义列的标题，以上实例中列标题分别为"列标题1"，“列标题2"和"列标题3”。
<tbody >
用于定义表格的主体部分: 在
<tbody >
中，使用
<tr >
元素定义行，并在每行中使用
<td >
元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
HTML 表格还可以具有其他部分，如
<tfoot >
（表格页脚）和
<caption >
（表格标题），
<tfoot >
可用于在表格的底部定义摘要、统计信息等内容。
<caption >
可用于为整个表格定义标题。
HTML列表
<ol>
定义有序列表
<ul>
定义无序列表
<li>
定义列表项
<dl>
定义列表
<dt>
自定义列表项目
<dd>
定义自定列表项的描述
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以
<dl>
标签开始。每个自定义列表项以
<dt>
开始。每个自定义列表项的定义以
<dd>
开始。
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
HTML区块
<div>
定义了文档的区域，块级 (block-level)
<span>
用来组合文档中的行内元素， 内联元素(inline)
<div>
是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
<span>
是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：
<!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>
HTML表单
HTML 表单用于收集用户的输入信息。
<form>
元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法
<label>
元素用于为表单元素添加标签，提高可访问性。
<input>
元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联
<label>
元素，name 属性用于标识表单字段。
<select>
元素用于创建下拉列表
<option>
元素用于定义下拉列表中的选项。
多数情况下被用到的表单标签是输入标签
<input>
。输入类型是由 type 属性定义。
type属性：文本域通过
<input type="text">
标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
密码字段通过标签
<input type="password">
来定义
<input type="radio">
标签定义了表单的单选框选项:
<form action=""><input type="radio" name="sex" value="male">男<br><input type="radio" name="sex" value="female">女
</form>
<input type="checkbox">
定义了复选框
复选框可以选取一个或多个选项：
<form><input type="checkbox" name="vehicle[]" value="Bike">我喜欢自行车<br><input type="checkbox" name="vehicle[]" value="Car">我喜欢小汽车
</form>
<input type="submit">
定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
<form name="input" action="html_form_action.php" method="get">Username:<input type="text" name="user"><input type="submit" value="Submit"></form>
HTML框架
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。frameborder 属性用于定义iframe表示是否显示边框。
iframe 可以显示一个目标链接的页面
目标链接的属性必须使用 iframe 的属性，如下实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>
版权归原作者 小罗要暴富 所有， 如有侵权，请联系我们删除。