您的位置：首页 > Web前端

前端学习笔记（一）——HTML历史与基础标签

2019-01-07 11:48 453 查看

HTML历史：

HTML:Hyper Text Markup Language,超文本标记语言，用来做网页

HTML发展史：

HTML1.0 1993年 Tim Berners-lee(蒂姆-博纳斯-李)，万维网之父

HTML2.0 1995年 IETF(互联网工程小组)

HTML3.2 1997年1月 W3C(万维网联盟 www：world wide web)

HTML4.0 1997年12月 W3C

HTML4.1 2000年 W3C

HTML5.0 2004年10月 W3C

目前最火的也是应用最广泛的是H5，狭义上来说，就是HTML的第五个版本，实际上HEML5指的是html+css+Javascript（js）+api的组合

基础标签：

HTML文件理论上就是一个网页
html文档是由多个元素组成
   元素：组成html文档的基本单位，元素由<>和元素名组成
   元素可以分为两种：
   1.双标签元素 2.单标签元素
   *双标签元素:开始标签+内容+结束标签（内容可为空）
   *单标签元素:只有开始标签

   *标签内:元素的开始标签的尖括号里面元素名的后面.
   *标签里:双标签的内容部分.

   每个标签都可以单独的设置其自身的属性,属性的设置写在标签内.
[code]


<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<title>这是我的第一个网页</title>
</head>


<body>
这是我网页里的第一句话🍎
</body>
</html>
标题标签：

双标签、h1~h6 (打出h1按tab可直接生成标签,在h1与h2之间加+可直接生成多个标签,+表示同级关系,>表示嵌入关系).在一个文档里,h1标签只允许出现一次,标题标签一般用在文章的标题部分,文字效果会加粗,h1~h6不同的标签文字大小不同
h1~h6文字大小:
h1=32px
h2=24px
h3=18.72px
h4=16px
h5=13.28px
h6=12px
系统默认文字大小和h4一样即16px

这是H1标签

这是H2标签
[code]<h1>这是H1标签</h1>
<h2>这是H2标签</h2>
...
分隔符标签：

单标签 hr
[code]<hr>
换行标签：

单标签 br
[code]枝上柳绵吹又少<br>天涯何处无芳草
段落标签：

双标签 p
[code]<p>飞流直下三千尺</p>
<p>疑是银河落九天</p>
加粗标签：

双标签 strong或者b
[code]<p>这里是<strong>加粗标签</strong></p>
<p>这里是<b>加粗标签</b></p>
文本倾斜标签:

双标签 em或者i或者var
[code]<em>这里是倾斜标签</em>
<p>这里是<strong>加粗<em>加粗倾斜</em></strong>标签</p>
图片标签:

单标签 img

src:该属性位置填需要展示的图片的位置.img标签既可以展示本地图片也可以展示网络图片

alt:当图片因为某些原因无法显示时对图片进行的说明

路径：

相对路径:从当前文档所在的文件夹位置一直找到图片所在位置

绝对路径:从电脑的根路径开始一直找到图片所在的位置

注意：

如果想要显示的图片与当前文档在同一级,只需要直接写出图片名即可

使用../向当前所在位置的外一层查找

使用/向当前所在位置的内一层查找

路径名称中最好不要有中文名
[code]
<img src="/Users/lanouhn/Desktop/1.jpg" alt="" id="a">



<img src="./2.jpg" alt="">
<img src="../3.jpg" alt="">
<img src="../../img/4.jpg" alt="">
<img src="/img/5.jpg" alt="">


<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1487232505&di=a3d0d8ebfef0b7d667ed7a7df032470c&src=http://imgs.hbsztv.com/2016/0906/20160906113258358.jpg" alt="图片显示不出来你才能看到alt里的这句话">
超链接标签：

双标签 a

href：超链接跳转带的位置(网络位置,本地位置)

a链接默认带有下划线，text-decoration:none 可去掉下划线
[code]<a href="http://www.baidu.com">点击此链接跳转到百度首页</a>
<a href="text.html">点击跳转到基础标签</a>
<a href="img.zip">点击下载图片</a>


<a href="#">回到顶部</a>

<a href="#a">点击回到id为a的地方</a>


<a href="###">这是一个空链接</a>
<a href="javascript:void(0)">空链接的标准写法</a>
列表标签：

都由两种标签组成：

* 有序列表 ol li 都是双标签由一个ol标签包裹若干个li标签

* 无序列表 ul li

下面是有序列表：

列表项1

列表项2

列表项3
[code]<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>

下面是无序列表,方法和有序列表一样：

列表项1

列表项2

列表项3
[code]<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

无意义标签：

div、span

双标签 div标签用来对整个网页进行区域划分。span标签也可以用来对网页进行区域划分,只不过其表示的区域比div小的多
[code]<div>这是div标签1</div>
<div>这是div标签2</div>
<span>这是span标签1</span>
<span>这是span标签2</span>
行元素、块元素：

1.块元素
a.独占一行.
b.支持设置宽高,如果不设置,默认宽为整个屏幕宽,高为其内部内容的高度.
      c.支持上下的padding和margin值.

2.行元素(内联元素)
      a.不独占一行,多个标签可以同行显示.
      b.不支持设置宽高,默认大小为其内容的大小.
      c.不支持上下的padding和margin值.

常见的块级元素：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、br、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

常见的行级元素:span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

元素的嵌套规则：

块元素可以包含某些块元素和所有行元素,但是行标签只能嵌套行元素

p元素里不能再嵌套块元素

有几个特殊的块元素只能包含行元素 h1~h6、p、dt

li和div标签都是装载内容的容器，地位平等，没有级别之分，li标签连它的父级ul或者是ol都可以容纳的

块级元素与块级元素并列、内嵌元素与内嵌元素并列

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航