前端（一）

稀饭_
300 阅读8分钟

一网页构成

  • html：用作网页布局结构（标签）。
  • css： 用作网页美化。（style属性或class属性去做）
  • JS： 用作网页逻辑。（类似思维，增加逻辑）

二.标签语法

HTML页面由各种标签+文本内容组成。标签都规定好了特殊的含义。每个标签都有私有属性（就自己有），也都有公有属性（所有标签都有）。属性做为标签的辅助信息。

2.1标签和属性写法要求：

  • 标签都要正确的嵌套，不能交叉嵌套。
  • 标签都必须小写。
  • 标签都必须关闭。
  • 属性必须有值。
  • 属性与标签之间、各属性之间需要以空格隔开。属性值以双引号括起来。

tip：HTML对换行不敏感，对tab不敏感。html中表示长度的单位都是像素。HTML只有一种单位就是像素

2.2HTML结构

  • 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。<!doctype html>是HTML5标准。
  • head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
  • body部分：我们所写的代码必须放在此标签內。

了解了标签和属性写法和html的结构，接下来就是填充关于标签和标签属性知识。构建一个html

三标签详解

3.1头标签

头标签都放在头部分之间。包括：<title>、<base>、<meta>、<link>

  • <meta>标签一般都是当前网页的基本配置信息，它常用属性有：

 <meta charset="UTF-8"> 表示编码格式

<meta http-equiv="refresh" content="3;http://www.baidu.com">表示三秒内跳转百度

<meta name="Keywords" content="网易,邮箱,游戏..." />这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你

我们把含有meta标签的这一行代码抽象一下：

name即“名字”，content即“内容”。

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

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

  • <title>标签显示在网页顶部。没有什么属性。title也是有助于SEO搜索引擎优化
  • <base>标签指定当前页面链接baseurl。常见属性有:href  、 target
  • <link>标签链接一个外部css样式表。后边讲

3.2Body标签属性

  • bgcolor：设置整个网页的背景颜色。
  • background：设置整个网页的背景图片。
  • text：设置网页中的文本颜色。
  • leftmargin：网页的左边距。IE浏览器默认是8个像素。
  • topmargin：网页的上边距。
  • rightmargin：网页的右边距。
  • bottommargin：网页的下边距。
  • link：网页中超链接默认显示颜色
  • alink：网页中超链接点击但还没有松开的颜色
  • vlink：网页中超链接点击过后的颜色

3.3标签分类

HTML标签按能放的标签分类：

  • 文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。

  • 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

 tips：还有根据是否换行分类：块级标签、行内标签。

<p>是一个块级文本标签。

如果这样错误写：

<p>    我是一个小段落<h1>我是一级标题</h1></p>

浏览器会改写成：

<p>
        我是一个小段落
    </p><h1>我是一级标题</h1>

p标签属性align="属性值"：对齐方式。属性值包括left center right

<div>是一个块级容器标签。<span>是一个行内文本标签

CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。这两个元素是专门为定义CSS样式而生的。

div标签的属性：设置块儿的位置。属性值可选择：left、right、 center。

<br>换行标签(已废弃)，没有属性。

<hr>分割线（已废弃），属性有：

  • align="属性值"：设定线条置放位置。属性值可选择：left right center。
  • size="2" ：设定线条粗细。以像素为单位，内定为2。
  • width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
  • color="#0000FF"：设置线条颜色。
  • noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体，这是内定值。 

<pre>预格式化，里边的空格保留，一般不用

四字体标签

4.1标题

标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。 

4.2特殊字符

  • &nbsp;：空格 （non-breaking spacing，不断打空格）
  • &lt;：小于号（less than）
  • &gt;：大于号（greater than）
  • &copy;：版权©

4.3一些小标记

  • <u>：下划线标记

  • <s>或<del>：中划线标记（删除线）

  • <i>或<em>：斜体标记

4.4上标下标

<sup>、<sub>上小标这两个标签容易混淆，怎么记呢？这样记：b的意思是bottom：底部 。

4.5超链接<a>

外部链接

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。属性：href 表示连接到的另外一个地址;target设置是否开一个新的窗口。如：

<a href="http://www.baidu.com" target="_blank">点我点我</a>

锚链接

 指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转

<a href="#" >返回当前页面顶部</a>表示返回当前页面顶部

<a href="#" name="yundong">运动</a>定位到当前页面<a>的属性名字是yundong或者id是yundong的位置。

<a href="test2.html#shuiguo">水果</a>表示跳转test2.html页面<a>的属性名字是shuiguo或者id是shuiguo的位置。

tips:name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的

属性补充：

  • href：目标URL
  • title：悬停文本。
  • name：主要用于设置一个锚点的名称。
  • target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
    • _self：在同一个网页中显示（默认值）
    • _blank：在新的窗口中打开
    • _parent：在父窗口中显示
    • _top：在顶级窗口中显示

五图片标签

img: 代表的就是一张图片。是单边标记。

能插入的图片类型：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。

tips：HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

src属性：指图片的路径。有两种写法：相对路径、绝对路径

写法一：相对路径：相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。

写法二：绝对路径：<img src="http://img.smyhvae.com/2016040102.jpg">

总结一下：

  • 我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。

  • 相对路径，就是../ image/ 这种路径。从自己出发，找到别人；

  • 绝对路径，就是http://开头的路径。

img标签的其他属性

  • width：宽度

  • height：高度

  • title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。

  • border：给图片加边框（描边），单位是像素，边框的颜色是黑色（边框）

  • Hspace：指图片左右的边距(类似margenlift和margenrigth功能)

  • Vspace：指图片上下的边距（同上）

  • Alt：当图片显示不出来的时候，代替图片显示的内容。（有的浏览器不支持）

图片的align属性：图片和同行内的文字的相对位置。

  • align=""，图片和文字低端对齐。
  • align="center"：图片和文字水平方向上居中对齐。
  • align="top"：图片与文字顶端对齐。
  • align="left"：图片在当前行的最左边。
  • align="right"：图片在当前行的最右边。

tips：如果要想保证图片等比例缩放，请只设置width和height中其中一个。


avatar
文章
阅读
粉丝