目录
HTML基础框架代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!--这是一个注释
<meta> 标签- 使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
}-->
<title>标题</title>
<base href="基本链接地址" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">定义了文档与外界资源之间的联系,通常用于连接样式表
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>定义了HTML文档的样式文件引用地址,也可以直接渲染样式
<script>用于加载脚本文件</script>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
<font size="字体号">设置字体大小文本</font>
<a href=""></a>这是一个链接
<img src="" width="" height=""/>HTML图像引用
<br>换行
<hr>水平分割线
<!--这是一个注释-->
</body>
</html>
HTML基本框架属性:
- class 为html元素定义一个或多个类名(classname)(类名从样式文件引入),class 属性可以多用 class=" " (引号里面可以填入多个class属性)
- id 定义元素的唯一id,id 属性只能单独设置 id=" "(只能填写一个,多个无效)
- style 规定元素的行内样式(inline style)
- title 描述了元素的额外信息 (作为工具条使用)
HTML的文本格式化属性:
HTML 文本格式化标签
- <b> 定义粗体文本
- <em> 定义着重文字
- <i> 定义斜体字
- <small> 定义小号字
- <strong> 定义加重语气
- <sub> 定义下标字
- <sup> 定义上标字
- <ins> 定义插入字
- <del> 定义删除字
HTML "计算机输出" 标签
- <code> 定义计算机代码
- <kbd> 定义键盘码
- <samp> 定义计算机代码样本
- <var> 定义变量
- <pre> 定义预格式文本
HTML 引文, 引用, 及标签定义
- <abbr> 定义缩写
- <address> 定义地址
- <bdo> 定义文字方向
- <blockquote> 定义长的引用
- <q> 定义短的引用语
- <cite> 定义引用、引证
- <dfn> 定义一个定义项
HTML链接属性
HTML链接
<a href="url">链接文本</a>
HTML 链接 - target 属性
使用 target 属性,你可以定义被链接的文档在何处显示,下面的这行会在新窗口打开文档:
<a href="链接" target="_blank" rel="显示地址">target属性</a>
HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签,书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的,在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
<!--在HTML文档中创建一个链接到"有用的提示部分(id="tips")"-->
<a href="#tips">访问有用的提示部分</a>
<!--或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")"-->
<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>
HTML head属性介绍
标签 描述 <head> 定义了文档的信息 <title> 定义了文档的标题 <base> 定义了页面链接标签的默认链接地址 <link> 定义了一个文档和外部资源之间的关系 <meta> 定义了HTML文档中的元数据 <script> 定义了客户端的脚本文件 <style> 定义了HTML文档的样式文件
HTML 图像属性img
HTML 图像- Alt属性
alt 属性用来为图像定义一串预备的可替换的文本,替换文本属性的值是用户定义的。
<img src="image.gif" alt="Big Boat">
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
HTML 图像- 设置图像的高度与宽度
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度,属性值默认单位为像素:
<img src="image.jpg" alt="Pulpit rock" width="1000" height="1000">
提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
HTML 图像标签
<img> 定义图像 <map> 定义图像地图 <area> 定义图像地图中的可点击区域
图像映射三种代码;
1、矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
HTML 表格标签属性
<table> 定义表格 <th> 定义表格的表头 <tr> 定义表格的行 <td> 定义表格单元 <caption> 定义表格标题 <colgroup> 定义表格列的组 <col> 定义用于表格列的属性 <thead> 定义表格的页眉 <tbody> 定义表格的主体 <tfoot> 定义表格的页脚
HTML 列表标签
<ol> 定义有序列表 <ul> 定义无序列表 <li> 定义列表项 <dl> 定义列表 <dt> 自定义列表项目 <dd> 定义自定列表项的描述
注释:
- ul是unordered lists的缩写 (无序列表)
- li是list item的缩写 (列表项目)
- ol是ordered lists的缩写(有序列表)
- dl是definition lists的英文缩写 (自定义列表)
- dt是definition term的缩写 (自定义列表组)
- dd是definition description的缩写(自定义列表描述)
- nl是navigation lists的英文缩写 (导航列表)
- tr是table row的缩写 (表格中的一行)
- th是table header cell的缩写 (表格中的表头)
- td是table data cell的缩写 (表格中的一个单元格)
HTML无序列表
无序列表使用 <ul> 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试(runoob.com)</title>
</head>
<body>
<h4>无序列表:</h4>
<ul>
<li>141</li>
<li>141</li>
<li>141</li>
</ul>
</body>
</html>
浏览器显示如下:
HTML 有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试(runoob.com)</title>
</head>
<body>
<ol>
<li>12</li>
<li>21</li>
<li>121</li>
</ol>
<ol start="50">
<li>212</li>
<li>121</li>
<li>211</li>
</ol>
</body>
</html>
HTML 自定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML区块属性div ,span
<div> | 定义了文档的区域,块级 (block-level) |
<span> | 用来组合文档中的行内元素, 内联元素(inline) |
HTML表单属性
HTML 表单标签
<form> 定义供用户输入的表单 <input> 定义输入域 <textarea> 定义文本域 (一个多行的输入控件) <label> 定义了 <input> 元素的标签,一般为输入标题 <fieldset> 定义了一组相关的表单元素,并使用外框包含起来 <legend> 定义了 <fieldset> 元素的标题 <select> 定义了下拉选项列表 <optgroup> 定义选项组 <option> 定义下拉列表中的选项 <button> 定义一个点击按钮 <datalist>New 指定一个预先定义的输入控件选项列表 <keygen>New 定义了表单的密钥对生成器字段 <output>New 定义一个计算结果
表单基本示例:
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
表单内置属性:
文本域(Text Fields)
文本域通过 <input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
密码字段(password)
密码字段通过标签 <input type="password"> 来定义:
<form>
Password: <input type="password" name="pwd">
</form>
注意:密码字段字符不会明文显示,而是以星号 * 或圆点 . 替代。
单选按钮(Radio Buttons)
<input type="radio"> 标签定义了表单的单选框选项:
<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>
复选框(Checkboxes)
<input type="checkbox"> 定义了复选框。复选框可以选取一个或多个选项:
<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>
提交按钮(Submit)
<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_form_action.php 文件,该页面将显示出输入的结果。
- 以上实例中有一个 method 属性,它用于定义表单数据的提交方式,可以是以下值:
post:指的是 HTTP POST 方法,表单数据会包含在表单体内然后发送给服务器,用于提交敏感数据,如用户名与密码等。
get:默认值,指的是 HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ?作为分隔符,一般用于不敏感信息,如分页等。例如:https://www.runoob.com/?page=1,这里的 page=1 就是 get 方法提交的数据。
HTML框架
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。
iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度,属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")。
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框,设置属性值为 "0" 移除iframe的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 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>
HTML iframe 标签
<iframe> 定义一个内联的iframe