小白学网页之 HTML之相逢标签

最新推荐文章于 2022-01-17 20:51:08 发布

xor0ne_10_01

最新推荐文章于 2022-01-17 20:51:08 发布

阅读量149

点赞数

分类专栏：书中不求甚解

本文链接：https://blog.csdn.net/weixin_43901038/article/details/89483882

版权

书中不求甚解专栏收录该内容

35 篇文章 3 订阅

订阅专栏

第九周：

和

（2）、定义一个列表

6、定义表格

7、全局属性和事件属性

（1）、全局属性

（2）、事件属性：

【1】、HTML（超文本标记语言）：

（0）、序言

1、编辑器的推荐

可以使用专业的 HTML 编辑器来编辑 HTML，这里是菜鸟教程中为大家推荐几款常用的编辑器：

Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
VS Code：https://code.visualstudio.com/

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

2、编辑时的注意点

注意：（1）、对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

（2）、在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

（3）、总是给 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。

（4）、使用 W3C 的验证检查您是否编写了一个带有正确 DTD 的合法的 HTML / XHTML 文档！

（5）、没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

（1）、基础标签

<!DOCTYPE html>

声明为 HTML5 文档，不是一个 HTML 标签，它是用来告知 Web 浏览器页面使用了哪种 HTML 版本；声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。doctype 声明是不区分大小写的，

通用声明：

HTML5：HTML5 不是基于 SGML，因此不要求引用 DTD。

<!DOCTYPE> 声明不区分大小写。，标签没有结束标签。

<!DOCTYPE html>

HTML 4.01：在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
<a>元素定义一个链接，“href”属性定义链接地址
<img>元素定义一个图像，图像的名称和尺寸是以属性的形式提供的。
<abbr> 标签用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。提示：在某些浏览器中，当您把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时，<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本
<mate>标签提供HTML的元数据，元数据不会显示在客户端，但是会被浏览器解析，常用于指定网页的描述，

关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

（2）、标签功能

1、基础（格式）

<!DOCTYPE html>
<!--定义文档类型-->
<html><!--定义一个HTML文档-->
	<head><!--定义文档头部部分-->
		<meta charset="utf-8">
		<title></title>
	</head>
	<body><!--定义文档主体-->
	<h1>第一大标题<abbr title="The Big title">TBt</abbr></h1><!--<h1>to<h6>定义HTML标题-->
	<p>定义<b>一个</b><i>段落</i></p>
	<!--<b>定义一个粗体（与<em>有点类似）<i>定义一个斜体<p>定义一个段落-->
	定义一个<br><del>折行</del><br><!--<br>定义换行<del>定义一个删除线-->
	定义页面<hr><u>水平线</u><!--<hr>定义一个水平线<u>定义一个下划线文本-->
	
	</body>
	<footer>
	<p>Posted by: Hege Refsnes</p>
	<p><time pubdate datetime="2012-03-01"></time></p>
	</footer>
	
</html>

运行结果：

2、表单<form>

（1）、表单初接触

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下</title>
	</head>
	<body>
		
	<form action="demo-form.php">
	First name: <input type="text" name="FirstName" value="Mickey"><br>
	Last name: <input type="text" name="LastName" value="Mouse"><br>
	<!--<input>定义一个输入控件-->
	<input type="submit" value="提交1">
	</form>
	<p>点击"提交1"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>
	
	<button type="button" onclick="alert('你好，世界!')">点我!</button>
	<p>点击"点我"页面将会跳出框显示”你好，世界“</p>
	<!--<button>定义一个按钮，在 <button> 元素内部，您可以放置内容，比如文本或图像。
	请始终为 <button> 元素规定 type 属性
	注释(d)：如果在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的按钮值。
	请使用 <input> 在 HTML 表单中创建按钮。-->
	
	<p>请输入你的出生日期：</p>
	<select>
        <optgroup label="90后">
		<option value="1999">1999</option>
		<option value="2000">2000</option>
        <optgroup label="00后">
		<option value="2001">2001</option>
	<!--<select> 元素用来创建下拉列表。
	<select> 元素中的 <option> 标签定义了列表中的可用选项。
    <optgroup> 标签经常用于把相关的选项组合在一起-->
	
	
	</select>
	</body>
</html>

运行结果：

（2）、表单再接触

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form action="demo-form.php" method="get">
		<input list="browsers" name="browser">
		<datalist id="browsers">
			<!--<datalist> 标签规定了 <input> 元素可能的选项列表。
			被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，
			里边的选项是预先定义好的，将作为用户的输入数据。
			请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。-->
			<option value="Internet Explorer">
			<option value="Firefox">
			<option value="Chrome">
			<option value="Opera">
			<option value="Safari">
		</datalist>
		<input type="submit">
	</form>

	<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
	</body>
</html>

运行结果：

3、定义样式/节、元信息

元信息：<head>、<meta>、<base>

<style>标签定义 HTML 文档的样式信息。

在 <style> 元素中，您可以规定在浏览器中如何呈现 HTML 文档。每个 HTML 文档能包含多个 <style> 标签.PS:如果没有使用 "scoped" 属性，则每一个 <style> 标签必须位于 head 头部区域。（"scoped" 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用 "scoped" 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。）

HTML5.0中的新属性：

scoped属性：如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

【注意: 只有 Firefox属性支持 scoped 属性。】

<!DOCTYPE html>
<html>
	<head>
		<!--<head> 元素是所有头部元素的容器。<head> 元素必须包含文档的标题（title），
		可以包含脚本、样式、meta 信息 以及其他更多的信息。
		以下列出的元素能被用在 <head> 元素内部：
		
		(1)\<title>标签定义文档的标题，在所有 HTML 文档中是必需的。并且有且只能有一个,不能多或者少.
		[提示]:<title>元素：(1)定义浏览器工具栏中的标题(2)提供页面被添加到收藏夹时的标题
		(3)显示在搜索引擎结果中的页面标题
		
		(2)\<style>标签定义 HTML 文档的样式信息。可含有多个,若未使用 "scoped" 属性，
		则每一个 <style> 标签必须位于 head 头部区域。
		
		(3)\<base>标签为页面上的所有的相对链接规定默认 URL 或默认目标。在一个文档中，最多能使用一个.
		该标签必须位于 <head> 元素内部。
		
		(4)\<link>标签定义文档与外部资源的关系,是最常见的用途是链接样式表。
		[注意]:link 元素是空元素，它仅包含属性。并且元素只能存在于 head 部分，但次数不限。
		
		(5)\<meta>元数据（Metadata）是数据的数据信息。而<meta> 标签提供了 HTML 文档的元数据。
		元数据不会显示在客户端，但是会被浏览器解析。(类似与C++中的private成员)
		META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
		元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
		[注意]：<meta> 标签通常位于 <head> 区域内。元数据通常以 名称/值 对出现。
		如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
		
		(6)\<script>标签用于定义客户端脚本，比如 JavaScript.
		<script> 元素既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。
		JavaScript 通常用于图像操作、表单验证以及动态内容更改。
		
		(7)\<noscript> 元素用来定义在脚本未被执行时的替代内容（文本）。
		对于(6)和(7)还是懵懵懂懂的,不怎么能够理解]
        (8)\<span>元素用于对文档中的行内元素进行组合，标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
			没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，
			那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
			提示：被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作


-->
		
		<title>丰城市人民政府</title>
		<style type="text/css">
			h1 {color:green;}
			p {color:red;}
		</style>
		<base href="http://www.jxfc.gov.cn/" target="_blank">
		<link rel="stylesheet" type="text/css" href="theme.css">
	</head>
	<body>
	<article>
		<!--<article> 标签定义文章内容,即独立的内容。<article> 标签定义的内容本身必须是有意义的;
		且必须是独立于文档的其余部分。<article> 的潜在来源：论坛帖子博客文章\新闻故事\评论-->
		<header>丰城</header>
		<!--<header> 标签定义文档或者文档的一部分区域的页眉。
		<header> 元素应该作为介绍内容或者导航链接栏的容器。
		在一个文档中，您可以定义多个 <header> 元素,
		与之相对应的还有<footer> 标签定义文档或者文档的一部分区域的页脚。
		<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。-->
	</article>
	<div>
	<!--示范scoped属性-->
	<!--注意:</b> 只有 Firefox属性支持 scoped 属性 。-->
		<style type="text/css"scoped>
			h1{color:red;}
			p{color:blue;}
		</style>
		<h1>这个大标题是红色的</h1>
		<p>这个段落是蓝色的</p>
		<p><b></p>
	</div>
	<!--<div>标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
	<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
	[提示]:<div> 元素经常与 CSS 一起使用，(通过align属性)来布局网页-->
	
	<h1><span style="color:purple;font-weight:bold">这个标题是</span>绿色的</h1>
	<p>这个段落是黑色的。</p>
	<!--<span> 标签用于对文档中的行内元素进行组合,提供了一种将文本的一部分
	或者文档的一部分独立出来的方式。<span> 标签没有固定的格式表现。
	当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，
	那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。-->
	<!--[提示]：被 <span> 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作
	[这个还没怎么遇到但在这边先把它给贴出来啦]-->
	
	</body>
</html>

运行结果:

4、利用HTML简要制作百度界面

思路及全部分析过程全部在代码中

<!DOCTYPE html>
<html>
	<head>
		<mate charset="UTF-8">
		<title>百度一下，你就知道</title>
		<link rel="stylesheet" href="css/style.css" type="text/css"/ >
		<style>
			nav{}
		</style>
	</head>
	<body>
		<!--百度页面顶部导航栏-->
		<!--导航栏包括 新闻 hao123 地图 视频 贴吧 学术 登陆 设置 更多产品-->
	<div class="baidu_nav",style="text_align:center">
		<!--nav导航栏标签,
		如果想要对整体的导航进行移动位置，可以对整个的a标签添加上一个大的盒子div，
		这样对整体div的移动就可以了-->
		<nav calss="top_nav",style="text_align:rigth">
			<p align="right"><!--将整个nav标签的文本都移到右边一栏-->
			<a href="http://news.baidu.com/">新闻</a>
			<a href="https://www.hao123.com/">hao123</a>
			<a href="https://map.baidu.com/">地图</a>
			<a href="http://v.baidu.com/">视频</a>
			<a href="https://tieba.baidu.com/index.html">贴吧</a>
			<a href="http://xueshu.baidu.com/">学术</a>
			<a href="javascript:;">登陆</a>
			<a>设置
				<select>
				<option>搜索设置</option>
				<option>高级搜索</option>
				<option>关闭预测</option>
				<option>隐私设置</option>
				</select>
			</a>
			<a href="https://www.baidu.com/more/",style="color:blue">更多产品</a>
		</nav>
	</div>
	<!--百度顶部导航栏结束-->
	
	<!--百度中间部分包含logo，搜索栏开始-->
	<div align="center">
		<!--插入logo-->
		<div class="logo">
			<img class="baidu_logo" src="http://www.baidu.com/img/bd_logo1.png" ,width="255" ,height="110"/>
		</div>
		<!--插入图片时尝试了许多次老是会显示不出来，后来便直接把百度原界面上的图片链接给复制了下来-->
		<!--<img>为一个空标签，即它只包含属性，不包含闭合标签，需在页面上显示图片时，需要使用源属性src
		（源属性的值是图像的 URL 地址。定义图像的语法是：<img src="url" />）-->
		<!--class属性和src属性之间不能加逗号，否则图片将会无法显示出来-->
		<!--【不明白的地方】：在宽度和高度之间加上逗号，图片显示的大小不同，对此不太理解-->
		<!--logo结束-->
		
		<!--搜索栏-->
		<!--搜索栏包含搜索文本框，搜索按钮及相机-->
		<div class="search_box">
			<form action="/demo/demo_form.asp">
				<!--网页开发语言表单form，action，指定当这个表单提交到服务器端后处理数据的页面
				method，指定从客户端传递数据到服务器端的方法，有两种get 和post
				get,如http://www.baidu.com/?word=百度是什么意思；post,则看不到数据
				然后可在服务器端用request对象检索传递过来的数据。-->
				<input type="text" class="search_input" name="wd" width="255px;"height="32px;">
				<input type="button" class="search_buton" width="32px" height="32px" value="百度一下">
			</form>
		</div>
		
		<!--百度搜索框下面的二维码以及链接-->
		<div class="bottom">
			<!--二维码-->
			<ul>
				<li class="bd_qrcode">
					<img src="file:///C:/Users/20544/Desktop/二维码.PNG" width="70px" heigth="70px"/>
				</li>
				<p>百度</p>
			</ul>
			
			<!--链接部分-->
			<div class="bd_lj">
				<p>
				<!--<p>此标签与百度原网页所用一样，但具体是为什么，还不清楚-->
				<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设置为主页</a>
				<a href="http://home.baidu.com/">关于百度</a>
				<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome">About Baidu</a>
				<a href="http://e.baidu.com/?refer=888">百度推广</a>
				</p>
				<!--下面的反馈与必读部分-->
				<p class="bd_nr">
					@2019 Baidu
					<a href="https://www.baidu.com/duty/">使用百度前必读</a>
					<a href="http://jianyi.baidu.com/">意见反馈</a>
					京ICP证030173号
					<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>
				</p>
		</div>
	</div>	
	</body>

</html>

运行结果：

5、定义列表

（1）、有序和无序列表

<p>有序列表:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<p>无序列表:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

运行结果：

（2）、定义一个列表

<dl><!--<dl>定义一个定义列表-->
  <dt>Coffee</dt>
  <!--<dt>定义一个定义列表中的项目-->
  <dd>Black hot drink</dd>
  <!--<dd>定义定义列表中项目的描述-->
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

运行结果：

6、定义表格<table>

表格属性：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		
	<!--<table> 标签定义 HTML 表格；一个 HTML 表格包括 <table> 元素，
	一个或多个 <tr>、<th> 以及 <td> 元素。
	<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。-->
	
	<p>单元格将是按照所安排的顺序进行填充</p>
	<h4>单元格跨两格:</h4>
	<p>【PS】：定义列跨度后，该表头以下所有单元格将会是所定义的跨度</p>
	<!--布局解析：（1）、定表头：现在第一行tr中定义好两个表头th
	（2）、定跨度：利用‘colspan=“2” ’在定义表头th的同时将一个单元格横跨两列定义好
	（3）、输入单元格：在下一行th中输入三个单元格td-->
	<table border="1">
		<!--border 属性规定表格单元周围是否显示边框。-->
		<tr>
			<th>Name</th>
			<th colspan="2">Telephone</th>
		</tr>
		<tr>
			<td>Bill Gates</td>
			<td>555 77 854</td>
			<td>555 77 855</td>
		</tr>
		<tr>
			<td>1</td>
			<td>4</td>
		</tr>
	</table>

	<h4>单元格跨两列:</h4>
	<p>【PS】：定义行跨度后，该表头th横排以后所有单元格将会是所定义的跨度</p>
	<!--布局解析：（1）、定表头：注意表头是在第一列；所以将每一行tr的第一个单元格td设为th表头
	(2)、定跨度：利用’rowspan = “2” ‘定义将跨两列的单元格表头th
	（3）、输入单元格：跨行表头th中第一个元素“第1行”与该表格放在同一行tr中，下一个元素放在下一行td中-->
	<table border="1">
		<tr>
			<th>First Name:</th>
			<td>Bill Gates</td>
			<td>第3列</td>
			<td>第四行</td
		</tr>
		<tr>
			<td>1</td>
			<th rowspan="2">Telephone:</th>
			<td>第1行</td>
			<td>4</td>
		</tr>
		<tr>
			<td>对齐第一行下面</td>
			<td>第2行</td>
		</tr>
	</table>
	
	</body>
</html>

运行结果：

7、全局属性和事件属性

HTML 属性能够赋予元素含义和语境

（1）、全局属性

全局属性可用于任何 HTML5 元素。

“全局属性”实在HTML5中新增的概念，和HTML4有较大的变化，有些在HTML5中可应用于任何元素而在HTML4中却不行

7.1.1、常用的五大全局属性：

class属性：定义了元素的类名。通常用于指向样式表的类。但是，它也可以用于 JavaScript 中（通过 HTML DOM）, 来修改 HTML 元素的类名。
放是
算法
放是
发生的v从

7.1.2、比较陌生的五大全局属性

运行结果：（1）、单词错误时的：

（2）、单词正确的时侯：

contentEditable属性：是由微软开发，是一个布尔值属性。主要功能是指定元素内容用户是否可编辑。（PS：【以下内容目前还不怎么理解其具体用处】被编辑元素必须是获得鼠标焦点的元素，而且在点击后要提供一个插入符号，提示用户该元素中内容允许编辑。是一个布尔值属性该属性还有一个隐藏属性的inherit状态，为true是允许用户编辑;为false时元素不能被用户编辑;没有指定时则由inherit状态决定，如果父元素是可编辑的，该元素也是可编辑的。）
注意： 当元素的父元素中设置 contenteditable 属性时，该元素中可以直接继承，无需再次设置。
designMode 属性：【这个属性在HTML中没有看见，期待在后续的学习中可以看见吧！】用来指定整个页面是否可编辑，当页面可编辑时。页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在javascript脚本里被编辑修改。该属性有2个值---”on” 与 "off" .属性被指定为"on" 时，页面可编辑，被指定为"off"时，页面不可编辑。
hidden属性：规定对元素进行隐藏，被隐藏的元素将不会被显示。如果使用该属性，则会隐藏元素。可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。（HTML5中新增的元素）
spellcheck属性：检查元素拼写是否有错；布尔型属性。可检查的类型有text的input元素中的值（非密码）、taxtarea元素中的值、可编辑元素中的值。在使用时必须声明属性值为true还是false，没有默认状况（HTML5中新增的元素）
tabindex属性：规定当使用 "tab" 键进行导航时元素的顺序。（1是第一）在程序开发概念，是指不断敲击Tab键让窗口或页面中控件获得焦点，对窗口的控件进行遍历，每个控件的tabindex表示第几个被访问的。

（2）、事件属性：

就是当用户操作一个 HTML 元素(如按钮，文本框，选择框等)时，触发某种事件（如点击事件onclick、值变化事件onchange等），从而启动一段 JavaScript动作。
常用的事件有几类：
1. 窗口事件，如onload（当页面被载入时执行），onunload;
2. 表单元素事件，如onchange, onsubmit,onreset,onselect,onblur,onfocus;
3. 键盘事件，如onkeydown,onkeypress,onkeyup;
4. 鼠标事件，如onclick, ondbclick,onmousedown, onmouseup,onmouseover,onmouseout,onmousemove;

xor0ne_10_01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白学网页之 HTML之相逢标签

第九周：目录【1】、HTML（超文本标记语言）：（0）、序言1、编辑器的推荐2、编辑时的注意点（1）、基础标签（2）、标签功能1、基础（格式）2、表单3、定义样式/节、元信息4、利用HTML简要制作百度界面思路及全部分析过程全部在代码中5、定义列表（1）、有序和无序列表和（2）、定义一个列表 6、定义表格...
复制链接

扫一扫