HTML基本概念第一篇

一 互联网原理

HTML：制作网页。

互联网原理：上网即请求数据。

在浏览器输入一个网址，浏览器会通过HTTP协议向服务器发送请求，服务器相应后，将文件传输到浏览器端，过程中有实际的物理文件的传输。

数据：文字，图片，视频，音频等。

1.服务器

本身也是一台计算机。

服务器：server。功能比我们普通的计算机强大。主要用于存储网页文件和数据。

2.浏览器

网页请求和接收的客户端。

浏览器：browser。客户端渲染网页使用的软件。

浏览器的作用：发起HTTP请求，接收服务器传输的文件。

请求的数据并不是存在浏览器上，而是存在计算机的一个临时文件夹中。

3.HTTP协议

http:hypertext transfer protocol，超文本传输协议。

HTTP包括请求和响应两部分。

发起请求的方法：在浏览器中输入网址，或者点击网址链接。

请求：request，浏览器根据网址向对应的服务器发送请求。

响应：response，服务器根据请求响应文件，将页面传输给客户端，在浏览器中进行网页的渲染。

浏览一个网页时，HTTP请求并不是一个，而是多个HTTP请求同时发送。

二 HTML基础

1.纯文本

纯文本：只包含文字，如果一个文件内部只包含文字，就是纯文本文件。

最简单的实例：记事本文件。

纯文本文件：只保存文字内容，不保存任何样式。

HTML，css,JS都是纯文本文件。

2.HTML基本概念

HTML：超文本标记语言

作用：制作网页页面，负责描述文档的语义的语言。

HTML用文本去给普通文本添加语义，用到的这些文本就是超文本。超文本在浏览器里不会显示，但在编辑器里面就是普通文本。

<h1></h1>:将两个标签内部的文本添加了一个一级标题的语义。

<h2></h2>:将两个标签内部的文本添加了一个二级标题的语义。

<p></p>:将两个标签内部的文本添加了一个段落的语义。

3.sublime

快捷键：

　　html:xt---点击tab/ctrl+E 　　自动生成HTML结构

　　标签名--tab　　自动生成标签

　　h$*数字　　　　生成h1到h数字的标签

　　标签名*数字　　生成数字多个的同一个标签

　　Ctrl+滑轮滚动　　放大缩小文字

　　按住滚轮拖动　　选中多行，一起进行编辑

　　Ctrl+shift+D　　　复制光标所在行

　　Ctrl+shift+K/ctrl+X　　删除光标所在行

　　Ctrl+shift+↑　　　　将光标所在行上移一层

　　Ctrl+shift+↓　　　　将光标所在行下移一层

三 HTML骨架

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
      内容区域  
    </body>
</html>

HTML：最根本的标签，表示整个的网页。

Head：网页的头部，里面里面都是一些网页的配置，除了title标签，其他的内容在浏览器上都是不可见的。

Title：网页的标题。

Body：用户能过看到的内容区域。

2.文档DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD:doctype definition。文档类型定义。定义这个HTML文件使用的是哪一个版本的HTML规范。

HTML规范是书写HTML要遵循的规范。规定了使用的标签和语法。

HTML，css,js规范的维护和制定的组织：w3c

3.html标签

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</html>

html标签是一个双标签

html标签由两个属性

 

xmlns：是xml的namespace规定了标签使用的是哪种命名规范。用户浏览器不一致，必须规范死什么是标签什么是内容，标签具有什么语义。

 

lang：规定html文件标签都必须使用英文。

 

4.head标签

head标签也是一队双标签，里面是对网页进行的一个配置。

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>

meta标签规范网页使用的字符集。

常用字符集：

　　　　　　国家标准字库：utf-8，包括世界所有语言。汉字占3个字节。

　　　　　　国家标准字库：gbk,包括所有简体字，大部分繁体，一些特殊符号，汉字占2个字节。

 

title标签：是一个双标签，内部书写是网页的标题。

title里的文字作为关键首先被搜索引擎抓取。

四 html的语法

1.标签对换行和空格不敏感。

在编辑html的时候，标签之间对换行空格不敏感，对标签之间的嵌套敏感。

2.空白折叠现象

在普通文本内部：如果有空格，缩进，换行，将这些空白区域折叠成一个空白显示在浏览器里。

 3.html标签

（1）标签必须写在一队尖括号里<p>

  (2)   双标签必须成对出现，<p></p>

  (3)   结束标签必须写关闭符号/

（4）标签分类：

　　　　容器级：内部还可以放置嵌套任意类型的标签，甚至是容器级标签。div,h系列

　　　　文本级：只能放文字，图片，表单元素，废弃文字修饰标签等，不能放容器级标签。p标签。

4.标签属性

每一个标签都有自己特定的属性。

属性都有属性值，属性名k(key),属性值v(value),键值对写法

　　（1）属性书写在标签的起始标签内部。与标签名之间用空格隔开，属性与属性之间也需要用空格隔开。

　　（2）键值对书写格式：k="v"。中间不能有空格。

<p class="duanluo" id="op"></p>

　　  (3)属性值必须是用双引号包裹，XHTML严格要求使用双引号。

　   （4）标签属性值可以有一个或者多个，多个属性值之间用空格隔开，全部必须在引号内部　　

<p class="duanluo ps para" id="op"></p>

 

五 html标签

1. h 系列

h系列标签为了里个等级，表示一到六级标题。

语义：给文本添加一到六级标题语义。

    <h1>这是1级标题</h1>
    <h2>这是2级标题</h2>
    <h3>这是3级标题</h3>
    <h4>这是4级标题</h4>
    <h5>这是5级标题</h5>
    <h6>这是6级标题</h6>

级别依次降低，重要程度也是依次降低。

约定俗成，一般一般一个页面里面h1标签的权重是最高的，最便于搜索引擎搜索的。一个页面只写一个h1标签。

一般将这个标签给logo。

所有的h系列标签虽然是容器级，它们之间没有嵌套关系。

 

2.p标签

文本级标签。

给我们文本添加一个段落的语义。

注意：一个p标签只能作用于一个段落。多个段落要用多个标签分别标记。

 

 3.img标签

img标签是一个单标签。

可插入图片类型：jpg，png，gif

 <img /> 

img标签属性：

　　△src:source,资源，表示图片的来源，路径。必须写的属性。

　　width：宽度。单位是px。

　　height：高度。单位是px。

　　同时设置宽高，可以任意对图片变形。

　　title：设置提示文本，属性值就是我们提示的具体文本。

　　alt：设置图像没有找到时候的替换文本。

<img src="image/cat.jpg" height="300" width="400" title="l love leslie" alt="leslie" />

 

4.路径

路径就是我们查找相关文件的位置的方法。

查找方式：相对路径，绝对路径。

（1）相对路径：查找文件时，从html文件本身出发，找文件的位置。

 　　同级查找：直接书写文件名字（包括文件名和扩展名）

　　子级查找： 进入文件查找过程，书写对应文件夹的名字，后面用/表示进入文件夹，后面直接书写指定的文件名。 <img src="images/box/cat.jpg" alt="" /> 

　　上级查找：文件放在html上级的文件夹里，需要先退出当前级别，退回到上一级文件夹，方法用../退回，退出几级就书写几次。 <img src="../timg.jpg" alt="" /> 

 注意：不能跨盘符进行查找。

 

（2）绝对路径

　　  绝对路径是从盘符出发寻找目标文件，以http://开头的路径也是绝对路径。

<img src="http://pic25.nipic.com/20121117/9252150_165726249000_2.jpg" alt="" />

常用：相对路径和网址形式的绝对路径。

 

 

 

 

 

 

 

 

 

 

　　

 

posted @ 2019-08-05 09:40  --千山--  阅读(23)  评论(0)    收藏  举报