初识HTML

101 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第15天

HTML5

初始html

Hyper Text Markup Language(超文本标记语言)

超文本语言:超文本包括文字、图片、音频、视频、动画等

W3C标准

World Wide Web Consortium(万维网联盟)

W3C标准

  • 结构化标准语言(HTML,XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM,ECMAScript)

html的基本结构

  • 我们来认识一下最基本的html结构

image-20220615144654490.png

  • <body>,</body>等成对标签,分别叫开放标签和闭合标签。单独呈现的标签(空元素),如<hr/>,意为用/来关闭空元素

网页的基本信息

注释

在html中注释是这样写的:

<!--单行注释内容-->
<!--
多行注释
-->

基本信息

DOCTYPE

<!DOCTYPE html>
  • 上面的语句的意思就是告诉浏览器我们要使用html的规范

html标签

所有网页内部的内容就是放在html标签内的,放在这个标签意外的信息只是一段简单的文本

head标签

<head>我是网页头部</head>	

body标签

<body>我是网页主题</body>

title标签

<title>我的第一个网页</title>

image-20220615154845691.png

meta标签

描述性标签,它是用来描述我们的网站的一些信息

<meta charset='UTF-8'>
<meta name='keywords' content='我的笔记网站'>
<neta name='description' content='这个地方是我学习的笔记'></neta>
  • meta标签一般是来做SEO的(用于搜索引擎的搜索)

网页基本标签

h标签(标题)

一般用作标题

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

image-20220615160327336.png

p标签(段落标签)

<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有耳朵</p>
<p>真奇怪 真奇怪</p>
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<p>一只没有耳朵 一只没有尾巴</p>
<p>真奇怪 真奇怪</p>

image-20220615160818340.png

br标签(换行标签)

跑得快 跑得快<br/>
一只没有耳朵 一只没有耳朵<br/>
真奇怪 真奇怪<br/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
一只没有耳朵 一只没有尾巴<br/>
真奇怪 真奇怪<br/>

image-20220615161026699.png

  • 与段落标签不同的是换行标签的内容中没有段落标签那样上下之间有空行

hr标签(水平线标签)

<p>真奇怪 真奇怪</p>
<hr/>
跑得快 跑得快<br/>

image-20220615161327434.png

  • 这里的效果就是中间的一条水平线(这样看起来的上下文的效果非常舒服)

字体样式标签

  • 粗体样式标签
<strong>i love you</strong>
  • 斜体样式
<em>i love you</em>

image-20220615161924839.png

  • 特殊符号
<!--空格-->&nbsp;&nbsp;&nbsp;&nbsp;<!--大于号-->
&gt;
<!--小于号-->
&lt;
<!--版权符号-->
&copy;
<!--
&  ; 一般会有自动不全
-->

图像标签

插入图片用的标签

<img src='path' alt='text' title='text' width='x' height='y'/>

图片标签属性

  • src:图像的地址(可以是相对地址也可以是绝对地址,必填)
  • alt:如果图片加载不出来就用该属性的值替代(必填)
  • title:鼠标悬停在图片会弹出的相关文字
  • width:图片的宽度
  • height:图片的高度