HTML 文档中,标题很重要。
HTML 标题
标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
实例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>
[/demo]
注释:浏览器会自动地在标题的前后添加空行。
注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
标题很重要
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
[/demo]
提示:使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释是这样写的:
实例
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
</body>
</html>
[/demo]
注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。
提示:合理地使用注释可以对未来的代码编辑工作产生帮助。
HTML 提示 - 如何查看源代码
您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的?”
如果您想找到其中的奥秘,只需要单击右键,然后选择“查看源文件”(IE)或“查看页面源代码”(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
来自本页的实例
标题
如何在 HTML 文档中显示标题。
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>
[/demo]
隐藏的注释
如何在 HTML 源代码中插入注释。
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
</body>
</html>
[/demo]
水平线
如何插入水平线。
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
[/demo]
HTML 标签 描述
<html> 定义 HTML 文档。
<body> 定义文档的主体。
<h1> to <h6> 定义 HTML 标题
<hr> 定义水平线。
<!--> 定义注释。
一个页面的布局就像一张报纸需要排版,需要分为多个区块。块内为多行逐一排列的文字、图片、超链接等内容,这些区块一般称之为块级标签;而文字、图片、超链接等称之为行级标签。
块级标签显示的外观按“块”来显示,具有一定的高度和宽度,如:<div>、<p>等;
行级标签显示的外观按“行”来显示,类似于文本的显示,如:<img>、<a>等。
1.基本的块级标签
1.1.标题标签<h1>~<h6>
标题标签表示一段文字的标题(主题),并且支持多层次的内容结构,一级标签使用<h1>,二级标签使用<h2>,以此类推。html提供六级,<h1>最大,<h6>最小代码及显示效果如下:
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>标题标签对比</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>
标题标签代码预览
1.2.段落标签<p>
段落标签是表示一段文字内容的,一个段落可以包含多行文字,文字内容将随浏览器窗口的大小自动换行。
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>段落标签</title>
</head>
<body>
<h1>标题</h1>
<p>第一段文字</p>
<p>第一段文字</p>
</body>
</html>
段落标签代码预览
1.3.水平线标签<hr/>
水平线标签显示一条水平线,这个标签比较特殊没有结束标签,直接是用来<hr/>表示标签的开始和结束。
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>段落标签</title>
</head>
<body>
<h1>标题</h1>
<hr/>
<p>第一段文字</p>
<p>第一段文字</p>
</body>
</html>
水平线标签代码预览
2.常用于布局的块级标签
2.1.有序列表标签<ol>
使用<ol>,</ol>(有序列表),<li></li>(列表项)HTML代码如下:
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>有序列表</title>
</head>
<body>
<ol>
<li>第一条数据</li>
<li>第二条数据</li>
<li>第三条数据</li>
</ol>
</body>
</html>
有序列表代码预览
2.2.无序列表标签<ul>
使用<ul>,</ul>(无序列表),<li></li>(列表项)HTML代码如下:
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>无序列表</title>
</head>
<body>
<ul>
<li>第一条数据</li>
<li>第二条数据</li>
<li>第三条数据</li>
</ul>
</body>
</html>
无序列表代码预览
2.3.定义列标签<dl>
使用<dl>(定义列表)<dt> (定义列表中的项目)和 <dd> (列表中项目的描述)HTML代码如下:
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>dl-dt-dd的使用</title>
</head>
<body>
<dl>
<dt>项目名称</dt>
<dd>项目描述的第一行</dd>
<dd>项目描述的第二行</dd>
</dl>
</body>
</html>
定义列标签<dl>代码预览
2.4.表格标签<teble>
使用<teble>,</teble>(表格),<tr>,</tr>(行),<td>,</td>(列)HTML代码如下:
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>table标签的使用</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
</body>
</html>
表格标签代码预览
2.5.表单标签<form>
使用<form>,</form>(表单),<input/>(内容)HTML代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html" ;charset="gb2312">
<title>form的使用</title>
</head>
<body>
<form action="" method="post">
<p>
用户名:
<input name="username" type="text" size="20" />
</p>
<p>
密 码:
<input name="password" type="password" size="20" />
</p>
<input name="submit" type="button" value="登录" />
</form>
</body>
</html>
form标签代码预览
2.6.分区标签<diy>
<diy>标签相当于一个大容器,可以容纳无序、有序列表,表格等标签,也可以容纳图片、文字、标题、段落等内容HTML代码如下:
<html>
<head>
<meta http-equiv="content-type"content="text/html";charset="gb2312">
<title>div的使用</title>
</head>
<body>
<div style="width: 500; height: 300; background-color: aquamarine;">
<p>段落标签</p>
<h1>标题标签</h1>
<ul>
<li>无序列表标签第一行</li>
<li>无序列表标签第二行</li>
</ul>
文字可以直接输入在这里
</div>
</body>
</html>
div标签代码预览
HTML 是一种描述网页语言, 指的是超文本标记语言 (Hyper Text Markup Language)。其中,超文本指的是网页上可以包含图片,视频,连接信息。标记也叫做标签,所以标签书写的是<内容>。语言就是一种交流工具,HTML 是用户与浏览器之间交互工具。
简单说,HTML 是由浏览器解析执行的,它不会将 HTML 标签展示出来,而是会解析 HTML 标签,以特定效果展示出来。
<html>
<head>HEAD</head>
<body>BODY</body>
</html>
可以使用 JetBrains WebStorm 或者 VS Code 进行开发。
<html> 代表当前书写的是一个 HTML 文档
<head> 存储的本页面的一些重要的信息,它不会显示
标签下有一个子标签 <title> 它是用于定义页面的标题的
<body> 书写的内容会显示出来,属性:1. text 用于设置文字颜色;2. bgcolor 用于设置页面的背景色;3. background 用于设置页面的背景图片
<!-- 注释不会在浏览器中显示 -->
br 标签就是一个换行功能标签
在 p 标签中的内容会在开始与结束之间产生一个空白行并且它会自动换行
常用属性 align 的作用是设置段落中的内容对齐方式,可取值有 left right center
hr 标签会在页面上产生一个水平线
常用属性:
align:可取值有 left right center 代表水平线位置
size:代表水平线高度(厚度)
width:代表水平线宽度
color:水平线的颜色
两种方式:
Div 是一个块标签
Div 与 CSS 结合,会更好对页面进行排版
Span 标签也是一个块标签Div 与 span 区别:Div 会自动换行,我们也叫这样的标签为行级元素Span 标签它不会自动换行,我们也叫它为行内元素
Font 标签可以设置字体,字的大小及颜色
常用属性:
Face:用于设置字体,例如 宋体 隶书 楷体
Size:用于设置字的大小
Color:用于设置字的颜色
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。每一种颜色的饱和度和透明度都是可以变化的,用 0~255 的数值来表示。如纯红色表示为 (255,0,0),十六进制表示为 #FF0000。按这种表达方式,理论上我们可以得到 256 * 256 *256=16777216 种颜色。
<h1> 最大 <h6> 最小,它们代表的是标题,可以使用 <b> <i> 对文字设置加粗或倾斜
注意:在 HTML 中允许标签进行嵌套的,但是一般都包裹嵌套,而不可以进行交叉嵌套
有序清单:
<!-- 有序列表 I II III-->
<ol type="I" start="3">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
<!-- 无序列表 -->
<ul type="square">
<li>Java</li>
<li>Python</li>
<li>C#</li>
</ul>
<img> 可以让我们在网页引入一张图片
常用属性
<a> 标签可以实现跳转到其它页面操作。超链接内容不仅可以是文本,也可以是图片等信息
常用属性
<!-- 学习表格标签 -->
<table border="2" align="center" width="400px">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>语文成绩</th>
<th>数学成绩</th>
<td colspan="2" align="center"><b>操作</b></td>
</tr>
<tr align="center">
<td>张三</td>
<td>99</td>
<td>100</td>
<td>修改</td>
<td>删除</td>
</tr>
<tr align="center">
<td>李四</td>
<td>90</td>
<td>66</td>
<td>修改</td>
<td>删除</td>
</tr>
</table>
通过表单可以将要提交的数据提交到指定的位置
<!-- 表单:用户注册案例 -->
<form name="form1" action="user/login" method="POST">
<table border="1" width="64%" align="center">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex" >女
</td>
</tr>
<tr>
<td>地址:</td>
<td>
<select name="province">
<option value="0">--请选择省--</option>
<option value="10001">广东</option>
<option value="10002">上海</option>
<option value="10003">山东</option>
</select> 省
<select name="city">
<option>--请选择市--</option>
<option value="1000301">广州市</option>
<option>深圳市</option>
<option>东莞市</option>
</select> 市
</td>
</tr>
<tr>
<td>编程语言:</td>
<td>
<input type="checkbox" name="language" checked="checked">Java
<input type="checkbox" name="language">Python
<input type="checkbox" name="language">Go
</td>
</tr>
<tr>
<td>照片:</td>
<td>
<input type="file" name="image">
</td>
</tr>
<tr>
<td>自我介绍:</td>
<td>
<textarea name="remark" rows="5" cols="100"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
<input type="reset" value="取消">
</td>
</tr>
</table>
</form>
通过框架标签可以定制 HTML 页面布局
在 HTML 页面上去描述框架信息时,不可以将 <frameset> 写在 <body> 标签中
framesetTest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 框架标签</title>
</head>
<!-- rows 定义了三行:第一行 100 像素,第三行:100 像素;第二行:剩下的像素 -->
<frameset rows="100, * , 100">
<frame name="topModule" src="./top.html"></frame>
<frameset cols="100, * ">
<frame name="menuModule" src="./menu.html"></frame>
<frame name="contentModule" src="./content.html"></frame>
</frameset>
<frame name="footModule" src="./foot.html"></frame>
</frameset>
</html>
top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>top</title>
</head>
<body>
<div>头部信息</div>
</body>
</html>
foot.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>footL</title>
</head>
<body>
<div>底部信息</div>
</body>
</html>
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>menu</title>
</head>
<body>
<div>菜单信息</div>
</body>
</html>
content.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>content</title>
</head>
<body>
<div>内容显示区</div>
</body>
</html>
<meta> 标签必须写在 <head> 标签之间
使用 link 标签来导入 CSS
详情查看菜鸟教程:https://www.runoob.com/charsets/ref-html-ascii.html
DOM, Document Object Model -- 文档对象模型,是 HTML 和 XML 文档的编程接口,以树结构表达 HTML 文档。
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准。
W3C DOM 标准被分为 3 个不同的部分:
DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
HTML DOM 将 HTML 文档视作树结构,这种结构被称为节点树。
节点树中的节点彼此拥有层级关系。常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
HTML DOM 方法是可以在节点(HTML 元素)上执行的动作。
HTML DOM 属性是可以在节点(HTML 元素)设置和修改的值。
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。方法是能够执行的动作(比如添加或修改元素)。属性是能够获取或设置的值(比如节点的名称或内容)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
</head>
<body>
<div id="div1">
<p id="p1">Hello</p>
<p id="p2">Hello</p>
</div>
<script>
// 先获取 P 元素
var element = document.getElementById("p1")
// 直接修改 p 元素的内容
element.innerHTML = "此时已是修改后的内容"
// 修改 p2 标签的样式
var ele = document.getElementById("p2")
ele.style.color="blue"
ele.style.fontFamily="宋体"
ele.style.fontSize="larger"
// 添加元素
// 创建一个p元素
var elementP = document.createElement("p")
// 创建一个内容
var nodeText = document.createTextNode("新加的 P 元素")
// 把文字内容添加到p元素中
elementP.appendChild(nodeText)
// 把新创建的p元素添加div1元素中
var div1 = document.getElementById("div1")
div1.appendChild(elementP)
// 插入添加新的元素
// 创建一个新的元素
var eleP = document.createElement("p")
// 创建一个内容
var noText = document.createTextNode("在 P1 元素前添加的新元素")
// 把文字内容添加到 p 元素中
eleP.appendChild(noText)
// 把新创建的 p 元素添加 div 1 元素中
var parentDiv1 = document.getElementById("div1")
// 获取指定被添加的元素
var p1 = document.getElementById("p1")
// 在元素前添加;参数说明:1.要添加的元素;2.在那个元素之前添加(指定一个元素)
parentDiv1.insertBefore(eleP, p1)
// 删除元素
// 获取父元素
var pdiv1 = document.getElementById("div1")
var removep1 = document.getElementById("p1")
// 使用父元素删除该元素
pdiv1.removeChild(removep1)
</script>
</body>
</html>
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。当事件发生时,可以执行 JavaScript,比如发生用户点击一个 HTML 元素的事件。
如需在用户点击某个元素时执行代码,可以把 JavaScript 代码添加到 HTML 事件属性中:onclick=JavaScript
HTML 事件的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM 事件</title>
<!-- JavaScript 代码必须写在 script 中 -->
<script>
function onLoadFun(){
alert("已载入...");
}
// 文本框失去焦点事件
function onBlurFun(){
alert("此方法是文本框失去焦点事件,用来校验此文本框输入数据的")
}
// 表单被提交时执行事件
function onSubmitFun(){
alert("此表单已提交,这个方法也可以来作为数据校验的");
}
// 元素被改变时触发事件
function onChangeFun(){
alert("文本框元素已输入新的数据")
}
// 当鼠标悬停在某一个元素上时执行的方法
function onMouseOverFun(element){
element.innerHTML = "鼠标已停在H1元素上了"
}
// 当鼠标离开某一个元素时执行事件
function onMouseOutFun(element){
element.innerHTML = "鼠标已离开H1元素上了..."
}
</script>
</head>
<!-- 需求:当页面被载入时,执行一个代码,弹框提示已载入 -->
<body onload="onLoadFun()">
<!-- 需求:在一个表单中有用户名录入的文本框,当输入完文本框的时候进行名称校验,提交的时候弹框显示 -->
<form onsubmit="onSubmitFun()">
用户名:<input id="username" name="username" onchange="onChangeFun()" >
<br/>
<button type="submit">提交</button>
</form>
<!-- 需求:有一个 H1 标签元素,当鼠标移动到 H1 元素上时,修改文字,当鼠标移出元素时执行事件 -->
<h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一个标题</h1>
</body>
</html>
想了解更多,欢迎关注我的微信公众号:Renda_Zhang
*请认真填写需求信息,我们会在24小时内与您取得联系。