一、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入门（一）—— 基本标签&表格的更多相关文章

  1. HTML5入门以及新标签

    HTML5 学习总结(一)--HTML5入门与新增标签   目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...

  2. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  3. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  4. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  5. Bootstrap入门（四）表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  6. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  7. HTML5的新结构标签

    在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也 ...

  8. HTML5样式、链接和表格

    -------------------siwuxie095 HTML5 样式 1.标签 <style> 标签:样式定义 <link> 标签:资源引用 2.属性 rel:用于指定 ...

  9. HTML5学习之新增标签

    转自:http://www.cnblogs.com/fly_dragon/archive/2012/05/25/2516142.html 作者:FlyDragon 一.引言 在本节中,笔者将向大家讲述 ...

  10. Bootstrap入门（2）表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

随机推荐

  1. 【Android Developers Training】 106. 创建并检测地理围栏

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  2. 【Android Developers Training】 59. 管理图片存储

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  3. date时间转换

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  4. Linux系统介绍

    类似Windows, Linux也是一个操作系统,Linux是一套开放源代码程序,并可以自由传播的类Unix操作系统软件,多用户,多任务并且支持多线程和多CPU的操作系统. Linux系统主要被应用于 ...

  5. str-字符串功能介绍

    叨逼叨:字符串的各个功能修改不是本身,本身不变,会产生新的值,需要赋值给新的变量来接收 以下 "举例" 是解释每个功能的实例   "举例"下一行是pycharm ...

  6. Linux 下搭建www服务器

    偶然的机会接触了前端开发,尽管最初的意愿是后台. 不过现在看来,前端后台数据库密不可分! 回想起来感觉自己学习的层次也还很好,因为之前有学习c语言.c++的基础,所以在学习html,js的过程中感觉还 ...

  7. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

  8. crm维护踩坑记(一)

    目录 antd es6 Object.entries() Object.keys() Object.getOwnPropertyNames() 很神奇的用法!!! eslint 傻逼 其他 参考 an ...

  9. select默认选中项颜色为灰色，选择后变为黑色（js实现）

    <script> var unSelected = "#999"; var selected = "#333"; $(function () { $ ...

  10. 【菜鸟入门】安装配置eclipse 并编写运行第一个Java程序

    不得不吐槽一下,安装配置这eclipse真是太费劲了...下面总结一下,以便下次再安装 本人 win10系统,64位机 一.在官网下载eclipse安装包 文件名:eclipse-inst-win64 ...