首页 > 代码库 > HTML的基本结构及基本标签

HTML的基本结构及基本标签

一、什么是HTML?
HTML:超文本标签语言
HTML:网页的源码
浏览器:“解释和执行”HTML源码的工具
二、HTML文档的结构:
(一)
1.<!DOCTYPE html>
   HTML的文档类型声明,声明这个文档是html5文件,让浏览器按照HTML5准备进行解析显示,
   文档声明在HTML文件中必须要有,而且必须写在文件最上方
2.<!---->
   注释:写给程序员看的,网页中不会显示
    HTML中注释的快捷键:Ctrl+/
(二)Head部分
1.<head>
   head头部作用:用于描述网页的一些关键信息,比如网页的配置,设置,关键字等等...
  这些信息,大多在浏览器看不到,但是对网页的解析至关重要!
2.<meta charset="utf-8" />
   meta标签,用于描述网页的各种信息,
其中<meta charset="utf-8" />设置网页的编码格式为UTF-8格式
常见的中文编码格式:
GB2312:国标码,简体中文;
GBK:扩展的国标码,简体中文;
UFT-8:万国码,兼容各种语言编码,常用!!!!!!
①<meta name="keywords"content="杰瑞教育,网页开发">
   设置网页关键字,有助于搜素引擎的搜索。
   name="keywords"表示这个meta标签设置的是网页的关键字,
   content=""表示关键字的详细信息,多个关键字,用英文逗号分隔;
②<meta name="description"content="这是我在杰瑞教育开发的第一个网页!">
    设置网页的描述信息,搜索引擎搜索时,标题下面的一段文字!非常重要!!!
    name="description"表示这个meta标签设置的是网页的描述信息;
    content=""表示描述信息的详细内容!!!
3.<title>这是我的第一个网页!</title>
   title:网页的标题,显示在浏览器选项卡上面的文字
4.<link rel="icon"href="http://www.mamicode.com/img/icon.jpg"/>
   链接网页的小图标:网页选项卡上的小图片
   rel="icon"表示当前link的作用,是链接网页图标;
   href="http://www.mamicode.com/img/icon.jpg"表示图标的地址在何处
!DOCTYPE html>
<html>
    <head>        
        <meta charset="utf-8" />
        <meta name="keywords"content="杰瑞教育,网页开发">
        <meta name="description"content="这是我在杰瑞教育开发的第一个网页!">
        <title>这是我的第一个网页!</title>
        <link rel="icon"href=http://www.mamicode.com/"img/icon.jpg"/>
        </head>
    <body>
        
    </body>
</html>

 

(三)基本块级标签
HTML标签的分类:
块级标签:显示为块状,独占一行,自动换行。
行级标签:在一行中,从左往右依次排列,不会自动换行。
1.标题标签
   h标签:标题标签,显示为黑体加粗
   标题标签,共分为6种:h1-h6,h1最大,h6最小
2.分割线标签
   hr标签:表示一条水平线
3.段落标签
   p标签:表示段落标签,相当于我们文章中的一段文字
4.换行标签
   <br/>:换行符
   注意:在代码中,直接回车换行,浏览器并不认识,必须使用<br/>告诉浏览器这里要断行
5.预格式
   pre标签:预格式标签。会保留代码中的空格,回车等符号,直接在浏览器显示
   pre标签常用于在网页中显示代码,保留代码格式!!
6.块引用标签<blockquote cite="http://www.baidu.com"></blockquote>
   blockquote:块引用标签。表明一段话是从其他网站引用的
   有一个重要属性:cite=""表示这段话的引用来源,常放一个网站地址,但是浏览器显示并没有任何区别
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>这是h1标签</h1>
        <h2>这是h2标签</h2>
        <h3>这是h3标签</h3>
        <h4>这是h4标签</h4>
        <h5>这是h5标签</h5>
        <h6>这是h6标签</h6>
        <hr/>
        <p>这是一段文字这是一段文字这是一段文字<br/>这是一段文字这是一段文字这是一段文字</p>
        <p>这是一段文字这是一段文字这是一段文字<br/>这是一段文字这是一段文字这是一段文字</p>
        

        <pre>
             这是一段文字
                    这是一段文字
                    这是一段文字
                    这是一段文字
        </pre>
        <!--
            pre标签:预格式标签。会保留代码中的空格,回车等符号,直接在浏览器显示
            pre标签常用于在网页中显示代码,保留代码格式!!
        -->
        <blockquote cite="http://www.baidu.com">
            光明正大的抄你的!
        </blockquote>

    </body>
</html>

 

(四)、基于布局的块级标签
1、无序列表
有多个列表项组成,每个列表项前面带小黑点,称为无序列表。
无序列表用<ul>表示,列表中的每一项用<li>表示
2.有序列表
有序列表用<ol>表示,标签中的每个列表项用<li>表示
3、定义列表(定义描述列表)
定义列表<dl>,里面有一个标题<dt>,有多个描述项<dd>,
标题默认顶格显示,描述项相对标题向后缩进显示。
4、图片组合标签
组合标签<figure>里面有两部分:
①图片<img/>后续讲解
②图片的标题<figcaption></figcaption>
5、分区标签div(最常用标签)
div标签没有任何的特殊作用,仅仅起到一个包裹内容的作用。常用于网页中划分区块
div标签中可以包裹任何内容,需配合css一起使用 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>这是无序列表第一项</li>
            <li>这是无序列表第二项</li>
            <li>这是无序列表第三项</li>
            <li>这是无序列表第四项</li>
        </ul>
        <ol>
            <li>这是有序列表第一项</li>
            <li>这是有序列表第二项</li>
            <li>这是有序列表第三项</li>
            <li>这是有序列表第四项</li>
        <dl>
            <dt>这是dl列表的标题</dt>
            <dd>这是dl列表的描述项1</dd>
            <dd>这是dl列表的描述项2</dd>
            <dd>这是dl列表的描述项3</dd>        
        </dl>
        <figure>
            <img src=http://www.mamicode.com/"img/icon.jpg"/>
            <figcaption>图片的描述标题</figcaption>
        </figure>
        <div style="width:500px;height:100px;background-color:yellow ;">
            这是div里面的文字
            <p>11111</p>
        </div>
    </body>
</html>

 

三、基本行级标签
(一)【块级标签与行级标签的区别】
1、块级标签:默认宽度100%(占满一行);
                         块级标签自动换行(独占一行,右边不能有任何东西);
                         可以使用css设置宽度高度   
2、行级标签:默认宽度由内容撑开(内容多宽,宽度就占多宽);
                         行级标签不会自动换行(一行当中,从左往右依次排列);
                         宽度高度不能设置
(二)【常见的行级标签】
1、span标签:①只是包裹作用,没有其他任何含义;
                        ②span作用与div类似,需配合CSS使用。只不过div是块级标签,span是行级标签
2、【em/strong  i/b区别】
 ①em和i都能倾斜,strong和b都能加粗。但是,i和b仅仅是单纯的倾斜加粗,而em和   strong多了强调的语义。
②em和strong都表示强调,但是strong强调的级别更高
注意:
①强调的目的:让搜索引擎知道网页重点强调的内容!便于搜索引擎显示!
 ②strong和em都可以多层嵌套,表示强调程度的递增!
3、q标签
q标签:表示短引用
cite属性:用于声明引用的来源
【常用引用标签】
<blockquote>用于引用一段内容</blockquote>
<q>用于引用一句话</q>
<cite>常用于引用作品名、书画名等</cite>
相同点:三个引用标签,都用city属性表示引用来源
不同点:①引用内容不同
             blockquote->一段话,q->一句话,city->作品名
              ②显示的默认效果不同
              blockquote->默认整段向右缩进;
              q->默认加引号;
              city->默认倾斜
4、small和big
small标签:将字体缩小一号;
big标签:将字体放大一号
注意:
①small和big可以多层嵌套,直到字体达到最小或最大为止
②这俩标签已经被淘汰,并不建议使用
5、img图片标签:
①src属性:表示图片的路径
-【图片路径的合法方式】
-  a、网络连接:由于图片在其它网站,如果其他网站删除图片,我们也不能访问,所以不建议使用这种方式
<img src="https://www.baidu.com/img/bd_logo1.png"/>
    b、绝对路径:使用绝对路径的图片,只有在本机使用file协议才能访问!所以严禁使用这种方式
<img src="file:///E:/icon.jpg"/>
    c、相对路径:
                          ①图片与当前文件在同一层文件夹:直接写图片名
                         <img src="http://www.mamicode.com/icon.jpg"/>
                          ②图片在当前文档的下一层文件夹:文件夹名/图片名
                          <img src="http://www.mamicode.com/img/icon.jpg"/>
                          ③图片在当前文档的上一层文件夹:../图片名(../表示后退一层)
                          <img src="http://www.mamicode.com/icon.jpg"/>
                         但是,一定要注意:图片必须包含在项目里面,不能 访问项目外的图片。
②height:图片的高度      width:图片的宽度
③title:图片的标题,鼠标指上后看到的提示文字
<img src="http://www.mamicode.com/img/icon.jpg"title="鼠标指上后看到的提示文字"/>
 ④alt:图片无法加载时显示的文字
<img src="http://www.mamicode.com/img/icon.jpg"alt="图片无法加载时看到的文字"/>
 ⑤align:图片周围的文字相对于图片如何对齐
      可选值:top->图片顶部center->图片中部bottom->图片底部
<img src="http://www.mamicode.com/img/icon.jpg"align="bottom"/>12345
6.超链接标签a
①href属性:表示超链接需要跳转的页面
a.可以写网络地址:
     <a href="http://www.baidu.com">这是一个超链接</a>
b.可以打开本地html文件:
    采用相对路径确定文件地址,与img标签确定方式相同
    <a href="http://www.mamicode.com/02-HTML-基本块级标签.html">这是一个超链接</a>  
②title属性:鼠标指上后显示的提示文字
    <a href="http://www.baidu.com"title="hhh">这是一个超链接</a>
③target属性:设置新页面打开的窗口位置
可选值:_self自身页面打开(默认)_blank新窗口打开
    <a href="http://www.baidu.com"target="_blank">这是一个超链接</a>
④rel属性:声明即将跳转的文件与当前文件的关系
    rel="prev":即将打开的页面是当前页面的前一篇;
    rel="next":即将打开的页面是当前页面的后一篇
    <a href="http://www.mamicode.com/next.html"rel="next">下一篇文章</a>
这个属性设置以后对用户没有任何作用,但多搜索引擎是友好的,搜索引擎在抓取网页时, 可以很清楚的知道网页中的上下文结构关系
【超链接的特殊应用】
1.功能性连接(了解):
          mailto://点击链接给指定邮箱发送邮件
           <a href="mailto://jianghao@jrel.com">点击链接发封邮件</a>
           tencent://message/?uin=251241143点击与指定QQ聊天
还有:tell://手机端点击打电话
          message://手机端点击发送短信
          ftp://使用ftp协议进行文件的上传下载
2.锚链接
>>>本页面锚链接
①在页面的指定位置设置一个锚点,用name属性表示锚点的名字
     <a name="top"></a>
②将超链接的href属性,设置为#加锚点名字
    <a href="http://www.mamicode.com/#top">点击链接,跳转到top锚点位置</a>
>>>页面间锚链接
①在新页面的指定位置设置一个锚点,用name属性表示锚点的名字
     <a name="top"></a>
②将超链接的href属性,设置为新页面地址#加锚点名字
    <a href="http://www.mamicode.com/text.html#top">点击链接,跳转到text.html的top锚点位置</a>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a name="top"></a>
        江汉真<span style="color: red;font-size:48px ;">帅</span><br />
        <em>这是em标签</em><br />
        <strong>这是strong标签</strong><br />
        <i>这是i标签</i><br />
        <b>这是b标签</b><br />
        <u>这是u标签</u><br />
        <q cite="http://www.666666.com">我是q标签引用</q>
        <blockquote>我是blockquote的引用</blockquote>
        <cite>我是city标签的引用</cite><br />
        <small>我比正常小一号</small><br />
        <big>我比正常大一号</big><br />
        <img src=http://www.mamicode.com/"https://www.baidu.com/img/bd_logo1.png"/>
        <img src=http://www.mamicode.com/"img/icon.jpg"height=""width=""title="鼠标指上后看到的提示文字"alt="图片无法加载时看到的文字"align="bottom"/>12345
        <img src=http://www.mamicode.com/"../icon.jpg" /><br />
        <div style="height: 800px;background-color: red;"></div>
        
        <a href=http://www.mamicode.com/"http://www.baidu.com"title="hhh"target="_blank">这是一个超链接</a>
        <a href=http://www.mamicode.com/"mailto://jianghao@jrel.com"title="hhh"target="_blank">点击链接发封邮件</a>
        
        <a href=http://www.mamicode.com/"#top">点击跳转到顶部!</a>
        
        <a href=http://www.mamicode.com/"img/text.html#one">点击跳到新页面第一部分</a>
        <a href=http://www.mamicode.com/"img/text.html#two">点击跳到新页面第二部分</a>
        <a href=http://www.mamicode.com/"img/text.html#three">点击跳到新页面第三部分</a>
        <a href=http://www.mamicode.com/"img/text.html#four">点击跳到新页面第四部分</a>
    </body>
</html>

 

w3c规范:
1.w3c:万维网联盟,负责制定和维护web行业开发标准;
2.w3c要求的规范:
①w3c规范中倡导的两个分离:
内容与表现分离:(HTML与css分离)
内容与行为分离:(HTML与JavaScript分离)
②HTML语言要遵循语义化
③关于代码书写的规范:
HTML中的标签与属性必须要小写;
HTML中的标签必须要闭合;
属性值必须用引号引起来;
HTML标签必须正确嵌套
 四、表格
表格用table表示,表格中的每一行用tr表示,一行中的每一列用td表示
th:表示表头,表头中的文字默认为加粗居中,th要放在tr中,用于替换td
(一)table的常用属性
1.border:给表格加边框。默认给所有td加边框,并且给整个table加外边框,当增大         border的值时,td上的边框不变化,只有最外层大边框变宽
2.cellspacing:单元格与单元格之间的距离。
注意】表格边框线合并的css写法:
style="border-collapse:collapse;"
这条css与cellspacing="0"有什么区别?
cellspacing="0"仅仅是将单元格之间的距离调整为0,实际上单元格之间依然还是两条线
border-collapse:collapse;试讲表格相邻的两条边框进行合并处理,只有一条线存在
  (一旦边框合并,collapse属性将会失效)
3.cellpadding:单元格中的文字与单元格边框的距离 
4.height:表格的高度
   width:表格的宽度
  使用表格宽高属性设置大小:
   <table height="400"width="500"></table>
   使用css样式设置大小:
   <table style="height: 400px;width=500px"></table>
5.align:设置表格在浏览器中的位置,不建议使用了。
  可选值:left/center/right
6.bgcolor:背景色
   bordercolor:边框颜色
  background:背景图
   背景图和背景色同时存在时,背景图会覆盖背景色
(二)tr与td常用属性
1.width:单元格宽度
  height:单元格高度
2.bgcolor:单元格颜色
3.align:设置单元格中的文字,水平对齐方式
   left/center/right
   Valign:设置单元格中的文字,垂直对齐方式
4.nowrap="nowrap"当单元格文字过多时,设置单元格文字不断行显示。但是,
  会把表格的宽度撑大
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border="1"cellspacing="0"style="border-collapse: collapse;"
            cellpadding="15"bgcolor=""bordercolor=""background="">
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
            </tr>
            <tr>
                <td align="right"valign="bottom">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
        </table>
        
        
        <table border="1">
            <tr>
                <th>标题一</th>
                <th colspan="2">标题二</th>
            </tr>
            <tr>
                <td rowspan="2">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
        </table>
    </body>
</html>

 

HTML的基本结构及基本标签