html学习

HTML篇

1.html概念

  • html全称HyperText Markup Language,翻译为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式,比如字体,颜色,大小等

  • 超文本 : 音频,视频,图片等称为超文本

  • 标记: <一个英文字母或者单词> 这种类型称之为标记

  • 作用 : html是负责描述文档语义的语言

  • 注意 : html语言不是编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行

  • html是一个纯文本文件(也就是txt文件改名而成),用一些标签来描述文字的语义,这些标签在浏览器中是看不到的,所以称为超文本,所以就是超文本语言了

2.html的网络术语

  • 网页 ; 由各种标记组成的一个页面就是网页

  • 主页(首页) ; 一个网站的起始页面或者导航页面

  • 标记: < p > 称为开始标记,</ p>称为结束标记,也叫标签,每个标签都规定好了特殊的含义

  • 元素: 标记之间的内容就叫做元素

  • 属性,标记中对没一个标签所做的辅助信息

3.html规范

  • 所有的标记都要正确的嵌套,不能交叉嵌套,就是一个标记的开始标记和结束标记之间不能存在单独的其他开始标记或结束标记,也就是不能交叉嵌套

  • 所有标记必须小写

  • 所有标记必须关闭

    • 双边标记 : < span >< /span >

    • 单边标记 : <br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />

    • 所有属性必须加引号< h1 id = "head" > < /h1 >

    • 所有属性必须有值

4.htmL的基本语法特征

  • 对换行不敏感,对tab不敏感

    • html只在乎标签的嵌套结构,嵌套的关系,换行和tab对页面结构不影响

  • 空白折叠现象

    • html中所有的文字中间,如果有空格,换行,tab都将被折叠为一个空格显示

  • 标签严格封闭

5.html结构

  • 新建html文件,输入html:5 或者 ! 按下tab键后,自动生成默认的代码,如下

    •  <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>Document</title>
       </head>
       <body>
           
       </body>
       </html>

  • 文档声明头

    • 任何的标准的html页面,第一行一定是一个以< !DOCTYPE html >开头的一行,这就是文档声明头,DocType Declaration,简称DTD,此标签可以告知浏览器文档使用哪种html或xhtml规范

  • 头标签

    • head标签都放在头部分之间,这里包含了< title > ,< meta >,< link > ,< style >

      • < title > :指整个网页的标题,显示在浏览器的最上边

        • 主要是告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题

      • < meta > :提供有关页面的基本信息

        • 严肃可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的关键词

        • 提供的信息用户不可见,分别有两个属性

          • http_equiv属性

            • 它用来向浏览器传达一些有用的信息,帮助浏览器正确的显示网页的内容,与之对应的属性值为content,content中的内容就是各个参数的变量值

            •  <!--重定向 2秒后跳转到对应的网址，注意分号-->
               <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
               <!--指定文档的内容类型和编码类型 -->
               <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
               <!--告诉IE浏览器以最高级模式渲染当前网页-->
            <meta http-equiv="x-ua-compatible" content="IE=edge">
           ​

        • name属性

          • 主要用于页面的关键字描述,写给搜索引擎看的,关键字之间可以用逗号隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的

          •  <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

            • 这些关键词就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率,让别人能都通过搜索引擎搜索到

          •  <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

            • 只要设置Description页面描述,那么百度搜索结果,就能显示这些语句,这个技术叫做SEO(search engine optimization,搜索引擎优化

          •  <meta name=viewport content="width=device-width, initial-scale=1">

            • 上面这个标签,是让我们网页支持移动端,移动设备优先

      • < link > :定义文档与外部资源的关系

      • < style > : 定义内部样式表与网页的关系

  • html颜色显示

    • 纯单词表示:red,green,blue,orange,gray等

    • 十进制表示: rgb(255,0,0)

    • 16进制表示 : #FF0000

6.html标签

  • 标签分类

    • html标签又叫html元素,它分为块级元素和内联元素(行内元素),都是html规范中的概念

  • 块级元素

    • 块级元素是指本身属性为display:block的元素,因为它自身的特点我们通常使用块级元素来进行大布局(大结构)的搭建

      • 特点

      • 独占一行,每个块级元素都会从新的一行重新开始,从上到下排布

        • 可以和直接控制宽度,高度以及盒子模型相关的css属性

        • 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度

        • 在不设置高度的情况下,块级元素的高度是它本身内容的高度

    • 内联元素

    • 内联元素是指本身属性为display:inlline;的元素,他因为自身的特点,我们通常使用内联元素来进行文字,小图标(小结构)的搭建

      • 特点

    • 和其他内联元素从左到右一行显示

      • 不能直接控制宽度,高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的

      • 内联元素的宽度是由本身内容的大小决定的

        • 内联元素只能容纳文本或者其他内联元素(不要再内联元素中嵌套块级元素)

  • 文本及和容器级

    • 标签可分为文本级和容器级

      • 文本级标签:p,span,a,b,i,u,em

      • 容器级 : dic,h系列,li,dt,dd

    • 文本级标签的意思是标签中只可以放文本,不可以放其他内容,出了p之外,所有的文本级标签都是行内元素,p是个文本及,但是个块级元素

    • p里面只能放文本,图片,表单元素,p里面不能放h和ul,p里面也不能放p

7.html中的特殊字符

  • &nbsp;：空格 （non-breaking spacing，不断打空格）

  • &lt;：小于号（less than）

  • &gt;：大于号（greater than）

  • &amp;：符号&

  • &quot;：双引号

  • &apos;：单引号

  • &copy;：版权©

  • &trade;：商标™

posted @ 2019-08-07 16:29  恰蜜小嘴  阅读(130)  评论(0)  编辑  收藏  举报