【前端学习】HTML学习笔记（1）_html-js-css

【html" class="superseo">前端学习】HTML学习笔记（1）一、HTML基本介绍 1. 什么是HTML？

HTML (HyperText Markup Language)是一种标记语言。与其他编程语言不同，标记语言使用tags来标识内容。

超文本的含义
1）超越了文本: 可加入图片、声音、动画等多媒体内容。
2）超级链接文本: 可从一个文件跳转到另一个，与任意主机的文件连接。

2.浏览器内核

浏览器内核可分为两部分: 渲染引擎和JS引擎
渲染引擎: 负责取得网页的内容（HTML, XML, 图像等）、整理讯息（加入CSS等）、计算网页的显示方式并且输出到显示器或打印机。浏览器的内核不同对于网页的语法解释也不同，渲染效果也不同。
JS引擎：解析JS语言并执行以实现网页的动态效果。
常见内核:

Trident(IE内核),Gecko(Firefox内核, 开源)Blink(Webkit分支, chrome内核)Webkit(Safari内核) 3.Web标准

浏览器不同，它们需要页面或者排版就有些许差异，因此需要web标准来规范。

W3C（万维网联盟）是国际最著名的标准化组织。

Web标准的构成

组成	功能
结构	对网页元素进行整理排版，HTML
表现	设置网页元素的版式、颜色、大小等外观样式， CSS
行为	网页模型的定义以及交互的编写，JS

Web标准提出的最佳体验方案：结构、样式、行为相分离。即结构写到HTML文件中，表现写到CSS文件中，行为写到JS中。相比较而言，三者中结构最重要。

二、HTML标签 1. 语法规范标签格式

所有的标签都必须包括在一对尖括号里，大部分情况下都是成对出现。标签可以分为双标签和单标签。双标签成堆出现，由开始和结束标签组成。

<head> //开始标签
head>//结束标签

标签关系

分为包含关系和并列关系
包含关系

<head>
<title> title>
head>

并列关系

<head>head>
<body>body>

2. 基本结构标签

每个网页都会有基本结构标签，页面内容书写在这些标签上

HTML文档后缀为**.html或.htm**
: 声明位于文档中的最前面的位置，处于html标签之前
: 页面中最大的标签，根标签
: 头部标签，在head标签中我们必须要设置的标签是title
: 文档的标题，让页面拥有网页标题
: 文档的主体，包含文档的所有内容，页面内容基本都是放到body里面的

lang语言种类
en: 英文 zh-CN: 中文
对于文档显示来说，定义成en也可以写中文，只是对浏览器有提示作用。

字符集
字符集（Characterset)是字符的集合，在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。

UTF-8：万国码，包含了几乎所有国家需要用到的字符。

<html>

<head>

  <meta charset="ustf-8"> 
  <meta name="keywords" content=""> 
  <meta name="description" content=""> 
  <title>...title> 
head> 
			
<body>...body>	
html>

3. HTML常用标签单标签和双标签
单标签

 <br/> <hr/> <img/> <input/> <link/> <meta/>

行级标签和块级标签
行级标签：span a b strong i em sup sub
块级标签: div p h1-h6 ul ol pre table address 3.1 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标题-
特点
(1)加了标题的文字会更粗更大，一级标题h1到六级标题h6粗细和大小依次递减。
(2)标题独占一行，和div一样，不用换行标签后面的东西都会另起一行。
水平线标签:

3.2 落和换行标签

段落标签

换行标签

换行标签只是另起一行，段落标签会在段落中插入垂直间距（即空的大一点）。

3.3 文本格式化标签

文本格式化: 给文本加一些特殊的效果，如加粗，斜体，下划线等
加粗: 或
倾斜: 或
删除线: 或
下划线: 或

3.4 div和span标签

无语义，就是一个盒子，用来装内容的，用来布局的
div表示分割分区，自己独占一行，超大盒子
span为跨度、跨距，一行可以放多个span，小盒子，只是为了对某些文本设置样式,让这些文本看起来不一样

3.5 图像标签

图像标签:

属性	作用
src	img标签的必须属性，它用于指定图像文件的名字和路径
alt	若图像无法显示，用alt指定的文字替换
title	提示文本，鼠标放到图像上会提示title指定的文字
width	设置图像的宽度
height	设置图像的高度
border	设置图像的边框粗细

路径
目录文件夹: 放了做网页的相关素材的普通文件夹
根目录: 打开目录文件夹的第一层就是根目录

相对路径
以引用文件所在位置为参考基础，而建立出的目录路径。
简单来说，即图片相对于HTML页面的位置。

相对路径类型	符号	写法
同一级路径
上一级路径	…/
下一级路径	/

注：返回一级就是一个…/，上两级就是…/…/

绝对路径
通常是从盘符开始的路径。
绝对路径是\ 相对路径是/
绝对路径不常用，还有一种是网络中的绝对路径，即网络上图片的图像地址 3.6 超链接标签(重点)

超链接标签:文本或图像

属性	作用
href	必须属性，指定链接目标的url地址，当标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，_self为默认值，用新页面替换了当前的页面，_blank为在新窗口中打开方式,之前的html页面还在

链接分类:

外部链接: href=“http://www.qq.com内部链接: href=“gongsijianjie.html空链接: href=#下载链接: href=“img.zip” 地址是一个文件或者压缩包，它会下载这个文件网页元素链接: 在网页中的各种网页元素，如图片，表格，视频，音频都可以加上超链接，例如
6)锚点链接:（重点）
我们点击链接，可以快速定位到页面中的某个位置，如百度百科里面链接快速定位到人物生平那种。
首先，在href属性中，设置属性值为 #名字的形式:
第二集
然后找到目标位置标签，里面添加一个id属性=前一步的名字:
第二集介绍
这样超链接的名字和目标位置的id对应起来，点击超链接就可以跳转了
注意href中名字前要加#，目标位置的id不用# 4. 注释和特殊字符 4.1 注释

HTML中的注释:
快捷键:ctrl+/

4.2 特殊字符

特殊字符	含义	字符代码
	空格符
<	小于号	<
>	大于号	>
&	和	&
¥	人民币	¥
×	乘	×
÷	除	÷
²	平方2（上标2)	²
³	立方3（上标3)	³
°	摄氏度	°
©	版权	©
®	注册商标	®

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/940111.html

【前端学习】HTML学习笔记（1）

发表评论

评论列表（0条）