html

html

 

 

 

  • 1.web标准

    • web标准：制作网页必须遵循的规范。

    • web准备规范的分类：

        • 结构标准：html：相当于人的骨架，html就是用来制作网页框架的。

        • 展示标准：css：相当于人的血肉。css用来对网页就行美化

        • 行为标准：Javascript：相当于人的动作。　　

 

 

  • 2.浏览器简介　　

    • 浏览器内核：

「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

    • 渲染引擎是兼容性问题出现的根本原因。　　

 

 

  • 3.　HTML介绍

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

    • 超文本：视频、音频、图片这些都成为超文本。

    • 标记：<字母或者单词>  成为标记，一个html页面是由各种标记组成。

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

    • html中，除了语义，其他什么都没有。　

    • html中的网路术语：

      • 网页：由各种标记组成的一个页面就叫网页。

      • 标记：也成为标签，<p>,开始标记，</p>成为结束标记。

      • 元素：<p>msg</p>  成为一个元素。

      • 属性：给每一个标签做的辅助信息。

    • html规范
      • html不区分大小写，但默认都是小写。
      • html是一个弱势语言，文件后缀名是html后者htm。
      • html结构：
          • 声明部分：告诉浏览器这个页面用的是哪个标准，是HTML标准。
          • head部分，将页面的一些信息告诉服务器，不会显示在页面上。
          • body部分，页面内容必须写在body里面。
      • 所有标记元素必须正确嵌套，不能交叉嵌套。
      • 所有的标记必须关闭。
          • 双边标记：<span>    msg   </span>
          • 单边标记：<br/>、<hr/>等
      • 所有属性值必须加引号。
      • 所有属性必须有值。

 

    • html的基本语法特征　
      1. html只在乎标签的嵌套结构以及嵌套关系，关于空格、tab的不会影响页面布局。
      2. 空白折叠现象。如果有空格、tab换行，无论有多少个，都会被折叠为一个空格。
      3. 标签要严格封闭、

  • 4.HTML结构详解

     

    • 头标签（head）：head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>

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

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

          • 元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
            提供的信息是用户不可见的。
          • meta标签的组成：meta有两个属性，分别是http-equiv属性和name属性。
            不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
              • http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，
                与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
1.---#<!--重定向 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
2.---#<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
3.---#<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">             #http-equiv后面接变量类型；而content后面接变量所对应的值。

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

                  1. keywords（关键字）：如：

                    <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />：
                    这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
                  2. Description（描述）如：
#<meta name="Description" content="网易是中国领先的互联网技术公司，
为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

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

　　　　　　　　　　　　　

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

      • <sytle>：定义内部样式与网页的关系。　

 

 

    • body:
      • HTML标签中有两个标签：
        1. 字体标签
        2. 排版标签
      • HTML标签是分等级的。按等级划分分为两类。
        1. 文本级标签：p、span、a、b、i、u、em。文本标签里只能有文字、图片、表单元素。
        2. 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。
        • 切记：段落<p>是一个文本级标签。p里只能放文字、图片、表单元素。　　　　　　　　　　　

 

      • 字体标签　
          1. 标题：h系列。从h1~h6，  每个网页只能有一个h1；
            具有align属性：left.right、center。
          2. 字体标签<font>
            • color:设置字体颜色；
            • size：设置字体大小；取值范围只能是1~7；
            • face：设置字体类型。
          3. 粗体标签：<b>或者<strong>
          4. 下划线:<u>,中划线:<s>
          5. 斜体:<i>或者<em>　
          6. 上标<sup>   下标<sub>  例如 :5的平方： 5<sup>2</sup>
          7. 特殊字符（注意分号）
            • &nbsp；：空格
            • &lt；：小于号
            • &gt；：大于号
            • &amp；： 符号&
            • &quot；：双引号
            • &apos; :单引号
            • &copy；： 版权©　
            • &trade；：商标™
      • 排版标签
          1. 段落标签<p>:
            • 属性：align=“属性值”。
              对齐方式：“left”、“right”、“center”　。
          2. 块级标签<div>、<span>：div和span是非常重要的标签，
            div的语义是division“分割”； span的语义就是span“范围、跨度”。俗称“盒子”标签。
            • div
              • 把标签中的内容作为一个块儿来处理操作，必须单独占据一行。
              • div标签的属性。align=“属性值”。属性值可选择：left、right、 center。
              • 如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
                这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
            • span
              • 表达“小区域”、“小跨度”的标签，是一个文本级的标签。　　　　　　　　　　　　　　　　
            • div与span的差别
              1. <span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。
              2. div是容器级标签，而span是文本级标签，只能放文字、图片、表单元素。　
        1. 换行标签<br>
          • <p>标签和<br>标签的区别在于：<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性。　
        2. 水平线标签<hr>
        3. 内容居中标签<center>:双向标签
        4. 预格式化标签<pre>:将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）　　　　　　　　　　　　　
      • 超链接（文本级标签）
          • 外部链接：链接到外部文件。（正常超链接跳转）
          • 锚链接：
            • 作用：在本页面或其他页面的不同位置进行跳转。
            • 做法：利用name属性或者id属性给特定位置起个名字。　
          • 邮件链接　　　　　　　　　
        • 特殊几个链接
          • 返回页面顶部的位置

 

<a href="#">跳转到顶部</a>

 

          • 与js有关
 <a href="javascript:alert(1)">内容</a>
  <a href="javascript:;">内容</a>
  1. javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。
  2. javascript:;表示什么都不执行，这样点击<a>时就没有任何反应。
        • 超链接的属性　
          • href：目标URL
          • title：悬停文本
          • name：主要用于设置一个锚点的名称。
          • target：告诉浏览器用什么方式来打开目标页面、
              • _self:在同一个网页中显示；
              • -blank:在新的窗口打开；
              • _parent:在父窗口显示
              • _top:在顶级窗口显示　
          • 在css中，有 hover{ color：red（指针悬浮时的颜色）；
            　　                       text_decoration:underline(指针悬浮时，文字有下划线；
            　　                      }
            　　　　　　　　　

 

      • 图片标签<img/>:代表的是一种图片，单边标记。
        • 图片标签的属性　
          • src属性：图片的路径
            • 绝对路径：以盘符开始的绝对路径；网络路径
            • 相对路径：.和..分别代表当前路径和父路径。
          • width：宽度
          • height：高度
          • title：提示性文本（鼠标悬停时出现的文本）
          • align：图片的水平对齐方式。
          • alt：当图片显示不出来的时候，代替图片显示的内容。
      • 备注：
        1. 文本级的标签显示在浏览器上时，不管你的图片多高，它总会底边对齐，这是一种现象，“高矮不齐，底边对齐”。
        2. 如果要想保证图片等比例缩放，请只设置width和height中其中一个。
        3. 如果想实现图文混排的效果，请使用align属性，取值为left或right

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　

 

　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　

　　　

 

posted on 2018-05-21 16:36  弃疾  阅读(209)  评论(0)    收藏  举报

导航