从零开始学前端之HTML（三）
提示：文章写完后，目次可以主动生成，如何生成可参考右边的帮助文档文章目次
[*]HTML CSS
[*]
[*]内联样式
[*]内部样式表
[*]外部样式表
[*]HTML图像
[*]HTML 表格
[*]HTML列表
[*]HTML区块
[*]HTML表单
[*]HTML框架
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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]