一、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. 【LeetCode】112. Path Sum

    题目: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up ...

  2. 把本地git仓库中的项目引入到码云上

    一.安装git软件和TortoiseGit客户端(git需配置环境变量,但安装时已经配置好,无需考虑) 二.生成公钥和私钥(建立与码云的连接) 三.在码云上新建项目(建议在组织的基础上)   四.在码 ...

  3. Postgresql快速写入/读取大量数据（.net）

    环境及测试 使用.net驱动npgsql连接post数据库.配置:win10 x64, i5-4590, 16G DDR3, SSD 850EVO. postgresql 9.6.3,数据库与数据都安 ...

  4. 基于Node.js的微信JS-SDK后端接口实现

    做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分 ...

  5. jsoncpp动态解析节点类型

    在互联网无处不在的今天,JSON作为轻量级数据存储格式,被广泛应用到互联网数据传输中.众所周知,JSON由键/值对.对象.数组组成,其中键/值对的值包括以下几种类型: enum ValueType { ...

  6. Spring Boot 系列（一）快速入门

    简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置 ...

  7. Django源码学习 了解render与render_to_response

    render与render_to_response def render_to_response(template_name, context=None, content_type=None, sta ...

  8. 使用WordPress快速建站

    安装前的准备1.下载最新版的 WordPress (这里演示为WordPress 3.5 官方中文版),解压后,将WordPress文件夹里面的所有文件,上传到你的主机空间域名所绑定的根目录.2.新建 ...

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

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

  10. Spring mybatis源码篇章-sql mapper配置文件绑定mapper class类

    前言:通过阅读源码对实现机制进行了解有利于陶冶情操,承接前文Spring mybatis源码篇章-MybatisDAO文件解析(二) 背景知识 MappedStatement是mybatis操作sql ...