5.21http网页基础

1,HTML的由来:

  web网页开发的标准,由w3c万维网联盟组织制定的。是制作网页的规范标准,分为结构标准、表现标准、行为标准。结构:html。表现:css。行为:Javascript。

2,html是什么?

  HTML是一种超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。超文本就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

        超文本标记语言的结构包括头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

  HTML是一种标记语言(markup language),它不是编程语言。没有逻辑。

  本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)

  网页文件的扩展名:.html或.htm。

3,HTML是负责描述文档语义的语言。html中,除了语义,其他什么都没有。

HTML文档的结构

  1. <!DOCTYPE html>声明为HTML5文档。
  2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
  3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
  4. <title>、</title>定义了网页标题,在浏览器标题栏显示。
  5. <body>、</body>之间的文本是可见的网页主体内容。

4,html的标签格式:

  HTML标签是由两个< >尖括号包裹关键字而组成的。

  HTML的标签通常是成对出现的<p>  </p>,后面里面的   /  反斜杠是结束符。

  也有一部分是单独出现的,比如:<br/>、<hr/>、<img src="1.jpg" />等。

  标签里面可以加属性,也可以不加属性。

注释:快捷键 ctrl+/ 生成注释

5,文本标签又有字体标签:字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

  标题使用<h1>到<h6>,h1定义最大标题,h6定义最小标题。具有align属性:有center,left,right,进行操作。

  字体标签<font>已废弃:

  color:可以设置字体颜色。

  size:可以设置字体大小,1~7,如果取值大于7那就按照7来算,如果取值小于1那就按照1来算。如果想要更大的字体,那就只能通过css样式来解决。、

  face:可以设置字体格式。

  粗体标签<b>或<strong>(已放弃)

  下划线标记 <u> 中划线标记<s>(已废弃)

  斜体标记 <i><em>(已废弃)

  上标<sup> 下标<sub>

  特殊字符

内容对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

6,排版标签

  <p>段落标签:是英文paragraph的缩写。也有align属性:center,left,right

  HTML标签是分等级的。HTML将所有的标签分为两种:

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

  2,容器级标签:div、h系列、li、dt、dd。容器级标签里可以放任何东西。

  从学习p的第一天开始,就要死死记住:p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。

  错误写法:(把h系列的标签放到p里)

7,块级标签:

  <div>和<span>是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。

  

  div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

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

  <span><div>唯一的区别在于:<span>是不换行的,而<div>是换行的。

  如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。

  div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域。

  div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。

  span也是表达“小区域、小跨度”的标签,但是是一个文本级的标签。

  就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

  <hr>水平线标签

  <br>换行标签,<p>标签和<br>标签的区别在于<p>标签会在段落的前后自动插入一个空行,而<br>标签没有空行;而且<br>标签没有属性。

  <center>内容居中标签

  <pre>预定义(预格式化)标签

8,超链接标签<a>

  所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

超链接有三种形式:

  1,外部链接,链接到外部文件。

  2,锚链接,
  指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。
  首先我们要创建一个锚点,也就是说,使用name属性或者id属性给那个特定的位置起个名字。

  3,邮件链接。

href属性指定目标网页地址。该地址可以有几种类型:

  • 绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
  • 相对URL - 指当前站点中确切的路径(href="index.htm")
  • 锚URL - 指向页面中的锚(href="#top")

target:

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页

9,图片标签<img />

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

  img是自封闭标签,也称为单标签。

  能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。

  不能往网页中插入的图片格式是:psd、ai.

  src属性:图片的相对路径和绝对路径.

      -宽度
      -height:高度
      -align:指图片的水平对齐方式,属性值可以是:left、center、right
      -alt:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。
      -title:提示性文本。公有属性。也就是鼠标悬停时出现的文本。

  

原文地址:https://www.cnblogs.com/yzxing/p/9067685.html