HTML概念

最新推荐文章于 2022-07-01 23:08:09 发布

DeadLine9527

最新推荐文章于 2022-07-01 23:08:09 发布

阅读量316

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/DEAD_line9527/article/details/95338193

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础
   前端：HTML CSS JavaScrpit (网页三剑客) Bootstrap框架

什么是HTML
   HTML：HyperText Markup Language 超文本标记语言。
   1. 超文本：不同于普通的文本，比普通文本功能上更加强大。文本有颜色，有链接，有图片等。
   2. 标记语言：由各种各样的标记组成，标记又称为标签或元素。标签：<标签名/>
       不同于编程语言，它通过标记符号来标记要显示网页中的各个部分。
       网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容
       （如：文字如何处理，画面如何安排，图片如何显示等）。
       浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出
       其错误，且不停止其解释执行过程。
       网页存放在服务器上，运行在浏览器上，运行之前先从服务器上下载到本地，在本地浏览器上解析。

什么是HTML5
   2014年10月29日，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布，
   这是一次重大的革新。HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网
   应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
   目前支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），
   Safari，Opera等。不同的浏览器之间是有差异的，同一个网页在不同的浏览器上运行结果可能不同。

记事本创建html
   HTML是一个文本文件，使用记事本就可以开发。
   1. 在任意位置(F 盘根目录)，创建“文本文档”，重命名“01-第一个网页.html”
   2. 右键/打开方式/记事本，开发 html 文件，并编写如下内容：
   <h1 style="color:red">Hello World!</h1>

HTML的基本结构
   html 根元素，所有其它的元素都应该放在 html 之内。
   head 网页的头部，头部的信息放在这个标签中。如：网页标题
   body 网页的主体，网页的内容放在这里。 bgcolor 属性：设置网页的背景色
   注释不可以嵌套

编写HTML文件

    <!--这是一个 HTML5-->
    <!DOCTYPE html>
    <!--根元素,lang 表示语言-->
    <html lang="zh-CN">
         <!--网页头-->
         <head>
             <!--设置网页的字符集-->
             <meta charset="UTF-8">
             <title>我是标题</title>
         </head>
         <!--网页主体-->
         <body bgcolor="#deb887">
            你好世界
         </body>
    </html>

HTML标签的分类
   有主体标签
                   <标签名属性名="属性值">主体</标签名>
                   比如： <body>有内容</body>

   无主体标签
                   <标签名属性名="属性值"/>
                   比如： <hr color='red'/>

按是否换行分类
   块级标签    一个标签独占一行，比如：div标签
   内联标签    在同一行按从左到右的顺序显示，不单独占一行：比如span标签

常用文本标签
   h1-h6
           标题标签 1号标题最大 6号最小
               align 对齐方式
                   居中:center 右对齐：right 左对齐：left

   hr       水平分割线
               color 颜色 size 粗细 width 宽度

   font    字体
               color 颜色 size，字体大小，face 字体，比如楷体

   b和strong   加粗

   i       斜体

   br       换行

   p       段落    title：鼠标悬停时显示的提示信息
       <font size="40" face="楷体" color="red"><b><i>设置字体</i></b></font>

列表标签
   ol-li                        有序列表，有顺序编号   ol 列表的容器   li(list) 列表中的每一项
       type属性，可用值如下：
           1 ：数字，默认
           a,A ：字母大小写
           i,l：罗马数字

   ul-li                       无序列表       ul 列表的容器   li(list) 列表中的每一项
       type属性：可用值如下：
       disc：实心圆点默认
       circle：空心圆点
       square：实心正方形

   有序列表
       <ol type="A">
           <li>列表项</li>
       </ol>
   无序列表
       <ul type="square">
           <li>列表项</li>
       </ul>

块标签和内联标签
   div       块级标签：用于组合其他HTML元素的容器。
       单独占一行。后期主要用于网页的布局。

   span   内联标签：常用作文本的容器。
       不单独占一行，不换行。

   div：   用来作为元素的容器，划分页面区域，独占一行
   span：   用来作为文本的容器，需要结合CSS使用，否则没有意义。不会单独使用

实体字符
   一些字符在HTML 中拥有特殊的含义，比如小于号 (<) 用于定义HTML 标签的开始。如果我们希
   望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

实体字符的格式
   1.以&开头，以分号结尾

   2. 常用实体字符
       小于：<
       大于: >
       注册商标:®
       空格: 
       人民币符号: ¥
       双引号: "
       单引号：&

图片标签
   <img src=" <img src="文件地址"/>
       用于服务上显示图片图片必须在服务器上存在。

   <img src='图片地址' width='宽度' height='高度' alt='图片加载失败时显示的信息'
       title='鼠标悬停时显示的提示信息'>

什么是锚点
   通俗的讲，当页面内容比较长时，我们需要跳转到网页的不同位置，这些位置称为锚点。锚点是
也是超链接，只不过它是页面内部的超链接，它指向页面特定的部分。

使用锚点的步骤
   1. 定义锚点： <a name="锚点名称">文字</a>
   2. 跳转到锚点： <a href="#锚点名称">文字</a>

超链接标签
   跳转到页面：<a href='要跳转的地址'>文字或图片</a>
   跳转到锚点：<a href='#锚点名称'>文字或图片</a>
   href 表示要跳转到的页面地址(URL Uniform Resource Locator 统一资源定位符)
   title 鼠标悬停在链接上时要显示的提示信息
   target
       _self 默认值，表示在同一个页面中打开
       _blank 表示在另一个窗口或标签中打开

跳转到其他页面的锚点
   语法： <a href="页面地址#锚点名称">文字内容</a>
   
   <a href="test.html#two" target="_blank">第二章</a>

表格标签
   <table>
       <tr>
           <td>
               表格内容：文本，图片，其他标签....
           </td>
       </tr>
   </table>

   table        表格容器
   tr            表格的一行，每一行要有一个tr
   th            表格列标题：如：学号自动居中，加粗
   td            每个单元格就是一个td，如：女, 80
   caption    表格的标题，如：学生成绩表
   thead        表格头部
   tbody        表格主体
   tfoot        表格尾部

   thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。
   当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个
   总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被
   打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

表格常用属性
   width                指定表格宽度
   height                指定表格高度
   border                指定表格边框，默认边框为0，看不见的
   align                设置内容对齐方式，用于tr，td，table中
   可取值：           left 左对齐 center 居中对齐 right 右对齐
   rowspan            指定单元格跨几行
   clospan            指定单元格跨几列
   cellspacing        指定单元格与单元格之间的间距
   cellpadding        指定单元格与内容之间的间距