HTML学习总结"/>
我的HTML学习总结
我的HTML学习小总结
- 一.HTML到底是什么东西？
- 二.热身运动——初识HTML文档
- 1.建立并打开文件，并新建一个HTML文档
- 2.在文本框中输入如下的内容：
- 3.我们用浏览器打开它试试
- 三.小试牛刀——标题与文本格式
- 1.标题
- 2.文本格式
- 四.熟能生巧——丰富多彩的“Body”！
- 1.超链接 a
- 2.图片及文件路径 img
- 3.表格 Table
- 4.列表 List
- 5.表单 Form
- 五.胜利凯旋——一些其他内容
- 1.区块元素
- 2.内联元素
- 3.预设格式
- 4.特殊字符
一.HTML到底是什么东西？
HTML并没有太高深，它是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。总的来说，就是一个Web的“一砖一瓦”，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
二.热身运动——初识HTML文档
1.建立并打开文件，并新建一个HTML文档
注意我们新建的HTML文件的后缀名为.html哦，我命名的为test.html，新建后其如下图所示
2.在文本框中输入如下的内容：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><title>页面标题</title>
</head>
<body><h1>我的第一个Web页</h1><p>当前有点丑：)</p>
</body>
</html>
我们来试着分析一下它的结构
一个元素包含它的“头部”和“尾巴”，开始标签即为头部，被左、右角括号所包围。表示元素从这里开始或者开始起作用；而结束标签即为元素尾部，它标志了元素的结尾，但是注意，左右括号中包含了一个斜杠。
（1)< !DOCTYPE html >: 声明文档类型。这其实是可有可无的。
（2)< html > < /html >: < html >元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
(3)< head >< /head >: < head >元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
(4)< meta charset=“utf-8” >: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
(5)< link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” >: 指定页面的图标，出现在浏览器标签上。
(6)< title >< /title >: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
(7)< body >< /body >: < body >元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
HTML还有哪些常用标签？
我们需要掌握的标记/标签不多，如常见的 body、head、title、p、img、a、div、span、ol、table等。请注意如 font、big、center等标签是不推荐使用的。
< p >:段落标签，用于展示效果中划分段落。并且自动在段前和段后加空白行
< h1 >:标题标签，用于展示效果中划分标题，其中< h1 >最大，< h6 >最小
< img >:用于在页面效果中展示一张图片，后面会讲到
< a >：超链接标签，用于在效果中定义一个可以点击跳转的链接，注意要有href属性，后面会提到
< table >:表格标签，用于在效果中定义一个表格行
< ol >:有序列表标签，用于在效果中定义一个有序列表
< span >:行级的块标签，用于在效果中一行上定义一个块，进行内容显示
< div >:块级的块标签，用于在效果中定义一块，默认占满一行，进行内容的显示
3.我们用浏览器打开它试试
点击右键，点击红框所示的选项
它是使用默认浏览器打开的网站，当然如果你想更改你的默认浏览器，可以在“文件——首选项——设置”，在搜索栏输入open-in-browser.default,然后出现了工作区设置，输入你想用的默认浏览器名称就可以了，我默认的是chrome浏览器，如下所示：
然后我们打开后，其界面如下图所示：
小任务：
如何改变浏览器标签上的小图标？
这个其实非常简单，我们的操作如下：
1.随便下载一个ico图片，将他放入相应的文件夹当中，然后改变代码当中的名字即可
2.其在浏览器中显示如下所示：
hey!是不是感觉HTML像是一个编程语言呢！其实它还有好多和编程相似的点呢！
1.注释
程序猿们都知道，注释是一个极其极其极其重要的东西！有了注释，一段代码就会变得很好理解， 如果你在半年后重新返回你的代码库，而且不能记起你所做的事情，或者当你处理别人的代码的时候， 那么注释是很有用的，所以HTML这种文本类编辑语言，怎么能少的了注释呢。为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号< !–和 -->包括起来。
我们将下面的代码放入到文本当中：
<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！浏览器将忽略我</p> -->
可以看到网页上的显示，注释掉的文字没有了。
2.空元素
一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如< br >, < hr >, < input >, < img >, < a >等等。我们称其为空元素。
3.元素的属性
我们平常在网页上，你把鼠标放在一句文字上，会有一些关于属性的提示，或者在你输入账号和密码时，会发现，账号会显示数字，而输入的密码会自动变成圆点或者井号键，这是为什么呢？这是因为我们给他们加上了属性！
我们将下面这段代码复制到HTML文本当中：
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
看，输入密码时，它自动变成小圆点了。
三.小试牛刀——标题与文本格式
1.标题
标题，毫无疑问是一个Web网页的灵魂所在，用户也习惯以标题进行主要内容浏览，以决定是否查看该页面，同时搜索引擎也是以标题来索引页面的内容。
HTML 提供了从大到小6级标题，分别是：< h1 > ~ < h6 >，如下所示：
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
其网页显示如下：
2.文本格式
我们需要知道的文本格式标签如下：
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
是不是感觉你在写博客时，用的这些文本样式和这些差不多的？这些文本格式就是一些你文字的展示方式， 除上述这些标签可用于文本的格式外，其它标签都不建议用来进行格式的设置，如：< font >< big >< cente r>等标签皆为不推荐使用的。HTML 是用来表现页面内容而不是对页面进行修饰的，我们要用CSS来进行文本和页面的美化，而这都在后续内容当中。
四.熟能生巧——丰富多彩的“Body”！
我们知道，< body >< /body >: < body >元素，这是一个 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等，这里我们就来具体地看看Body内有些啥馅料。
1.超链接 a
通常的网页，当点击一个网址，甚至一张图片，又或是一个图标，可能会跳到另一个网站，这就是所谓的超链接，没有超链接就没有万维网（World Wide Web）。基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。
（1）超链接的语法如下：
<a href="/" target="_blank">百度一下</a>
说明：
1.href即为要跳转去的地址 URL（Uniform Resorce Locator)
2.target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3.超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
其在网页中显示如下，当我们点击后，就会打开新的页面跳到相应的网址上去了。
（2）锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
小练习
经常在某些网站上看到一个浮动图标显示"回到页首"，它是如何实现的？
第一种：我们可以使用button这个标签
在文本中输入如下代码：
<button onclick="location=''" type="button">回到首页</button>
这是一个< button > 标签，它定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
其页面展示如下：当我们点击后，就可以回到你相应首页的网址，当然，这里我们的链接是百度，你可以将首页网址更换。
第二种：在样式中直接添加
我们将如下代码复制到文本当中：
<input type="button" value="回到首页" onclick="location=''">
这其实与第一种方法无异，但是明显第一种更加强大，因为它可以放置内容在里面。
2.图片及文件路径 img
我们想要在页面插入图片，怎么办？试试输入如下代码到文本中吧！
<img src=".jpg" alt="MDB Logo" width="200" height="200">
说明：
1.src属性为要显示图片文件的位置 URL，即图片文件的路径
2.alt属性当获取图片出现问题时显示的文字（占位符）
3.可为图片指定高宽度，但不建议（可能导致图片变形）width表示图片宽度，height表示图片高度。
这个src"肚子"里的是绝对路径，关于文件路径，为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。对于相对路径，这里举了个例子：
比如我在本地文件中保存一张图片，并且直接打开它
就可以看到，网页把本地图片打开了
小练习
前面我们提到了，用一个按钮来实现网页的跳转，那么经常在网页中，会有点击一张图片，进入到一个新的链接，这是怎么做到的呢？换句话说，如何用图片做成一个超链接？
我们在文本中输入如下的代码：
<a href="/" ><img src="1.jpg" width="350" height="200"></a>
这个其实就是将前面超链接的”百度一下”文字换成了一张图片，实现页面的跳转。
点击后，就实现了页面的跳转
3.表格 Table
有时，页面的内容需要用表格来进行呈现。我们使用< table >等标签即可：
文本代码如下：
<table><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr></table>
可以看到下面产生了表格，代码中，< tr >表示行, < td >表示行中的单元, < th >是表头的单元（将会加粗显示）
4.列表 List
我们也可以使用列表来呈现内容，分为无序列表和有序列表。这部分比较简单，我们简单说一下。
1.无序列表
<ul><li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>
无序列表使用
- 标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
<ul type="square"><li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>
2.有序列表
<ol><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>
有序列表使用
- 标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
<ol type="a"><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>
5.表单 Form
当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
<form><!-- 文本框，注意有 placeholder 提示符 -->用户名：<br><input type="text" name="name" placeholder="请输入用户名"><br><!-- 密码框 -->密码：<br><input type="password" name="ps" placeholder="请输入密码"><br>年龄：<br><!-- 数字输入框，注意 min 和 value 属性--><input type="number" name="age" min="18" value="18"><br><!-- 单选按钮, 注意 checked 属性 -->性别：<br><input type="radio" name="gender" value="male" checked> 男<br><input type="radio" name="gender" value="female"> 女<br><input type="radio" name="gender" value="other"> 其它<br><!-- 下拉列表，注意 selected 属性 -->学历：<br><select name="party"><option value="D">大学</option><option value="R" selected>研究硕士</option><option value="N">博士</option></select><br><!-- 多选框 -->您有哪些交通工具：<br><input type="checkbox" name="vehicle1" value="Bike"> 自行车<br><input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br><input type="checkbox" name="vehicle3" value="Car"> 轿车<br><input type="checkbox" name="vehicle4" value="Jet"> 飞机<br><!-- 日期选择器 -->您的工作日期：<br><input type="date"><br><!-- 文件选择器 -->上传您的照片:<br><input type="file" name="photo"><br><!-- 文本输入区域，注意 rows 和 cols 属性 -->您的建议：<br><textarea name="message" rows="5" cols="30">The cat was playing in the garden.</textarea><br><hr><!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 --><input type="submit" value="提 交"><input type="reset" value="重 置">
</form>
当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。
五.胜利凯旋——一些其他内容
1.区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：
, ,
- , ，等。
<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>
2.内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： < span>, < input>, < td>, < a>, < img>等。
<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="/">Google</a>
<img src=".jpg">
3.预设格式
如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。
<pre>我如果爱你——绝不象攀援的凌霄花，借你的高枝炫耀自己；我如果爱你——绝不学痴情的鸟儿，为绿荫重复单调的歌曲；
</pre>
4.特殊字符
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
<p>哈哈 哈，哈 哈哈！</p>
<hr>
<h2>test.html</h2>
<pre><h1>这是个一级标题</h1><p>这是一个段落<p><a href="/">眼见何事，情系何处，身处何方，心思何人</a>
<pre>
更多推荐
我的HTML学习总结
发布评论