提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
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>