码迷,mamicode.com
首页 > Web开发 > 详细

HTML5入门(一)—— 基本标签&表格

时间:2017-06-18 10:37:50      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:外链   佼佼者   勤奋   lsp   来源   发微博   需要   html标签   背景颜色   

一、HTML简介


         超文本标签语言,即网页的源码。而浏览器就是翻译解释HTML源码的工具。

二、HTML Head部分     

<1>Head的作用

         用于描述网页的一些关键信息。比如网页的配置、设置、关键字等等。这些信息大多在浏览器是看不到的,但是对网页的解析至关重要。

<2>meta标签

         ①用于描述网页的各种信息。网页编码格式UTF-8:万国码,兼容各种语言的编码,最常用!

         ②设置网页的关键字,有助于搜索引擎的搜索。name="keywords" 表示网页的关键字;content=" " 表示关键字的详细信息,多个关键字用英文逗号分隔;

         ③设置网页的描述信息,搜索引擎搜索时标题下面的一段文字。name="description" 表示网页的描述信息;content=" " 表示描述信息的详细内容。

<3>link标签

         链接网页的小图标。rel="icon" 表示当前link的作用是链接网页图标;href="img/icon.jpg"中 href表示图标的地址。

<!DOCTYPE html>
<html>      
    <head>
        <meta charset="utf-8" />
        <meta name="keywords" content="杰瑞教育,H5周末班,网页开发" />
        <meta name="description" content="这是我在杰瑞教育开发的第一个网页!" />
        <title>这是我的第一个网页</title>
        <link rel="icon" href="img/icon.jpg" />      
    </head>
    <body>
        浩哥真帅!
    </body>   
</html>

三、HTML标签的分类


      1、块级标签:显示为块状,独占一行,自动换行。

       2、行级标签:在一行中,从左往右依次排列,不会自动换行。
      【块级标签与行级标签的区别】
       1.块级标签:默认宽度100%(占满一行);
                           块级标签自动换行(独占一行,右边不能有任何东西);
                           块级标签可以使用CSS设置高度、宽度!
       2.行级标签:默认宽度由内容撑开(内容多宽、宽度就占多宽);
                           行级标签不会自动换行(一行当中从左往右依次排开);
                           行级标签的高度宽度不能设置!
(一) 基于布局的块级标签
 <1> h标签
       标题标签,显示为黑体加粗,共分为6种:h1~h6: h1最大,h6最小。
<2> hr标签
       表示一条水平线 <hr />
        <h1>这是h1标签</h1>
        <h2>这是h2标签</h2>
        <h3>这是h3标签</h3>
        <h4>这是h4标签</h4>
        <h5>这是h5标签</h5>
        <h6>这是h6标签</h6>
     <hr/>
 <3> P标签
        表示段落标签。相当于我们文章中的一段文字。
        <br/> 换行符。【注意】在代码中,直接回车换行,浏览器并不认识。必须使用<br/>告诉浏览器这里要断行。
<4> pre标签
       预格式标签。会保留代码中的空格、回车等符号,直接在浏览器显示。pre标签常用于在网页中显示代码,保留代码格式。
        <pre>
    if(entity != null){  
    tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型  
    jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型  
}  
        </pre>
 <5> blockquote 块引用标签
        表明一段话是从其他网站引用的。其重要属性:cite=" " 表示这段话的引用来源,常放一个网站地址。但是浏览器显示并没有任何区别。
 <6> 无序列表 ul 
        无序列表用<ul>表示,列表中的每一个列表项用<li>表示。
        <ul>
            <li>这是无序列表第一项</li>
            <li>这是无序列表第二项</li>
            <li>这是无序列表第三项</li>
            <li>这是无序列表第四项</li>
        </ul>
<7> 有序列表ol
       有序列表用<ol>标签,标签中的每个列表项用<li>表示。
        <ol>
            <li>这是有序列表第一项</li>
            <li>这是有序列表第二项</li>
            <li>这是有序列表第三项</li>
            <li>这是有序列表第四项</li>
        </ol>
<8> 定义列表dl
       定义列表<dl>,里面有一个标题<dt>,有多个描述项<dd>。<dt>顶格 <dd>自动缩进。
        <dl>
            <dt>这是dl列表的标题</dt>
            <dd>这是dl列表的描述项1</dd>
            <dd>这是dl列表的描述项2</dd>
            <dd>这是dl列表的描述项</dd>
        </dl>
<9> 图片组合标签<figure>
       ①图片<img/>后续讲解;②图片标题:<figcaption> </figcaption>
<figure>
    <img src="img/icon.jpg"/>
    <figcaption>图片的描述标题</figcaption>    
</figure>
<10> 分区标签<div> (最常用的标签)
         div标签需要配合使用CSS,现在并没有什么用;
         div标签没有任何特殊的作用,仅仅起到一个包裹内容的作用 常用于网页中划分区块;
         div标签可以包裹任何内容,需配合CSS一起使用。
<div style=" width:500px; height:100px; background:greenyellow ;">
              这是div里面的文字!
           <p>1234567890</p>
</div>

(二)基本的行级标签

   <1> span(文本)标签

       span标签特点:类似块级div
                     ①只是包裹作用,没有其他任何作用;
                     ②作用于div类似,需要配合CSS使用,只不过div是块级标签,span是行级标签。
         浩哥真<span style="color: red;font-size: 48px;"></span>!!!
         <br/>      <br/>      <br/>    
   <2> em(强调)/strong(强调)、i(倾斜)/b(加粗)
            ① em和i都能倾斜。strong和b都能加粗!但是i和b仅仅只是倾斜和加粗,而strong和em多了强调的语义。
            ② em和strong都表示强调,但是strong强调的级别更高。
           【注意】
             1.强调的目的:让搜索引擎知道网页重点强调的内容!便于搜索引擎显示。
             2.strong和em都可以多层嵌套,表示强调程度的递增
        <em>这是em标签</em><br/>
        <strong>strong标签</strong><br/>
        <b>b 标签</b><br/>
        <i>i 标签</i><br/>
        <u>这是 u标签</u><br/><br/>
   <3> 引用标签
           q标签(quote):表示短引用。
           cite属性:用于声明引用的来源。
           <blockquote>用于引用一段内容</blockquote>   <q>用于引用一句话</q>     <cite>常用于引用作品名、书画名等</cite>
           相同点:三个引用标签,都用cite属性表示引用来源
           不同点:①引用内容不同。blockquote->一段话; q->一句话 ; cite->作品名。
                         ②显示默认效果不同。blockquote->默认整段向右缩进;q->默认加引号; cite->默认倾斜。
        <q cite="http://www.jianghaozhenshuai.com">我是q标签引用</q><br/>
        
        <blockquote cite="">我是blockquote的引用</blockquote><br/>
        
        <cite cite="">这是cite标签引用!</cite><br/><br/>
   <4> 字体大小
            small:将字体缩小一号; big:将字体放大一号。
           【注意】 ①small和big可多层嵌套,直到字体到达最大最小为止;②已淘汰,不建议使用。
   <5> img 图片标签
          ① src属性:表示图片的路径  [图片路径的合法方式]
                 相对路径: src=>“source”
                              ① 图片与当前文档在同一层文件夹:直接写图片名;
                              ② 图片在当前文档的下一层文件夹:文件夹名/图片名;
                              ③ 图片在当前文档的上一层文件夹:../图片名(../表示后退一层);    
                             【注意】图片必须包含在项目里,不能访问项目外的图片。
           ②height:图片高度  width:图片宽度
           ③title:图片的标题 即鼠标指上后看到的提示文字。
           ④alt:图片无法加载时显示的文字。
           ⑤align:图片周围的文字相对于图片如何对齐。可选值: top、 center、 bottom
        <img src="img/icon.jpg" style width="200px" height="200px"></img>
        <img src="https://www.baidu.com/img/bd_logo1.png"></img>
        <img src="file:///E:/bd_logo1.jpg"></img><br/><br />
        
        <img src="bd_logo1.png"  />
        <img src="img/icon.jpg" title="考拉" />
        <img src="../icon.jpg" />
        <img src="../img/bd_logo1.png"/><br/><br />
        
        <img src="../bd_logo1.png" alt="图片无法加载显示"/> <br />
        <img src="../icon.jpg" align="top"/> 123456 <br /> <br />
  <6> 超链接 a
           ①href属性:表示超链接需要跳转的页面。
                    a.可以写网络地址;
                    b.可以打开本地文件:采用相对路径确定文件地址,与img标签确定方式相同。
           ② title属性:鼠标指上后显示的文字。
           ③ target属性:设置新页面打开后的窗口位置 。可选值:_self自身页面打开(默认) _blank新窗口打开。
 【超链接的特殊应用】
         1.功能性链接
             mailto:// 点击链接给指定邮箱发送邮件
             tencent://message/?uin=1257943317 点击与指定QQ聊天
             ftp://使用ftp协议进行文件的上传下载。
          2、锚链接
             本页面锚链接
                ① 在页面的指定位置设置一个锚点,用name属性表示锚点的名字;
                ② 将超链接的href属性,设置为#加锚点名字。
              页面间锚链接
                ① 在新页面的指定位置设置一个锚点,用name属性表示锚点的名字;
                ② 将超链接的href属性,设置为“新页面地址#加锚点名字”。
        <a href="http://www.baidu.com" target="_blank">这是一个超链接01</a><br/>
        <a href="01-HTML-Head部分.html" target="_bank">这是一个超链接02</a><blr />
        <a href="../text000.html" title="测试网站" target="_blank">外链接</a><br/>
        <a href="mailto://15269599302@163.com" title="我的邮件" target="_blank">点击给指定邮件发送邮件</a>
           
        <a name="#center"></a>
        <div style="background-color: greenyellow;height:800px ;"></div>
        <a href="#top">点击返回顶部!</a>
        <a href="#center">点击跳到中间!</a>
        
        <a href="../text000.html#one" target="_blank">点击新页面第一部分</a>
        <a href="../text000.html#two" target="_blank">点击新页面第二部分</a>
        <a href="../text000.html#three" target="_blank" >点击新页面第三部分</a>

四、W3C规范


1、W3C:万维网联盟,负责制定和维护Web行业开发标准。

2、要求的规范:
      ① 两个分离: 内容与表现分离(HTML与CSS分离) ;内容与行为分离(HTML与JavaScript分离开);
      ② HTML语言要遵循语义化!
      ③ 关于代码书写的规范:
              HTML中的标签与属性必须要小写;
              HTML中的标签必须闭合 <p></p> <img/>;
              属性值必须用引号引起来 <img src="属性值"/>;
              HTML标签必须正确嵌套。(不能交叉、块级标签可以包裹行级,行级标签不能包裹块级)

五、HTML表格


  表格用Table表示,表格中的每一行用tr表示,一行中的每一列用td表示;  th表示的是表头,表头中的文字默认加粗居中;th要放在tr中,相当于替换掉td。

   <1> table常用属性
          1、boder:给表格加边框,并且给整个table加外边框,当增大boder的值时,td上的值不变化,只有最外层大边框变宽
          2、cellspaceing:单元格 与单元格之间的距离。
               cellspaceing="0":单元格 与单元格之间没有距离。但是边框线的宽度依然是两条线的宽度。
             【注意】表格边框合并的CSS写法:style="border-collapse: collapse;"
                         这条css与cellspaceing="0"的区别:
                         后者仅是将单元格之间的属性调整为0,实际上单元格之间依然还是两条线;
                         前者是将表格相邻的两条边框合并处理,只有一条线存在。(一旦边框合并,cellspacing失效)
         3、cellpadding="20" :单元格中的文字与单元格边框的距离。
         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:背景图。当背景色跟背景图同时存在时,背景图会覆盖背景色。
   <2> tr与td常用属性
         1、width、 height;
         2、bgcolor="red":单元格背景颜色;
         3、align:设置单元格中的文字,水平对齐方式;left、center、right
              valign:设置单元格中的文字,垂直对齐方式;top、middle、bottom
         4、nowrap="nowrap":当单元格文字过多时,设置单元格文字不断行显示,但是,会把表格的宽度增大!
   <3> 表格的跨行与跨列
         1、跨列:在td上使用属性colspan="n"进行跨列
         2、跨行:在td上使用属性rowspan="n"进行跨行
参考代码:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML表格</title>
    </head>
    <body>
           <table style="width: 500px;height: 100px;border-collapse: collapse;"  border="1" bordercolor="red" bgcolor="aquamarine" align="center">
            <tr bgcolor="pink">
                <th nowrap="nowrap">标题一</th>
                <th>标题二</th>
                <th>标题三</th>
            </tr>
            <tr style="color: red;" >
                <td rowspan="2">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>              
                <td colspan="2">2-2</td>            
        </table>        
    </body>
</html>

 六、后记


   这是小女第一次发微博,写此后记纪念一下。通过这两堂课跟HTML的接触,我发现自己还是很喜欢她的,只是我没有与生俱来的编码天分,一切还在摸索阶段,希望可以通过后天的勤奋努力称为编码界中的佼佼者。加油↖(^ω^)↗

 

HTML5入门(一)—— 基本标签&表格

标签:外链   佼佼者   勤奋   lsp   来源   发微博   需要   html标签   背景颜色   

原文地址:http://www.cnblogs.com/Tracey-1023/p/7020538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!