第九周:
目录
【1】、HTML(超文本标记语言):
(0)、序言
1、编辑器的推荐
可以使用专业的 HTML 编辑器来编辑 HTML,这里是菜鸟教程中为大家推荐几款常用的编辑器:
相关链接:http://www.runoob.com/html/html-editors.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;