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

来源：互联网发布：优酷用户数据分析编辑：程序博客网时间：2024/06/08 17:48

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标签使用

<!DOCTYPE html>

<title>

设置浏览器中叶签中的标题

</title>

</head>

<body>

前端与移动开发

</h1>

<p> <!-- <p> 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定—>

这是段落中的文本

</p> <!-- paragraph |ˈpærəgrɑːf, American -græf| noun段落 —>

</body>

</html>

／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／

HTML中标签的格式：

1.HTML标签以“<”开头

2.紧接着就是标签名（中间没有空格）

3.标签名之后如果是属性的话，加空格然后是属性名＝“”，如：<html lang="zh_CN">

4.如果有多个属性，属性间用空格隔开，空格可以有多个

5.属性结束后可以加一个或多个空格

6.然后是结束标签“>”，如果是闭合标签需要在标签名前加“／”，例如</html>

7.单标签,斜线没有任何意义，可有可无。

8.标签中间可嵌套内容

常用标签：

DOCTYPE标签

HTML头部标签

head标签

title标签

link标签

meta标签

script标签

style标签

DOCTYPE标签

<!DOCTYPE>标签位于文档的最前面、用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。主要用于浏览器解析文档标签的依据。

必须在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。

<!DOCTYPE>标签和浏览器的兼容性相关，删除<!DOCTYPE>，就是把如何展示HTML页面的权利交给了浏览器。

html标签

<html>标签位于<!DOCTYPE>标记之后，也称为根标记，用于告知浏览器自身是一个HTML文档，<html>标记着HTML文档的开始，</html>标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。

可以通过lang属性设置当前文档的主要语言是什么，帮助搜索引擎解析文档：<html lang="zh_CN"></html>

head标记

－<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后。

－head标签定义的内容只是提供给浏览器使用，不用于用户的呈现。

－主要用来封装其他位于头部的标记，例如<title> <meta> <link>以及<style>等，用来描述文档的标题，作者及和其他文档的关系等。

－一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

HTML标题标签－－》H1标签

怎么使用

1、使用<h1>、<h2>、<h3>、<h4>、<h5>来部分说明文本中谁是主，谁是次。

2、使用关键词的时候，不要让题头失去可读性，要考虑读者的感受。

3、<h1>代表最重要的，<h6>代表相对最不重要的，因此，根据这个递减，适当安排关键词。

4、<h1>中使用的关键词，往往是在网页标题中使用的。

5、<h1>尽量靠近在html中的<body>标签，越近越好，以便让搜索引擎最快的领略主题。

一般来说，<h1>用来修饰网页的主标题，<h2>表示一个段落的标题，<h3>表示段落的小节标题，因为，搜索引擎需要在一堆文本中明白它写的是什么，所以，它也依照人们的阅读习惯，首先寻找文章的标题，然而，不像人们那样可以迅速确定标题是什么，搜索引擎是“盲人”，所以，使用<h>标签就指导搜索引擎标题在那里，便于它们迅速掌握文本大意。标题（H1-H6）标签是采用关键词的重要地方，这个标签应该包括文本中最重要的关键词，Google算法就指出，这个<h>和</h>直接的题头文字，一定比其它地方的文章具备更重要的意义，但是，过分的使用容易产生不利的影响。

经验分享

(1)H1用在页面主体内容唯一的地方。如：单个文章列表页,文章或产品内容页。

(2)H1≠title,title可以包含H1,H1完全是为了给用户看的。但是，搜索引擎也很重视H1，title是给用户和搜索引擎看的。

(3)H1不要用在LOGO。

(4)H1在一个页面最多只能有一个，不要用多个。

注意问题

H1标签是很多朋友在制作网站的时候经常用到的，一个网页，只能有一个<h1></h1>标记。使用H1标签的几点注意问题：

1.出现在<body></body>之间；

2.不得出现在<h2>-<h6>之后；

3.最好用作一篇文章的标题；

4.一个页面用一次；

不要在header中加<h1>，然后全站公用一个header，然后内容页标题中又使用<h1>，这就在无意中犯规了。这个危险性很大的。

23前端开发基础视频-h1h6标题标签与seo

<!DOCTYPE html>

<title>

设置浏览器中叶签中的标题

</title>

</head>

<body>

<h1>

前端与移动开发

</h1>

<p>

段落，paragraph

</p>

</body>

</html>

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

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

Link标签

－dns预解析

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

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

－引入网站icon图标

－引入css样式

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

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

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

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

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

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

<html>

<head>

……

</head>

<body>

段落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地址的格式.

</p>

<p>

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

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

url在线编码工具：

tool.china.com/Tools/URLEncode.aspx

</p>

</body>

</html>

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

关于路径

dos中的cd命令

－cd命令格式：cd路径

－“./“表示当前目录

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

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

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

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

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

MAC 中文件：

ranzhoudeMacBook-Air:~ ranzhou$ ls

Desktop LibraryPictures 电影

Documents MoviesPublic 生如夏花

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标签空格换行合并

水平线标记<hr/>(horizontal rule)(单标签)

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单的通过标记来完成，<hr/>就是创建横跨网页水平钱的标记。基本语法格式如下：

<hr/>是单标记，在网页中输入一个<hr/>，就添加了一条默认样式的水平线。

一个单标签、没有闭合标签，其中的/可以省略，<hr/>写成<hr>即可.

HTML文档空白合并

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

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

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

显示图片

<img src=“图片的地址” alt=“如果图片不显示时显示的文本” title ＝ “有利于图片的seo，搜索引擎优化，搜索” height=“” weith=“”> 鼠标移动到图片上显示的也是title的内容

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

HTML常用标签

段落标签：<p>我是段落</p>.

水平线标签：<hr>（horizontal rule）

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

文本节标签：<span>，行内标签

注释标签：<!- - 注释内容 - ->

<em>标签

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

<!>标签

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

<strong>标签

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

<sub>与<sup>标签

<sub> 定义下标字＊。

<sup> 定义上标字。

例如：

H<sub>2</sub>O 水分子

2<sup>32</sup> 2的32次幂

<del> 标签

<del> 定义删除字。中划线。

<b></b> 文字加粗显示

<s></s> 文字加删除线

<u></u> 和<ins></ins>文字加下划线

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

超链接标签：<a>

-<a href=“http://www/itcast.cn”>超级链接内容,显示的文本，href表示的是指向的超链接</a>

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

-#页面定位

-target属性：_blank _self

示例

<a href=“http://www/itcast.cn” target=_blank(在新的叶签或窗口中打开)>超级链接内容,显示的文本，href表示的是指向的超链接</a>

比如有一个图片<img src="images/idnex.jpg"/>

加链接后就是<a href="index.htm"><img src="images/idnex.jpg"/></a>

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

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

锚点链接

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

－创建锚点链接分为两步

1.使用“<a href = “#id名”>链接文本</a>”创建链接文本

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

<span id = “id名”>内容，id名不能重复</span>

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

列表标签

无序列表 unorder list

<ul>

</ul>

有序列表 order list

<ol>

</ol>

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

自定义列表dl

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

<dl>

….

</dl>

0 0

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

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