HTML+CSS3－》第2阶段：HTML5基础和HTML语义化 上

HTML+CSS3－》第2阶段：HTML5基础和HTML语义化 上

11前端开发基础视频-什么是浏览器什么是服务器端

HTML基础

    什么是浏览器？

        －浏览器和浏览器内核

        －浏览器是帮助用户浏览网页的工具软件

        －浏览器与浏览器内核，各种浏览器主要有以下四种内核

        －ie：trident、safari：webkit、firefox：gecko、chrome与opera：blink

    浏览器主要工作是访问服务器、获取网页内容、显示网页。

12前端开发基础视频-浏览器与服务器端补充

如何知道网址对应的机器？

    通过DNS服务

浏览器浏览页面背后的秘密

    浏览器接受用户操作－》浏览器封装HTTP请求－》链接服务器－：DNS解析－》发送请求Request－》服务器接受请求－》处理请求－》返回相应报文－》浏览器接相应映报文－》渲染页面呈现。

HTML5.0标准规范 于2014年10月29日 制定完成。

名词解释

    internet：因特网、互联网。可以实现全球信息互联的网络。

    WWW：万维网（world wide web），提供网站相关服务

    W3C：Web领域中的国际中立行技术标准机构。

    HTTP：超文本传输协议，也是浏览器和服务器端的网页传输数据的约束和规范 HyperText Transfer Protocol。

    Web：互联网总称。

    DNS：Domain Name System 域名系统、因特网上作为域名和IP地址相互映射的一个分布式数据库、能够使用户方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的ip地址的过程叫做域名解析（或主机名解析） http://119.75.217.109/ 百度服务器

15前端开发基础视频-网页的组成html+css+JavaScript

HTML简介

    －HTML（Hyper Text Markup Language）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

    －HTML提供了许多标记、如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容、或用相应的HTML标记描述即可。

    －HTML之所以称为超文本标记语言，不仅仅是因为它通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点／通过超级链接将网站与网页以及各种网页元素连接起来，构成了丰富多彩的Web页面。

HTML标准的选择

    －目前最新的标准是HTML5

    －部分国内的网站还是使用XHTML标准，但HTML5标准是趋势。

20前端开发基础视频-head标签和页面编码title标签使用

                                           

                   

       

   

    

   

       

                                       

            前端与移动开发                   

       

       

                                         

                                                     

                           

       

       

   

    

   

       

            前端与移动开发                          

       

       

            段落，paragraph

       

   

    

 

    UTF－8 包括全世界所有国家需要用到的字符（建议使用UTF－8，以获得最大的兼容性，要求当前页面编码与charset指定编码格式一致）。

    GBK包含全部中文字符、简体繁体英语等

Link标签

    －dns预解析

        dns-prefetch" href="http://ming.127.net”>

                ['pri:'fetʃ] v.预取

         加快页面打开速度，有效提高后续访问的网站（页面内关联的网站）的效率

    －引入网站icon图标

        shortcut icon" href="dragon.png">

    －引入css样式

        stylesheet" href = “xxx.css”>

标题标签：h1-h6，块级标签

    －标题作为页面的标题性的内容，一定要符合语意。标题1到6数字不是定义标题的样式大小，而是定义标题在整个页面中的权重。

   －标题标签只能 嵌套 行内标签

   －h1标签标注当前页面最重要的核心主题文本。

   －搜索引擎在搜索时会优先搜索标题 标签

24前端开发基础视频-URL编码urlencode

   

        ……

   

   

       

                         

            段落01:URL协议：Uniform Resource Locator( [loʊˈkeɪtər])，统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎样处理它们。

            协议规定格式：scheme://host.domain:port/path/filename

                －scheme:定义因特网服务的类型。最常见的是http

                －host：定义域主机（http的默认主机是www）

                －domain：定义因特网域名，比如w3school.com.cn

                －:port：定义主机上的端口号（http的默认端口号是80）

                －path－定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）

                －filename－定义文档／资源的名称

            常见协议：http、https、ftp等

            URL编码：URL中的非ASCII码转为％acii码

            平时我们写的网址就是url地址,URL协议就是规定url地址的格式.

       

       

            段落02：为什么有URL编码呢？如我的网址里面有中文字符，那么在阿拉伯国家的网站上能正常显示？

                非ASCII码的字符要转换成ASCII码值前面加百分号。

            url在线编码工具：

                tool.china.com/Tools/URLEncode.aspx

       

   

    

25前端开发基础视频-相对路径和绝对路径

关于路径

    dos中的cd命令

        －cd命令格式：cd路径

        －“./“表示当前目录

        －cd ../返回上一级菜单（../表示上一级）

        －cd ../../返回相对于当前目录的上两级菜单

        －cd C:\User|malunmac\直接到c盘的一个具体位置，这就是绝对路径。  //Windows下绝对路径中的斜线是左上右下。

    相对路径：／    ../   ../../

    绝对路径：C:\Users\ （Windows下）

MAC 中文件：

ranzhoudeMacBook-Air:~ ranzhou$ ls

Desktop Library Pictures 电影

Documents Movies Public 生如夏花

Downloads Music 工程

ranzhoudeMacBook-Air:~ ranzhou$ cd ./Pictures        //“./”表示当前文件夹

ranzhoudeMacBook-Air:Pictures ranzhou$ ls

IMG_0030.JPG IMG_2812.JPG

IMG_2593.JPG IMG_2813.JPG

IMG_2671.JPG IMG_2844.JPG

IMG_2698.JPG IMG_2845.JPG

IMG_2731.JPG 照片图库.photoslibrary

IMG_2780.JPG

ranzhoudeMacBook-Air:Pictures ranzhou$ 

/Users/ranzhou/Desktop/Books/08《Web前端页面布局》/01《HTML+CSS3》/第2阶段：HTML5基础和HTML语义化/25前端开发基础视频-相对路径和绝对路径.avi      //Mac 下面绝对路径中的斜线是左下右上

cd /Users/ranzhou/Desktop/Books/08《Web前端页面布局》/01《HTML+CSS3》/第2阶段：HTML5基础和HTML语义化 

ranzhoudeMacBook-Air:~ ranzhou$ cd /Users/ranzhou/Desktop/Books/08《Web前端页面布局》/01《HTML+CSS3》/第2阶段：HTML5基础和HTML语义化 

ranzhoudeMacBook-Air:第2阶段：HTML5基础和HTML语义化 ranzhou$ cd ../    //“../”表示上一级目录

ranzhoudeMacBook-Air:01《HTML+CSS3》 ranzhou$ ls

第1阶段：Web前端开发基础环境配置

第2阶段：HTML5基础和HTML语义化

第3阶段：CSS3基础与加强

第4阶段：CSS3进阶

ranzhoudeMacBook-Air:01《HTML+CSS3》 ranzhou$ 

25前端开发基础视频-hr标签br标签空格换行合并

水平线标记

---

(horizontal rule)(单标签)

    在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单的通过标记来完成，

---

就是创建横跨网页水平钱的标记。基本语法格式如下：

   

---

是单标记，在网页中输入一个

---

，就添加了一条默认样式的水平线。

    一个单标签、没有闭合标签，其中的/可以省略，

---

写成

---

即可.

HTML文档空白合并

    在html文档中，文字之间的空格，会进行一个合并，合并成一个空格。

   
换行标签，也是一个单标签,break row

    “ ”代表一个空格 ;Non-Breaking SPace

显示图片

      鼠标移动到图片上显示的也是title的内容

26前端开发基础视频-span标签和em标签语义化

HTML常用标签

    段落标签：

我是段落

.

    水平线标签：

---

（horizontal rule）

    换行标签：
（break row），段落内普通的空格和换行会进行合并。

    文本节标签：，行内标签

    注释标签：

标签

    定义着重文字。有利于搜索引擎搜索。同时包裹的文字默认会斜体（浏览器的效果 ），针对某个段落，是局部的。

标签

    定义斜体字，包裹的文字会斜体显示，但不推荐使用

标签

    定义加重语气，针对整个文档，会有加粗效果

_与^标签

    _{定义下标字＊。}

    ^{定义上标字。}

        例如：

            H₂O   水分子

            2³²  2的32次幂

标签

定义删除字。 中划线。

文字加粗显示

文字加删除线

和文字加下划线

28前端开发基础视频-关于超级链接的使用

超链接标签：<a>

    -超级链接内容,显示的文本，href表示的是指向的超链接

    -href属性，指向跳转的地址

    -#页面定位

    -target属性：_blank _self

        示例

            超级链接内容,显示的文本，href表示的是指向的超链接

            比如有一个图片

            加链接后就是

    暂时没有确定链接目标时，通常将标记的href属性值定义为“＃”（即href＝“＃”），表示该链接暂时为一个空链接。

    不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接

锚点链接

    －通过创建锚点链接，用户能够快速定位到目标内容。

    －创建锚点链接分为两步

        1.使用“链接文本”创建链接文本

        2.使用相应的id名标注跳转目标的位置。

            内容，id名不能重复

28前端开发基础视频-有序列表和无序列表

列表标签

    无序列表 unorder list

       

 

           

• 北京

           

• 上海

           

• 成都

           

• 武汉

       

    有序列表 order list

       

 

           

1. 北京你好

           

2. 上海

           

3. 成都

           

4. 武汉

       

30前端开发基础视频-自定义列表

自定义列表dl

    －定义列表常用于对术语或名词进行解释和描述，定义列表的列表项目没有任何项目符号，其基本语法如下

   

       

名词1

       

名词1解释1

       

名词1解释2

        ….

       

名词2

       

名词2解释1

       

名词2解释2