HTML从入门到精通——基本篇
<div style="color: black; text-align: left; margin-bottom: 10px;">
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/2a9df3dd588c4632b864d83c84566ec2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722662980&x-signature=%2FWHAJjHUDfGIhgxSMQj7K5k2CU8%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">今天<span style="color: black;">起始</span><span style="color: black;">博主</span>将会给<span style="color: black;">大众</span>讲解HTML的入门知识以及做项目会遇到的某些问题以及<span style="color: black;">怎样</span><span style="color: black;">处理</span>此类问题的<span style="color: black;">办法</span>。说道网页设计，HTML是<span style="color: black;">咱们</span>必不可少的一部分。<span style="color: black;">基本</span>网页的<span style="color: black;">形成</span>，无论怎么变幻，都<span style="color: black;">是由于</span>原声的HTML代码<span style="color: black;">构成</span><span style="color: black;">形成</span>网页。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面我就<span style="color: black;">按照</span>工作中所用和看过的书籍一点一点总结下<span style="color: black;">咱们</span>常用的HTML格式和代码。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">1、</span>什么是HTML。</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTM不是一段编程语言，而是一款标记语言，本身<span style="color: black;">不可</span><span style="color: black;">表示</span>在浏览器中。经过浏览器的编释和编译，<span style="color: black;">才可</span>正确反映HTML标记语言的内容。HTML从1.0到5.0经历了巨大的变化，从单一的文本<span style="color: black;">表示</span>功能到多功能互动，<span style="color: black;">已然</span><span style="color: black;">作为</span>了一款非常成熟的标记语言。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">2、</span>HTML文件的基本结构</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><!doctype html></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><html>文件<span style="color: black;">起始</span>标记</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><head>文件头<span style="color: black;">起始</span>的标记</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><title>XX系统</title></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"></head>文件头结束</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><body>文件主题的内容</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"></body>文件主题的结束</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"></html>文件结束的标记</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这儿</span><span style="color: black;">重点</span>说明title和meta(元信息)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><!--说明文件头--></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><title>XX网站</title></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><!--添加作者信息--></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><meta name="author" content="_永不言弃" ></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><!--设置网页文字及语言 --></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><!--设置网页<span style="color: black;">按时</span>(20秒后)<span style="color: black;">转</span>--></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><meta http-equiv="refresh" content="20;url=index.html"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">3、</span>HTML<span style="color: black;">重点</span>常用标签</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3.1标题</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><h1></h1></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><h2></h2></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><h3></h3></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><h4></h4></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><h5></h5></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><h6></h6></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3.2 标题字对齐属性align</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">默认<span style="color: black;">状况</span>下，标题文字是左对齐的。在网页制作过程中，常常需要<span style="color: black;">选取</span>对其他的方式，<span style="color: black;">此时</span><span style="color: black;">咱们</span>就需要用到align属性。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3.3 段落标记p</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">段落标记是文档中最<span style="color: black;">平常</span>的标记，<p>用来<span style="color: black;">初始</span>的一个段落。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3.3 换行标记</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">换行标记<br><span style="color: black;">功效</span>是在不另起一段的<span style="color: black;">状况</span>下将当前文本强制换行。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3.4 不换行标记nobr</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><nobor><span style="color: black;">暗示</span>的是不换行的标记</nobor></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3.5 水平线</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><hr/></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">4、</span><span style="color: black;">创立</span>超链接</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">与<span style="color: black;">自己</span>网站页面<span style="color: black;">相关</span>的连接被<span style="color: black;">叫作</span>为内部连接</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4.1绝对路径</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">绝对路径是<span style="color: black;">包含</span>服务器规范在内的完全路径。绝对路径不管源文件在什么位置都<span style="color: black;">能够</span>非常精确地找到，除非是<span style="color: black;">目的</span>文档的位置<span style="color: black;">出现</span>变化，否则连接不会失效。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4.2相对路径</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为了避免绝对路径的缺陷，<span style="color: black;">针对</span>在同一站点之中的连接<span style="color: black;">来讲</span>，<span style="color: black;">运用</span>相对路径是一个很好的<span style="color: black;">办法</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4.3 内部连接</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a href="# target="<span style="color: black;">目的</span>窗口的打开方式 " ></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">属性值</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">含义</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">-self在当前页面中打开连接</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">-blank在一个全新的空白窗口中打开连接</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">-top在顶层框架中打开连接，<span style="color: black;">亦</span><span style="color: black;">能够</span>理解为在根框架中打开连接</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">-parent在当前框架的上一层里打开连接</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4.4 锚点连接</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">锚点到本页面中的位置</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a href="#1" >商品名<span style="color: black;">叫作</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a href="#2" ><span style="color: black;">制品</span>特点</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a href="#3" ><span style="color: black;">制品</span>规格</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a neme="1">XX商品</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a neme="2">XX<span style="color: black;">制品</span>特点</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a neme="3">XX规格</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">锚点到其他页面的位置</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a href="index.html#1"></a>对应连接到index.html中name=1的位置</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4.5 连接到<span style="color: black;">外边</span>网站</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在设置友情链接时，需要打开HTTP协议进行<span style="color: black;">外边</span>连接<span style="color: black;">拜访</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a href="wwww.baidu.com" >百度</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4.6 连接到E-mail</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a href="mailto:邮件<span style="color: black;">位置</span>">。。。</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4.7 连接到FTP</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">FTP<span style="color: black;">表率</span>文件传输协议，一个FTP站点<span style="color: black;">一般</span><span style="color: black;">包括</span><span style="color: black;">有些</span>上传和下载文件的文件目录。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">大部分FTP网站需要<span style="color: black;">运用</span>用户名和<span style="color: black;">秘码</span>来登录。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当然还有其他的<span style="color: black;">有些</span>连接方式，例如文件下载，连接到Telnet等。这些都会<span style="color: black;">能够</span>用a标签实现。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML<span style="color: black;">基本</span>就先讲到<span style="color: black;">这儿</span>，后面退出DIV设计网页格式<span style="color: black;">已然</span>网页分框的实现。</p>
</div>
“板凳”（第三个回帖的人） 说得好啊！我在外链论坛打滚这么多年，所谓阅人无数，就算没有见过猪走路，也总明白猪肉是啥味道的。 一看到楼主的气势，我就觉得楼主同在社区里灌水。 这夸赞甜到心里，让我感觉温暖无比。
页:
[1]