【从无到有】HTML的初识——part1

时间：2021-08-01 08:43:56

Ⅰ.HTML的初识

　　1、HTML：超文本标签语言（网页源代码）

　　 2、html的基本结构：　　

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>

    </body>
</html>

　　3、文档声明

　　　　
<!DOCTYPE html>

　　　　必须有，而且必须要在第一行。

Ⅱ.HTML基本标签——head

　　1、meta标签：描述文档类型和编码
　　　　　　　　　   搜索关键字和描述
　　　　　　　　　   常用属性：

　　　　1、charset：设置文档的字符集编码格式
　　　　>>>常见的字符集编码格式：
　　　　　　a.GB2312：国标码，简体中文
　　　　　　b.GBK：扩展的国标码
　　　　　　c.UTF-8：万国码 Unicode
　　　　2、http-equiv：将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：content-type（文档类型） refresh（网页定时刷新） set-cookie（设置浏览器cookie缓存）
　　　　需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容否，放到content属性中）
　　　　3、name属性：使用方法同"http-equiv"。常用且需要掌握的属性值：author（作者） keywords（网页关键字） description（网页描述） 这两个属性设置，网页必不可少。

Ⅲ.HTML的常见标签

　　1、标签分类

　　　块级标签：显示为块状，前后隔一行（自动换行）

　　　 行级标签：按行从左往右逐一显示

　　 2、常见的块级标签

　　　1）、<h1></h1>~<h6></h6>

　　　　标题标签：自动加粗，h1最大，h6最小
　　　　 
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>

　　　　效果图：

　　　　【从无到有】HTML的初识——part1

　　　　2）、<hr /> 水平线标签
　　　　3）、<p></p> 段落标签
　　　　4）、<br/> 换行标签 【html中空格的表示：“&nbsp;” 】
　　　　5）、引用标签
　　　　　　<blockquote cite="http://www.xxxx.com">
　　　　　　</blockquote>
　　　　　　引用标签，cite属性，表明引用来源，一般表明引用网址。浏览器默认显示首行缩进。
　　　　6）、预格式标签（通常用来承载代码）
　　　　　　<pre></pre> 预格式标签
　　　　　　浏览器默认显示样式：1、显示为等宽字体
　　　　　　　　　　　　　　　　2、代码中的换行空格等元素可在浏览器直接显示
<hr />
        <p>这里是一段文字阿达哒哒哒哒哒哒</p>
        <p>这里是另一段文字<br/>啊哒哒哒哒哒哒哒哒哒</p>

        <blockquote cite="http://www.jredu100.com">
            横眉冷对千夫指，俯首甘为孺子牛。
        </blockquote>

　　　　效果图：

　　　　【从无到有】HTML的初识——part1

　　3、常用基于布局的块级标签
　　　　1）、有序列表：<ol></ol>
　　　　　　　列表项<li>可以有N多项</li>
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

　　　　2）、无序列表：<ul></ul>

　　　　　　列表项<li>可以有N多项</li>
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
　　　　3）、定义描述列表：<dl></dl>
　　　　　　列表标题：<dt>一般只有一项</dt> 标题顶格显示
　　　　　　列表描述项：<dd>可以有N多项</dd> 描述项相对标题进行缩进显示
<dl>
    <dt>这是定义列表的标题</dt>
    <dd>描述项第一项</dd>
    <dd>描述项第二项</dd>
    <dd>描述项第三项</dd>
</dl>
　　　　4）、组合标签：<figure></figure>
　　　　　　用于显示图片及图片标题
　　　　　　两个子标签：<img /> 图片
　　　　　　　　　　　　<figcaption></figcaption> 图片的标题
　　　　　　显示效果：图片下面一个标题，同时图片和标题前带缩进。　
        <figure>
            <img src="../img/icon.png" />
            <figcaption>这是图片标题</figcaption>
        </figure>

　　　　效果图：

　　　　【从无到有】HTML的初识——part1

　　　　5）、分区标签：<div></div>
<div style="width: 100px;height: 100px;background-color: dodgerblue;">这是一个div</div>

　　　　效果图：

　　　　【从无到有】HTML的初识——part1

　　4、常用的行级标签
　　　　1）、span（文本）：无实际意义，用于包裹某部分文字，修改特定样式
这是<span style="color: aquamarine;font-size: 36px;">span</span>中的文字

　　　　效果图：

　　　　【从无到有】HTML的初识——part1

　　　　2）、【strong，em，b，i标签的区别】
　　　　　　a、strong和em都表示强调，strong显示为粗体，em显示为倾斜。而且strong强调程度比em更高。
　　　　　　b、strong和b都能加粗，em和i都能倾斜，但strong和em多了一层强调的语义。html5语言要求标签尽可能的实现语义化。
        <em>这是em中的文字</em>
        <br />
        <strong>这是strong中的文字</strong>
        <br />
        <i>这是i中的文字</i>
        <br />
        <b>这是b中的文字</b>

　　　　效果图：

　　　　【从无到有】HTML的初识——part1

　　　　3）、q（短引用）：显示为文字，用“”引起来
        <q cite="http：//www.jredu100.com">这是短引用标签q中的文字</q>

　　　　效果图：

　　　　【从无到有】HTML的初识——part1

　　　　4）、small（缩小字体）big（增大字体）：
　　　　　　　　small标签和big标签可以多层嵌套，直到字号达到上限或下限为止。
<small><small>这是small中的字体</small></small>
        <big>这是big中的字体</big>

　　　　效果图：

　　　　【从无到有】HTML的初识——part1

　　　　5）、img（图片）：
　　　　　　1>、src：表示引用图片的地址。
　　　　　　　　路径地址的写法：
　　　　　　　　　　①相对路径：以当前文件为准，寻找图片地址。
　　　　　　　　　　　　a、与当前文件处于同一层的文件：直接写图片名。
　　　　　　　　　　　　b、图片在当前文件下一层：文件夹名/图片名。
　　　　　　　　　　　　c、图片在当前文件上一层：../图片名。
　　　　　　　　　　②绝对路径：file:///盘符:/文件夹/图片.后缀名 但是，严禁使用！
　　　　　　　　　　③网络地址：网络上的图片链接，一般不使用。
　　　　　　2>、height="" width="" 图片的高度宽度，可以用CSS样式（style="height:width:"）代替
　　　　　　3>、title：图片标题。当鼠标指上后显示的文字。
　　　　　　4>、alt：图片无法加载成功时，显示的文字。
　　　　　　5>、align：设置图片周围文字相对于图片的位置。top，center，bottom
        <img src="../img/icon.png" height="" width="" title="点我点我" alt="图片无法显示" align="center">dadassd
        <img src="file:///D:/HTML5/html5code/html5/img/kumamu.jpg">
        <img src="https://123p4.sogoucdn.com/imgu/2017/02/20170221182041_770.jpg"

　　　　效果图：

　　　　【从无到有】HTML的初识——part1

　　　　6）、a（超链接）
　　　　　　1>、href：超链接的路径,可以是网络链接，也可以是本地路径（路径确定同img）
　　　　　　2>、target：超链接打开的位置。_self 自身页面（默认） _blank 新页面
　　　　　　3>、title：鼠标指上后显示的文字。
　　　　　　4>、rel：用于表明被链接文档与当前文档的关系：
　　　　　　　　　　rel="prev" 被链接文档是前一篇文档 rel="next" 被链接文档是后一篇文档
　　　　　　　　　　rel="icon" 链接文档是当前文档的图标
　　　　　　　　　　rel="stylesheet" 被链接文档是当前文档的样式表
　　　　　　　　　　*rel="prefetch" 预加载：在当前文档加载完成后，利用空余时间预加载即将链接的文档。
　　　　　　5>、锚链接：
　　　　　　　　①本页面锚链接：a.设置锚点 <a name="xxxx"></a>
　　　　　　　　　　　　　　　　b.在超链接上，使用#name跳转到对应锚点。<a href="#xxxx"></a>
　　　　　　　　②页面间锚链接：a.在即将跳转页面的指定位置设置锚点
　　　　　　　　　　　　　　　　b.在超链接的href属性中，使用"页面地址.html#name"
　　　　　　　　　　　　　　<a href=t.html#top>跳转新页面指定部分</a>
　　　　　　6>、功能性链接：mailto:zzzz@xx.com 用于给指定邮箱发邮件
　　　　　　　　　　　　　　 tencent://message/?uin=296351683 给指定qq发消息
　　　　　　　　　　　　　　 file:///E:/www/文件名 打开本地文件
        <a href="http://www.baidu.com" target="_blank" rel="next">这是一个超链接</a>
        <a href="#top" target="_self">这是另一个超链接</a>
        <a href="mailto:jianghao@jerei.com">发邮件</a>
        <a href="tencent://message/?uin=416616053">发qq</a>

　　　　效果图：

　　　　【从无到有】HTML的初识——part1　　

　　　　　　7>、style="text-decoration:none;" 去掉下划线
　【从无到有】HTML的初识——part1

相关文章