HTML基础教程_1

2020-06-09 16:01:39来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

HTML基础教程_1

一、前言、web标准

1. 浏览器内核

浏览器 内核 备注
IE Trident IE、猎豹浏览器、360浏览器、百度浏览器
Firefox Gecko 可惜这几年已经没落了,打开速度慢,升级平凡、猪一样的队友Flash
Safari webkit 现在很多人错误把webkit叫做Chrome内核(即使Chrome内核已经是Blink了)
Chrome chromium/Blink 在Chromium项目中研发Blink渲染引擎(即浏览器核心),内置于Chrome浏览器之中,Blink其实是webkit的分支,大部分国产浏览器最新版都采用Blink内核,二次开发
Opera Blink 现在跟随Chrome用Blink内核

移动端的浏览器内核主要说的是系统内置浏览器的内核

  • Android手机,使用率最高的就是webkit内核,大部分国产浏览器宣称自己的内核,基本上也是属于webkit二次开发
  • iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident

2. Web标准

2.1 Web标准的好处

  • 让web的发展前景更广阔
  • 内容能被广泛的设备访问
  • 更容易被搜索引擎搜索
  • 降低网站流量费用
  • 使网站更易于维护
  • 提高页面浏览速度

2.2 Web标准构成

Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合
主要包括:

  • 结构标准:结构用于对网页元素进行整理和分类,主要指的是HTML
  • 表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS
  • 行为标准:行为是指网页模型的定义即交互的编写,主要指的是Javascript

二、认识HTML

1. HTML初始

  • HTML,全称“Hyper Text Markup Language”(超文本标记语言),是用来描述网页的一种语言
  • HTML不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签
    总结:HTML的作用就是用来标记标签来描述网页,把网页内容在浏览器中展示出来

1.1 HTML骨架格式

<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

1.2 HTML标签分类

1)双标签

<标签名> 内容 </标签名>
  • 该语法中“<标签名>”表示该标签的作用开始,一般称为“开始标签(start tag)”,“</标签名>”表示该标签的作用结束,一般称为“结束标签(end tag)”
  • 和开始标签相比,结束标签只在前面加了一个关闭符“/”

2)单标签(空元素)

<标签名 />

1.3 HTML标签关系

标签的相互关系分为两种:

1)嵌套关系

<head>
	<title></ title>
</ head>

2)并列关系

<head></ head>
<body></ body>

2. 文档类型<!DOCTYPE>

用法:

<!DOCTYPE html>

作用:<!DOCTYPE>声明位于文档中的最前面,处于标签之前,此标签可告知浏览器文档使用哪种HTML或XHTML规范

注:就是告诉浏览器按照HTML5规范解析页面

3. 页面语言lang

<html lang=""en>                                   指定html语言种类

常见的两种:

  • en定义语言为英语
  • zh-CN定义语言为中文
拓展阅读:
简单来说,可能对程序没有太大的作用,但是它可以告诉浏览器、搜索引擎,一般处理HTML的程序对页面语言内容来做一些对应的处理或者事情

4. 字符集

<meta charset="UTF-8" />

字符集(character set)是多个字符的集合,计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够是识别和存储各种文字

UTF-8是目前最常用的字符编码方式,常用的字符编码方式还有gbk和gb2312

  • GB2312简体中文,包含6763个汉字
  • BIG5繁体中文,港澳台等用
  • GBK包含全部中文字符集,是GB22的扩展,加入对繁体字的支持,兼容GB2312
  • UTF-8则基本包含全世界所有国家需要用到的字符
  • 这句代码非常关键,是必须要写的代码,否则可能引起乱码的情况
团队约定:一般情况下统一使用"UTF-8"编码,请尽量统一写成标准的"UTF-8",不要写成"utf-8"、“utf8”或“UTF8”

5. HTML标签的语义化

所谓标签语义化,就是指标签的含义
目的:根据标签的语义,在合适的地方给一个最为合理的标签,让结构更清晰

  • 方便代码的阅读和维护
  • 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中地内容
  • 使用语义标签会更好地搜索引擎优化

语义是否良好:当我们去掉CSS之后,网页结构依然组织有序,并且有良好地可读性
遵循原则:先确定语义地HTML,再选合适地CSS

三、HTML常用标签

1. HTML常用标签

1.1 排版标签

排版标签主要和CSS搭配使用,显示网页结构地标签,是网页布局最常用地标签

1)标题标签h

其基本语法格式如下:

<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>

显示效果如下:
在这里插入图片描述

2)段落标签p

作用含义:
可以把HTML文档分割成若干段落

<p>文本内容</p>

是HTML文档中最常见地标签,默认情况下,文本在一个段落中会根据浏览器窗口地大小自动换行

3)水平线标签hr

其基本语法格式如下:

<hr />是单标签

在网页中显示默认样式地水平线

4)换行标签br

在HTML中,一个段落中地文字会从左到右一次排列,直到浏览器窗口地右端,然后自动换行,如果希望某段文本强制显示,就需要使用换行标签
基本语法格式如下:

<br />

换行标签和段落标签地区别

三生三世十里桃花,<br />
一心一意百行代码。<br />
----前端万岁

<p>三生三世十里桃花,</p>
<p>一心一意百行代码。</p>
----前端万岁

在这里插入图片描述

5)div和span标签

语法格式如下:

<div>这是头部</div>
<span>今日价格</span>

他们两个都是盒子,用来装我们网页元素的,只不过有区别的

  • div标签,用来布局的,但是一行只能放一个div
  • span标签,用来布局的,一行上可以放好多个span

1.2 文本格式标签

标签 显示效果
b和 strong 文字以粗体方式显示(XHTML推荐使用strong)
i和 em 文字以斜体方式显示(XHTML推荐使用em)
s和del 文字以加删除线方式显示(XHTML推荐使用del)
u和ins 文字以加下划线方式显示(XHTML推荐使用ins)

区别:
b 只是加粗
strong 除了可以加粗还有强调的意思,语义更强烈

1.3 标签属性

使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置,基本语法如下:

<标签名 属性1=“属性值” 属性2=“属性值2” ……> 内容 </标签名>

1.4 图像标签img

语法格式如下:

<img src="图像URL" />
属性 属性值 备注
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素(XHTML不支持%页面百分比) 设置图像的宽度
height 像素(XHTML不支持%页面百分比) 设置图像的高度
border 数字 设置图像边框的宽度

注:

  1. 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面
  2. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
  3. 采用键值对的格式key=“value”的格式

1.5 链接标签

语法格式:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像 </a>
属性 作用
href 用于指定链接目标的URL地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
target 用于指定链接页面的打开方式,其值有_self和_blank两种,其中_self为默认值,_blank为在新窗口中打开方式

注:

  1. 外部链接需要添加网页地址
  2. 内部链接直接链接内容网页名称即可
  3. 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href=“#”),表示该链接暂时为一个空链接
  4. 不仅可以创建文本链接,在网页中各种网页元素,如图像、表格、音频、视频都可以添加超链接

1.6 注释标签

语法格式:

<!-- 注释语句 -->                             快捷键:ctrl+/

2. 路径

路径可以分为相对路径和绝对路径

1)相对路径

以引用文件之网页所在位置为参考基础,而建立的目录路径

路径分类 符号 说明
同一级路径 只需要输入图像文件的名称即可,如 <img src="baidu.png" />在这里插入图片描述
下一级路径 “/” 图像文件位于HTML文件同一文件夹下(例如文件夹名为images),如<img src="images/baidu.png" />在这里插入图片描述
上一路径 “../” 在文件名之前加“../”,如果是上两级,则需要使用“../../”,以此类推,如<img src="../baidu.png" />在这里插入图片描述

绝对路径

绝对路径以web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的,如“D:\web\img\logo.gif”

注:绝对路径用的少,但要注意,它的写法特别是符号“\”并不是相对路径的“/”

拓展阅读

3.1 锚点定位

通过创建锚点链接,用户能够快速定位到目标内容
创建锚点链接分为两步

1. 使用相应的id名标注跳转目标的位置
<h3 id="two>第二集</h3>

2. 使用<a href="#id名"> 链接文本</a>创建链接文本

3.2 base标签

语法:

<base target="_blank" />

总结:

  1. base可以设置整体链接的打开状态
  2. base写到<head></head>之间
  3. 把所有的链接都默认添加target=“_blank”

3.3 预格式化文本pre标签

pre标签可定义预格式化的文本
被包围在<pre>标签元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体

3.4 特殊字符

在这里插入图片描述
总结:

  1. 是以运算符“&”开头,以分号运算符“;”结尾
  2. 他们不是标签,而是符号
  3. HTML中不能使用小于号“<”和大于号“>”特殊符号,浏览器会将它们作为标签解析
团队约定:
推荐使用如下格式:
<a href="#">more &gt;&gt;</a>

原文链接:https://www.cnblogs.com/wan-kang/p/13081120.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML基础02

下一篇:【面经】记一次字节跳动前端面试经历