开发工具与浏览器的选用
| 开发工具 | 浏览器 |
|---|---|
| VS_Code | Chrome |
HTML的基本内容
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML的结构
<!DOCTYPE html>//声明文档类型，由于历史原因的存在，现在可有可无。
<html>//这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head>//这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。
<meta charset="utf-8">//这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。
</head>
<body>//包含你能在页面看到的所有内容
</body>
</html>
常见的文本格式语法
(1)斜体<em>
(2)放大<strong>
(3)缩小<small>
(4)下划线<u>
(5)划掉<del>
常见的命令语法
(1)注释<!-- -->
(2)段落<p> </p>
(3)换行<br>水平分割线 <hr>
(4)输入框<input>
(5)标题<h1>-<h6>
心得体会
文本格式语法使用问题
一、关于<u>元素的使用问题
此元素以前在旧版本的HTML中称为“下划线”元素，但有时仍会以这种方式被滥用。要为文本加下划线，我们应该应用包含CSS text-decoration属性设置为 underline 的样式。
用例：
<u>元素的有效用例包括注释拼写错误，应用 proper name mark 来表示中文文本中的专有名称以及其他形式的注释。我们不应该使用<u>简单地为文字加下划线，或者表示书籍的标题。>
正确演示代码：
<p>This paragraph includes a <u class="spelling">wrnogly</u>
spelled word.</p>
结果：
This paragraph includes a wrnogly spelled word.
二、关于<em>元素的使用问题
HTML 着重元素 () 标记出需要用户着重阅读的内容， 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
请注意： 通常地，该元素会被浏览器展示为斜体文本， 但是，它不应该仅仅用于应用斜体样式；为此目的，请使用CSS样式。使用 元素标记作品的标题（书籍，戏剧，歌曲等）；它通常也采用斜体样式，但具有不同的含义。使用 <strong>元素标记比周围文本更重要的文本。
用例：
<em> 元素通常被用于指示一个隐式或显式的对比。
正确演示代码：
<p>
In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>
结果：
In HTML 5, what was previously called block-level content is now called flow content .
注意<i>与<em>的区别：
新的开发人员看到多个元素产生相似的效果，经常被混淆。 <em> 和 <i> 就是一对常见的例子，因为它们都对文字斜体化。它们的区别是什么？应该使用哪一个？
在默认情况下，它们的视觉效果是一样的。但语义是不同的。 <em> 标签表示其内容的着重强调，而 <i> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。（作品的标题，例如书籍或电影的名字，应该使用 <cite>。）这意味着，正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的，那是CSS样式所做的。
一个 <em> 的例子可能是：“Just do it already!”，或：“We had to do something about it”。人或软件在阅读文本时，会对斜体字的发音使用重读强调。
一个 <i> 的例子可能是：“The Queen Mary sailed last night”。在这里，没有对 “Queen Mary” 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 <i> 的例子可能是：“The word the is an article”。
命令语法使用问题
在开发过程中，我们不难了解到以下情况：
<input>元素的属性type与name的类型选取对于整个页面效果的呈现显得十分重要。如果在开发过程中搭配出现错误，可能会出现意想不到的效果。尤其是对于“type=radio”时的<input>。
性别：<br>
<!--radio=单选框，与标签样式有关-->
<!--name的值是否相同代表了所选内容是否相同，所以多选一般name都相同-->
<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>
结果：
我们只能任意选择其中一项。
但是如果将它们的“name”更改成不同的值
只更改其中一个“name”：
性别：<br>
<!--radio=单选框，与标签样式有关-->
<!--name的值是否相同代表了所选内容是否相同，所以多选一般name都相同-->
<input type="radio" name="gender1" value="male" checked > 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
如果选择了被更改“name”的那个选项，则该选项被固定，无法产生单选的效果，再选择其它选项则无法将之前所选择的选项取消。
结果：
或者
但是值得注意的是，如果我们只在“女”和“其它”两个选项中选择，还是能产生单选的效果。这一有趣发现对于后续特殊需求的开发有一定重要性。
另外，我们也不难发现对于“type=checkbox”时，更改“name”并不会产生特别的影响。
路径选取
值得注意的是，我们在指定文件路径时要分清路径的不同，特别是分清相对路径与绝对路径的区别。
绝对路径：
有时候编好的页面，在自己的计算机上浏览一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为静态HTML页面需要上传到网站，而在网站的应用中，通常我们使用"/"来表示根目录，/img/icon.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是要知道，这里所指的根目录并不是你的网站的根目录，而是你的网站所在的Web服务器的根目录。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的D盘，有可能是F盘或H盘。
即使放在Web服务器的D盘里，Web服务器的E盘里也不一定会存在"D:/wamp/www/img"这个目录，因此在浏览网页时是不会显示图片的。这也是应用绝对路径的风险。
相对路径
假设你要引入文件的页面名称为test.htm，它存在叫www的文件夹里（绝对路径D:/wamp/www/test.htm），那么引用同时存在www文件夹里的“icon.jpg”文件（绝对路径D:/wamp/www/icon.jpg），同一目录下相对路径icon.jpg；如果文件“icon.jpg”存在img文文件夹中（绝对路径D:/wamp/www/img/icon.jpg），那么相对路径img/icon.jpg。
相对路径可以避免上述根目录不同的问题。只要将网页文件及引用文件的相对位置与web服务器上文件相对位置保存一致，那么他们的相对路径也会一致。
例如上面的例子，“test.htm”文件里引用了“icon.jpg”图片，由于“icon.jpg”图片相对于“test.htm”来说，是在同一个目录的，那么只要这两个文件还是在同一个目录内，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。
虚拟路径
将文件上传到远程服务器后，这些文件驻留在服务器本地目录树中的某一个文件夹中。
例如，在运行MicrosoftIIS的服务器上，主页的路径可能如下所示：c:\Inetpub\wwwroot\accounts\users\jsmith\index2.htm
此路径通常称为文件的物理路径。但是，用来打开文件的URL并不使用物理路径。
它使用服务器名称或域名，后接虚拟路径（这里说一下虚拟目录：虚拟目录，是对Http访问而言的,用户在浏览网站或FPT时显示的目录结构。
例如你设置了E:\Website为访问目录，那么E:\Website为虚拟目录的根目录；E:\Website\Image,就变成了\Image.）。
所以接上面的例子，虚拟路径可以写成 <img src="/img/icon.jpg" />
随想
1、熟练掌握HTML基本的各种语法十分重要，在学习过程中要多去实践以此加深理解并尽可能地主动发现一些不一样的非常规的东西。
2、我们还要把各种语法的含义和应用场所弄清楚，特别是在学习文本格式语法时，不能随意混用。
3、在开发过程中，也要特别注意对于注释的使用，不能没有注释但也不能随意注释，要在关键点上有合理的注释。
扫一扫
2315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
